berserker
/
microblog
2
0
Fork 1
Code Issues 12 Pull Requests Projects Releases Wiki Activity

[Glitch] Change button colors to increase hover/focus contrast and consistency

Browse Source 
Port 54cb679c19 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
Trevor Wolf 11 months ago committed by Claire
parent a117c953d0
commit 4719d88117
8 changed files with 69 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      app/javascript/flavours/glitch/styles/admin.scss
  2. 47
      app/javascript/flavours/glitch/styles/components/misc.scss
  3. 8
      app/javascript/flavours/glitch/styles/components/modal.scss
  4. 4
      app/javascript/flavours/glitch/styles/dashboard.scss
  5. 15
      app/javascript/flavours/glitch/styles/forms.scss
  6. 33
      app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
  7. 13
      app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
  8. 35
      app/javascript/flavours/glitch/styles/variables.scss

13
app/javascript/flavours/glitch/styles/admin.scss
Unescape View File

@ -128,7 +128,6 @@ $content-width: 840px;
}
&.selected {
background: darken($ui-base-color, 2%);
border-radius: 4px 0 0;
}
}
@ -146,13 +145,9 @@ $content-width: 840px;
.simple-navigation-active-leaf a {
color: $primary-text-color;
background-color: darken($ui-highlight-color, 2%);
background-color: $ui-highlight-color;
border-bottom: 0;
border-radius: 0;
&:hover {
background-color: $ui-highlight-color;
}
}
}
@ -246,12 +241,6 @@ $content-width: 840px;
font-weight: 700;
color: $primary-text-color;
background: $ui-highlight-color;
&:hover,
&:focus,
&:active {
background: lighten($ui-highlight-color, 4%);
}
}
}
}

47
app/javascript/flavours/glitch/styles/components/misc.scss
Unescape View File

