Merge commit 'f826a95f6e' into kb_migration
This commit is contained in:
KMY
commit
4b65740722
211 changed files with 628 additions and 599 deletions
|
|
@ -24,13 +24,16 @@ html {
|
|||
.column > .scrollable,
|
||||
.getting-started,
|
||||
.column-inline-form,
|
||||
.error-column,
|
||||
.regeneration-indicator {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.error-column {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.column > .scrollable.about {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
|
@ -77,6 +80,10 @@ html {
|
|||
background: $white;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.column-header__button.active {
|
||||
color: $ui-highlight-color;
|
||||
|
||||
|
|
@ -423,7 +430,7 @@ html {
|
|||
.column-header__collapsible-inner {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.dashboard__quick-access,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ $white: #ffffff;
|
|||
$classic-base-color: #282c37;
|
||||
$classic-primary-color: #9baec8;
|
||||
$classic-secondary-color: #d9e1e8;
|
||||
$classic-highlight-color: #6364ff;
|
||||
$classic-highlight-color: #858afa;
|
||||
|
||||
$blurple-600: #563acc; // Iris
|
||||
$blurple-500: #6364ff; // Brand purple
|
||||
|
|
|
|||
|
|
@ -161,11 +161,22 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:focus {
|
||||
border-radius: 4px;
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,6 +74,10 @@
|
|||
background-color: $ui-button-focus-background-color;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
|
||||
&--destructive {
|
||||
&:active,
|
||||
&:focus,
|
||||
|
|
@ -98,16 +102,6 @@
|
|||
transition: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
&.button-secondary {
|
||||
color: $ui-button-secondary-color;
|
||||
background: transparent;
|
||||
|
|
@ -197,8 +191,6 @@
|
|||
border-radius: 4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 100ms ease-in;
|
||||
transition-property: background-color, color;
|
||||
text-decoration: none;
|
||||
|
||||
a {
|
||||
|
|
@ -211,12 +203,10 @@
|
|||
&:focus {
|
||||
color: lighten($action-button-color, 7%);
|
||||
background-color: rgba($action-button-color, 0.15);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($action-button-color, 0.3);
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
@ -225,20 +215,6 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: $lighter-text-color;
|
||||
|
||||
|
|
@ -249,8 +225,8 @@
|
|||
background-color: rgba($lighter-text-color, 0.15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($lighter-text-color, 0.3);
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
@ -261,6 +237,13 @@
|
|||
&.active {
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $highlight-text-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($highlight-text-color, 13%);
|
||||
}
|
||||
|
|
@ -269,13 +252,14 @@
|
|||
|
||||
&.overlayed {
|
||||
box-sizing: content-box;
|
||||
background: rgba($base-overlay-background, 0.6);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
background: rgba($black, 0.65);
|
||||
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||
color: rgba($white, 0.7);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($base-overlay-background, 0.9);
|
||||
background: rgba($black, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -305,21 +289,16 @@
|
|||
font-size: 11px;
|
||||
padding: 0 3px;
|
||||
line-height: 27px;
|
||||
outline: 0;
|
||||
transition: all 100ms ease-in;
|
||||
transition-property: background-color, color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: darken($lighter-text-color, 7%);
|
||||
background-color: rgba($lighter-text-color, 0.15);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($lighter-text-color, 0.3);
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
@ -330,16 +309,13 @@
|
|||
|
||||
&.active {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $highlight-text-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -735,7 +711,6 @@ body > [data-popper-placement] {
|
|||
flex: 0 0 auto;
|
||||
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1433,6 +1408,10 @@ body > [data-popper-placement] {
|
|||
}
|
||||
}
|
||||
|
||||
.scrollable > div:first-child .detailed-status {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 16px;
|
||||
color: $dark-text-color;
|
||||
|
|
@ -1984,13 +1963,6 @@ a.account__display-name {
|
|||
.navigation-bar__actions {
|
||||
position: relative;
|
||||
|
||||
.icon-button.close {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transform: scale(0, 1) translate(-100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.compose__action-bar .icon-button {
|
||||
pointer-events: auto;
|
||||
transform: scale(1, 1) translate(0, 0);
|
||||
|
|
@ -2000,19 +1972,21 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.navigation-bar__profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navigation-bar__profile-account {
|
||||
display: block;
|
||||
display: inline;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.navigation-bar__profile-edit {
|
||||
display: inline;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -2069,7 +2043,7 @@ a.account__display-name {
|
|||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
}
|
||||
|
|
@ -3590,12 +3564,10 @@ button.icon-button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.status-card {
|
||||
display: block;
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
color: $dark-text-color;
|
||||
color: $darker-text-color;
|
||||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -3649,8 +3621,29 @@ button.icon-button.active i.fa-retweet {
|
|||
a.status-card {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.status-card__title,
|
||||
.status-card__host,
|
||||
.status-card__author {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-card a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.status-card__title,
|
||||
.status-card__host,
|
||||
.status-card__author {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3676,42 +3669,42 @@ a.status-card {
|
|||
|
||||
.status-card__title {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: $darker-text-color;
|
||||
font-weight: 700;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
color: $primary-text-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.status-card__content {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
padding: 14px 14px 14px 8px;
|
||||
}
|
||||
|
||||
.status-card__description {
|
||||
color: $darker-text-color;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
padding: 15px 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.status-card__host {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.status-card__author {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
flex: 0 0 100px;
|
||||
width: 100%;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
& > .fa {
|
||||
font-size: 21px;
|
||||
|
|
@ -3723,50 +3716,8 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
.status-card.horizontal {
|
||||
display: block;
|
||||
|
||||
.status-card__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-card__image-image,
|
||||
.status-card__image-preview {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.status-card__title {
|
||||
white-space: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card.compact {
|
||||
border-color: lighten($ui-base-color, 4%);
|
||||
|
||||
&.interactive {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.status-card__content {
|
||||
padding: 8px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.status-card__title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card.compact:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -3777,7 +3728,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.status-card__image-preview {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -3932,7 +3883,6 @@ a.status-card.compact:hover {
|
|||
position: relative;
|
||||
z-index: 2;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
& > button {
|
||||
margin: 0;
|
||||
|
|
@ -3947,6 +3897,10 @@ a.status-card.compact:hover {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
}
|
||||
|
||||
& > .column-header__back-button {
|
||||
|
|
@ -3987,10 +3941,18 @@ a.status-card.compact:hover {
|
|||
font-size: 16px;
|
||||
padding: 0 15px;
|
||||
|
||||
&:last-child {
|
||||
border-start-end-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary-text-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
|
@ -4279,6 +4241,7 @@ a.status-card.compact:hover {
|
|||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: $white;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
|
|
@ -4286,7 +4249,6 @@ a.status-card.compact:hover {
|
|||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -4648,7 +4610,7 @@ a.status-card.compact:hover {
|
|||
.emoji-picker-dropdown__menu {
|
||||
background: $simple-background-color;
|
||||
position: relative;
|
||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
z-index: 2;
|
||||
|
|
@ -4807,11 +4769,6 @@ a.status-card.compact:hover {
|
|||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.8;
|
||||
|
|
@ -4827,6 +4784,13 @@ a.status-card.compact:hover {
|
|||
img {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
img {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4839,7 +4803,7 @@ a.status-card.compact:hover {
|
|||
.privacy-dropdown__dropdown,
|
||||
.expiration-dropdown__dropdown {
|
||||
background: $simple-background-color;
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
|
@ -4921,19 +4885,6 @@ a.status-card.compact:hover {
|
|||
.expiration-dropdown__value {
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
||||
|
||||
.icon-button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $ui-highlight-color;
|
||||
|
||||
.icon-button {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top .privacy-dropdown__value,
|
||||
|
|
@ -4944,7 +4895,7 @@ a.status-card.compact:hover {
|
|||
.privacy-dropdown__dropdown,
|
||||
.expiration-dropdown__dropdown {
|
||||
display: block;
|
||||
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4963,7 +4914,7 @@ a.status-card.compact:hover {
|
|||
.language-dropdown {
|
||||
&__dropdown {
|
||||
background: $simple-background-color;
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
|
@ -5151,7 +5102,6 @@ a.status-card.compact:hover {
|
|||
position: absolute;
|
||||
top: 16px;
|
||||
inset-inline-end: 10px;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: all 100ms linear;
|
||||
|
|
@ -5290,9 +5240,9 @@ a.status-card.compact:hover {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.video-modal__container {
|
||||
.video-modal .video-player {
|
||||
max-height: 80vh;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.audio-modal__container {
|
||||
|
|
@ -6311,7 +6261,7 @@ a.status-card.compact:hover {
|
|||
box-sizing: border-box;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
|
|
@ -6342,7 +6292,7 @@ a.status-card.compact:hover {
|
|||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&--tall {
|
||||
|
|
@ -6428,7 +6378,7 @@ a.status-card.compact:hover {
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 44px;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -6495,7 +6445,7 @@ a.status-card.compact:hover {
|
|||
position: relative;
|
||||
background: $base-shadow-color;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
display: flex;
|
||||
|
|
@ -6512,8 +6462,6 @@ a.status-card.compact:hover {
|
|||
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100vw;
|
||||
max-height: 80vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -6521,22 +6469,15 @@ a.status-card.compact:hover {
|
|||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
aspect-ratio: auto !important;
|
||||
|
||||
video {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
video {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
|
|
@ -8337,6 +8278,7 @@ noscript {
|
|||
.search__input {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 10px;
|
||||
padding-inline-end: 28px;
|
||||
}
|
||||
|
||||
.search__popout {
|
||||
|
|
@ -8365,8 +8307,9 @@ noscript {
|
|||
align-items: center;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
padding: 15px 0;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
gap: 15px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
|
@ -8375,33 +8318,40 @@ noscript {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
color: $highlight-text-color;
|
||||
|
||||
.story__details__publisher,
|
||||
.story__details__shared {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
padding: 0 15px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&__publisher {
|
||||
color: $darker-text-color;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__shared {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__thumbnail {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
|
@ -8412,7 +8362,7 @@ noscript {
|
|||
}
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -8421,7 +8371,7 @@ noscript {
|
|||
}
|
||||
|
||||
&__preview {
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -8437,6 +8387,23 @@ noscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
flex-direction: column;
|
||||
|
||||
.story__thumbnail {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1.91 / 1;
|
||||
}
|
||||
|
||||
.story__details {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.server-banner {
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@
|
|||
&__input {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid $ui-primary-color;
|
||||
border: 1px solid $ui-button-background-color;
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
|
@ -121,15 +121,10 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $valid-value-color;
|
||||
background: $valid-value-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($valid-value-color, 15%);
|
||||
border-color: $ui-button-focus-background-color;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -241,6 +236,14 @@
|
|||
color: $action-button-color;
|
||||
border-color: $action-button-color;
|
||||
margin-inline-end: 5px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
border-color: $action-button-color;
|
||||
background-color: $action-button-color;
|
||||
color: $ui-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ $red-600: #b7253d !default; // Deep Carmine
|
|||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #563acc; // Iris
|
||||
$blurple-500: #6364ff; // Brand purple
|
||||
$blurple-400: #7477fd; // Medium slate blue
|
||||
$blurple-300: #858afa; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
|
@ -61,6 +62,9 @@ $ui-button-tertiary-focus-color: $white !default;
|
|||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
|
||||
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !default;
|
||||
$darker-text-color: $ui-primary-color !default;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue