mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-26 02:18:25 +08:00
8628aae410
* Don't prefer STIXGeneral over the default font STIXGeneral contains some glyphs for non-LGC scripts, but often doesn't implement these scripts fully. We should always try the browser's default fonts, which are likely to look nicer and have broader script support, before falling back to STIXGeneral. * Explain why STIXGeneral shouldn't have precedence * Add a regression test
375 lines
10 KiB
Plaintext
375 lines
10 KiB
Plaintext
/* Nunito lacks combining diacritics, so these will fall through
|
|
to the next font. Helevetica's diacritics sometimes do not combine
|
|
nicely (on OSX, at least) and result in a huge horizontal mess.
|
|
Arial empirically gets it right, hence prioritising Arial here.
|
|
We also include STIXGeneral explicitly to support a wider range
|
|
of combining diacritics (Chrome fails without it, as per
|
|
https://bugs.chromium.org/p/chromium/issues/detail?id=1328898).
|
|
We should never actively *prefer* STIXGeneral over the default font though,
|
|
since it looks pretty rough and implements some non-LGC scripts only
|
|
partially, making, for example, Japanese text look patchy and sad. */
|
|
/* We fall through to Twemoji for emoji rather than falling through
|
|
to native Emoji fonts (if any) to ensure cross-browser consistency */
|
|
/* Noto Color Emoji contains digits, in fixed-width, therefore causing
|
|
digits in flowed text to stand out.
|
|
TODO: Consider putting all emoji fonts to the end rather than the front. */
|
|
$font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
|
|
"STIXGeneral", "Noto Color Emoji";
|
|
|
|
$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
|
|
"STIXGeneral", "Noto Color Emoji";
|
|
|
|
/* unified palette */
|
|
/* try to use these colors when possible */
|
|
$header-panel-bg-color: #f3f8fd;
|
|
|
|
/* typical text (dark-on-white in light skin) */
|
|
$primary-fg-color: #2e2f32;
|
|
$secondary-fg-color: $primary-fg-color;
|
|
$tertiary-fg-color: $primary-fg-color;
|
|
$primary-bg-color: #ffffff;
|
|
$muted-fg-color: #61708b; /* Commonly used in headings and relevant alt text */
|
|
|
|
/* used for dialog box text */
|
|
$light-fg-color: #747474;
|
|
|
|
/* used for focusing form controls */
|
|
$focus-bg-color: #dddddd;
|
|
|
|
/* button UI (white-on-green in light skin) */
|
|
$accent-fg-color: #ffffff;
|
|
$accent-alt: #238cf5;
|
|
|
|
$selection-fg-color: $primary-bg-color;
|
|
|
|
$focus-brightness: 105%;
|
|
|
|
/* informational plinth */
|
|
$info-plinth-bg-color: #f7f7f7;
|
|
$info-plinth-fg-color: #888;
|
|
|
|
/* left-panel style muted accent color */
|
|
$secondary-accent-color: #f2f5f8;
|
|
|
|
$spacePanel-bg-color: #27303a;
|
|
$inverted-bg-color: $spacePanel-bg-color;
|
|
|
|
/* used by RoomDropTarget */
|
|
$droptarget-bg-color: rgba(255, 255, 255, 0.5);
|
|
|
|
/* used by Autocomplete */
|
|
$selected-color: $secondary-accent-color;
|
|
|
|
/* selected for hoverover & selected event tiles */
|
|
$event-selected-color: $header-panel-bg-color;
|
|
|
|
/* used for the hairline dividers in RoomView */
|
|
$primary-hairline-color: #e5e5e5;
|
|
|
|
/* used for the border of input text fields */
|
|
$input-border-color: #e7e7e7;
|
|
$input-darker-bg-color: #e3e8f0;
|
|
$input-darker-fg-color: #9fa9ba;
|
|
$input-lighter-bg-color: #f2f5f8;
|
|
|
|
$resend-button-divider-color: $input-darker-bg-color;
|
|
|
|
$button-fg-color: white;
|
|
|
|
/* apart from login forms, which have stronger border */
|
|
$strong-input-border-color: #c7c7c7;
|
|
|
|
/* used for UserSettings EditableText */
|
|
$input-underline-color: rgba(151, 151, 151, 0.5);
|
|
$input-fg-color: rgba(74, 74, 74, 0.9);
|
|
/* scrollbars */
|
|
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
|
|
/* context menus */
|
|
$menu-border-color: #e7e7e7;
|
|
$menu-bg-color: #fff;
|
|
$menu-box-shadow-color: rgba(118, 131, 156, 0.6);
|
|
$menu-selected-color: #f5f8fa;
|
|
|
|
$avatar-initial-color: #ffffff;
|
|
|
|
$h3-color: #3d3b39;
|
|
|
|
$dialog-title-fg-color: #45474a;
|
|
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
|
|
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
|
|
$dialog-close-fg-color: #c1c1c1;
|
|
$dialog-close-external-color: $primary-bg-color;
|
|
|
|
$lightbox-background-bg-color: #000;
|
|
$lightbox-background-bg-opacity: 0.95;
|
|
|
|
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
|
|
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
|
|
$imagebody-giflabel-color: rgba(255, 255, 255, 1);
|
|
|
|
$info-plinth-fg-color: #888;
|
|
|
|
$neutral-badge-color: #dbdbdb;
|
|
|
|
$preview-widget-bar-color: #ddd;
|
|
|
|
$blockquote-bar-color: #ddd;
|
|
|
|
$settings-grey-fg-color: #a2a2a2;
|
|
$settings-subsection-fg-color: #61708b;
|
|
|
|
$rte-bg-color: #e9e9e9;
|
|
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
|
|
|
|
$header-panel-text-primary-color: #91a1c0;
|
|
|
|
$pill-bg-color: #aaa;
|
|
$pill-hover-bg-color: #ccc;
|
|
|
|
$topleftmenu-color: #212121;
|
|
$roomheader-bg-color: $primary-bg-color;
|
|
$roomheader-addroom-bg-color: #91a1c0;
|
|
$roomheader-addroom-fg-color: $accent-fg-color;
|
|
$icon-button-color: #91a1c0;
|
|
$roomtopic-color: #9e9e9e;
|
|
$room-icon-unread-color: #737d8c;
|
|
|
|
/* ******************** */
|
|
|
|
$theme-button-bg-color: #e3e8f0;
|
|
|
|
$roomtile-default-badge-bg-color: #61708b;
|
|
$roomtile-selected-bg-color: #fff;
|
|
|
|
$presence-away: #d9b072;
|
|
$presence-offline: #e3e8f0;
|
|
$presence-busy: #ff5b55;
|
|
|
|
/* Legacy theme backports */
|
|
$accent: #0dbd8b;
|
|
$alert: #ff5b55;
|
|
$links: #0086e6;
|
|
$primary-content: $primary-fg-color;
|
|
$secondary-content: $secondary-fg-color;
|
|
$tertiary-content: $tertiary-fg-color;
|
|
$quaternary-content: #6f7882;
|
|
$quinary-content: $quaternary-content;
|
|
$system: #f4f6fa;
|
|
$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
|
|
$background: $primary-bg-color;
|
|
$overlay-background: rgba($background, 0.85);
|
|
|
|
$panels: rgba($system, 0.9);
|
|
$panel-base: #8d97a5; /* This color is not intended for use in the app */
|
|
$panel-selected: rgba($tertiary-content, 0.3);
|
|
$panel-hover: rgba($tertiary-content, 0.1);
|
|
$panel-actions: $roomtile-selected-bg-color;
|
|
$space-nav: rgba($tertiary-content, 0.15);
|
|
/* Legacy theme backports */
|
|
|
|
/* ******************** */
|
|
|
|
$roomlist-filter-active-bg-color: $panel-actions;
|
|
$roomlist-bg-color: $header-panel-bg-color;
|
|
$roomlist-header-color: $primary-fg-color;
|
|
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
|
|
|
|
$voipcall-plinth-color: $system;
|
|
|
|
$call-view-button-on-foreground: $secondary-content;
|
|
$call-view-button-on-background: $background;
|
|
$call-view-button-off-foreground: $background;
|
|
$call-view-button-off-background: $secondary-content;
|
|
$call-view-content-background: #21262c;
|
|
|
|
$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
|
|
|
|
/* All of these are from dark theme */
|
|
$call-system: #21262c;
|
|
$call-background: #15191e;
|
|
$call-primary-content: #ffffff;
|
|
$call-light-quaternary-content: #c1c6cd;
|
|
|
|
$username-variant1-color: #368bd6;
|
|
$username-variant2-color: #ac3ba8;
|
|
$username-variant3-color: #03b381;
|
|
$username-variant4-color: #e64f7a;
|
|
$username-variant5-color: #ff812d;
|
|
$username-variant6-color: #2dc2c5;
|
|
$username-variant7-color: #5c56f5;
|
|
$username-variant8-color: #74d12c;
|
|
|
|
/* ******************** */
|
|
|
|
$widget-menu-bar-bg-color: $secondary-accent-color;
|
|
$widget-body-bg-color: #fff;
|
|
|
|
/* ******************** */
|
|
|
|
/* $event-highlight-bg-color shares this value, */
|
|
/* so to not make their order dependent on who depends on who, have a shared value */
|
|
/* defined before both */
|
|
$yellow-background: #fff8e3;
|
|
|
|
$event-highlight-bg-color: $yellow-background;
|
|
|
|
/* event timestamp */
|
|
$event-timestamp-color: #acacac;
|
|
|
|
$copy-button-url: "$(res)/img/element-icons/copy.svg";
|
|
|
|
/* e2e */
|
|
$e2e-verified-color: #0dbd8b;
|
|
$e2e-unknown-color: #e8bf37;
|
|
$e2e-unverified-color: #e8bf37;
|
|
$e2e-warning-color: #ff5b55;
|
|
$e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
|
|
$e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
|
|
|
|
/*** ImageView ***/
|
|
$lightbox-bg-color: #454545;
|
|
$lightbox-fg-color: #ffffff;
|
|
$lightbox-border-color: #ffffff;
|
|
|
|
/* Tabbed views */
|
|
$tab-label-fg-color: #45474a;
|
|
$tab-label-active-fg-color: #ffffff;
|
|
|
|
/* Buttons */
|
|
$button-primary-fg-color: #ffffff;
|
|
$button-secondary-bg-color: $accent-fg-color;
|
|
$button-danger-fg-color: #ffffff;
|
|
$button-danger-disabled-fg-color: #ffffff;
|
|
$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
|
|
|
|
$visual-bell-bg-color: #faa;
|
|
|
|
/* Toggle switch */
|
|
$togglesw-off-color: #c1c9d6;
|
|
$togglesw-ball-color: #fff;
|
|
|
|
/* Slider */
|
|
$slider-background-color: #c1c9d6;
|
|
|
|
$progressbar-bg-color: rgba(141, 151, 165, 0.2);
|
|
|
|
$authpage-bg-color: #2e3649;
|
|
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
|
|
$authpage-focus-bg-color: #dddddd;
|
|
$authpage-lang-color: #4e5054;
|
|
$authpage-primary-color: #232f32;
|
|
$authpage-secondary-color: #61708b;
|
|
|
|
$dark-panel-bg-color: $secondary-accent-color;
|
|
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
|
|
|
|
$message-action-bar-bg-color: $primary-bg-color;
|
|
$message-action-bar-fg-color: $primary-fg-color;
|
|
$message-action-bar-border-color: #e9edf1;
|
|
$message-action-bar-hover-border-color: $focus-bg-color;
|
|
|
|
$reaction-row-button-hover-border-color: $focus-bg-color;
|
|
$reaction-row-button-selected-bg-color: #e9fff9;
|
|
|
|
$kbd-border-color: $message-action-bar-border-color;
|
|
|
|
$tooltip-timeline-bg-color: $spacePanel-bg-color;
|
|
$tooltip-timeline-fg-color: #ffffff;
|
|
|
|
$breadcrumb-placeholder-bg-color: #e8eef5;
|
|
|
|
/* See non-legacy _light for variable information */
|
|
$voice-record-stop-symbol-color: #ff4b55;
|
|
$voice-record-live-circle-color: #ff4b55;
|
|
$voice-record-stop-border-color: #e3e8f0;
|
|
$voice-record-icon-color: $tertiary-fg-color;
|
|
|
|
/* FontSlider colors */
|
|
$appearance-tab-border-color: $input-darker-bg-color;
|
|
|
|
$composer-shadow-color: tranparent;
|
|
|
|
$codeblock-background-color: $header-panel-bg-color;
|
|
|
|
/* Bubble tiles */
|
|
$eventbubble-self-bg: #f0fbf8;
|
|
$eventbubble-others-bg: $system;
|
|
$eventbubble-bg-hover: #fafbfd;
|
|
$eventbubble-reply-color: #c1c6cd;
|
|
|
|
/* pinned events indicator */
|
|
$pinned-color: $tertiary-content;
|
|
|
|
$spacePanel-divider-color: $tertiary-content;
|
|
|
|
/* Location sharing */
|
|
/* ******************** */
|
|
$location-marker-color: #ffffff;
|
|
$location-live-color: #5c56f5;
|
|
$location-live-secondary-color: #deddfd;
|
|
/* ******************** */
|
|
|
|
/* Voice Broadcast */
|
|
/* ******************** */
|
|
$live-badge-color: #ffffff;
|
|
/* ******************** */
|
|
|
|
/* ***** Mixins! ***** */
|
|
|
|
@define-mixin mx_DialogButton {
|
|
/* align images in buttons (eg spinners) */
|
|
vertical-align: middle;
|
|
border: 0px;
|
|
border-radius: 8px;
|
|
font-family: $font-family;
|
|
font-size: $font-14px;
|
|
color: $button-fg-color;
|
|
background-color: $accent;
|
|
width: auto;
|
|
padding: 7px;
|
|
padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
outline: none;
|
|
}
|
|
|
|
@define-mixin mx_DialogButton_hover {
|
|
}
|
|
|
|
@define-mixin mx_DialogButton_danger {
|
|
background-color: $accent;
|
|
}
|
|
|
|
@define-mixin mx_DialogButton_small {
|
|
@mixin mx_DialogButton;
|
|
font-size: $font-15px;
|
|
padding: 0px 1.5em 0px 1.5em;
|
|
}
|
|
|
|
@define-mixin mx_DialogButton_secondary {
|
|
/* flip colours for the secondary ones */
|
|
font-weight: 600;
|
|
border: 1px solid $accent !important;
|
|
color: $accent;
|
|
background-color: $button-secondary-bg-color;
|
|
}
|
|
|
|
@define-mixin mx_Dialog_link {
|
|
color: $accent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body {
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* diff highlight colors */
|
|
.hljs-addition {
|
|
background: #dfd;
|
|
}
|
|
|
|
.hljs-deletion {
|
|
background: #fdd;
|
|
}
|