better-visual-refresh/better-refresh.css at main · cafeed28/better-visual-refresh · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
/**
 * @name Better Refresh
 * @description Make Discord Visual Refresh a little bit better
 * @author cafeed28
 * @version 1.0.0
 * @source https://github.com/cafeed28/better-visual-refresh/blob/main/better-refresh.css
 * @authorId 402784497290051594
*/

/**
 * ICON SIZE FIXES
 */

/* inbox button */
.clickable_c99c29 > svg {
  width: var(--chat-input-icon-size);
  height: var(--chat-input-icon-size);
}

/* chat input attach button */
.attachButtonInner__0923f > svg {
  width: var(--chat-input-icon-size);
  height: var(--chat-input-icon-size);
}

/* chat input app icon (in place of attach button) */
.icon__4d3a9 svg {
  width: var(--chat-input-icon-size);
  height: var(--chat-input-icon-size);
}

/* chat input buttons lottie */
.lottieIcon__5eb9b {
  width: var(--chat-input-icon-size) !important;
  height: var(--chat-input-icon-size) !important;
}

/**
 * VARIABLE FIXES
 */

/* make app icon behave somewhat like attach button */
.icon__4d3a9 {
  padding: var(--space-12) var(--space-md) !important;
}

/* smaller paddings in context menus */
:where(.visual-refresh) .labelContainer_c1e9c4 {
  padding: 6px;
}

/* disable fade animation when switching between images in new media viewer */
.base__5cd44 {
  animation: none;
  opacity: 1;
}

.visual-refresh {
  /**
   * FLOATING PANEL
   */

  /* floating panel over channels list */
  .panels__5e434 {
    left: calc(var(--space-xs) + var(--custom-guild-list-width));
    width: calc(100% - var(--custom-guild-list-width) - var(--space-xs) * 2);
  }

  /* remove gap in server list because of moved floating panels */
  .guilds__5e434 {
    margin-bottom: 0;
  }

  /* restore text-sm instead of text-md for username, activity name, voice rtc status */
  .panelTitleContainer__37e49 div,
  .clickableGameName__8c6c2 div,
  .rtcConnectionStatusLabel__06d62 div {
    /* copied from text-sm/medium_cf4812 */
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
  }

  /**
   * CHAT INPUT
   */

  /* less gap between chat input and messages */
  .scrollerSpacer__36d07 {
    height: var(--space-26);
  }

  /* old height of chat input */
  --custom-channel-textarea-text-area-height: 42px;
  .channelTextArea__74017 {
    /*
      66px: from bottom of window to top of floating panel
      2px: chat input border
      */
    --custom-chat-input-margin-bottom: calc(
      66px - 2px - var(--custom-channel-textarea-text-area-height)
    );
  }

  /* enlarge margin of textarea */
  .form_f75fb0 {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* fix attach button wrapper padding to be dynamic for text area height */
  .attachWrapper__0923f {
    padding: calc((var(--custom-channel-textarea-text-area-height) - 32px) / 2)
      calc(var(--space-md) - 6px);
  }

  /* less gap after attach button */
  .attachButton__0923f,
  .icon__4d3a9 {
    margin-right: 3px !important;
  }

  .chatTypingGradientAtBottom__36d07,
  .chatTypingGradientNotAtBottom__36d07 {
    display: none;
  }

  /**
   * MISC
   */

  /* fix margins on unreads bar (LMAO) */
  .barBase__0f481 {
    left: var(--space-8);
    right: var(--space-8);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  /* fix misaligned width of channel scroller content and floating panel */
  .scroller__629e4 {
    margin-right: 0;
  }
}

/* move typing indicator under the chat input */
.inTextChannel_b88801.base_b88801 {
  top: unset;
  bottom: 0px;
}

.inTextChannel_b88801 {
  /* align to left (margin of 8px remains, i like it) */
  .text_b88801 {
    margin-left: 0px;
  }

  /* i hate typing indicator */
  .typingDots_b88801 svg {
    display: none;
  }
}