$ui-base-color replacements
This commit is contained in:
parent
50c4dac599
commit
8e3ad9e6b6
13 changed files with 90 additions and 79 deletions
|
@ -23,11 +23,11 @@ body {
|
|||
}
|
||||
|
||||
.drawer__inner {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
.drawer__inner__soapbox {
|
||||
background: $ui-base-color 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($white)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
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($white)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
}
|
||||
|
||||
// Change the colors used in compose-form
|
||||
|
@ -63,7 +63,7 @@ body {
|
|||
|
||||
.emoji-mart-search input {
|
||||
background: rgba($ui-base-color, 0.3);
|
||||
border-color: $ui-base-color;
|
||||
border-color: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the background colors of statuses
|
||||
|
@ -92,7 +92,7 @@ body {
|
|||
// Change the background colors of media and video spoilers
|
||||
.media-spoiler,
|
||||
.video-player__spoiler {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the colors used in the dropdown menu
|
||||
|
@ -124,7 +124,7 @@ body {
|
|||
}
|
||||
|
||||
.dropdown-menu__separator {
|
||||
border-bottom-color: lighten($ui-base-color, 12%);
|
||||
border-bottom-color: var(--brand-color-med);
|
||||
}
|
||||
|
||||
// Change the background colors of modals
|
||||
|
@ -135,7 +135,7 @@ body {
|
|||
.report-modal,
|
||||
.error-modal,
|
||||
.onboarding-modal {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
.embed-modal {
|
||||
|
@ -283,7 +283,7 @@ body {
|
|||
|
||||
.public-account-header {
|
||||
&__image {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
|
|
|
@ -549,7 +549,7 @@ $small-breakpoint: 960px;
|
|||
&__forms,
|
||||
#soapbox-timeline {
|
||||
box-sizing: border-box;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 6px rgba($black, 0.1);
|
||||
}
|
||||
|
@ -816,7 +816,7 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
|
||||
&__footer {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
padding: 10px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
display: flex;
|
||||
|
|
|
@ -173,7 +173,7 @@
|
|||
}
|
||||
|
||||
.nothing-here {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
color: $gab-secondary-text;
|
||||
font-size: 14px;
|
||||
|
@ -226,14 +226,14 @@
|
|||
padding: 0;
|
||||
margin: 15px -15px -15px;
|
||||
border: 0 none;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid var(--brand-color-med);
|
||||
border-bottom: 1px solid var(--brand-color-med);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid var(--brand-color-med);
|
||||
}
|
||||
|
||||
dt,
|
||||
|
|
|
@ -54,7 +54,7 @@ body {
|
|||
}
|
||||
|
||||
&.lighter {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
&.with-modals {
|
||||
|
@ -96,7 +96,7 @@ body {
|
|||
position: absolute;
|
||||
text-align: center;
|
||||
color: $darker-text-color;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
@ -186,7 +186,7 @@ button {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
color: var(--brand-color-hicontrast);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -79,12 +79,12 @@
|
|||
}
|
||||
|
||||
&.button-alternative-2 {
|
||||
background: $ui-base-lighter-color;
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-base-lighter-color, 4%);
|
||||
background-color: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -127,6 +127,16 @@
|
|||
cursor: pointer;
|
||||
transition: color 100ms ease-in;
|
||||
|
||||
> div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
@ -506,7 +516,7 @@
|
|||
background: var(--brand-color-faint);
|
||||
|
||||
.status.status-direct {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&.muted {
|
||||
background: transparent;
|
||||
|
@ -1080,11 +1090,11 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
background: $ui-base-lighter-color;
|
||||
background: var(--brand-color-med);
|
||||
color: $inverted-text-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-lighter-color, 7%);
|
||||
background: var(--brand-color-faint);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -1710,7 +1720,7 @@ a.account__display-name {
|
|||
height: 100%;
|
||||
|
||||
&.darker {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1865,7 +1875,7 @@ a.account__display-name {
|
|||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: $ui-base-color;
|
||||
background-color: var(--brand-color-med);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
|
@ -1924,7 +1934,7 @@ a.account__display-name {
|
|||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid $ui-base-color;
|
||||
border: 1px solid var(--brand-color-med);
|
||||
border-radius: 50%;
|
||||
background-color: darken($simple-background-color, 2%);
|
||||
box-sizing: border-box;
|
||||
|
@ -1983,13 +1993,13 @@ a.account__display-name {
|
|||
font-size: 12px;
|
||||
line-height: 19px;
|
||||
font-weight: 500;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
padding: 4px 8px;
|
||||
margin: -6px 10px;
|
||||
}
|
||||
|
||||
.column-subheading {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
color: $dark-text-color;
|
||||
padding: 8px 20px;
|
||||
font-size: 12px;
|
||||
|
@ -2001,7 +2011,7 @@ a.account__display-name {
|
|||
.getting-started__wrapper,
|
||||
.getting-started,
|
||||
.flex-spacer {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
.getting-started__wrapper {
|
||||
|
@ -2053,7 +2063,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
&__trends {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
flex: 0 1 auto;
|
||||
|
||||
@media screen and (max-height: 810px) {
|
||||
|
@ -2318,7 +2328,7 @@ a.status-card.compact:hover {
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2331,7 +2341,7 @@ a.status-card.compact:hover {
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $dark-text-color;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
@ -2364,7 +2374,7 @@ a.status-card.compact:hover {
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $dark-text-color;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
@ -2534,7 +2544,7 @@ a.status-card.compact:hover {
|
|||
height: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid var(--brand-color-med);
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
@ -2822,7 +2832,7 @@ a.status-card.compact:hover {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
background: var(--brand-color-med);
|
||||
color: lighten($darker-text-color, 4%);
|
||||
}
|
||||
}
|
||||
|
@ -2913,7 +2923,7 @@ a.status-card.compact:hover {
|
|||
.empty-column-indicator,
|
||||
.error-column {
|
||||
color: $dark-text-color;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
font-size: 15px;
|
||||
|
@ -3111,7 +3121,7 @@ a.status-card.compact:hover {
|
|||
left: 0;
|
||||
z-index: -1;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
||||
}
|
||||
|
||||
|
@ -3123,7 +3133,7 @@ a.status-card.compact:hover {
|
|||
color: $secondary-text-color;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border: 2px dashed $ui-base-lighter-color;
|
||||
border: 2px dashed var(--brand-color-med);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
@ -3154,7 +3164,7 @@ a.status-card.compact:hover {
|
|||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: $ui-base-lighter-color;
|
||||
background: var(--brand-color-med);
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
@ -3355,7 +3365,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.search-results__header {
|
||||
color: $dark-text-color;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: var(--brand-color-faint);
|
||||
padding: 15px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
|
@ -3883,7 +3893,7 @@ a.status-card.compact:hover {
|
|||
border-radius: 4px;
|
||||
left: 70px;
|
||||
bottom: 20px;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: var(--brand-color);
|
||||
}
|
||||
|
||||
&__handle {
|
||||
|
@ -3895,7 +3905,7 @@ a.status-card.compact:hover {
|
|||
bottom: 16px;
|
||||
left: 70px;
|
||||
transition: opacity .1s ease;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: var(--brand-color);
|
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
@ -3941,7 +3951,7 @@ a.status-card.compact:hover {
|
|||
height: 4px;
|
||||
border-radius: 4px;
|
||||
top: 10px;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: var(--brand-color);
|
||||
}
|
||||
|
||||
&__buffer {
|
||||
|
@ -3958,7 +3968,7 @@ a.status-card.compact:hover {
|
|||
top: 6px;
|
||||
margin-left: -6px;
|
||||
transition: opacity .1s ease;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: var(--brand-color);
|
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
|
||||
pointer-events: none;
|
||||
|
||||
|
@ -4082,7 +4092,7 @@ a.status-card.compact:hover {
|
|||
|
||||
&::after {
|
||||
bottom: -1px;
|
||||
border-color: transparent transparent $ui-base-color;
|
||||
border-color: transparent transparent var(--brand-color-med);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4251,7 +4261,7 @@ noscript {
|
|||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
@ -4554,7 +4564,7 @@ noscript {
|
|||
.trends {
|
||||
&__header {
|
||||
color: $dark-text-color;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: var(--brand-color-faint);
|
||||
border-bottom: 1px solid var(--brand-color-med);
|
||||
font-weight: 500;
|
||||
padding: 15px;
|
||||
|
@ -4656,7 +4666,7 @@ noscript {
|
|||
height: auto;
|
||||
|
||||
path:first-child {
|
||||
fill: lighten($ui-base-color, 12%);
|
||||
fill: var(--brand-color-med);
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
|
@ -4670,7 +4680,7 @@ noscript {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: lighten($ui-base-color, 12%);
|
||||
background: var(--brand-color-med);
|
||||
border-radius: 50%;
|
||||
padding: 0.35rem;
|
||||
}
|
||||
|
@ -5013,23 +5023,23 @@ noscript {
|
|||
line-height: 1.25;
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid var(--brand-color-med);
|
||||
padding: 10px 0;
|
||||
margin: 5px 0;
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid var(--brand-color-med);
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
|
||||
dl:first-child .verified {
|
||||
|
@ -5137,7 +5147,7 @@ noscript {
|
|||
&__text-container {
|
||||
display: none;
|
||||
padding: 25px 0;
|
||||
background-color: lighten($ui-base-color, 6%);
|
||||
background-color: var(--brand-color-faint);
|
||||
|
||||
@media (min-width: 895px) {
|
||||
display: block;
|
||||
|
|
|
@ -99,12 +99,13 @@
|
|||
margin-left: auto;
|
||||
|
||||
.icon-button {
|
||||
border: 1px solid lighten($ui-base-color, 12%);
|
||||
border: 1px solid var(--brand-color-med);
|
||||
border-radius: 4px;
|
||||
box-sizing: content-box;
|
||||
padding: 2px;
|
||||
}
|
||||
.button {margin-right: 10px;}
|
||||
|
||||
.button { margin-right: 10px; }
|
||||
}
|
||||
|
||||
&__links {
|
||||
|
|
|
@ -289,7 +289,7 @@
|
|||
}
|
||||
|
||||
&__case {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
color: $secondary-text-color;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
|
@ -607,7 +607,7 @@
|
|||
}
|
||||
|
||||
.modal-layout {
|
||||
background: $ui-base-color 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($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
|
|
@ -274,7 +274,7 @@
|
|||
a {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: $ui-base-color;
|
||||
background-color: var(--brand-color-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -341,7 +341,7 @@
|
|||
}
|
||||
|
||||
&--hollow {
|
||||
background-color: $ui-base-color;
|
||||
background-color: var(--brand-color-med);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
@ -722,7 +722,7 @@
|
|||
margin: 0 -5px;
|
||||
|
||||
.account__header__fields {
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid var(--brand-color-med);
|
||||
}
|
||||
|
||||
.roles {
|
||||
|
@ -864,7 +864,7 @@
|
|||
}
|
||||
|
||||
.card__bar {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
|
@ -446,7 +446,7 @@ code {
|
|||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%) 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($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
||||
background: darken($ui-base-color, 10%) 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(var(--brand-color-med))}'/></svg>") no-repeat right 8px center / auto 16px;
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
border-radius: 4px;
|
||||
padding-left: 10px;
|
||||
|
@ -567,7 +567,7 @@ code {
|
|||
border: 0;
|
||||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
|
|
@ -243,7 +243,7 @@ body.rtl {
|
|||
}
|
||||
|
||||
.simple_form select {
|
||||
background: darken($ui-base-color, 10%) 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($ui-base-color, 12%))}'/></svg>") no-repeat left 8px center / auto 16px;
|
||||
background: darken($ui-base-color, 10%) 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(var(--brand-color-med))}'/></svg>") no-repeat left 8px center / auto 16px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.entry {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
|
||||
.detailed-status,
|
||||
.status,
|
||||
|
@ -95,7 +95,7 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: lighten($ui-highlight-color, 10%);
|
||||
background: var(--brand-color-hicontrast);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
|
@ -103,7 +103,7 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $ui-primary-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -9,14 +9,14 @@
|
|||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
border-top: 1px solid var(--brand-color-med);
|
||||
text-align: left;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
border-bottom: 2px solid var(--brand-color-med);
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
@ -27,7 +27,7 @@
|
|||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -67,7 +67,7 @@
|
|||
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
|
@ -165,7 +165,7 @@ a.table-action-link {
|
|||
|
||||
&__toolbar {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
border-radius: 4px 0 0;
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
|
@ -196,10 +196,10 @@ a.table-action-link {
|
|||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
&__text {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
padding: 20px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
font-size: 15px;
|
||||
|
@ -115,7 +115,7 @@
|
|||
padding: 20px;
|
||||
min-height: 100%;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
}
|
||||
|
||||
|
@ -152,7 +152,7 @@
|
|||
padding: 15px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
color: $secondary-text-color;
|
||||
font-weight: 400;
|
||||
|
@ -260,7 +260,7 @@
|
|||
}
|
||||
|
||||
.directory {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
|
@ -273,7 +273,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-med);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
|
@ -352,7 +352,7 @@
|
|||
position: relative;
|
||||
margin-left: -10px;
|
||||
background: darken($ui-base-color, 8%);
|
||||
border: 2px solid $ui-base-color;
|
||||
border: 2px solid var(--brand-color-med);
|
||||
|
||||
&:nth-child(1) {
|
||||
z-index: 1;
|
||||
|
|
Loading…
Reference in a new issue