vencord-themes/SeamlessChatBar.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/**
 * @name Seamless Chat Bar
 * @author NSPG911
 * @version 1.0.5
 * @description Moves around elements near the Chat Bar to be seamless with the message bar
 * @source https://nspc911.github.io/themes/vencord/SeamlessChatBar.theme.css
*/

:root {
  /* Use if your theme overwrites the color
    --channeltextarea-background: var(--backgroundColor01);*/
  /* set to `0px` if no applauncher */
  --scb-applauncher-padding: -52px;
  /* border-radius of bar */
  --scb-border-radius: 8px /* default = 8px */;
}

html:not(.visual-refresh) [class^="chatContent_"] {
  &:has([class^="channelTextAreaDisabled"]) {
    --scb-applauncher-padding: 0px; /* because you cant use them dumbass */
  }
  > [class^="form_"] {
    margin-top: -20px;
    transition: margin-top 1s ease;
    background: transparent !important;
    &::before {
      background: transparent !important;
    }
    [class^="typing_"] {
      top: 0;
      transform: translateY(-100%);
      background: transparent !important;
      [class^="cooldownWrapper_"] {
        background-color: var(--channeltextarea-background);
        border-radius: var(--scb-border-radius) var(--scb-border-radius) 0px 0px;
        padding: 2.5px 7.5px 2.75px 7.5px;
        transform: translateX(var(--scb-applauncher-padding)) translateY(1px);
      }
      [class^="typingDots_"] {
        background-color: var(--channeltextarea-background);
        border-radius: var(--scb-border-radius) var(--scb-border-radius) 0px 0px;
        padding-right: 7.5px;
      }
    }
    [class^="channelTextArea_"] {
      border-radius: var(--scb-border-radius);
      background: transparent;
      [class^="stackedBars"] {
        background: transparent;
      }
    }
  }
  [class^="jumpToPresentBar_"] {
    opacity: 1 !important;
    background-color: var(--channeltextarea-background) !important;
    padding-bottom: 0;
    right: calc(16px - var(--scb-applauncher-padding));
    transform: translateY(-100%);
    box-shadow: none !important;
    width: -webkit-fill-available;
    margin-right: 16px;
  }
  [class^="scrollableContainer_"] {
    border-radius: var(--scb-border-radius);
  }
  /* If/Else statements <:blobcatcozy:1026533070955872337> */
  [class^="form_"]:has([class^="typing_"]) {
    margin-top: 0;
  }

  &:has([class^="typingDots_"] > svg) {
    [class^="jumpToPresentBar_"],
    [class^="replyBar_"],
    [class^="channelTextArea_"],
    [class^="scrollableContainer_"] {
      border-top-left-radius: 0px !important;
    }
  }

  &:has([class^="cooldownWrapper_"]) {
    [class^="jumpToPresentBar_"],
    [class^="replyBar_"],
    [class^="channelTextArea_"],
    [class^="scrollableContainer_"] {
      border-top-right-radius: 0px !important;
    }
  }

  &:has([class^="jumpToPresentBar_"]) {
    [class^="replyBar_"],
    [class^="channelTextArea_"],
    [class^="scrollableContainer_"] {
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }
  }

  &:has([class^="replyBar_"]) {
    [class^="channelTextArea_"],
    [class^="scrollableContainer_"] {
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }
  }
  &:has([class^="jumpToPresentBar_"]) {
    [class^="typing_"] {
      transform: translateY(-200%) !important;
    }
    > [class^="form_"] {
      margin-top: -24px;
    }
  }
}