vencord-themes/BorderedEmbeds.theme.css at main · NSPC911/vencord-themes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/**
 * @name BorderedEmbeds
 * @author NSPG911 & blade0
 * @version 1.0.0
 * @description Adds a full border to your embeds. Need I say more?
 * @source https://github.com/NSPC911/themes
*/
:root {
  --wh-border-width: 4px;
  --wh-background-opacity: 0%;
  --wh-default-background: hsl(
    from var(--background-surface-high) h s l / 100%
  );
  --wh-always-show-suppress-embed-button: 0;
}

.embedFull__623de {
  overflow: hidden;
  border-left-width: 0px !important;
  padding-left: 4px;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  isolation: isolate;
  .embedSuppressButton__623de {
    /* fix for it not showing up */
    opacity: calc(1 * var(--wh-always-show-suppress-embed-button)) !important;
    top: var(--wh-border-width);
    right: var(--wh-border-width);
    z-index: 10;
    color: white;
  }
  &::before {
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    border: inherit;
    border-left-width: 100vw;
    box-sizing: border-box !important;
    z-index: 1;
    border-radius: 0px 8px 8px 0px;
  }

  &::after {
    content: "";
    position: absolute;
    background: hsl(
      from var(--background-surface-high) h s l /
        calc(100% - var(--wh-background-opacity))
    );
    border-radius: 8px;
    top: var(--wh-border-width);
    left: var(--wh-border-width);
    right: var(--wh-border-width);
    bottom: var(--wh-border-width);
    z-index: 2;
  }

  .gridContainer__623de {
    z-index: 3;
  }
}
/* Fix for components v2 */
.withAccentColor__60fa3::before {
  display: none;
}
.withAccentColor__60fa3 {
  background: color-mix(
    in oklch,
    hsl(from var(--background-surface-high) h s l / 100%),
    var(--__accent-color) var(--wh-background-opacity)
  );
  border: 4px solid var(--__accent-color);
}