Recolor Preferences/Admin UI to better match main design (#31034)
This commit is contained in:
Michael Stanclift
GitHub
parent
cd0ca4b994
commit
8b7f93cc7f
14 changed files with 266 additions and 189 deletions
|
|
@ -1,7 +1,7 @@
|
|||
@use 'sass:math';
|
||||
|
||||
$no-columns-breakpoint: 600px;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width: 300px;
|
||||
$content-width: 840px;
|
||||
|
||||
.admin-wrapper {
|
||||
|
|
@ -26,7 +26,7 @@ $content-width: 840px;
|
|||
&__inner {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ $content-width: 840px;
|
|||
|
||||
&__toggle {
|
||||
display: none;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -103,7 +103,6 @@ $content-width: 840px;
|
|||
|
||||
ul {
|
||||
list-style: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
|
@ -112,13 +111,13 @@ $content-width: 840px;
|
|||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
transition-property: color, background-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -129,19 +128,13 @@ $content-width: 840px;
|
|||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-radius: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
background: var(--background-color);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
|
|
@ -156,16 +149,10 @@ $content-width: 840px;
|
|||
}
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > .simple-navigation-active-leaf a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
|
|
@ -299,7 +286,7 @@ $content-width: 840px;
|
|||
color: $darker-text-color;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
h6 {
|
||||
|
|
@ -372,7 +359,7 @@ $content-width: 840px;
|
|||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
margin: 20px 0;
|
||||
|
||||
&.spacer {
|
||||
|
|
@ -410,14 +397,14 @@ $content-width: 840px;
|
|||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
ul a,
|
||||
ul ul a {
|
||||
font-size: 16px;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -683,8 +670,10 @@ body,
|
|||
line-height: 20px;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border-right: 1px solid var(--background-border-color);
|
||||
border-left: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
|
|
@ -693,18 +682,13 @@ body,
|
|||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
|
|
@ -744,6 +728,47 @@ body,
|
|||
}
|
||||
}
|
||||
|
||||
.strike-entry {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
inset-inline-start: 15px;
|
||||
top: 15px;
|
||||
|
||||
.avatar {
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__timestamp {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
a.name-tag,
|
||||
.name-tag,
|
||||
a.inline-name-tag,
|
||||
|
|
@ -751,6 +776,10 @@ a.inline-name-tag,
|
|||
text-decoration: none;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -830,7 +859,8 @@ a.name-tag,
|
|||
}
|
||||
|
||||
.report-card {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
|
@ -842,7 +872,6 @@ a.name-tag,
|
|||
|
||||
.account {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-inline-start: 0;
|
||||
|
|
@ -863,7 +892,7 @@ a.name-tag,
|
|||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($darker-text-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -877,11 +906,7 @@ a.name-tag,
|
|||
&__item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid darken($ui-base-color, 4%);
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
|
|
@ -904,7 +929,6 @@ a.name-tag,
|
|||
max-width: calc(100% - 300px);
|
||||
|
||||
&__icon {
|
||||
color: $dark-text-color;
|
||||
margin-inline-end: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -917,6 +941,10 @@ a.name-tag,
|
|||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -952,14 +980,15 @@ a.name-tag,
|
|||
|
||||
.account__header__fields,
|
||||
.account__header__content {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
|
|
@ -988,8 +1017,8 @@ a.name-tag,
|
|||
.applications-list__item,
|
||||
.filters-list__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
@ -1000,13 +1029,13 @@ a.name-tag,
|
|||
|
||||
.announcements-list,
|
||||
.filters-list {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
border-bottom: none;
|
||||
|
||||
&__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__title {
|
||||
padding: 0 15px;
|
||||
|
|
@ -1018,6 +1047,10 @@ a.name-tag,
|
|||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.account-role {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1056,10 +1089,6 @@ a.name-tag,
|
|||
&__permissions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1109,7 +1138,7 @@ a.name-tag,
|
|||
|
||||
&__table {
|
||||
&__number {
|
||||
color: $secondary-text-color;
|
||||
color: var(--background-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1136,7 +1165,7 @@ a.name-tag,
|
|||
|
||||
&__box {
|
||||
box-sizing: border-box;
|
||||
background: $ui-highlight-color;
|
||||
background: var(--background-color);
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
|
|
@ -1158,8 +1187,9 @@ a.name-tag,
|
|||
.sparkline {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-bottom: 55px + 20px;
|
||||
|
|
@ -1231,12 +1261,12 @@ a.sparkline {
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
background-color: var(--background-color);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
lighten($ui-base-color, 8%),
|
||||
|
|
@ -1316,17 +1346,13 @@ a.sparkline {
|
|||
|
||||
.report-reason-selector {
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__category {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
|
|
@ -1355,7 +1381,7 @@ a.sparkline {
|
|||
|
||||
&__details {
|
||||
&__item {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 15px 0;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -1386,7 +1412,7 @@ a.sparkline {
|
|||
|
||||
.account-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
position: relative;
|
||||
|
||||
&__warning-badge {
|
||||
|
|
@ -1474,7 +1500,6 @@ a.sparkline {
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 15px;
|
||||
background: linear-gradient(to left, $ui-base-color, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -1550,11 +1575,11 @@ a.sparkline {
|
|||
margin-bottom: 20px;
|
||||
|
||||
&__item {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
|
|
@ -1564,11 +1589,6 @@ a.sparkline {
|
|||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
|
|
@ -1646,13 +1666,10 @@ a.sparkline {
|
|||
}
|
||||
|
||||
.report-actions {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 18px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
|
@ -1715,8 +1732,6 @@ a.sparkline {
|
|||
|
||||
.strike-card {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -1724,6 +1739,8 @@ a.sparkline {
|
|||
color: $primary-text-color;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
|
|
@ -1764,15 +1781,14 @@ a.sparkline {
|
|||
|
||||
&__statuses-list {
|
||||
border-radius: 4px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
padding: 16px;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue