forked from mirrors/catstodon
homogay skin redesign
This commit is contained in:
parent
0fbd6c586a
commit
1bf6f683a9
GPG key ID:
2585C2DC6D79B485
3 changed files with 203 additions and 42 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@import 'homogay/variables';
|
||||
@import 'index';
|
||||
@import 'homogay/diff';
|
||||
|
||||
@import 'homogay/animations';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
background: darken($ui-base-color, 5%);
|
||||
background: $ui-base-darker-color;
|
||||
}
|
||||
|
||||
// hashtags in primary color
|
||||
|
|
@ -15,44 +15,134 @@ body {
|
|||
.spoiler-input input,
|
||||
.compose-form__modifiers,
|
||||
.reply-indicator {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: $ui-base-semi-lighter-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
.compose-panel {
|
||||
.compose-form__autosuggest-wrapper {
|
||||
background-color: #fff0; // transparent background so it doesn't mess with border-radius
|
||||
border-left: 1px solid $ui-base-lighter-color;
|
||||
border-top: 1px solid $ui-base-lighter-color;
|
||||
border-right: 1px solid $ui-base-lighter-color;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
}
|
||||
|
||||
.compose-form__buttons-wrapper {
|
||||
border-left: 1px solid $ui-base-lighter-color;
|
||||
border-right: 1px solid $ui-base-lighter-color;
|
||||
border-bottom: 1px solid $ui-base-lighter-color;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
|
||||
.compose-form__poll-wrapper .icon-button {
|
||||
color: $lighter-text-color;
|
||||
|
||||
&.disabled {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.compose-form__buttons-wrapper {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
.compose-form__poll-wrapper {
|
||||
.button.button-secondary {
|
||||
// this is the "add poll option" button. its styles have been overridden
|
||||
// to kinda make it look like a tertiary one, except whoever did this seems
|
||||
// to have forgotten a bunch of stuff. do some damage control.
|
||||
color: $ui-button-tertiary-color;
|
||||
border-color: $ui-button-tertiary-border-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $ui-button-tertiary-focus-color;
|
||||
background-color: $ui-button-tertiary-focus-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.compose-panel .compose-form__autosuggest-wrapper {
|
||||
background-color: #fff0; // transparent background so it doesn't mess with border-radius
|
||||
|
||||
.poll__option input[type='text']::placeholder {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
.poll__option input[type="text"],
|
||||
|
||||
.poll__option input[type='text'],
|
||||
.compose-form__poll-wrapper select {
|
||||
border-color: $ui-base-lighter-color;
|
||||
border: 1px solid $ui-base-extra-light-color;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions__item.selected,
|
||||
.autosuggest-textarea__suggestions__item:hover {
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.compose-form__publish .compose-form__publish-button-wrapper button {
|
||||
box-shadow: rgba(0, 0, 0, 50%) 0 -2px 10px 2px inset,
|
||||
rgba(0, 0, 0, 40%) 0 0 4px 0 inset;
|
||||
padding: 7px 18px;
|
||||
transition-duration: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-property: background-color, color, transform;
|
||||
transform-origin: center;
|
||||
|
||||
&:active {
|
||||
transform: scale(96%);
|
||||
}
|
||||
|
||||
&[disabled]:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown__menu {
|
||||
width: 286px;
|
||||
box-shadow: 0 2px 8px 0 $base-shadow-color;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.emoji-mart-bar:first-child {
|
||||
background: lighten($ui-base-color, 7%);
|
||||
background: $ui-base-extra-light-color;
|
||||
border-bottom-color: #fff0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor:not(.emoji-mart-anchor-selected) {
|
||||
color: $ui-base-lighter-color;
|
||||
color: $ui-button-tertiary-color;
|
||||
}
|
||||
|
||||
.search__input {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: $ui-base-semi-lighter-color;
|
||||
border: 1px solid $ui-base-lighter-color;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-button img {
|
||||
mix-blend-mode: luminosity;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.emoji-button:active,
|
||||
.emoji-button:focus,
|
||||
.emoji-button:hover {
|
||||
img {
|
||||
opacity: 1;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// dropdowns
|
||||
|
|
@ -61,38 +151,54 @@ body {
|
|||
.dropdown-menu__item button {
|
||||
background: $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
.dropdown-menu__arrow.top {
|
||||
border-top-color: $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
.dropdown-menu__arrow.bottom {
|
||||
border-bottom-color: $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
.language-dropdown__dropdown__results__item {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
background: $ui-base-extra-light-color;
|
||||
}
|
||||
}
|
||||
|
||||
// general modals
|
||||
.modal-root__modal {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
.report-modal__container {
|
||||
border-top-color: $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
.report-modal__comment {
|
||||
border-right-color: $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
.report-modal__comment .setting-text {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
.boost-modal__action-bar,
|
||||
.doodle-modal__action-bar,
|
||||
.confirmation-modal__action-bar,
|
||||
.mute-modal__action-bar,
|
||||
.block-modal__action-bar {
|
||||
background: lighten($ui-base-color, 5%);
|
||||
background: $ui-base-semi-lighter-color;
|
||||
}
|
||||
|
||||
.confirmation-modal__secondary-button,
|
||||
.confirmation-modal__cancel-button,
|
||||
.mute-modal__cancel-button,
|
||||
.block-modal__cancel-button {
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
|
@ -102,12 +208,23 @@ body {
|
|||
.glitch.local-settings {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
.glitch.local-settings__navigation,
|
||||
.glitch.local-settings__navigation__item {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: $ui-base-semi-lighter-color;
|
||||
}
|
||||
|
||||
.glitch.local-settings__navigation__item {
|
||||
border-bottom-color: $ui-base-lighter-color;
|
||||
border-bottom-color: $ui-base-extra-light-color;
|
||||
|
||||
&.active,
|
||||
&.active:hover {
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $ui-base-extra-light-color;
|
||||
}
|
||||
}
|
||||
|
||||
// border radius
|
||||
|
|
@ -119,7 +236,7 @@ body {
|
|||
.status-card,
|
||||
.language-dropdown__dropdown,
|
||||
.privacy-dropdown__dropdown,
|
||||
.poll__option input[type="text"],
|
||||
.poll__option input[type='text'],
|
||||
.compose-form__poll-wrapper select,
|
||||
.account__header__tabs__buttons .icon-button,
|
||||
.emoji-picker-dropdown__menu,
|
||||
|
|
@ -133,29 +250,65 @@ body {
|
|||
.compare-history-modal {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding-top: $border-radius;
|
||||
padding-bottom: $border-radius;
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
margin-bottom: $border-radius;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
border-top-left-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-right: 1px solid $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
.column-header,
|
||||
.column-header__button,
|
||||
.search__input {
|
||||
background: $ui-base-semi-lighter-color;
|
||||
}
|
||||
|
||||
.column > .scrollable {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
// button fixes
|
||||
.button.button-tertiary {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
padding: 6.5px 18px 7.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-link--transparent.active {
|
||||
border-left: 4px solid $highlight-text-color;
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
// timed line
|
||||
.status {
|
||||
border-bottom: 0; // no separators between posts
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
border-left: 1px solid $ui-base-lighter-color;
|
||||
border-right: 1px solid $ui-base-lighter-color;
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
|
||||
.media-gallery__item.letterbox {
|
||||
background: none; // remove the black background from letterbox images
|
||||
}
|
||||
|
||||
@import 'animations';
|
||||
.tabs-bar__wrapper {
|
||||
background: $ui-base-darker-color; // this hides posts scrolling above the column header
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ $black: #000000;
|
|||
$white: #ffffff;
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #de18a3;
|
||||
$blurple-500: lighten($blurple-600, 7%);
|
||||
$blurple-300: lighten($blurple-600, 21%);
|
||||
$blurple-600: #a71494;
|
||||
$blurple-500: #d61ebe;
|
||||
$blurple-300: #ef6ede;
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
|
|
@ -17,37 +17,40 @@ $gold-star: #e4ba3d !default;
|
|||
$red-bookmark: $success-green !default;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #150f21;
|
||||
$classic-base-color: #190e25;
|
||||
$classic-primary-color: #d4b6cb;
|
||||
$classic-secondary-color: #eaddf4;
|
||||
$classic-highlight-color: #de18a3;
|
||||
$classic-secondary-color: #ffe8fc;
|
||||
$classic-highlight-color: $blurple-600;
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !default;
|
||||
$simple-background-color: lighten($classic-base-color, 7%) !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$error-value-color: $error-red !default;
|
||||
|
||||
// Tell UI to use selected colors
|
||||
$ui-base-darker-color: darken($classic-base-color, 5%) !default;
|
||||
$ui-base-color: $classic-base-color !default;
|
||||
$ui-base-lighter-color: #5f4a6e !default;
|
||||
$ui-base-semi-lighter-color: lighten($ui-base-color, 3%) !default;
|
||||
$ui-base-lighter-color: lighten($ui-base-color, 10%) !default;
|
||||
$ui-base-extra-light-color: lighten($ui-base-color, 18%) !default;
|
||||
$simple-background-color: $ui-base-lighter-color !default;
|
||||
$ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
$ui-button-color: $white;
|
||||
$ui-button-background-color: $blurple-500;
|
||||
$ui-button-focus-background-color: $blurple-600;
|
||||
$ui-button-color: #ffe9fc;
|
||||
$ui-button-background-color: $blurple-600;
|
||||
$ui-button-focus-background-color: $blurple-500;
|
||||
|
||||
$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-secondary-color: $blurple-500 !default;
|
||||
$ui-button-secondary-border-color: $blurple-500 !default;
|
||||
$ui-button-secondary-focus-background-color: $blurple-600 !default;
|
||||
$ui-button-secondary-focus-color: $ui-button-color !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-color: #d0adf6 !default;
|
||||
$ui-button-tertiary-border-color: #d0adf6 !default;
|
||||
$ui-button-tertiary-focus-background-color: #674e83 !default;
|
||||
$ui-button-tertiary-focus-color: $white !default;
|
||||
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
|
|
@ -55,8 +58,8 @@ $ui-button-destructive-focus-background-color: $red-600 !default;
|
|||
|
||||
// Variables for texts
|
||||
$primary-text-color: $classic-secondary-color !default;
|
||||
$darker-text-color: $ui-primary-color !default;
|
||||
$dark-text-color: $ui-base-lighter-color !default;
|
||||
$darker-text-color: #907ca6 !default;
|
||||
$dark-text-color: darken($darker-text-color, 5%) !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;
|
||||
|
|
@ -65,7 +68,7 @@ $active-passive-text-color: $success-green !default;
|
|||
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $primary-text-color !default; // we don't do inverted backgrounds
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$lighter-text-color: lighten($darker-text-color, 5%) !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Variables for components
|
||||
|
|
@ -75,3 +78,8 @@ $media-modal-media-max-width: 100%;
|
|||
$media-modal-media-max-height: 80%;
|
||||
|
||||
$border-radius: 8px;
|
||||
$border-glow: 0 0 4px 1px $blurple-300, 0 0 4px 1px $blurple-300 inset;
|
||||
|
||||
.glowing-border {
|
||||
box-shadow: $border-glow;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue