Created
March 30, 2021 11:56
-
-
Save asakura42/5d0b72c8aff755cc994e0b28ee61ed29 to your computer and use it in GitHub Desktop.
element alternative css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// unified palette | |
// try to use these colors when possible | |
$bg-color: #212121; | |
$base-color: $bg-color; | |
$base-text-color: #ffffff; | |
$header-panel-bg-color: #303030; | |
$header-panel-border-color: #000000; | |
$header-panel-text-primary-color: #b3b3b3; | |
$header-panel-text-secondary-color: #cccccc; | |
$text-primary-color: #ffffff; | |
$text-secondary-color: #b3b3b3; | |
$search-bg-color: #303030; | |
$search-placeholder-color: #616161; | |
$room-highlight-color: #616161; | |
// typical text (dark-on-white in light skin) | |
$primary-fg-color: $text-primary-color; | |
$primary-bg-color: $bg-color; | |
$muted-fg-color: $header-panel-text-primary-color; | |
// additional text colors | |
$secondary-fg-color: #b3b3b3; | |
$tertiary-fg-color: #808080; | |
// used for dialog box text | |
$light-fg-color: $header-panel-text-secondary-color; | |
// used for focusing form controls | |
$focus-bg-color: $room-highlight-color; | |
$mention-user-pill-bg-color: $warning-color; | |
$other-user-pill-bg-color: $room-highlight-color; | |
$rte-room-pill-color: $room-highlight-color; | |
$rte-group-pill-color: $room-highlight-color; | |
// informational plinth | |
$info-plinth-bg-color: $header-panel-bg-color; | |
$info-plinth-fg-color: #888; | |
$preview-bar-bg-color: $header-panel-bg-color; | |
$groupFilterPanel-bg-color: rgba(48, 48, 48, 0.82); | |
$inverted-bg-color: $base-color; | |
// used by AddressSelector | |
$selected-color: $room-highlight-color; | |
// selected for hoverover & selected event tiles | |
$event-selected-color: #383838; | |
// used for the hairline dividers in RoomView | |
$primary-hairline-color: transparent; | |
// used for the border of input text fields | |
$input-border-color: rgba(231, 231, 231, 0.2); | |
$input-darker-bg-color: $search-bg-color; | |
$input-darker-fg-color: $search-placeholder-color; | |
$input-lighter-bg-color: #ffffff; | |
$input-lighter-fg-color: $input-darker-fg-color; | |
$input-focused-border-color:$accent-color; | |
$input-valid-border-color: $accent-color; | |
$input-invalid-border-color: $warning-color; | |
$field-focused-label-bg-color: $bg-color; | |
// scrollbars | |
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2); | |
$scrollbar-track-color: transparent; | |
// context menus | |
$menu-border-color: rgba(231, 231, 231, 0.2); | |
$menu-bg-color: $header-panel-bg-color; | |
$menu-box-shadow-color: $bg-color; | |
$menu-selected-color: $room-highlight-color; | |
$avatar-initial-color: #ffffff; | |
$avatar-bg-color: $bg-color; | |
$h3-color: $primary-fg-color; | |
$dialog-title-fg-color: $base-text-color; | |
$dialog-backdrop-color: #000; | |
$dialog-shadow-color: rgba(0, 0, 0, 0.48); | |
$dialog-close-fg-color: #aaaaaa; | |
$dialog-background-bg-color: $header-panel-bg-color; | |
$lightbox-background-bg-color: #000; | |
$preview-widget-bar-color: #ddd; | |
$preview-widget-fg-color: unset; | |
$blockquote-bar-color: #ddd; | |
$blockquote-fg-color: unset; | |
$settings-grey-fg-color: #a2a2a2; | |
$settings-profile-placeholder-bg-color: #383838; | |
$settings-profile-overlay-placeholder-fg-color: #454545; | |
$settings-profile-button-bg-color: #e7e7e7; | |
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; | |
$settings-subsection-fg-color: $text-secondary-color; | |
$topleftmenu-color: $text-primary-color; | |
$roomheader-color: $text-primary-color; | |
$roomheader-bg-color: $bg-color; | |
$roomheader-addroom-bg-color: rgba(97, 97, 97, 0.3); | |
$roomheader-addroom-fg-color: $text-primary-color; | |
$groupFilterPanel-button-color: $header-panel-text-primary-color; | |
$groupheader-button-color: $header-panel-text-primary-color; | |
$rightpanel-button-color: $header-panel-text-primary-color; | |
$icon-button-color: #808080; | |
$roomtopic-color: $text-secondary-color; | |
$eventtile-meta-color: $roomtopic-color; | |
$header-divider-color: $header-panel-text-primary-color; | |
$composer-e2e-icon-color: $header-panel-text-primary-color; | |
// this probably shouldn't have it's own colour | |
$voipcall-plinth-color: #383838; | |
// ******************** | |
$theme-button-bg-color: #eeeeee; | |
$roomlist-button-bg-color: rgba(144, 144, 144, 0.2); // Buttons include the filter box, explore button, and sublist buttons | |
$roomlist-filter-active-bg-color: $bg-color; | |
$roomlist-bg-color: rgba(48, 48, 48, 0.90); | |
$roomlist-header-color: $tertiary-fg-color; | |
$roomsublist-divider-color: $primary-fg-color; | |
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); | |
$groupFilterPanel-divider-color: $roomlist-header-color; | |
$space-button-outline-color: rgba(144, 144, 144, 0.2); | |
$roomtile-preview-color: $secondary-fg-color; | |
$roomtile-default-badge-bg-color: #8BC34A; | |
$roomtile-selected-bg-color: rgba(144, 144, 144, 0.2); | |
// ******************** | |
$notice-secondary-color: $roomlist-header-color; | |
$panel-divider-color: transparent; | |
$widget-menu-bar-bg-color: $header-panel-bg-color; | |
$widget-body-bg-color: #303030; | |
// event redaction | |
$event-redacted-fg-color: #606060; | |
$event-redacted-border-color: #000000; | |
$event-highlight-fg-color: $warning-color; | |
$event-highlight-bg-color: transparent; | |
// event timestamp | |
$event-timestamp-color: #ffffffb3; | |
// Tabbed views | |
$tab-label-fg-color: $text-primary-color; | |
$tab-label-active-fg-color: $text-primary-color; | |
$tab-label-bg-color: transparent; | |
$tab-label-active-bg-color: $accent-color; | |
$tab-label-icon-bg-color: $text-primary-color; | |
$tab-label-active-icon-bg-color: $text-primary-color; | |
// Buttons | |
$button-primary-fg-color: #ffffff; | |
$button-primary-bg-color: $accent-color; | |
$button-secondary-bg-color: transparent; | |
$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; | |
// Toggle switch | |
$togglesw-off-color: $room-highlight-color; | |
$progressbar-fg-color: $accent-color; | |
$progressbar-bg-color: #383838; | |
$visual-bell-bg-color: #800; | |
$room-warning-bg-color: $header-panel-bg-color; | |
$dark-panel-bg-color: $header-panel-bg-color; | |
$message-bubble-background: #424242; | |
$message-bubble-background-self: #303030; | |
$message-bubble-background-selected: #3F4931; | |
$panel-gradient: rgba(48, 48, 48, 0), rgba(48, 48, 48, 1); | |
$message-action-bar-bg-color: $header-panel-bg-color; | |
$message-action-bar-fg-color: $header-panel-text-primary-color; | |
$message-action-bar-border-color: #616161; | |
$message-action-bar-hover-border-color: $header-panel-text-primary-color; | |
$reaction-row-button-bg-color: $header-panel-bg-color; | |
$reaction-row-button-border-color: #616161; | |
$reaction-row-button-hover-border-color: $header-panel-text-primary-color; | |
$reaction-row-button-selected-bg-color: #33691E; | |
$reaction-row-button-selected-border-color: $accent-color; | |
$kbd-border-color: #000000; | |
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color; | |
$tooltip-timeline-fg-color: #ffffff; | |
$interactive-tooltip-bg-color: $base-color; | |
$interactive-tooltip-fg-color: #ffffff; | |
$breadcrumb-placeholder-bg-color: #303030; | |
$user-tile-hover-bg-color: $header-panel-bg-color; | |
$message-body-panel-bg-color: #38383882; | |
$message-body-panel-icon-bg-color: #808080; | |
$message-body-panel-fg-color: $primary-fg-color; | |
// Appearance tab colors | |
$appearance-tab-border-color: $room-highlight-color; | |
// blur amounts for left left panel (only for element theme, used in _mods.scss) | |
$roomlist-background-blur-amount: 60px; | |
$groupFilterPanel-background-blur-amount: 30px; | |
$composer-shadow-color: rgba(0, 0, 0, 0.28); | |
// ***** Mixins! ***** | |
@define-mixin mx_DialogButton { | |
/* align images in buttons (eg spinners) */ | |
vertical-align: middle; | |
border: 0px; | |
border-radius: $border-radius-big; | |
font-family: $font-family; | |
font-size: $font-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_danger { | |
background-color: $accent-color; | |
} | |
@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; | |
} | |
@define-mixin mx_Dialog_link { | |
color: $accent-color; | |
text-decoration: none; | |
} | |
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it | |
// better match the theme. Typically applied to dark grey 'off' buttons or | |
// light grey 'on' buttons. | |
.mx_filterFlipColor { | |
filter: invert(1); | |
} | |
// markdown overrides: | |
.mx_EventTile_content .markdown-body pre:hover { | |
border-color: #808080 !important; // inverted due to rules below | |
scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // copied from light theme due to inversion below | |
// the code above works only in Firefox, this is for other browsers | |
// see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color | |
&::-webkit-scrollbar-thumb { | |
background-color: rgba(0, 0, 0, 0.2); // copied from light theme due to inversion below | |
} | |
} | |
.mx_EventTile_content .markdown-body { | |
pre, code { | |
filter: invert(1); | |
} | |
pre code { | |
filter: none; | |
} | |
table { | |
tr { | |
background-color: #000000; | |
} | |
tr:nth-child(2n) { | |
background-color: #080808; | |
} | |
} | |
} | |
// diff highlight colors | |
// intentionally swapped to avoid inversion | |
.hljs-addition { | |
background: #fdd; | |
} | |
.hljs-deletion { | |
background: #dfd; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment