Dark theme improvements
This commit is contained in:
Alex Gleason
parent
97ba4b005d
commit
d12bc38112
28 changed files with 569 additions and 602 deletions
|
|
@ -76,7 +76,7 @@ class SoapboxMount extends React.PureComponent {
|
|||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(generateTheme('#0482d8', 'light'));
|
||||
this.props.dispatch(generateTheme('#bb0000', 'light'));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -11,10 +11,14 @@ const modes = ImmutableMap({
|
|||
light: ImmutableMap({
|
||||
'primary-text-color': '#000000',
|
||||
'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
|
||||
'background-color': '#f2f2f2',
|
||||
'foreground-color': '#ffffff',
|
||||
}),
|
||||
dark: ImmutableMap({
|
||||
'primary-text-color': '#ffffff',
|
||||
'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
|
||||
'background-color': '#333333',
|
||||
'foreground-color': '#222222',
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,419 +1,384 @@
|
|||
// Notes!
|
||||
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||
|
||||
body {
|
||||
color: $gab-default-text-light;
|
||||
background-color: $gab-background;
|
||||
}
|
||||
|
||||
// Change the colors of button texts
|
||||
.button {
|
||||
color: #ffffff;
|
||||
|
||||
&.button-alternative-2 {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
// Change default background colors of columns
|
||||
.column {
|
||||
article {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__inner {
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
.drawer__inner__soapbox {
|
||||
background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(#ffffff)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
}
|
||||
|
||||
// Change the colors used in compose-form
|
||||
.compose-form {
|
||||
.compose-form__modifiers {
|
||||
.compose-form__upload-description input {
|
||||
color: lighten(#ffffff, 7%);
|
||||
&::placeholder {color: lighten(#ffffff, 7%);}
|
||||
}
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions {
|
||||
background: darken($ui-base-color, 6%);
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions__item {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
border-color: var(--brand-color-faint);
|
||||
|
||||
&:first-child {
|
||||
background: darken($ui-base-color, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-search input {
|
||||
background: rgba($ui-base-color, 0.3);
|
||||
border-color: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the background colors of statuses
|
||||
.focusable:focus {
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
.status.status-direct {
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
.focusable:focus .status.status-direct {
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the background colors of status__content__spoiler-link
|
||||
.reply-indicator__content .status__content__spoiler-link,
|
||||
.status__content .status__content__spoiler-link {
|
||||
background: $ui-base-lighter-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-lighter-color, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
// Change the background colors of media and video spoilers
|
||||
.media-spoiler,
|
||||
.video-player__spoiler {
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the colors used in the dropdown menu
|
||||
.dropdown-menu {
|
||||
&__item {
|
||||
a {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Change the text colors on inverted background
|
||||
.privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||
.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||||
.actions-modal ul li:not(:empty) a.active,
|
||||
.actions-modal ul li:not(:empty) a.active button,
|
||||
.actions-modal ul li:not(:empty) a:active,
|
||||
.actions-modal ul li:not(:empty) a:active button,
|
||||
.actions-modal ul li:not(:empty) a:focus,
|
||||
.actions-modal ul li:not(:empty) a:focus button,
|
||||
.actions-modal ul li:not(:empty) a:hover,
|
||||
.actions-modal ul li:not(:empty) a:hover button,
|
||||
.simple_form .block-button,
|
||||
.simple_form .button,
|
||||
.simple_form button {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.dropdown-menu__separator {
|
||||
border-bottom-color: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the background colors of modals
|
||||
.actions-modal,
|
||||
.boost-modal,
|
||||
.confirmation-modal,
|
||||
.mute-modal,
|
||||
.report-modal,
|
||||
.error-modal,
|
||||
.onboarding-modal {
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
.embed-modal {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.boost-modal__action-bar,
|
||||
.confirmation-modal__action-bar,
|
||||
.mute-modal__action-bar,
|
||||
.onboarding-modal__paginator,
|
||||
.error-modal__footer {
|
||||
background: darken($ui-base-color, 6%);
|
||||
|
||||
.onboarding-modal__nav,
|
||||
.error-modal__nav {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($ui-base-color, 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.display-case__case {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.embed-modal .embed-modal__container .embed-modal__html {
|
||||
background: #ffffff;
|
||||
|
||||
&:focus {
|
||||
background: darken($ui-base-color, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background: $ui-secondary-color;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background: darken($ui-secondary-color, 10%);
|
||||
}
|
||||
|
||||
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background: lighten($gab-brand-default, 10%);
|
||||
}
|
||||
|
||||
// Change the default color used for the text in an empty column or on the error column
|
||||
.empty-column-indicator,
|
||||
.error-column {
|
||||
color: var(--primary-text-color);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
// Change the default colors used on some parts of the profile pages
|
||||
.activity-stream-tabs {
|
||||
background: $account-background-color;
|
||||
border-bottom-color: var(--brand-color-med);
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
.entry {
|
||||
background: $account-background-color;
|
||||
|
||||
.detailed-status.light,
|
||||
.more.light,
|
||||
.status.light {
|
||||
border-bottom-color: var(--brand-color-med);
|
||||
}
|
||||
}
|
||||
|
||||
.status.light {
|
||||
.status__content {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accounts-grid {
|
||||
.account-grid-card {
|
||||
|
||||
.name {
|
||||
a {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning {
|
||||
box-shadow: none;
|
||||
background: rgba($error-red, 0.5);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form input[type="text"],
|
||||
.simple_form input[type="number"],
|
||||
.simple_form input[type="email"],
|
||||
.simple_form input[type="password"],
|
||||
.simple_form textarea {
|
||||
border-color: var(--brand-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form select,
|
||||
.admin select.dropdown {
|
||||
border-color: $gab-secondary-text;
|
||||
}
|
||||
|
||||
.button.logo-button {
|
||||
color: #ffffff;
|
||||
|
||||
svg {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.public-layout {
|
||||
.header,
|
||||
.public-account-header,
|
||||
.public-account-bio {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
&__image {
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
&__name {
|
||||
h1,
|
||||
h1 small {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline a.active::after {
|
||||
border-color: transparent transparent #ffffff;
|
||||
}
|
||||
|
||||
.hero-widget,
|
||||
.box-widget,
|
||||
.contact-widget,
|
||||
.landing-page__information.contact-widget,
|
||||
.moved-account-widget,
|
||||
.memoriam-widget,
|
||||
.activity-stream,
|
||||
.nothing-here,
|
||||
.directory__tag > a,
|
||||
.directory__tag > div {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btngroup__btn--active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.promo-panel-item {
|
||||
@include light-theme-shadow;
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
background: $gab-background-container-light;
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.column-header__button {
|
||||
color: $gab-default-text-light;
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.wtf-panel {
|
||||
@include light-theme-shadow;
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
.profile-info-panel .profile-info-panel-content span,
|
||||
.profile-info-panel .profile-info-panel-content__name h1,
|
||||
.profile-info-panel .profile-info-panel-content__name h1 span:first-of-type {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.group-card .group-card__header img {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
.group .group__header {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
.group .group__panel .group__panel__label {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
.group .group__feed {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
&.standard {
|
||||
@include input-placeholder($gab-secondary-text);
|
||||
color: $gab-placeholder-accent;
|
||||
border-color: $gab-secondary-text;
|
||||
background: $gab-background-base-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.boost-modal,
|
||||
.confirmation-modal,
|
||||
.report-modal,
|
||||
.actions-modal,
|
||||
.mute-modal {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.report-modal__statuses {
|
||||
.status__content,
|
||||
.status__content p {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel__header {
|
||||
background: darken($gab-background-container-light, 4%);
|
||||
}
|
||||
|
||||
.user-panel__profile .account__avatar {
|
||||
border: 6px solid $gab-background-base-light;
|
||||
}
|
||||
|
||||
.user-panel__account__name {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.user-panel .user-panel-stats-item__value {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.poll__text {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.fa-site-icon::before {
|
||||
filter: grayscale(100%) invert(0);
|
||||
}
|
||||
// // Notes!
|
||||
// // Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||
//
|
||||
// // Change the colors of button texts
|
||||
// .button {
|
||||
// color: #ffffff;
|
||||
//
|
||||
// &.button-alternative-2 {
|
||||
// color: #000;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .drawer__inner {
|
||||
// background: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// .drawer__inner__soapbox {
|
||||
// background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(#ffffff)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
// }
|
||||
//
|
||||
// // Change the colors used in compose-form
|
||||
// .compose-form {
|
||||
// .compose-form__modifiers {
|
||||
// .compose-form__upload-description input {
|
||||
// color: lighten(#ffffff, 7%);
|
||||
// &::placeholder {color: lighten(#ffffff, 7%);}
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .autosuggest-textarea__suggestions {
|
||||
// background: darken($ui-base-color, 6%);
|
||||
// }
|
||||
//
|
||||
// .autosuggest-textarea__suggestions__item {
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &:active,
|
||||
// &.selected {
|
||||
// background: var(--brand-color-faint);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .emoji-mart-bar {
|
||||
// border-color: var(--brand-color-faint);
|
||||
//
|
||||
// &:first-child {
|
||||
// background: darken($ui-base-color, 6%);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .emoji-mart-search input {
|
||||
// background: rgba($ui-base-color, 0.3);
|
||||
// border-color: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// // Change the background colors of statuses
|
||||
// .focusable:focus {
|
||||
// background: var(--brand-color-faint);
|
||||
// }
|
||||
//
|
||||
// .status.status-direct {
|
||||
// background: var(--brand-color-faint);
|
||||
// }
|
||||
//
|
||||
// .focusable:focus .status.status-direct {
|
||||
// background: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// // Change the background colors of status__content__spoiler-link
|
||||
// .reply-indicator__content .status__content__spoiler-link,
|
||||
// .status__content .status__content__spoiler-link {
|
||||
// background: $ui-base-lighter-color;
|
||||
//
|
||||
// &:hover {
|
||||
// background: lighten($ui-base-lighter-color, 6%);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// // Change the background colors of media and video spoilers
|
||||
// .media-spoiler,
|
||||
// .video-player__spoiler {
|
||||
// background: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// // Change the colors used in the dropdown menu
|
||||
// .dropdown-menu {
|
||||
// &__item {
|
||||
// a {
|
||||
// color: var(--primary-color-faint);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// // Change the text colors on inverted background
|
||||
// .privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||
// .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||
// .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
// .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||||
// .actions-modal ul li:not(:empty) a.active,
|
||||
// .actions-modal ul li:not(:empty) a.active button,
|
||||
// .actions-modal ul li:not(:empty) a:active,
|
||||
// .actions-modal ul li:not(:empty) a:active button,
|
||||
// .actions-modal ul li:not(:empty) a:focus,
|
||||
// .actions-modal ul li:not(:empty) a:focus button,
|
||||
// .actions-modal ul li:not(:empty) a:hover,
|
||||
// .actions-modal ul li:not(:empty) a:hover button,
|
||||
// .simple_form .block-button,
|
||||
// .simple_form .button,
|
||||
// .simple_form button {
|
||||
// color: #ffffff;
|
||||
// }
|
||||
//
|
||||
// .dropdown-menu__separator {
|
||||
// border-bottom-color: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// // Change the background colors of modals
|
||||
// .actions-modal,
|
||||
// .boost-modal,
|
||||
// .confirmation-modal,
|
||||
// .mute-modal,
|
||||
// .report-modal,
|
||||
// .error-modal,
|
||||
// .onboarding-modal {
|
||||
// background: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// .embed-modal {
|
||||
// background: #333;
|
||||
// color: #fff;
|
||||
// }
|
||||
//
|
||||
// .boost-modal__action-bar,
|
||||
// .confirmation-modal__action-bar,
|
||||
// .mute-modal__action-bar,
|
||||
// .onboarding-modal__paginator,
|
||||
// .error-modal__footer {
|
||||
// background: darken($ui-base-color, 6%);
|
||||
//
|
||||
// .onboarding-modal__nav,
|
||||
// .error-modal__nav {
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &:active {
|
||||
// background-color: darken($ui-base-color, 12%);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .display-case__case {
|
||||
// background: #ffffff;
|
||||
// }
|
||||
//
|
||||
// .embed-modal .embed-modal__container .embed-modal__html {
|
||||
// background: #ffffff;
|
||||
//
|
||||
// &:focus {
|
||||
// background: darken($ui-base-color, 6%);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .react-toggle-track {
|
||||
// background: $ui-secondary-color;
|
||||
// }
|
||||
//
|
||||
// .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
// background: darken($ui-secondary-color, 10%);
|
||||
// }
|
||||
//
|
||||
// .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
// background: lighten($gab-brand-default, 10%);
|
||||
// }
|
||||
//
|
||||
// // Change the default color used for the text in an empty column or on the error column
|
||||
// .empty-column-indicator,
|
||||
// .error-column {
|
||||
// color: var(--primary-text-color);
|
||||
// background: #ffffff;
|
||||
// }
|
||||
//
|
||||
// // Change the default colors used on some parts of the profile pages
|
||||
// .activity-stream-tabs {
|
||||
// background: $account-background-color;
|
||||
// border-bottom-color: var(--brand-color-med);
|
||||
// }
|
||||
//
|
||||
// .activity-stream {
|
||||
// .entry {
|
||||
// background: $account-background-color;
|
||||
//
|
||||
// .detailed-status.light,
|
||||
// .more.light,
|
||||
// .status.light {
|
||||
// border-bottom-color: var(--brand-color-med);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .status.light {
|
||||
// .status__content {
|
||||
// color: var(--primary-text-color);
|
||||
// }
|
||||
//
|
||||
// .display-name {
|
||||
// strong {
|
||||
// color: var(--primary-text-color);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .accounts-grid {
|
||||
// .account-grid-card {
|
||||
//
|
||||
// .name {
|
||||
// a {
|
||||
// color: var(--primary-text-color);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .username {
|
||||
// color: var(--primary-color-faint);
|
||||
// }
|
||||
//
|
||||
// .account__header__content {
|
||||
// color: var(--primary-text-color);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .simple_form,
|
||||
// .table-form {
|
||||
// .warning {
|
||||
// box-shadow: none;
|
||||
// background: rgba($error-red, 0.5);
|
||||
// text-shadow: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .simple_form input[type="text"],
|
||||
// .simple_form input[type="number"],
|
||||
// .simple_form input[type="email"],
|
||||
// .simple_form input[type="password"],
|
||||
// .simple_form textarea {
|
||||
// border-color: var(--brand-color);
|
||||
//
|
||||
// &:hover {
|
||||
// border-color: var(--brand-color);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .simple_form select,
|
||||
// .admin select.dropdown {
|
||||
// border-color: var(--primary-color-faint);
|
||||
// }
|
||||
//
|
||||
// .button.logo-button {
|
||||
// color: #ffffff;
|
||||
//
|
||||
// svg {
|
||||
// fill: #ffffff;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .public-layout {
|
||||
// .header,
|
||||
// .public-account-header,
|
||||
// .public-account-bio {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
//
|
||||
// .public-account-header {
|
||||
// &__image {
|
||||
// background: var(--brand-color-med);
|
||||
//
|
||||
// &::after {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &__tabs {
|
||||
// &__name {
|
||||
// h1,
|
||||
// h1 small {
|
||||
// color: #ffffff;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .account__section-headline a.active::after {
|
||||
// border-color: transparent transparent #ffffff;
|
||||
// }
|
||||
//
|
||||
// .hero-widget,
|
||||
// .box-widget,
|
||||
// .contact-widget,
|
||||
// .landing-page__information.contact-widget,
|
||||
// .moved-account-widget,
|
||||
// .memoriam-widget,
|
||||
// .activity-stream,
|
||||
// .nothing-here,
|
||||
// .directory__tag > a,
|
||||
// .directory__tag > div {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
//
|
||||
// .btngroup__btn--active {
|
||||
// color: #fff;
|
||||
// }
|
||||
//
|
||||
// .wtf-panel {
|
||||
// @include light-theme-shadow;
|
||||
// background: var(--foreground-color);
|
||||
// }
|
||||
//
|
||||
// .profile-info-panel .profile-info-panel-content span,
|
||||
// .profile-info-panel .profile-info-panel-content__name h1,
|
||||
// .profile-info-panel .profile-info-panel-content__name h1 span:first-of-type {
|
||||
// color: $gab-default-text-light;
|
||||
// }
|
||||
//
|
||||
// .group-card .group-card__header img {
|
||||
// background: var(--foreground-color);
|
||||
// }
|
||||
//
|
||||
// .group .group__header {
|
||||
// background: var(--foreground-color);
|
||||
// }
|
||||
//
|
||||
// .group .group__panel .group__panel__label {
|
||||
// background: var(--foreground-color);
|
||||
// }
|
||||
//
|
||||
// .group .group__feed {
|
||||
// background: var(--foreground-color);
|
||||
// }
|
||||
//
|
||||
// input[type='text'],
|
||||
// textarea {
|
||||
// &.standard {
|
||||
// @include input-placeholder($gab-secondary-text);
|
||||
// color: $gab-placeholder-accent;
|
||||
// border-color: var(--primary-color-faint);
|
||||
// background: $gab-background-base-light;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
// .boost-modal,
|
||||
// .confirmation-modal,
|
||||
// .report-modal,
|
||||
// .actions-modal,
|
||||
// .mute-modal {
|
||||
// color: $gab-default-text-light;
|
||||
// }
|
||||
//
|
||||
// .report-modal__statuses {
|
||||
// .status__content,
|
||||
// .status__content p {
|
||||
// color: $gab-default-text-light;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .user-panel__header {
|
||||
// background: darken($gab-background-container-light, 4%);
|
||||
// }
|
||||
//
|
||||
// .user-panel__profile .account__avatar {
|
||||
// border: 6px solid $gab-background-base-light;
|
||||
// }
|
||||
//
|
||||
// .user-panel .user-panel-stats-item__value {
|
||||
// color: $gab-default-text-light;
|
||||
// }
|
||||
//
|
||||
// .poll__text {
|
||||
// color: $gab-default-text-light;
|
||||
// }
|
||||
//
|
||||
// .fa-site-icon::before {
|
||||
// filter: grayscale(100%) invert(0);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
// NEW GAB SPECIFIC MIXINS
|
||||
|
||||
// THEME MIXINS
|
||||
|
||||
// standard container drop shadow
|
||||
@mixin light-theme-shadow {box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);}
|
||||
@mixin light-theme-shadow {
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// common properties for all standard containers
|
||||
@mixin gab-container-standards {
|
||||
@include light-theme-shadow;
|
||||
border-radius: 10px;
|
||||
background: $gab-background-container;
|
||||
$light-theme: false !default;
|
||||
@if $light-theme {
|
||||
@include light-theme-shadow;
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
background: var(--foreground-color);
|
||||
}
|
||||
|
||||
// SHORTCUTS
|
||||
|
|
@ -24,7 +20,6 @@
|
|||
&:-moz-placeholder {color: $color;}
|
||||
}
|
||||
|
||||
// OLDER MIXINS
|
||||
@mixin avatar-radius {
|
||||
border-radius: 50%;
|
||||
background: transparent no-repeat;
|
||||
|
|
@ -77,7 +72,7 @@
|
|||
border: 1px solid $gab-placeholder-accent;
|
||||
padding: 8px 10px 17px;
|
||||
margin: 4px 0 0;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
|
||||
|
||||
h4 {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $small-breakpoint: 960px;
|
|||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
max-width: 600px;
|
||||
padding: 15px 30px;
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ $small-breakpoint: 960px;
|
|||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
|
|
@ -72,7 +72,7 @@ $small-breakpoint: 960px;
|
|||
margin-top: 2em;
|
||||
margin-bottom: 1.25em;
|
||||
font-weight: 500;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
hr + {
|
||||
|
|
@ -200,7 +200,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
span {
|
||||
&:last-child {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ $small-breakpoint: 960px;
|
|||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid var(--brand-color-faint);
|
||||
|
|
@ -286,7 +286,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
.username {
|
||||
display: block;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -301,7 +301,7 @@ $small-breakpoint: 960px;
|
|||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
|
|
@ -327,7 +327,7 @@ $small-breakpoint: 960px;
|
|||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
|
||||
small {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
|
|
@ -344,7 +344,7 @@ $small-breakpoint: 960px;
|
|||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -353,7 +353,7 @@ $small-breakpoint: 960px;
|
|||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -362,7 +362,7 @@ $small-breakpoint: 960px;
|
|||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
|
@ -371,7 +371,7 @@ $small-breakpoint: 960px;
|
|||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
h6 {
|
||||
|
|
@ -380,7 +380,7 @@ $small-breakpoint: 960px;
|
|||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -581,7 +581,7 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
|
||||
p a {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -590,10 +590,10 @@ $small-breakpoint: 960px;
|
|||
margin-bottom: 0;
|
||||
|
||||
small {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
span {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -812,7 +812,7 @@ $small-breakpoint: 960px;
|
|||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
@ -859,18 +859,18 @@ $small-breakpoint: 960px;
|
|||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form .user_agreement .label_input > label {
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
.simple_form p.lead {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
.older,
|
||||
.newer {
|
||||
text-transform: uppercase;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
.older {
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
.nothing-here {
|
||||
background: var(--brand-color-med);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
|
@ -251,13 +251,13 @@
|
|||
font-weight: 500;
|
||||
width: 120px;
|
||||
flex: 0 0 auto;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
||||
}
|
||||
|
||||
dd {
|
||||
flex: 1 1 auto;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -296,7 +296,7 @@
|
|||
|
||||
.pending-account {
|
||||
&__header {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
a {
|
||||
color: $ui-secondary-color;
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ body {
|
|||
font-feature-settings: "kern";
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
color: #fff;
|
||||
background-color: $gab-background-base;
|
||||
color: var(--primary-text-color);
|
||||
background-color: var(--background-color);
|
||||
|
||||
&.system-font {
|
||||
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
|
||||
|
|
@ -95,7 +95,7 @@ body {
|
|||
&.error {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
background: var(--brand-color-med);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
small {
|
||||
font-weight: 400;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
border: 10px none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: var(--primary-text-color);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
}
|
||||
|
||||
&.button-secondary {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
background: transparent;
|
||||
padding: 3px 15px;
|
||||
border: 1px solid $ui-primary-color;
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
.icon-button {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
}
|
||||
|
||||
&.inverted {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -181,19 +181,19 @@
|
|||
|
||||
&.overlayed {
|
||||
box-sizing: content-box;
|
||||
background: rgba($base-overlay-background, 0.6);
|
||||
background: var(--foreground-color);
|
||||
color: var(--primary-text-color-faint);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($base-overlay-background, 0.9);
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-icon-button {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
|
@ -561,11 +561,11 @@
|
|||
|
||||
&.light {
|
||||
.status__relative-time {
|
||||
color: $light-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
color: $inverted-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
.display-name {
|
||||
|
|
@ -598,7 +598,7 @@
|
|||
|
||||
&__meta {
|
||||
font-size: 14px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
a {
|
||||
color: var(--brand-color);
|
||||
|
|
@ -624,13 +624,13 @@
|
|||
|
||||
.status__relative-time,
|
||||
.notification__relative_time {
|
||||
color: $dark-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
color: $dark-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
.status__info .status__display-name {
|
||||
|
|
@ -786,7 +786,7 @@
|
|||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
|
@ -862,7 +862,7 @@ a .account__avatar {
|
|||
|
||||
.account__reciprocal_follow_message {
|
||||
padding: 0 5px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -948,7 +948,7 @@ a .account__avatar {
|
|||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
@ -1023,7 +1023,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.detailed-status__display-name {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -1098,7 +1098,7 @@ a.account__display-name {
|
|||
margin: 0 10px 0 68px;
|
||||
padding: 8px 0 0;
|
||||
cursor: default;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
|
|
@ -1223,10 +1223,10 @@ a.account__display-name {
|
|||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
cursor: default;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
strong {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -1346,11 +1346,6 @@ a.account__display-name {
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
article {
|
||||
// TEMPORARY - content of columns may be significantly altered
|
||||
background: $gab-background-container;
|
||||
}
|
||||
}
|
||||
|
||||
.ui {
|
||||
|
|
@ -1368,7 +1363,7 @@ a.account__display-name {
|
|||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 105;
|
||||
background: $gab-background-container-light;
|
||||
background: var(--foreground-color);
|
||||
|
||||
@media (min-width: 895px) {
|
||||
top: -290px;
|
||||
|
|
@ -1397,7 +1392,7 @@ a.account__display-name {
|
|||
display: block;
|
||||
flex: 1 1 auto;
|
||||
padding: 15px 5px 13px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
|
@ -1462,6 +1457,7 @@ a.account__display-name {
|
|||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {font-size: 16px;}
|
||||
|
||||
.search__input {
|
||||
|
|
@ -1647,11 +1643,12 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.promo-panel-item {
|
||||
@include light-theme-shadow;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-bottom: 1px solid var(--brand-color-med);
|
||||
background: $gab-background-container;
|
||||
background: var(--foreground-color);
|
||||
|
||||
&--highlighted {
|
||||
background-color: #30ce7d;
|
||||
|
|
@ -2017,13 +2014,13 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.getting-started {
|
||||
color: $dark-text-color;
|
||||
overflow: auto;
|
||||
|
||||
&__footer {
|
||||
flex: 0 0 auto;
|
||||
padding: 10px;
|
||||
padding-top: 20px;
|
||||
opacity: 0.7;
|
||||
|
||||
ul {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -2034,19 +2031,21 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
p {
|
||||
color: $dark-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-text-color-faint);
|
||||
text-decoration: underline;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-text-color-faint);
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
@ -2079,7 +2078,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.setting-text {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
|
|
@ -2162,7 +2161,7 @@ a.account__display-name {
|
|||
button,
|
||||
a {
|
||||
display: inline;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0 8px;
|
||||
|
|
@ -2213,7 +2212,7 @@ a.status-card {
|
|||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -2227,7 +2226,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
.status-card__description {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
.status-card__host {
|
||||
|
|
@ -2391,7 +2390,9 @@ a.status-card.compact:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.columns-area--mobile .column {@include gab-container-standards;}
|
||||
.columns-area--mobile .column {
|
||||
@include gab-container-standards;
|
||||
}
|
||||
|
||||
.column-header__wrapper {
|
||||
position: relative;
|
||||
|
|
@ -2419,7 +2420,6 @@ a.status-card.compact:hover {
|
|||
.column-header {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
background: $gab-background-container;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
|
@ -2503,8 +2503,11 @@ a.status-card.compact:hover {
|
|||
padding: 0 15px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: $gab-background-container;
|
||||
&:hover {color: lighten($darker-text-color, 7%);}
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: lighten($darker-text-color, 7%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--primary-text-color);
|
||||
|
|
@ -2521,7 +2524,7 @@ a.status-card.compact:hover {
|
|||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
transition: max-height 150ms ease-in-out, opacity 300ms linear;
|
||||
opacity: 1;
|
||||
|
||||
|
|
@ -2558,7 +2561,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -2676,7 +2679,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.video-error-cover {
|
||||
align-items: center;
|
||||
background: $base-overlay-background;
|
||||
background: var(--background-color);
|
||||
color: var(--primary-text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -2690,8 +2693,8 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $base-overlay-background;
|
||||
color: $darker-text-color;
|
||||
background: var(--background-color);
|
||||
color: var(--primary-color-faint);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
|
@ -2790,7 +2793,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.column-settings__section {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
|
|
@ -2834,7 +2837,7 @@ a.status-card.compact:hover {
|
|||
|
||||
&__multi-value__label,
|
||||
&__input {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
&__clear-indicator,
|
||||
|
|
@ -2888,7 +2891,7 @@ a.status-card.compact:hover {
|
|||
margin-bottom: 4px;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
background-color: $base-overlay-background;
|
||||
background-color: var(--background-color);
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
|
|
@ -2907,7 +2910,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.setting-toggle__label {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
margin-left: 8px;
|
||||
|
|
@ -3124,7 +3127,7 @@ a.status-card.compact:hover {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border: 2px dashed var(--brand-color-med);
|
||||
|
|
@ -3399,7 +3402,7 @@ a.status-card.compact:hover {
|
|||
.search-results__hashtag {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -3545,7 +3548,7 @@ a.status-card.compact:hover {
|
|||
cursor: zoom-in;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -3567,7 +3570,7 @@ a.status-card.compact:hover {
|
|||
content: 'GIF';
|
||||
position: absolute;
|
||||
color: var(--primary-text-color);
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
background: var(--foreground-color);
|
||||
bottom: 6px;
|
||||
left: 6px;
|
||||
padding: 2px 6px;
|
||||
|
|
@ -3603,7 +3606,7 @@ a.status-card.compact:hover {
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
background: $base-overlay-background;
|
||||
background: var(--background-color);
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
|
|
@ -3638,7 +3641,7 @@ a.status-card.compact:hover {
|
|||
|
||||
/* Status Video Player */
|
||||
.status__video-player {
|
||||
background: $base-overlay-background;
|
||||
background: var(--background-color);
|
||||
box-sizing: border-box;
|
||||
cursor: default; /* May not be needed */
|
||||
margin-top: 8px;
|
||||
|
|
@ -3774,8 +3777,8 @@ a.status-card.compact:hover {
|
|||
height: 100%;
|
||||
z-index: 4;
|
||||
border: 0;
|
||||
background: $base-overlay-background;
|
||||
color: $darker-text-color;
|
||||
background: var(--background-color);
|
||||
color: var(--primary-color-faint);
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -4058,7 +4061,7 @@ a.status-card.compact:hover {
|
|||
a {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
padding: 15px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
|
@ -4127,7 +4130,7 @@ noscript {
|
|||
div {
|
||||
font-size: 14px;
|
||||
margin: 30px auto;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
max-width: 400px;
|
||||
|
||||
a {
|
||||
|
|
@ -4530,7 +4533,7 @@ noscript {
|
|||
}
|
||||
|
||||
.account__header__content {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
|
|
@ -4594,7 +4597,7 @@ noscript {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
|
@ -4620,7 +4623,7 @@ noscript {
|
|||
line-height: 36px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
&__sparkline {
|
||||
|
|
@ -4724,7 +4727,7 @@ noscript {
|
|||
&__subtitle {
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
&__form {
|
||||
|
|
@ -4798,7 +4801,7 @@ noscript {
|
|||
padding-top: 6px;
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
|
|
@ -4991,7 +4994,7 @@ noscript {
|
|||
span:first-of-type {
|
||||
font-size: 20px !important;
|
||||
line-height: 1.25;
|
||||
color: #ffffff;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 600 !important;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
|
@ -5000,7 +5003,7 @@ noscript {
|
|||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -5101,7 +5104,7 @@ noscript {
|
|||
|
||||
> span {
|
||||
font-size: 14px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
|
||||
a {
|
||||
color: var(--brand-color) !important;
|
||||
|
|
@ -5122,7 +5125,7 @@ noscript {
|
|||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -5185,15 +5188,17 @@ noscript {
|
|||
width: 100%;
|
||||
max-height: 46px;
|
||||
position: relative;
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
background-color: var(--brand-color-faint);
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
border-color: var(--brand-color-faint);
|
||||
transition: max-height 150ms ease;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
|
||||
&.hidden {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
|
|
@ -5204,7 +5209,7 @@ noscript {
|
|||
line-height: 46px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
|
||||
span {
|
||||
height: 46px;
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
&__links {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
@media screen and (max-width: 895px) {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: $ui-secondary-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding-top: 2px;
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@
|
|||
|
||||
.icon-button {
|
||||
flex: 0 1 auto;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
|
|
@ -250,8 +250,8 @@
|
|||
background: rgba(0, 0, 0, 0.3);
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: $gab-secondary-text;
|
||||
border: 1px solid $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
border: 1px solid var(--primary-color-faint);
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
&:focus {color: #fff;}
|
||||
|
||||
&::placeholder {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
}
|
||||
&.active {opacity: 1;}
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
font-family: $font-sans-serif, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
&.character-counter--over {color: $warning-red;}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: $dark-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.detailed-status__link {
|
||||
color: $action-button-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
@include font-weight(normal);
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
background: $gab-background-base-light;
|
||||
background: var(--background-color);
|
||||
border-radius: 6px;
|
||||
padding: 4px 0;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-text-color);
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
|
||||
&.left {transform-origin: 100% 50%;}
|
||||
&.top {transform-origin: 50% 100%;}
|
||||
|
|
@ -24,28 +24,28 @@
|
|||
right: -5px;
|
||||
margin-top: -5px;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: $gab-background-base-light;
|
||||
border-left-color: var(--background-color);
|
||||
}
|
||||
|
||||
&.top {
|
||||
bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px 5px 0;
|
||||
border-top-color: $gab-background-base-light;
|
||||
border-top-color: var(--background-color);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
top: -5px;
|
||||
margin-left: -5px;
|
||||
border-width: 0 5px 5px;
|
||||
border-bottom-color: $gab-background-base-light;
|
||||
border-bottom-color: var(--background-color);
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: -5px;
|
||||
margin-top: -5px;
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-right-color: $gab-background-base-light;
|
||||
border-right-color: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
display: block;
|
||||
margin: 10px !important;
|
||||
height: 1px;
|
||||
background: $gab-background-base;
|
||||
background: var(--foreground-color);
|
||||
}
|
||||
}
|
||||
// end .dropdown-menu
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
|
||||
&:hover {
|
||||
background: var(--brand-color);
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: drop-shadow(2px 0 0 #fff); // FIXME: Use theme color
|
||||
filter: drop-shadow(2px 0 0 var(--foreground-color));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
.emoji-react-selector {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
background-color: var(--background-color);
|
||||
padding: 5px 8px;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
.group-card__meta {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
float: left;
|
||||
height: 20px;
|
||||
padding: 3px 0 0 33px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/sprite-post-functions.png');
|
||||
background-size: 100px 1200px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
&__meta {
|
||||
font-size: 0.8em;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
&__unread {
|
||||
color: var(--brand-color);
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@
|
|||
|
||||
&__case {
|
||||
background: var(--brand-color-med);
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -316,7 +316,7 @@
|
|||
max-width: 90vw;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $gab-placeholder-accent;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
background: $gab-background-container;
|
||||
|
||||
.status__display-name {
|
||||
|
|
@ -440,7 +440,7 @@
|
|||
|
||||
.status__content,
|
||||
.status__content p {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
@ -532,7 +532,7 @@
|
|||
align-items: center;
|
||||
padding: 13px 10px 12px;
|
||||
@inclide font-size(14);
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none;
|
||||
|
||||
&,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: block;
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
background: lighten($gab-background-container, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
display: block;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border: 6px solid $gab-background-base;
|
||||
border: 6px solid var(--foreground-color);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&:hover & {
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -84,7 +84,6 @@
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -95,7 +94,7 @@
|
|||
&__value {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 24px;
|
||||
|
|
@ -104,7 +103,7 @@
|
|||
&__label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.name {
|
||||
flex: 1 1 auto;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
width: calc(100% - 88px);
|
||||
|
||||
.username {
|
||||
|
|
@ -431,7 +431,7 @@
|
|||
}
|
||||
|
||||
.logo-button {
|
||||
background-color: $secondary-text-color;
|
||||
background-color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -612,7 +612,7 @@
|
|||
text-shadow: none;
|
||||
|
||||
small {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -640,7 +640,7 @@
|
|||
width: 33.3%;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
padding: 10px;
|
||||
border-right: 1px solid var(--brand-color-faint);
|
||||
cursor: default;
|
||||
|
|
@ -674,7 +674,7 @@
|
|||
}
|
||||
|
||||
&.inactive::after {
|
||||
border-bottom-color: $secondary-text-color;
|
||||
border-bottom-color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -737,11 +737,11 @@
|
|||
&__links {
|
||||
margin-top: -15px;
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
font-weight: 500;
|
||||
|
|
@ -812,7 +812,7 @@
|
|||
.roles {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
.roles {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5;
|
||||
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ code {
|
|||
}
|
||||
|
||||
.hint {
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
|
|
@ -116,7 +116,7 @@ code {
|
|||
|
||||
p.hint {
|
||||
margin-bottom: 15px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
&.subtle-hint {
|
||||
text-align: center;
|
||||
|
|
@ -390,7 +390,7 @@ code {
|
|||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--brand-color);
|
||||
color: var(--primary-text-color);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
|
|
@ -519,7 +519,7 @@ code {
|
|||
|
||||
.flash-message {
|
||||
background: var(--brand-color-med);
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -539,7 +539,7 @@ code {
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -600,7 +600,7 @@ code {
|
|||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -636,7 +636,7 @@ code {
|
|||
.oauth-prompt,
|
||||
.follow-prompt {
|
||||
margin-bottom: 30px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
|
|
@ -645,7 +645,7 @@ code {
|
|||
}
|
||||
|
||||
strong {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-weight: 500;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
|
|
@ -682,7 +682,7 @@ code {
|
|||
|
||||
.qr-alternative {
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
flex: 150px;
|
||||
|
||||
samp {
|
||||
|
|
@ -767,7 +767,7 @@ code {
|
|||
|
||||
.post-follow-actions {
|
||||
text-align: center;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
div {
|
||||
margin-bottom: 4px;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
flex: 0 auto;
|
||||
font-size: 14px;
|
||||
background: var(--brand-color);
|
||||
color: var(--primary-text-color);
|
||||
color: #fff;
|
||||
text-transform: none;
|
||||
line-height: 36px;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ a.table-action-link {
|
|||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
padding: 0 10px;
|
||||
color: $gab-secondary-text;
|
||||
color: var(--primary-color-faint);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ $gab-placeholder-accent: #666 !default;
|
|||
|
||||
// light theme
|
||||
$gab-background-base-light: #f6f2f6 !default;
|
||||
$gab-background-container-light: #fff !default;
|
||||
$gab-default-text-light: #6c6c6c !default;
|
||||
|
||||
$gab-background: $gab-background-base !default;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
padding: 20px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
font-weight: 400;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
.account {
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
|
||||
.contact-widget {
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
font-weight: 400;
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
border-radius: 4px;
|
||||
background: var(--brand-color-med);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
color: $secondary-text-color;
|
||||
color: var(--primary-text-color-faint);
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
background: $base-shadow-color;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
text-overflow: ellipsis;
|
||||
|
||||
.fa {
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
|
||||
small {
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
margin-top: 8px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
thead th {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
font-weight: 700;
|
||||
padding: 10px;
|
||||
|
||||
|
|
@ -411,7 +411,7 @@
|
|||
|
||||
small {
|
||||
display: block;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -508,7 +508,7 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
|
||||
.notice-widget {
|
||||
margin-bottom: 10px;
|
||||
color: $darker-text-color;
|
||||
color: var(--primary-color-faint);
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue