// XXX: check this? /* Nunito lacks combining diacritics, so these will fall through to the next font. Helevetica's diacritics however 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 fall through to Twemoji for emoji rather than falling through to native Emoji fonts (if any) to ensure cross-browser consistency */ $font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif; $monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Courier, monospace; // unified palette // try to use these colors when possible $accent-color: #03b381; $notice-primary-color: #ff4b55; $notice-secondary-color: #61708b; $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) $primary-fg-color: #2e2f32; $primary-bg-color: #ffffff; // 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-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb $accent-color-darker: #92caad; $accent-color-alt: #238CF5; $selection-fg-color: $primary-bg-color; $focus-brightness: 105%; // warning colours $warning-color: $notice-primary-color; // red $orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings $warning-bg-color: #DF2A8B; $info-bg-color: #2A9EDF; $mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // pinned events indicator $pinned-unread-color: $notice-primary-color; $pinned-color: $notice-secondary-color; // informational plinth $info-plinth-bg-color: #f7f7f7; $info-plinth-fg-color: #888; $preview-bar-bg-color: #f7f7f7; // left-panel style muted accent color $secondary-accent-color: #f2f5f8; $tertiary-accent-color: #d3efe1; $tagpanel-bg-color: #27303a; // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; // used by RoomDropTarget $droptarget-bg-color: rgba(255,255,255,0.5); // used by AddressSelector $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; $input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; $input-valid-border-color: $accent-color; $input-invalid-border-color: $warning-color; $field-focused-label-bg-color: #ffffff; $button-bg-color: $accent-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); $scrollbar-track-color: transparent; // 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; $avatar-bg-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-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; $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); $greyed-fg-color: #888; $neutral-badge-color: #dbdbdb; $preview-widget-bar-color: #ddd; $preview-widget-fg-color: $greyed-fg-color; $blockquote-bar-color: #ddd; $blockquote-fg-color: #777; $settings-grey-fg-color: #a2a2a2; $settings-profile-placeholder-bg-color: #e7e7e7; $settings-profile-overlay-bg-color: #000; $settings-profile-overlay-placeholder-bg-color: transparent; $settings-profile-overlay-fg-color: #fff; $settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-subsection-fg-color: #61708b; $voip-decline-color: #f48080; $voip-accept-color: #80f480; $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-room-pill-color: #aaa; $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-addroom-bg-color: #91A1C0; $roomheader-addroom-fg-color: $accent-fg-color; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0; $rightpanel-button-color: #91A1C0; $composer-button-color: #91A1C0; $roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; $composer-e2e-icon-color: #c9ced6; $header-divider-color: #91A1C0; // ******************** $roomtile-name-color: #61708b; $roomtile-selected-color: #212121; $roomtile-notified-color: #212121; $roomtile-selected-bg-color: #fff; $roomtile-focused-bg-color: #fff; $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; $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); $roomsublist-background: $secondary-accent-color; $roomsublist-label-fg-color: $roomtile-name-color; $roomsublist-label-bg-color: $tertiary-accent-color; $roomsublist-chevron-color: $accent-color; $panel-divider-color: #dee1f3; // ******************** $widget-menu-bar-bg-color: $secondary-accent-color; // ******************** // both $event-highlight-bg-color and $room-warning-bg-color share 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 tile lifecycle $event-encrypting-color: #abddbc; $event-sending-color: #ddd; $event-notsent-color: #f44; $event-highlight-fg-color: $warning-color; $event-highlight-bg-color: $yellow-background; // event redaction $event-redacted-fg-color: #e2e2e2; $event-redacted-border-color: #cccccc; // event timestamp $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/icon_copy_message.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; /*** 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; $tab-label-bg-color: transparent; $tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; $tab-label-active-icon-bg-color: #ffffff; // Buttons $button-primary-fg-color: #ffffff; $button-primary-bg-color: $accent-color; $button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: #ffffff; $button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $button-link-fg-color: $accent-color; $button-link-bg-color: transparent; $visual-bell-bg-color: #faa; // Toggle switch $togglesw-off-color: #c1c9d6; $togglesw-on-color: $accent-color; $togglesw-ball-color: #fff; $progressbar-color: #000; $room-warning-bg-color: $yellow-background; $memberstatus-placeholder-color: $roomtile-name-color; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-body-bg-color: #ffffff; $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-bg-color: $header-panel-bg-color; $reaction-row-button-border-color: #e9edf1; $reaction-row-button-hover-border-color: $focus-bg-color; $reaction-row-button-selected-bg-color: #e9fff9; $reaction-row-button-selected-border-color: $accent-color; $tooltip-timeline-bg-color: $tagpanel-bg-color; $tooltip-timeline-fg-color: #ffffff; $interactive-tooltip-bg-color: #27303a; $interactive-tooltip-fg-color: #ffffff; // ***** Mixins! ***** @define-mixin mx_DialogButton { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; border-radius: 4px; font-family: $font-family; font-size: 14px; color: $button-fg-color; background-color: $button-bg-color; 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-color; } @define-mixin mx_DialogButton_small { @mixin mx_DialogButton; font-size: 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-color ! important; color: $accent-color; background-color: $button-secondary-bg-color; }