matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace most color variables

Browse Source
This commit is contained in:
Alex Gleason
2020-06-02 17:42:09 -05:00
parent 0587798cb4
commit ca4bc1d8e8
30 changed files with 269 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/styles/components/buttons.scss
View File

@@ -14,7 +14,7 @@ a.button {
border-radius: 4px;
text-transform: uppercase;
color: #fff;
background: $gab-small-cta-primary;
background: #607cf5;
}
}

22
app/styles/components/compose-form.scss
View File

@@ -12,7 +12,7 @@
.checkbox {
display: inline-block;
position: relative;
border: 1px solid $ui-primary-color;
border: 1px solid var(--brand-color);
box-sizing: border-box;
width: 18px;
height: 18px;
@@ -32,7 +32,7 @@
.compose-form__warning {
color: var(--primary-text-color);
margin-bottom: 10px;
background: $ui-primary-color;
background: var(--brand-color);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
@@ -40,7 +40,7 @@
font-weight: 400;
strong {
color: $inverted-text-color;
color: var(--inverted-text-color);
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@@ -97,7 +97,7 @@
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
color: var(--inverted-text-color);
background: #f2f2f2;
padding: 10px;
font-family: inherit;
@@ -146,9 +146,9 @@
width: 100%;
z-index: 99;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
background: $ui-secondary-color;
background: var(--background-color);
border-radius: 0 0 4px 4px;
color: $inverted-text-color;
color: var(--inverted-text-color);
font-size: 14px;
padding: 6px;
&.autosuggest-textarea__suggestions--visible {display: block;}
@@ -163,7 +163,7 @@
&:focus,
&:active,
&.selected {
background: darken($ui-secondary-color, 10%);
background: var(--background-color);
}
}
@@ -187,7 +187,7 @@
.autosuggest-account .display-name__account {color: var(--highlight-text-color);}
.compose-form__modifiers {
color: $inverted-text-color;
color: var(--inverted-text-color);
font-family: inherit;
font-size: 14px;
background: $simple-background-color;
@@ -228,7 +228,7 @@
&:hover,
&:focus,
&:active {
color: $gab-text-highlight;
color: var(--highlight-text-color);
}
}
&.active {opacity: 1;}
@@ -283,7 +283,7 @@
.compose-form__buttons-wrapper {
padding: 10px;
background: $gab-background-base-light;
background: var(--background-color);
border-radius: 0 0 4px 4px;
display: flex;
justify-content: space-between;
@@ -311,7 +311,7 @@
.character-counter {
cursor: default;
font-family: $font-sans-serif, sans-serif;
font-family: var(--font-sans-serif), sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--primary-text-color-faint);

6
app/styles/components/dropdown-menu.scss
View File

@@ -109,7 +109,7 @@
& > ul {
list-style: none;
background: $ui-secondary-color;
background: var(--background-color);
padding: 4px 0;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
@@ -134,8 +134,8 @@
padding: 4px 14px;
box-sizing: border-box;
text-decoration: none;
background: $ui-secondary-color;
color: $inverted-text-color;
background: var(--background-color);
color: var(--inverted-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

6
app/styles/components/group-card.scss
View File

@@ -1,5 +1,5 @@
.group-column-header {
@include gab-container-standards;
@include standard-panel;
overflow: hidden;
.group-column-header__title {
@@ -26,7 +26,7 @@
}
.group-card {
@include gab-container-standards;
@include standard-panel;
display: block;
flex: 0 0 calc(50% - 20px/2);
margin-bottom: 20px;
@@ -39,7 +39,7 @@
img {
pointer-events: none;
width: 100%;
background: $gab-background-container;
background: var(--foreground-color);
}
}

6
app/styles/components/group-detail.scss
View File

@@ -9,7 +9,7 @@
.group__header {
width: 100%;
max-width: 1150px;
background: $gab-background-container;
background: var(--foreground-color);
border-radius: 10px;
overflow: hidden;
margin: 20px 0;
@@ -69,14 +69,14 @@
display: inline-block;
margin-bottom: 10px;
border-radius: 4px;
background: $gab-background-container;
background: var(--foreground-color);
font-size: 13px;
padding: 4px 8px;
}
}
.group__feed {
background: $gab-background-container;
background: var(--foreground-color);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;

2
app/styles/components/group-form.scss
View File

@@ -1,5 +1,5 @@
.group-form {
@include gab-container-standards;
@include standard-panel;
padding: 20px;
&,

4
app/styles/components/hotkeys-modal.scss
View File

@@ -1,7 +1,7 @@
.hotkeys-modal {
padding: 8px 0 0;
overflow: hidden;
background-color: $classic-base-color;
background-color: var(--background-color);
border-radius: 6px;
flex-direction: column;
@@ -10,7 +10,7 @@
}
.compose-modal__content {
background-color: $gab-background-base-light;
background-color: var(--background-color);
margin: 5px;
@media screen and (max-width: 960px) {

6
app/styles/components/inputs.scss
View File

@@ -3,14 +3,14 @@ textarea {
&.standard {
@include font-size(16);
@include line-height(18);
@include input-placeholder($gab-placeholder-accent);
@include input-placeholder(var(--primary-text-color-faint));
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid;
border-radius: 4px;
color: var(--brand-color);
border-color: $gab-placeholder-accent;
background: $gab-background-container;
border-color: var(--primary-text-color-faint);
background: var(--foreground-color);
&:focus {outline: none;}
}
}

50
app/styles/components/modal.scss
View File

@@ -143,7 +143,7 @@
a {
text-decoration: none;
font-weight: 500;
color: $ui-secondary-color;
color: var(--background-color);
&:hover,
&:focus,
@@ -182,8 +182,8 @@
.onboarding-modal,
.error-modal,
.embed-modal {
background: $ui-secondary-color;
color: $inverted-text-color;
background: var(--background-color);
color: var(--inverted-text-color);
border-radius: 8px;
overflow: hidden;
display: flex;
@@ -230,7 +230,7 @@
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
background: var(--background-color);
display: flex;
padding: 25px;
@@ -254,18 +254,18 @@
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
background-color: darken($ui-secondary-color, 16%);
color: var(--primary-text-color-faint);
background-color: var(--background-color);
}
&.onboarding-modal__done,
&.onboarding-modal__next {
color: $inverted-text-color;
color: var(--inverted-text-color);
&:hover,
&:focus,
&:active {
color: lighten($inverted-text-color, 4%);
color: var(--inverted-text-color);
}
}
}
@@ -282,7 +282,7 @@
&__label {
font-weight: 500;
color: $inverted-text-color;
color: var(--inverted-text-color);
margin-bottom: 5px;
text-transform: uppercase;
font-size: 12px;
@@ -315,9 +315,9 @@
width: 480px;
max-width: 90vw;
border-radius: 4px;
border: 1px solid $gab-placeholder-accent;
border: 1px solid var(--primary-text-color-faint);
color: var(--primary-text-color-faint);
background: $gab-background-container;
background: var(--foreground-color);
.status__display-name {
display: block;
@@ -334,14 +334,14 @@
}
.status__content__spoiler-link {
color: lighten($secondary-text-color, 8%);
color: var(--primary-text-color);
}
}
.actions-modal {
.status {
background: #ffffff;
border-bottom-color: $ui-secondary-color;
border-bottom-color: var(--background-color);
padding-top: 10px;
padding-bottom: 10px;
}
@@ -350,7 +350,7 @@
display: block;
margin: 10px;
height: 1px;
background: $gab-background-base;
background: var(--background-color);
}
}
@@ -369,7 +369,7 @@
.mute-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
background: var(--background-color);
padding: 10px;
line-height: 36px;
@@ -409,7 +409,7 @@
.report-modal__container {
display: flex;
border-top: 1px solid $ui-secondary-color;
border-top: 1px solid var(--background-color);
@media screen and (max-width: 480px) {
flex-wrap: wrap;
@@ -450,7 +450,7 @@
.report-modal__comment {
padding: 20px;
border-right: 1px solid $ui-secondary-color;
border-right: 1px solid var(--background-color);
max-width: 320px;
p {
@@ -464,7 +464,7 @@
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
color: var(--inverted-text-color);
background: #ffffff;
padding: 10px;
font-family: inherit;
@@ -473,11 +473,11 @@
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
border: 1px solid var(--background-color);
margin-bottom: 20px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
border: 1px solid var(--background-color);
}
}
@@ -486,7 +486,7 @@
margin-bottom: 24px;
&__label {
color: $inverted-text-color;
color: var(--inverted-text-color);
font-size: 14px;
}
}
@@ -546,8 +546,8 @@
&:focus {
&,
button {
background: $gab-background-base;
color: $gab-text-highlight;
background: var(--background-color);
color: var(--highlight-text-color);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
}
@@ -570,7 +570,7 @@
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
color: var(--primary-text-color-faint);
}
}
@@ -607,7 +607,7 @@
}
.modal-layout {
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($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
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(var(--background-color))}"/></svg>') repeat-x bottom fixed;
display: flex;
flex-direction: column;
height: 100vh;

2
app/styles/components/sidebar-menu.scss
View File

@@ -152,7 +152,7 @@
font-weight: 400;
&:hover {
background-color: rgba($gab-brand-default, 0.1);
background-color: rgba(var(--brand-color-rgb), 0.1);
.fa {
color: #000;

2
app/styles/components/user-panel.scss
View File

@@ -1,5 +1,5 @@
.user-panel {
@include gab-container-standards;
@include standard-panel;
display: flex;
width: 265px;
flex-direction: column;