mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
mastodon-glitch/app/javascript/flavours/glitch/styles/variables.scss

65 lines
2.4 KiB
SCSS
Raw Normal View History

Improve scss color variables (#2912) - Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
2017-05-08 13:57:49 +00:00
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a; // Padua
$error-red: #df405a; // Cerise
$warning-red: #ff5050; // Sunset Orange
$gold-star: #ca8f04; // Dark Goldenrod
Make active bookmarks red (fixes #493)
2018-05-21 16:57:51 +00:00
$red-bookmark: $warning-red;
Improve scss color variables (#2912) - Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
2017-05-08 13:57:49 +00:00
// Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
[Glitch] Change brand color and logotypes Port SCSS changes from 45aa5781ce611ea411e34e3b18358a9fe15f67ce to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2022-06-09 20:25:23 +00:00
$classic-highlight-color: #6364ff; // Brand purple
Improve scss color variables (#2912) - Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
2017-05-08 13:57:49 +00:00
// Variables for defaults in UI
Allow SCSS variables to be overridden (#2987) * Allow SCSS variables to be overridden with `app/javascript/pack/variables*.scss` * Allow these SCSS variables to be overriden: * `$base-shadow-color` * `$base-overlay-background` * `$base-border-color` * `$simple-background-color` * `$primary-text-color` * `$valid-value-color * `$error-value-color`
2017-05-12 17:22:50 +00:00
$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;
Improve scss color variables (#2912) - Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
2017-05-08 13:57:49 +00:00
// Tell UI to use selected colors
Redesign extended information page (#4322) * Redesign extended information page * Remove unused keys * Add $ui-base-lighter-color variable to SCSS
2017-07-24 13:09:08 +00:00
$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
[Glitch] Add color variables of texts for better accesibility Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc
2018-05-05 15:58:46 +00:00
$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;
[Glitch] Fix contrast of some elements with new brand colors Port 0391b2a6033b56bd0ce213c35a21186fdcb607bc to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2022-06-19 06:18:08 +00:00
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
[Glitch] Add color variables of texts for better accesibility Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc
2018-05-05 15:58:46 +00:00
$action-button-color: $ui-base-lighter-color !default;
[Glitch] Add interrelationship icon Port SCSS changes from 148ce97e21092500a2abeb87f6dc3c0adf5f28e4 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
2020-11-12 16:43:12 +00:00
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;
[Glitch] Add color variables of texts for better accesibility Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc
2018-05-05 15:58:46 +00:00
// 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;
Unified avatar styling Avatars now have consistent styling across all pages; border radius can be adjusted with a SASS variable ($ui-avatar-border-size)
2017-06-18 22:09:03 +00:00
Initial scss refactor
2018-01-13 18:41:20 +00:00
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
[Glitch] Refactor scss Port f691afaae913fdb3041864b2824ca092e092ba84 to glitch-soc
2018-04-08 22:56:59 +00:00
// 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%;
[Glitch] Fix logged-out web UI on smaller screens Port e2b561e3a521ff893943c0e9e32952e35934ca54 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2022-10-04 18:13:23 +00:00
$no-gap-breakpoint: 890px;
Port profile redesign to glitch-soc Port bb71538bb503159177d46d8956bd466973c0876b to glitch-soc
2018-07-31 20:54:18 +00:00
[Glitch] Separate font-family into variable Port d0d65b5a2899546c4134d1fca60aef2c23c4932d to glitch-soc
2018-10-01 11:13:58 +00:00
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;
Unified avatar styling Avatars now have consistent styling across all pages; border radius can be adjusted with a SASS variable ($ui-avatar-border-size)
2017-06-18 22:09:03 +00:00
// Avatar border size (8% default, 100% for rounded avatars)
$ui-avatar-border-size: 8%;
Forking glitch theme
2017-11-18 03:11:18 +00:00
// More variables
$dismiss-overlay-width: 4rem;