fef/nyastodon
1
1
Fork 0
forked from mirrors/catstodon
Code Issues Pull requests Projects Releases Packages Wiki Activity

homogay: improve contrast for various UI elements

Browse source
This commit is contained in:
anna 2023-07-10 20:30:48 +00:00
parent b4e8f17031
commit 61da40155a
Signed by: fef
GPG key ID: 2585C2DC6D79B485
2 changed files with 74 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
app/javascript/flavours/glitch/styles/homogay/diff.scss
View file

@ -2,6 +2,18 @@ body {
background: $ui-base-darker-color; background: $ui-base-darker-color;
} }
.button {
text-shadow: 0 0 6px $faint-shadow-color;
}
.button:disabled {
background-color: $ui-button-disabled-background-color;
}
.icon-with-badge__badge {
text-shadow: 0 0 2px $base-shadow-color;
}
// hashtags in primary color // hashtags in primary color
.status__content a { .status__content a {
color: $highlight-text-color; color: $highlight-text-color;
@ -22,18 +34,18 @@ body {
.compose-panel { .compose-panel {
.compose-form__autosuggest-wrapper { .compose-form__autosuggest-wrapper {
background-color: #fff0; // transparent background so it doesn't mess with border-radius background-color: #fff0; // transparent background so it doesn't mess with border-radius
border-left: 1px solid $ui-base-lighter-color; // border-left: 1px solid $ui-base-lighter-color;
border-top: 1px solid $ui-base-lighter-color; // border-top: 1px solid $ui-base-lighter-color;
border-right: 1px solid $ui-base-lighter-color; // border-right: 1px solid $ui-base-lighter-color;
border-radius: $border-radius $border-radius 0 0; border-radius: $border-radius $border-radius 0 0;
} }
.compose-form__buttons-wrapper { // .compose-form__buttons-wrapper {
border-left: 1px solid $ui-base-lighter-color; // border-left: 1px solid $ui-base-lighter-color;
border-right: 1px solid $ui-base-lighter-color; // border-right: 1px solid $ui-base-lighter-color;
border-bottom: 1px solid $ui-base-lighter-color; // border-bottom: 1px solid $ui-base-lighter-color;
border-radius: 0 0 $border-radius $border-radius; // border-radius: 0 0 $border-radius $border-radius;
} // }
.compose-form__poll-wrapper .icon-button { .compose-form__poll-wrapper .icon-button {
color: $lighter-text-color; color: $lighter-text-color;
@ -61,14 +73,15 @@ body {
} }
select { select {
// s/o to whoever decided this is the way to colorize SVGs
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($simple-background-color, 14%))}'/></svg>") background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($simple-background-color, 14%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
} }
} }
.spoiler-input input { // .spoiler-input input {
border: 1px solid $ui-base-extra-light-color; // border: 1px solid $ui-base-extra-light-color;
} // }
.poll__option input[type='text']::placeholder { .poll__option input[type='text']::placeholder {
color: $darker-text-color; color: $darker-text-color;
@ -125,7 +138,8 @@ body {
.search__input { .search__input {
background: $ui-base-semi-lighter-color; background: $ui-base-semi-lighter-color;
border: 1px solid $ui-base-lighter-color;
// border: 1px solid $ui-base-lighter-color;
&::placeholder { &::placeholder {
color: $dark-text-color; color: $dark-text-color;
@ -133,6 +147,7 @@ body {
} }
.emoji-button img { .emoji-button img {
// fancier "grayscale" mode for the emoji picker button
mix-blend-mode: luminosity; mix-blend-mode: luminosity;
opacity: 0.65; opacity: 0.65;
} }
@ -265,9 +280,10 @@ body {
.column-header { .column-header {
border-top-left-radius: $border-radius; border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
border-left: 1px solid $ui-base-lighter-color;
border-top: 1px solid $ui-base-lighter-color; // border-left: 1px solid $ui-base-lighter-color;
border-right: 1px solid $ui-base-lighter-color; // border-top: 1px solid $ui-base-lighter-color;
// border-right: 1px solid $ui-base-lighter-color;
} }
.column-header, .column-header,
@ -296,13 +312,30 @@ body {
} }
// timed line // timed line
.status { // .status {
border-bottom: 0; // no separators between posts // border-bottom: 0; // no separators between posts
// }
// .column > .scrollable {
// border-left: 1px solid $ui-base-lighter-color;
// border-right: 1px solid $ui-base-lighter-color;
// }
.column-header__back-button {
background: none;
color: $highlight-text-color;
} }
.column > .scrollable { .reactions-bar__item {
border-left: 1px solid $ui-base-lighter-color; background: $ui-base-extra-light-color;
border-right: 1px solid $ui-base-lighter-color;
&.active {
background: adjust-color($ui-button-background-color, $alpha: -0.5);
.reactions-bar__item__count {
color: $ui-button-color;
}
}
} }
.media-gallery__item.letterbox { .media-gallery__item.letterbox {
@ -330,3 +363,13 @@ body {
background-color: $ui-base-color; background-color: $ui-base-color;
} }
} }
// settings
.admin-wrapper {
.sidebar ul .simple-navigation-active-leaf a,
.content__heading__tabs a.selected {
background-color: $ui-highlight-color;
text-shadow: 0 0 6px $faint-shadow-color;
}
}

23
app/javascript/flavours/glitch/styles/homogay/variables.scss
View file

@ -20,10 +20,11 @@ $red-bookmark: $success-green !default;
$classic-base-color: #190e25; $classic-base-color: #190e25;
$classic-primary-color: #d4b6cb; $classic-primary-color: #d4b6cb;
$classic-secondary-color: #ffe8fc; $classic-secondary-color: #ffe8fc;
$classic-highlight-color: $blurple-600; $classic-highlight-color: $blurple-500;
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black !default; $base-shadow-color: $black !default;
$faint-shadow-color: adjust-color($base-shadow-color, $alpha: -0.6);
$base-overlay-background: $black !default; $base-overlay-background: $black !default;
$base-border-color: $white !default; $base-border-color: $white !default;
$valid-value-color: $success-green !default; $valid-value-color: $success-green !default;
@ -40,8 +41,9 @@ $ui-primary-color: $classic-primary-color !default;
$ui-secondary-color: $classic-secondary-color !default; $ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: $classic-highlight-color !default; $ui-highlight-color: $classic-highlight-color !default;
$ui-button-color: #ffe9fc; $ui-button-color: #ffe9fc;
$ui-button-background-color: $blurple-600; $ui-button-background-color: $blurple-500;
$ui-button-focus-background-color: $blurple-500; $ui-button-focus-background-color: $blurple-500;
$ui-button-disabled-background-color: #a686a2;
$ui-button-secondary-color: $blurple-500 !default; $ui-button-secondary-color: $blurple-500 !default;
$ui-button-secondary-border-color: $blurple-500 !default; $ui-button-secondary-border-color: $blurple-500 !default;
@ -53,22 +55,22 @@ $ui-button-tertiary-border-color: #d0adf6 !default;
$ui-button-tertiary-focus-background-color: #674e83 !default; $ui-button-tertiary-focus-background-color: #674e83 !default;
$ui-button-tertiary-focus-color: $white !default; $ui-button-tertiary-focus-color: $white !default;
$ui-button-destructive-background-color: $red-500 !default; $ui-button-destructive-background-color: $red-600 !default;
$ui-button-destructive-focus-background-color: $red-600 !default; $ui-button-destructive-focus-background-color: $red-500 !default;
// Variables for texts // Variables for texts
$primary-text-color: $classic-secondary-color !default; $primary-text-color: $classic-secondary-color !default;
$darker-text-color: #907ca6 !default; $darker-text-color: #847198 !default;
$dark-text-color: darken($darker-text-color, 5%) !default; $dark-text-color: $darker-text-color !default;
$secondary-text-color: $ui-secondary-color !default; $secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: lighten($ui-highlight-color, 8%) !default; $highlight-text-color: lighten($ui-highlight-color, 8%) !default;
$action-button-color: $ui-base-lighter-color !default; $action-button-color: $dark-text-color !default;
$passive-text-color: $gold-star !default; $passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default; $active-passive-text-color: $success-green !default;
// For texts on inverted backgrounds // For texts on inverted backgrounds
$inverted-text-color: $primary-text-color !default; // we don't do inverted backgrounds $inverted-text-color: $primary-text-color !default; // we don't do inverted backgrounds
$lighter-text-color: lighten($darker-text-color, 5%) !default; $lighter-text-color: lighten($darker-text-color, 7%) !default;
$light-text-color: $ui-primary-color !default; $light-text-color: $ui-primary-color !default;
// Variables for components // Variables for components
@ -78,8 +80,3 @@ $media-modal-media-max-width: 100%;
$media-modal-media-max-height: 80%; $media-modal-media-max-height: 80%;
$border-radius: 8px; $border-radius: 8px;
$border-glow: 0 0 4px 1px $blurple-300, 0 0 4px 1px $blurple-300 inset;
.glowing-border {
box-shadow: $border-glow;
}