mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2025-01-10 18:47:07 +01:00
16d6c4a145
this version attempts to hack more directly into the whole theming stuff, rather than build on top of it like the previous one.
64 lines
2.4 KiB
SCSS
64 lines
2.4 KiB
SCSS
// Commonly used web colors
|
|
$black: #000000; // Black
|
|
$white: #ffffff; // White
|
|
$success-green: #79bd9a !default; // Padua
|
|
$error-red: #df405a !default; // Cerise
|
|
$warning-red: #ff5050 !default; // Sunset Orange
|
|
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
|
|
|
$red-bookmark: $warning-red !default;
|
|
|
|
// Values from the classic Mastodon UI
|
|
$classic-base-color: #282c37; // Midnight Express
|
|
$classic-primary-color: #9baec8; // Echo Blue
|
|
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
|
$classic-highlight-color: #6364ff; // Brand purple
|
|
|
|
// Variables for defaults in UI
|
|
$base-shadow-color: $black !default;
|
|
$base-overlay-background: $black !default;
|
|
$base-border-color: $white !default;
|
|
$simple-background-color: $white !default;
|
|
$valid-value-color: $success-green !default;
|
|
$error-value-color: $error-red !default;
|
|
|
|
// Tell UI to use selected colors
|
|
$ui-base-color: $classic-base-color !default; // Darkest
|
|
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
|
$ui-primary-color: $classic-primary-color !default; // Lighter
|
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
|
$ui-highlight-color: $classic-highlight-color !default;
|
|
|
|
// Variables for texts
|
|
$primary-text-color: $white !default;
|
|
$darker-text-color: $ui-primary-color !default;
|
|
$dark-text-color: $ui-base-lighter-color !default;
|
|
$secondary-text-color: $ui-secondary-color !default;
|
|
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
|
$action-button-color: $ui-base-lighter-color !default;
|
|
$passive-text-color: $gold-star !default;
|
|
$active-passive-text-color: $success-green !default;
|
|
// For texts on inverted backgrounds
|
|
$inverted-text-color: $ui-base-color !default;
|
|
$lighter-text-color: $ui-base-lighter-color !default;
|
|
$light-text-color: $ui-primary-color !default;
|
|
|
|
// Language codes that uses CJK fonts
|
|
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
|
|
|
// Variables for components
|
|
$media-modal-media-max-width: 100%;
|
|
// put margins on top and bottom of image to avoid the screen covered by image.
|
|
$media-modal-media-max-height: 80%;
|
|
|
|
$no-gap-breakpoint: 1175px;
|
|
|
|
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
|
$font-display: 'mastodon-font-display' !default;
|
|
$font-monospace: 'mastodon-font-monospace' !default;
|
|
|
|
// Avatar border size (8% default, 100% for rounded avatars)
|
|
$ui-avatar-border-size: 8%;
|
|
|
|
// More variables
|
|
$dismiss-overlay-width: 4rem;
|