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

77 lines
2.5 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
[Glitch] Upgrade to Stylelint 15 with Prettier Port 0c9d455ea5540e854c2d879cd1df015ea493f622 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-02-13 03:57:03 +00:00
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a; // Padua
$error-red: #df405a; // Cerise
$warning-red: #ff5050; // Sunset Orange
$gold-star: #ca8f04; // Dark Goldenrod
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
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
[Glitch] Upgrade to Stylelint 15 with Prettier Port 0c9d455ea5540e854c2d879cd1df015ea493f622 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-02-13 03:57:03 +00:00
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$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
[Glitch] Upgrade to Stylelint 15 with Prettier Port 0c9d455ea5540e854c2d879cd1df015ea493f622 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-02-13 03:57:03 +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;
Fix glitch-soc SCSS code style and refactor closer to upstream
2023-02-25 20:20:01 +00:00
[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%;
Fix glitch-soc SCSS code style and refactor closer to upstream
2023-02-25 20:20:01 +00:00
[Glitch] Refactor scss Port f691afaae913fdb3041864b2824ca092e092ba84 to glitch-soc
2018-04-08 22:56:59 +00:00
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
[Glitch] Fix intermediary responsive layout, accessibility on navigation in web UI Port 07653246223251052f5150e1e74139bf8ff41ec4 to glitch-soc Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh> Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2022-10-09 13:55:32 +00:00
$no-gap-breakpoint: 1175px;
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;
[Glitch] Change design of dropdowns in web UI Port e4fd9503ec7c941299ff6572f2e426e75f211e7d to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-06-06 19:49:49 +00:00
:root {
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
}