@ -38,11 +38,11 @@
}
.button {
background-color: darken($ui-highlight-color, 3%);
background-color: $ui-button-background-color;
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: $primary-text-color;
color: $ui-button-color;
cursor: pointer;
display: inline-block;
font-family: inherit;
@ -62,14 +62,14 @@
&:active,
&:focus,
&:hover {
background-color: $ui-highlight-color;
background-color: $ui-button-focus-background-color;
}
&--destructive {
&:active,
&:focus,
&:hover {
background-color: $error-red;
background-color: $ui-button-destructive-focus-background-color;
transition: none;
}
}
@ -79,43 +79,22 @@
cursor: default;
}
&.button-alternative {
color: $inverted-text-color;
background: $ui-primary-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-primary-color, 4%);
}
}
&.button-alternative-2 {
background: $ui-base-lighter-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-base-lighter-color, 4%);
}
}
&.button-secondary {
font-size: 16px;
line-height: 36px;
height: auto;
color: $darker-text-color;
color: $ui-button-secondary-color;
text-transform: none;
background: transparent;
padding: 6px 17px;
border: 1px solid lighten($ui-base-color, 12%);
border: 1px solid $ui-button-secondary-border-color;
&:active,
&:focus,
&:hover {
background: lighten($ui-base-color, 4%);
border-color: lighten($ui-base-color, 16%);
color: lighten($darker-text-color, 4%);
border-color: $ui-button-secondary-focus-background-color;
color: $ui-button-secondary-focus-color;
background-color: $ui-button-secondary-focus-background-color;
text-decoration: none;
}
@ -127,14 +106,14 @@
&.button-tertiary {
background: transparent;
padding: 6px 17px;
color: $highlight-text-color;
border: 1px solid $highlight-text-color;
color: $ui-button-tertiary-color;
border: 1px solid $ui-button-tertiary-border-color;
&:active,
&:focus,
&:hover {
background: $ui-highlight-color;
color: $primary-text-color;
background-color: $ui-button-tertiary-focus-background-color;
color: $ui-button-tertiary-focus-color;
border: 0;
padding: 7px 18px;
}

8
app/javascript/flavours/glitch/styles/components/modal.scss
Unescape View File

@ -718,15 +718,15 @@
}
.button.button-secondary {
border-color: $inverted-text-color;
color: $inverted-text-color;
border-color: $ui-button-secondary-border-color;
color: $ui-button-secondary-color;
flex: 0 0 auto;
&:hover,
&:focus,
&:active {
border-color: lighten($inverted-text-color, 15%);
color: lighten($inverted-text-color, 15%);
border-color: $ui-button-secondary-focus-background-color;
color: $ui-button-secondary-focus-color;
}
}

4
app/javascript/flavours/glitch/styles/dashboard.scss
Unescape View File

@ -81,7 +81,7 @@
display: flex;
align-items: baseline;
border-radius: 4px;
background: darken($ui-highlight-color, 2%);
background: $ui-button-background-color;
color: $primary-text-color;
transition: all 100ms ease-in;
font-size: 14px;
@ -94,7 +94,7 @@
&:active,
&:focus,
&:hover {
background-color: $ui-highlight-color;
background-color: $ui-button-focus-background-color;
transition: all 200ms ease-out;
}

15
app/javascript/flavours/glitch/styles/forms.scss
Unescape View File

@ -512,8 +512,8 @@ code {
width: 100%;
border: 0;
border-radius: 4px;
background: darken($ui-highlight-color, 2%);
color: $primary-text-color;
background: $ui-button-background-color;
color: $ui-button-color;
font-size: 18px;
line-height: inherit;
height: auto;
@ -535,7 +535,7 @@ code {
&:active,
&:focus,
&:hover {
background-color: $ui-highlight-color;
background-color: $ui-button-focus-background-color;
}
&:disabled:hover {
@ -543,15 +543,12 @@ code {
}
&.negative {
background: $error-value-color;
&:hover {
background-color: lighten($error-value-color, 5%);
}
background: $ui-button-destructive-background-color;
&:hover,
&:active,
&:focus {
background-color: darken($error-value-color, 5%);
background-color: $ui-button-destructive-focus-background-color;
}
}
}

33
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
Unescape View File

@ -5,19 +5,6 @@ html {
scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
}
// Change the colors of button texts
.button {
color: $white;
&.button-alternative-2 {
color: $white;
}
&.button-tertiary {
color: $highlight-text-color;
}
}
.simple_form .button.button-tertiary {
color: $highlight-text-color;
}
@ -436,26 +423,6 @@ html {
color: $white;
}
.button.button-tertiary {
&:hover,
&:focus,
&:active {
color: $white;
}
}
.button.button-secondary {
border-color: $darker-text-color;
color: $darker-text-color;
&:hover,
&:focus,
&:active {
border-color: darken($darker-text-color, 8%);
color: darken($darker-text-color, 8%);
}
}
.flash-message.warning {
color: lighten($gold-star, 16%);
}

13
app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
Unescape View File

@ -7,6 +7,12 @@ $classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #6364ff;
$blurple-600: #563acc; // Iris
$blurple-500: #6364ff; // Brand purple
$blurple-300: #858afa; // Faded Blue
$grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz
// Differences
$success-green: lighten(#3c754d, 8%);
@ -19,6 +25,13 @@ $ui-primary-color: #9bcbed;
$ui-secondary-color: $classic-base-color !default;
$ui-highlight-color: $classic-highlight-color !default;
$ui-button-secondary-color: $grey-600 !default;
$ui-button-secondary-border-color: $grey-600 !default;
$ui-button-secondary-focus-color: $white !default;
$ui-button-tertiary-color: $blurple-500 !default;
$ui-button-tertiary-border-color: $blurple-500 !default;
$primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default;
$highlight-text-color: darken($ui-highlight-color, 8%) !default;

35
app/javascript/flavours/glitch/styles/variables.scss
Unescape View File

@ -1,10 +1,18 @@
// 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
$red-600: #b7253d !default; // Deep Carmine
$red-500: #df405a !default; // Cerise
$blurple-600: #563acc; // Iris
$blurple-500: #6364ff; // Brand purple
$blurple-300: #858afa; // Faded Blue
$grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz
$success-green: #79bd9a !default; // Padua
$error-red: $red-500 !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
$red-bookmark: $warning-red;
@ -31,6 +39,22 @@ $ui-base-lighter-color: lighten(
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
$ui-button-color: $white !default;
$ui-button-background-color: $blurple-500 !default;
$ui-button-focus-background-color: $blurple-600 !default;
$ui-button-secondary-color: $grey-100 !default;
$ui-button-secondary-border-color: $grey-100 !default;
$ui-button-secondary-focus-background-color: $grey-600 !default;
$ui-button-secondary-focus-color: $white !default;
$ui-button-tertiary-color: $blurple-300 !default;
$ui-button-tertiary-border-color: $blurple-300 !default;
$ui-button-tertiary-focus-background-color: $blurple-600 !default;
$ui-button-tertiary-focus-color: $white !default;
$ui-button-destructive-background-color: $red-500 !default;
$ui-button-destructive-focus-background-color: $red-600 !default;
// Variables for texts
$primary-text-color: $white !default;
@ -38,7 +62,8 @@ $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;
$action-button-color: $ui-base-color !default;
$action-button-focus-color: $ui-base-color !default;
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;

Write Preview
Loading…
Cancel
Save