_legacy-light.pcss (10023B)
1 :root { 2 /* This is set to Twemoji when the user opts into the bundled emoji font */ 3 --emoji-font-family: ""; 4 } 5 6 /* Nunito lacks combining diacritics, so these will fall through 7 to the next font. Helevetica's diacritics sometimes do not combine 8 nicely (on OSX, at least) and result in a huge horizontal mess. 9 Arial empirically gets it right, hence prioritising Arial here. */ 10 /* Noto Color Emoji contains digits, in fixed-width, therefore causing 11 digits in flowed text to stand out. 12 TODO: Consider putting all emoji fonts to the end rather than the front. */ 13 $font-family: 14 "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, 15 "Noto Color Emoji"; 16 17 $monospace-font-family: 18 "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, 19 "Noto Color Emoji"; 20 21 /* unified palette */ 22 /* try to use these colors when possible */ 23 $header-panel-bg-color: #f3f8fd; 24 $header-panel-bg-hover: var(--cpd-color-gray-200); 25 26 /* typical text (dark-on-white in light skin) */ 27 $primary-fg-color: #2e2f32; 28 $secondary-fg-color: $primary-fg-color; 29 $tertiary-fg-color: $primary-fg-color; 30 $primary-bg-color: #ffffff; 31 $muted-fg-color: #61708b; /* Commonly used in headings and relevant alt text */ 32 33 /* used for dialog box text */ 34 $light-fg-color: #747474; 35 36 /* used for focusing form controls */ 37 $focus-bg-color: #dddddd; 38 39 /* button UI (white-on-green in light skin) */ 40 $accent-fg-color: #ffffff; 41 $accent-alt: #238cf5; 42 43 $selection-fg-color: $primary-bg-color; 44 45 $focus-brightness: 105%; 46 47 /* informational plinth */ 48 $info-plinth-bg-color: #f7f7f7; 49 $info-plinth-fg-color: #888; 50 51 /* left-panel style muted accent color */ 52 $secondary-accent-color: #f2f5f8; 53 54 $spacePanel-bg-color: #27303a; 55 $inverted-bg-color: $spacePanel-bg-color; 56 57 /* used by RoomDropTarget */ 58 $droptarget-bg-color: rgba(255, 255, 255, 0.5); 59 60 /* used by Autocomplete */ 61 $selected-color: $secondary-accent-color; 62 63 /* selected for hoverover & selected event tiles */ 64 $event-selected-color: $header-panel-bg-color; 65 66 /* used for the hairline dividers in RoomView */ 67 $primary-hairline-color: #e5e5e5; 68 $secondary-hairline-color: var(--cpd-color-gray-300); 69 70 /* used for the border of input text fields */ 71 $input-border-color: #e7e7e7; 72 $input-darker-bg-color: #e3e8f0; 73 $input-darker-fg-color: #9fa9ba; 74 $input-lighter-bg-color: #f2f5f8; 75 76 $resend-button-divider-color: $input-darker-bg-color; 77 78 $button-fg-color: white; 79 80 /* apart from login forms, which have stronger border */ 81 $strong-input-border-color: #c7c7c7; 82 83 /* used for UserSettings EditableText */ 84 $input-underline-color: rgba(151, 151, 151, 0.5); 85 $input-fg-color: rgba(74, 74, 74, 0.9); 86 $input-placeholder: var(--cpd-color-text-secondary); 87 /* scrollbars */ 88 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2); 89 /* context menus */ 90 $menu-border-color: #e7e7e7; 91 $menu-bg-color: #fff; 92 $menu-box-shadow-color: rgba(118, 131, 156, 0.6); 93 $menu-selected-color: #f5f8fa; 94 95 $avatar-initial-color: #ffffff; 96 97 $h3-color: #3d3b39; 98 $icon-button-color: var(--cpd-color-icon-tertiary); 99 100 $dialog-title-fg-color: #45474a; 101 $dialog-backdrop-color: rgba(46, 48, 51, 0.38); 102 $dialog-close-fg-color: $icon-button-color; 103 $dialog-close-external-color: $primary-bg-color; 104 105 $lightbox-background-bg-color: #000; 106 $lightbox-background-bg-opacity: 0.95; 107 108 $imagebody-giflabel: rgba(0, 0, 0, 0.7); 109 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2); 110 $imagebody-giflabel-color: rgba(255, 255, 255, 1); 111 112 $info-plinth-fg-color: #888; 113 114 $neutral-badge-color: #dbdbdb; 115 116 $preview-widget-bar-color: #ddd; 117 118 $blockquote-bar-color: var(--cpd-color-border-interactive-primary); 119 120 $settings-grey-fg-color: #a2a2a2; 121 $settings-subsection-fg-color: #61708b; 122 123 $rte-bg-color: #e9e9e9; 124 $rte-code-bg-color: rgba(0, 0, 0, 0.04); 125 126 $header-panel-text-primary-color: #91a1c0; 127 128 $pill-bg-color: var(--cpd-color-bg-action-primary-rest); 129 $pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered); 130 $pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed); 131 132 $topleftmenu-color: #212121; 133 $roomheader-bg-color: $primary-bg-color; 134 $roomheader-addroom-bg-color: #91a1c0; 135 $roomheader-addroom-fg-color: $accent-fg-color; 136 $roomtopic-color: #9e9e9e; 137 $room-icon-unread-color: var(--cpd-color-icon-tertiary); 138 139 /* ******************** */ 140 141 $presence-away: #d9b072; 142 $presence-offline: #e3e8f0; 143 $presence-busy: #ff5b55; 144 145 /* Legacy theme backports */ 146 $accent: #0dbd8b; 147 $alert: #ff5b55; 148 $links: #0086e6; 149 $link-external: #0467dd; 150 $primary-content: $primary-fg-color; 151 $secondary-content: $secondary-fg-color; 152 $tertiary-content: $tertiary-fg-color; 153 $quaternary-content: #6f7882; 154 $quinary-content: $quaternary-content; 155 $system: #f4f6fa; 156 $system-transparent: #e1e6ec00; 157 $background: $primary-bg-color; 158 $overlay-background: rgba($background, 0.85); 159 160 $panels: rgba($system, 0.9); 161 $panel-actions: #fff; 162 163 $separator: var(--cpd-color-gray-400); 164 165 /* Legacy theme backports */ 166 167 /* ******************** */ 168 $voipcall-plinth-color: $system; 169 170 $call-view-button-on-foreground: $secondary-content; 171 $call-view-button-on-background: $background; 172 $call-view-button-off-foreground: $background; 173 $call-view-button-off-background: $secondary-content; 174 $call-view-content-background: #21262c; 175 176 $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */ 177 178 /* All of these are from dark theme */ 179 $call-system: #21262c; 180 $call-background: #15191e; 181 $call-primary-content: #ffffff; 182 $call-light-quaternary-content: #c1c6cd; 183 184 $username-variant1-color: var(--cpd-color-text-decorative-1); 185 $username-variant2-color: var(--cpd-color-text-decorative-2); 186 $username-variant3-color: var(--cpd-color-text-decorative-3); 187 $username-variant4-color: var(--cpd-color-text-decorative-4); 188 $username-variant5-color: var(--cpd-color-text-decorative-5); 189 $username-variant6-color: var(--cpd-color-text-decorative-6); 190 191 /** 192 * Creating a `semantic` color scale. This will not be needed with the new 193 * visual language, but necessary during the transition period 194 * This abstract the `green` away from where accent shades are used 195 * Take: `background: rgba($accent, 0.1);` 196 * would be transformed to: `background: $accent-300;` 197 * 198 * To use under very rare circumstances, always prefer the semantics defined 199 * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs 200 */ 201 $accent-100: var(--cpd-color-green-100); 202 $accent-200: var(--cpd-color-green-200); 203 $accent-300: var(--cpd-color-green-300); 204 $accent-400: var(--cpd-color-green-400); 205 $accent-500: var(--cpd-color-green-500); 206 $accent-600: var(--cpd-color-green-600); 207 $accent-700: var(--cpd-color-green-700); 208 $accent-800: var(--cpd-color-green-800); 209 $accent-900: var(--cpd-color-green-900); 210 $accent-1000: var(--cpd-color-green-1000); 211 $accent-1100: var(--cpd-color-green-1100); 212 $accent-1200: var(--cpd-color-green-1200); 213 $accent-1300: var(--cpd-color-green-1300); 214 $accent-1400: var(--cpd-color-green-1400); 215 216 /* ******************** */ 217 218 $widget-menu-bar-bg-color: $secondary-accent-color; 219 $widget-body-bg-color: #fff; 220 221 /* ******************** */ 222 223 /* $event-highlight-bg-color shares this value, */ 224 /* so to not make their order dependent on who depends on who, have a shared value */ 225 /* defined before both */ 226 $yellow-background: #fff8e3; 227 228 $event-highlight-bg-color: $yellow-background; 229 230 /* event timestamp */ 231 $event-timestamp-color: #acacac; 232 233 /* e2e */ 234 $e2e-verified-color: #0dbd8b; 235 $e2e-warning-color: #ff5b55; 236 $e2e-verified-color-light: var(--cpd-color-green-300); 237 $e2e-warning-color-light: var(--cpd-color-red-300); 238 239 /*** ImageView ***/ 240 $lightbox-bg-color: #454545; 241 $lightbox-fg-color: #ffffff; 242 $lightbox-border-color: #ffffff; 243 244 /* Tabbed views */ 245 $tab-label-fg-color: #45474a; 246 $tab-label-active-fg-color: #ffffff; 247 248 /* Buttons */ 249 $button-primary-fg-color: #ffffff; 250 $button-secondary-bg-color: $accent-fg-color; 251 $button-danger-fg-color: #ffffff; 252 $button-danger-disabled-fg-color: #ffffff; 253 $button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */ 254 255 $visual-bell-bg-color: #faa; 256 257 /* Toggle switch */ 258 $togglesw-off-color: #c1c9d6; 259 $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); 260 261 $progressbar-bg-color: rgba(141, 151, 165, 0.2); 262 263 $authpage-bg-color: #2e3649; 264 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); 265 $authpage-modal-content-with-blur-bg-color: rgb(255, 255, 255, 0.59); 266 $authpage-focus-bg-color: #dddddd; 267 $authpage-lang-color: $secondary-content; 268 $authpage-primary-color: $primary-content; 269 $authpage-secondary-color: $secondary-content; 270 271 $dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); 272 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); 273 274 $message-action-bar-bg-color: $primary-bg-color; 275 $message-action-bar-fg-color: $primary-fg-color; 276 $message-action-bar-border-color: #e9edf1; 277 $message-action-bar-hover-border-color: $focus-bg-color; 278 279 $reaction-row-button-hover-border-color: $focus-bg-color; 280 $reaction-row-button-selected-bg-color: #e9fff9; 281 282 $kbd-border-color: $strong-input-border-color; 283 284 $tooltip-timeline-bg-color: $spacePanel-bg-color; 285 $tooltip-timeline-fg-color: #ffffff; 286 287 $breadcrumb-placeholder-bg-color: #e8eef5; 288 289 /* See non-legacy _light for variable information */ 290 $voice-record-stop-symbol-color: #ff4b55; 291 $voice-record-live-circle-color: #ff4b55; 292 $voice-record-stop-border-color: #e3e8f0; 293 $voice-record-icon-color: $tertiary-fg-color; 294 295 $composer-shadow-color: tranparent; 296 297 $codeblock-background-color: $header-panel-bg-color; 298 $inlinecode-border-color: $header-panel-bg-color; 299 $inlinecode-background-color: $header-panel-bg-color; 300 301 /* Bubble tiles */ 302 $eventbubble-self-bg: #f0fbf8; 303 $eventbubble-others-bg: $system; 304 $eventbubble-bg-hover: #fafbfd; 305 306 /* pinned events indicator */ 307 $pinned-color: $tertiary-content; 308 309 $spacePanel-divider-color: $tertiary-content; 310 311 /* Location sharing */ 312 /* ******************** */ 313 $location-marker-color: #ffffff; 314 $location-live-color: #5c56f5; 315 $location-live-secondary-color: #deddfd; 316 /* ******************** */ 317 318 body { 319 color-scheme: light; 320 } 321 322 /* diff highlight colors */ 323 .hljs-addition { 324 background: #dfd; 325 } 326 327 .hljs-deletion { 328 background: #fdd; 329 }