diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
20 files changed, 2097 insertions, 2095 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 5b3e1db1b..b95cffbb4 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -30,7 +30,9 @@ border: 0; padding: 0; - & > .account__avatar-wrapper { margin: 0 8px 0 0 } + & > .account__avatar-wrapper { + margin: 0 8px 0 0; + } & > .display-name { height: 24px; @@ -60,11 +62,11 @@ } .account__avatar { - @include avatar-radius(); + @include avatar-radius; + display: block; position: relative; cursor: pointer; - width: 36px; height: 36px; background-size: 36px 36px; @@ -77,11 +79,13 @@ &-composite { @include avatar-radius; + overflow: hidden; position: relative; & div { @include avatar-radius; + float: left; position: relative; box-sizing: border-box; @@ -102,24 +106,24 @@ } .account__avatar-overlay { - position: relative; @include avatar-size(48px); position: relative; &-base { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(36px); img { @include avatar-radius; + width: 100%; height: 100%; } } &-overlay { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(24px); position: absolute; @@ -129,6 +133,7 @@ img { @include avatar-radius; + width: 100%; height: 100%; } @@ -379,7 +384,7 @@ &::before, &::after { display: block; - content: ""; + content: ''; position: absolute; bottom: 0; left: 50%; @@ -533,14 +538,22 @@ &__tabs { display: flex; - align-items: flex-start; + align-items: flex-end; justify-content: space-between; padding: 7px 10px; - margin-top: -55px; - gap: 8px; + margin-top: -81px; + height: 130px; overflow: hidden; margin-left: -2px; // aligns the pfp with content below + .account-role { + margin: 0 2px; + padding: 4px 0; + box-sizing: border-box; + min-width: 90px; + text-align: center; + } + &__buttons { display: flex; align-items: center; @@ -702,22 +715,22 @@ padding: 2px 6px; color: $darker-text-color; - &:hover, - &:active, - &:focus { - color: lighten($darker-text-color, 7%); - background-color: rgba($darker-text-color, 0.15); - } + &:hover, + &:active, + &:focus { + color: lighten($darker-text-color, 7%); + background-color: rgba($darker-text-color, 0.15); + } - &:focus { - background-color: rgba($darker-text-color, 0.3); - } + &:focus { + background-color: rgba($darker-text-color, 0.3); + } - &[disabled] { - color: darken($darker-text-color, 13%); - background-color: transparent; - cursor: default; - } + &[disabled] { + color: darken($darker-text-color, 13%); + background-color: transparent; + cursor: default; + } } .flex-spacer { @@ -736,8 +749,6 @@ display: block; box-sizing: border-box; width: calc(100% + 20px); - margin: 0; - margin-top: 5px; color: $secondary-text-color; background: $ui-base-color; padding: 10px; @@ -764,6 +775,7 @@ display: flex; align-items: center; flex-direction: column; + &__message { color: $darker-text-color; padding: 8px 0; @@ -774,6 +786,7 @@ text-align: center; margin-bottom: 16px; } + &__action { display: flex; justify-content: space-between; diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index 85af9afc8..feaff81f5 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -181,7 +181,11 @@ &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); + background-color: mix( + lighten($ui-base-color, 12%), + $ui-highlight-color, + 80% + ); .reactions-bar__item__count { color: lighten($highlight-text-color, 8%); diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 42a591931..907f820d6 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -286,7 +286,7 @@ $ui-header-height: 55px; &::before { display: block; - content: ""; + content: ''; position: absolute; bottom: -13px; left: 0; @@ -296,7 +296,11 @@ $ui-header-height: 55px; pointer-events: none; height: 28px; z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + background: radial-gradient( + ellipse, + rgba($ui-highlight-color, 0.23) 0%, + rgba($ui-highlight-color, 0) 60% + ); } } @@ -424,6 +428,7 @@ $ui-header-height: 55px; button { @extend .column-header__button; + background: transparent; text-align: center; padding: 10px 5px; @@ -435,10 +440,10 @@ $ui-header-height: 55px; } } - .layout-single-column .column-header__notif-cleaning-buttons { @media screen and (min-width: $no-gap-breakpoint) { - b, i { + b, + i { margin-right: 5px; } @@ -487,6 +492,7 @@ $ui-header-height: 55px; // notif cleaning drawer &.ncd { transition: none; + &.collapsed { max-height: 0; opacity: 0.7; @@ -575,8 +581,8 @@ $ui-header-height: 55px; font-size: inherit; flex: auto; background-color: $ui-base-color; - transition-property: background-color, box-shadow; transition: all 0.2s ease; + transition-property: background-color, box-shadow; &[disabled] { cursor: not-allowed; @@ -622,7 +628,8 @@ $ui-header-height: 55px; flex: 1 1 auto; align-items: center; justify-content: center; - @supports(display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -643,6 +650,7 @@ $ui-header-height: 55px; .follow_requests-unlocked_explanation { background: darken($ui-base-color, 4%); contain: initial; + flex-grow: 0; } .error-column { @@ -766,7 +774,7 @@ $ui-header-height: 55px; .column-select { &__control { - @include search-input(); + @include search-input; &::placeholder { color: lighten($darker-text-color, 4%); @@ -840,7 +848,8 @@ $ui-header-height: 55px; } &__menu { - @include search-popout(); + @include search-popout; + padding: 0; background: $ui-secondary-color; } @@ -916,7 +925,7 @@ $ui-header-height: 55px; p { font-size: 16px; - line-height: 24px; + line-height: 24px; font-weight: 400; color: $darker-text-color; } diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index aa2d52ed0..1c2e0aeb4 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -32,12 +32,12 @@ .spoiler-input { height: 0; transform-origin: bottom; - opacity: 0.0; + opacity: 0; &.spoiler-input--visible { height: 36px; margin-bottom: 11px; - opacity: 1.0; + opacity: 1; } input { @@ -59,8 +59,12 @@ color: $dark-text-color; } - &:focus { outline: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } + &:focus { + outline: 0; + } + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } } } @@ -90,7 +94,6 @@ .compose-form__sensitive-button { padding: 10px; padding-top: 0; - font-size: 14px; font-weight: 500; @@ -98,7 +101,7 @@ color: $highlight-text-color; } - input[type=checkbox] { + input[type='checkbox'] { display: none; } @@ -118,7 +121,9 @@ &.active { border-color: $highlight-text-color; - background: $highlight-text-color; + background: $highlight-text-color + url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>") + center center no-repeat; } } } @@ -137,7 +142,9 @@ margin-bottom: 5px; overflow: hidden; - & > .account.small { color: $inverted-text-color; } + & > .account.small { + color: $inverted-text-color; + } } .reply-indicator__cancel { @@ -147,19 +154,17 @@ .reply-indicator__content { position: relative; - margin: 10px 0; - padding: 0 12px; font-size: 14px; line-height: 20px; - color: $inverted-text-color; word-wrap: break-word; font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; overflow: hidden; + padding-top: 5px; + color: $inverted-text-color; + white-space: pre-wrap; - p, pre, blockquote { + p, + pre { margin-bottom: 20px; white-space: pre-wrap; @@ -168,80 +173,21 @@ } } - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, h2 { - font-weight: 700; - font-size: 18px; - } - - h2 { - font-size: 16px; - } - - h3, h4, h5 { - font-weight: 500; - } - - blockquote { - padding-left: 10px; - border-left: 3px solid $inverted-text-color; - color: $inverted-text-color; - white-space: normal; - - p:last-child { - margin-bottom: 0; - } - } - - b, strong { - font-weight: 700; - } - - em, i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - ul, ol { - margin-left: 1em; - - p { - margin: 0; - } - } - - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - a { color: $lighter-text-color; text-decoration: none; - &:hover { text-decoration: underline } + &:hover { + text-decoration: underline; + } &.mention { &:hover { text-decoration: none; - span { text-decoration: underline } + span { + text-decoration: underline; + } } } } @@ -321,7 +267,7 @@ font-size: 18px; line-height: 24px; text-align: center; - opacity: .8; + opacity: 0.8; } } @@ -331,19 +277,18 @@ } .autosuggest-textarea__suggestions { - display: block; - position: absolute; box-sizing: border-box; + display: none; + position: absolute; top: 100%; - border-radius: 0 0 4px 4px; - padding: 6px; width: 100%; - color: $inverted-text-color; - background: $ui-secondary-color; + z-index: 99; box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $inverted-text-color; font-size: 14px; - z-index: 99; - display: none; + padding: 6px; } .autosuggest-textarea__suggestions--visible { @@ -358,7 +303,9 @@ &:hover, &:focus, &:active, - &.selected { background: darken($ui-secondary-color, 10%) } + &.selected { + background: darken($ui-secondary-color, 10%); + } > .account, > .emoji, @@ -396,7 +343,9 @@ & > .account.small { .display-name { - & > span { color: $lighter-text-color } + & > span { + color: $lighter-text-color; + } } } } @@ -430,7 +379,9 @@ background-repeat: no-repeat; overflow: hidden; - & > .close { mix-blend-mode: difference } + & > .close { + mix-blend-mode: difference; + } } .icon-button { @@ -455,12 +406,22 @@ left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); } } .compose-form__upload__actions { - background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 180deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); display: flex; align-items: flex-start; justify-content: space-between; @@ -495,7 +456,7 @@ border-radius: 6px; width: 100%; height: 6px; - background: $ui-base-lighter-color; + background: darken($simple-background-color, 8%); } .upload-progress__tracker { @@ -543,7 +504,8 @@ margin: 0 3px; border-width: 0 0 0 1px; border-style: none none none solid; - border-color: transparent transparent transparent darken($simple-background-color, 24%); + border-color: transparent transparent transparent + darken($simple-background-color, 24%); padding: 0; width: 0; height: 27px; @@ -604,7 +566,9 @@ flex: 1 1 auto; color: $lighter-text-color; - &:not(:first-child) { margin-left: 10px } + &:not(:first-child) { + margin-left: 10px; + } strong { display: block; @@ -621,11 +585,15 @@ .privacy-dropdown__option__content { color: $primary-text-color; - strong { color: $primary-text-color } + strong { + color: $primary-text-color; + } } } - &.active:hover { background: lighten($ui-highlight-color, 4%) } + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } } .compose-form__publish { diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index 803e075c9..5c763764d 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -11,7 +11,11 @@ } .scrollable .account-card__bio::after { - background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); + background: linear-gradient( + to left, + lighten($ui-base-color, 8%), + transparent + ); } .filter-form { @@ -33,14 +37,13 @@ display: inline-block; padding: 6px 0; line-height: 18px; - cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; - input[type=radio], - input[type=checkbox] { + input[type='radio'], + input[type='checkbox'] { display: none; } diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index a4a1cfc84..52c7cd54a 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,15 +1,17 @@ -$doodleBg: #d9e1e8; +$doodle-background: #d9e1e8; + .doodle-modal { @extend .boost-modal; + width: unset; } .doodle-modal__container { - background: $doodleBg; + background: $doodle-background; text-align: center; line-height: 0; // remove weird gap under canvas canvas { - border: 5px solid $doodleBg; + border: 5px solid $doodle-background; } } @@ -24,7 +26,6 @@ $doodleBg: #d9e1e8; .doodle-toolbar { line-height: 1; - display: flex; flex-direction: column; flex-grow: 0; @@ -38,9 +39,11 @@ $doodleBg: #d9e1e8; margin-right: 2px; } - input[type="number"],input[type="text"] { + input[type='number'], + input[type='text'] { width: 40px; } + span.val { display: inline-block; text-align: left; @@ -52,7 +55,7 @@ $doodleBg: #d9e1e8; .doodle-palette { padding-right: 0 !important; border: 1px solid black; - line-height: .2rem; + line-height: 0.2rem; flex-grow: 0; background: white; @@ -60,14 +63,15 @@ $doodleBg: #d9e1e8; appearance: none; width: 1rem; height: 1rem; - margin: 0; padding: 0; + margin: 0; + padding: 0; text-align: center; color: black; text-shadow: 0 0 1px white; cursor: pointer; - box-shadow: inset 0 0 1px rgba(white, .5); + box-shadow: inset 0 0 1px rgba(white, 0.5); border: 1px solid black; - outline-offset:-1px; + outline-offset: -1px; &.foreground { outline: 1px dashed white; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 3e2604d4d..3e482774e 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -34,7 +34,8 @@ } @include single-column('screen and (max-width: 630px)') { - :root & { // Overrides `.wide` for single-column view + :root & { + // Overrides `.wide` for single-column view flex: auto; width: 100%; min-width: 0; @@ -43,16 +44,20 @@ } } - .react-swipeable-view-container & { height: 100% } + .react-swipeable-view-container & { + height: 100%; + } } .drawer--header { - display: flex; - flex-direction: row; - margin-bottom: 10px; flex: none; - background: lighten($ui-base-color, 8%); font-size: 16px; + background: lighten($ui-base-color, 8%); + margin-bottom: 10px; + display: flex; + flex-direction: row; + border-radius: 4px; + overflow: hidden; & > * { display: block; @@ -84,12 +89,18 @@ margin-bottom: 10px; flex: none; - @include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } + @include limited-single-column( + 'screen and (max-width: #{$no-gap-breakpoint})' + ) { + margin-bottom: 0; + } + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } } .search-popout { - @include search-popout(); + @include search-popout; } .navigation-bar { @@ -174,6 +185,7 @@ position: relative; overflow: hidden; display: flex; + border-radius: 4px; } .drawer__inner { @@ -196,7 +208,9 @@ } .drawer__inner__mastodon { - background: lighten($ui-base-color, 13%) 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-color)}"/></svg>') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) + 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-color)}"/></svg>') + no-repeat bottom / 100% auto; flex: 1; min-height: 47px; display: none; @@ -208,7 +222,6 @@ width: 85%; height: 100%; pointer-events: none; - user-drag: none; user-select: none; } @@ -244,13 +257,27 @@ @for $i from 0 through 3 { .mbstobon-#{$i} .drawer__inner__mastodon { @if $i == 3 { - background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); + background: url('~flavours/glitch/images/wave-drawer.png') + no-repeat + bottom / + 100% + auto, + lighten($ui-base-color, 13%); } @else { - background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); + background: url('~flavours/glitch/images/wave-drawer-glitched.png') + no-repeat + bottom / + 100% + auto, + lighten($ui-base-color, 13%); } & > .mastodon { - background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain; + background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png') + no-repeat + left + bottom / + contain; @if $i != 3 { filter: contrast(50%) brightness(50%); diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index c037e03f9..4427f2080 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -2,7 +2,7 @@ font-size: inherit; vertical-align: middle; object-fit: contain; - margin: -.2ex .15em .2ex; + margin: -0.2ex 0.15em 0.2ex; width: 16px; height: 16px; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 790650cfa..6bb9827b3 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -46,7 +46,7 @@ text-align: center; padding: 12px 4px; overflow: hidden; - transition: color .1s ease-out; + transition: color 0.1s ease-out; cursor: pointer; background: transparent; border: 0; @@ -174,7 +174,7 @@ &:hover::before { z-index: 0; - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -246,8 +246,8 @@ padding: 5px 6px; padding-top: 70px; - .emoji-mart-no-results-label { - margin-top: .2em; + .emoji-mart-no-results-label { + margin-top: 0.2em; } .emoji-mart-emoji:hover::before { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index d50316366..497b66b3e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1,1807 +1,4 @@ -.app-body { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -.animated-number { - display: inline-flex; - flex-direction: column; - align-items: stretch; - overflow: hidden; - position: relative; -} - -.link-button { - display: block; - font-size: 15px; - line-height: 20px; - color: $highlight-text-color; - border: 0; - background: transparent; - padding: 0; - cursor: pointer; - text-decoration: none; - - &--destructive { - color: $error-value-color; - } - - &:hover, - &:active { - text-decoration: underline; - } - - &:disabled { - color: $ui-primary-color; - cursor: default; - } -} - -.button { - background-color: darken($ui-highlight-color, 3%); - border: 10px none; - border-radius: 4px; - box-sizing: border-box; - color: $primary-text-color; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 15px; - font-weight: 500; - letter-spacing: 0; - line-height: 22px; - overflow: hidden; - padding: 7px 18px; - position: relative; - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - width: auto; - - &:active, - &:focus, - &:hover { - background-color: $ui-highlight-color; - } - - &--destructive { - &:active, - &:focus, - &:hover { - background-color: $error-red; - transition: none; - } - } - - &:disabled { - background-color: $ui-primary-color; - cursor: default; - } - - &.button-alternative { - color: $inverted-text-color; - background: $ui-primary-color; - - &:active, - &:focus, - &:hover { - background-color: lighten($ui-primary-color, 4%); - } - } - - &.button-alternative-2 { - background: $ui-base-lighter-color; - - &:active, - &:focus, - &:hover { - background-color: lighten($ui-base-lighter-color, 4%); - } - } - - &.button-secondary { - font-size: 16px; - line-height: 36px; - height: auto; - color: $darker-text-color; - text-transform: none; - background: transparent; - padding: 6px 17px; - border: 1px solid $ui-primary-color; - - &:active, - &:focus, - &:hover { - border-color: lighten($ui-primary-color, 4%); - color: lighten($darker-text-color, 4%); - text-decoration: none; - } - - &:disabled { - opacity: 0.5; - } - } - - &.button-tertiary { - background: transparent; - padding: 6px 17px; - color: $highlight-text-color; - border: 1px solid $highlight-text-color; - - &:active, - &:focus, - &:hover { - background: $ui-highlight-color; - color: $primary-text-color; - border: 0; - padding: 7px 18px; - } - - &:disabled { - opacity: 0.5; - } - - &.button--confirmation { - color: $valid-value-color; - border-color: $valid-value-color; - - &:active, - &:focus, - &:hover { - background: $valid-value-color; - color: $primary-text-color; - } - } - - &.button--destructive { - color: $error-value-color; - border-color: $error-value-color; - - &:active, - &:focus, - &:hover { - background: $error-value-color; - color: $primary-text-color; - } - } - } - - &.button--block { - display: block; - width: 100%; - } - - .layout-multiple-columns &.button--with-bell { - font-size: 12px; - padding: 0 8px; - } -} - -.icon-button { - display: inline-block; - padding: 0; - color: $action-button-color; - border: 0; - border-radius: 4px; - background: transparent; - cursor: pointer; - transition: all 100ms ease-in; - transition-property: background-color, color; - text-decoration: none; - - a { - color: inherit; - text-decoration: none; - } - - &:hover, - &:active, - &: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); - } - - &.disabled { - color: darken($action-button-color, 13%); - background-color: transparent; - cursor: default; - } - - &.active { - color: $highlight-text-color; - } - - &.copyable { - transition: background 300ms linear; - } - - &.copied { - background: $valid-value-color; - transition: none; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &.inverted { - color: $lighter-text-color; - - &:hover, - &:active, - &:focus { - color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); - } - - &:focus { - background-color: rgba($lighter-text-color, 0.3); - } - - &.disabled { - color: lighten($lighter-text-color, 7%); - background-color: transparent; - } - - &.active { - color: $highlight-text-color; - - &.disabled { - color: lighten($highlight-text-color, 13%); - } - } - } - - &.overlayed { - box-sizing: content-box; - background: rgba($base-overlay-background, 0.6); - color: rgba($primary-text-color, 0.7); - border-radius: 4px; - padding: 2px; - - &:hover { - background: rgba($base-overlay-background, 0.9); - } - } - - &--with-counter { - display: inline-flex; - align-items: center; - width: auto !important; - padding: 0 4px 0 2px; - } - - &__counter { - display: inline-block; - width: auto; - margin-left: 4px; - font-size: 12px; - font-weight: 500; - } -} - -.text-icon, -.text-icon-button { - font-weight: 600; - font-size: 11px; - line-height: 27px; - cursor: default; -} - -.text-icon-button { - color: $lighter-text-color; - border: 0; - border-radius: 4px; - background: transparent; - cursor: pointer; - padding: 0 3px; - 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); - } - - &.disabled { - color: lighten($lighter-text-color, 20%); - background-color: transparent; - cursor: default; - } - - &.active { - color: $highlight-text-color; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - -body > [data-popper-placement] { - z-index: 3; -} - -.invisible { - font-size: 0; - line-height: 0; - display: inline-block; - width: 0; - height: 0; - position: absolute; - - img, - svg { - margin: 0 !important; - border: 0 !important; - padding: 0 !important; - width: 0 !important; - height: 0 !important; - } -} - -.ellipsis { - &::after { - content: "…"; - } -} - -.notification__favourite-icon-wrapper { - left: 0; - position: absolute; - - .fa.star-icon { - color: $gold-star; - } -} - -.icon-button.star-icon.active { - color: $gold-star; -} - -.icon-button.bookmark-icon.active { - color: $red-bookmark; -} - -.no-reduce-motion .icon-button.star-icon { - &.activate { - & > .fa-star { - animation: spring-rotate-in 1s linear; - } - } - - &.deactivate { - & > .fa-star { - animation: spring-rotate-out 1s linear; - } - } -} - -.notification__display-name { - color: inherit; - font-weight: 500; - text-decoration: none; - - &:hover { - color: $primary-text-color; - text-decoration: underline; - } -} - -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - a { - color: inherit; - text-decoration: inherit; - } - - strong { - display: block; - } - - > a:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } -} - -.display-name__html { - font-weight: 500; -} - -.display-name__account { - font-size: 14px; -} - -.image-loader { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ - - * { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ - } - - &::-webkit-scrollbar, - *::-webkit-scrollbar { - width: 0; - height: 0; - background: transparent; /* Chrome/Safari/Webkit */ - } - - .image-loader__preview-canvas { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - background: url('~images/void.png') repeat; - object-fit: contain; - } - - .loading-bar__container { - position: relative; - } - - .loading-bar { - position: absolute; - } - - &.image-loader--amorphous .image-loader__preview-canvas { - display: none; - } -} - -.zoomable-image { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - img { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - width: auto; - height: auto; - object-fit: contain; - } -} - -.dropdown-animation { - animation: dropdown 300ms cubic-bezier(0.1, 0.7, 0.1, 1); - - @keyframes dropdown { - from { - opacity: 0; - transform: scaleX(0.85) scaleY(0.75); - } - - to { - opacity: 1; - transform: scaleX(1) scaleY(1); - } - } - - &.top { - transform-origin: bottom; - } - - &.right { - transform-origin: left; - } - - &.bottom { - transform-origin: top; - } - - &.left { - transform-origin: right; - } - - .reduce-motion & { - animation: none; - } -} - -.dropdown { - display: inline-block; -} - -.dropdown__content { - display: none; - position: absolute; -} - -.dropdown-menu__separator { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - margin: 5px 7px 6px; - height: 0; -} - -.dropdown-menu { - background: $ui-secondary-color; - padding: 4px 0; - border-radius: 4px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - z-index: 9999; - - &__text-button { - display: inline; - color: inherit; - background: transparent; - border: 0; - margin: 0; - padding: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; - - &:focus { - outline: 1px dotted; - } - } - - &__container { - &__header { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - padding: 4px 14px; - padding-bottom: 8px; - font-size: 13px; - line-height: 18px; - color: $inverted-text-color; - } - - &__list { - list-style: none; - - &--scrollable { - max-height: 300px; - overflow-y: scroll; - } - } - - &--loading { - display: flex; - align-items: center; - justify-content: center; - padding: 30px 45px; - } - } -} - -.dropdown-menu__arrow { - position: absolute; - - &::before { - content: ''; - display: block; - width: 14px; - height: 5px; - background-color: $ui-secondary-color; - mask-image: url("data:image/svg+xml;utf8,<svg width='14' height='5' xmlns='http://www.w3.org/2000/svg'><path d='M7 0L0 5h14L7 0z' fill='white'/></svg>"); - } - - &.top { - bottom: -5px; - - &::before { - transform: rotate(180deg); - } - } - - &.right { - left: -9px; - - &::before { - transform: rotate(-90deg); - } - } - - &.bottom { - top: -5px; - } - - &.left { - right: -9px; - - &::before { - transform: rotate(90deg); - } - } -} - -.dropdown-menu__item { - font-size: 13px; - line-height: 18px; - display: block; - color: $inverted-text-color; - - a, - button { - font-family: inherit; - font-size: inherit; - line-height: inherit; - display: block; - width: 100%; - padding: 4px 14px; - border: 0; - margin: 0; - box-sizing: border-box; - text-decoration: none; - background: $ui-secondary-color; - color: inherit; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: inherit; - - &:focus, - &:hover, - &:active { - background: $ui-highlight-color; - color: $secondary-text-color; - outline: 0; - } - } -} - -.dropdown-menu__item--text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 4px 14px; -} - -.dropdown-menu__item.edited-timestamp__history__item { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - - &:last-child { - border-bottom: 0; - } - - &.dropdown-menu__item--text, - a, - button { - padding: 8px 14px; - } -} - -.inline-account { - display: inline-flex; - align-items: center; - vertical-align: top; - - .account__avatar { - margin-right: 5px; - border-radius: 50%; - } - - strong { - font-weight: 600; - } -} - -.dropdown--active .dropdown__content { - display: block; - line-height: 18px; - max-width: 311px; - right: 0; - text-align: left; - z-index: 9999; - - & > ul { - list-style: none; - background: $ui-secondary-color; - padding: 4px 0; - border-radius: 4px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); - min-width: 140px; - position: relative; - } - - &.dropdown__right { - right: 0; - } - - &.dropdown__left { - & > ul { - left: -98px; - } - } - - & > ul > li > a { - font-size: 13px; - line-height: 18px; - display: block; - padding: 4px 14px; - box-sizing: border-box; - text-decoration: none; - background: $ui-secondary-color; - color: $inverted-text-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus { - outline: 0; - } - - &:hover { - background: $ui-highlight-color; - color: $secondary-text-color; - } - } -} - -.dropdown__icon { - vertical-align: middle; -} - -.static-content { - padding: 10px; - padding-top: 20px; - color: $dark-text-color; - - h1 { - font-size: 16px; - font-weight: 500; - margin-bottom: 40px; - text-align: center; - } - - p { - font-size: 13px; - margin-bottom: 20px; - } -} - -.column, -.drawer { - flex: 1 1 100%; - overflow: hidden; -} - -@media screen and (min-width: 631px) { - .columns-area { - padding: 0; - } - - .column, - .drawer { - flex: 0 0 auto; - padding: 10px; - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - - .columns-area > div { - .column, - .drawer { - padding-left: 5px; - padding-right: 5px; - } - } -} - -.tabs-bar { - box-sizing: border-box; - display: flex; - background: lighten($ui-base-color, 8%); - flex: 0 0 auto; - overflow-y: auto; -} - -.tabs-bar__link { - display: block; - flex: 1 1 auto; - padding: 15px 10px; - padding-bottom: 13px; - color: $primary-text-color; - text-decoration: none; - text-align: center; - font-size: 14px; - font-weight: 500; - border-bottom: 2px solid lighten($ui-base-color, 8%); - transition: all 50ms linear; - transition-property: border-bottom, background, color; - - .fa { - font-weight: 400; - font-size: 16px; - } - - &:hover, - &:focus, - &:active { - @include multi-columns('screen and (min-width: 631px)') { - background: lighten($ui-base-color, 14%); - border-bottom-color: lighten($ui-base-color, 14%); - } - } - - &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $highlight-text-color; - } - - span { - margin-left: 5px; - display: none; - } - - span.icon { - margin-left: 0; - display: inline; - } -} - -.icon-with-badge { - position: relative; - - &__badge { - position: absolute; - left: 9px; - top: -13px; - background: $ui-highlight-color; - border: 2px solid lighten($ui-base-color, 8%); - padding: 1px 6px; - border-radius: 6px; - font-size: 10px; - font-weight: 500; - line-height: 14px; - color: $primary-text-color; - } - - &__issue-badge { - position: absolute; - left: 11px; - bottom: 1px; - display: block; - background: $error-red; - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - } -} - -.column-link--transparent .icon-with-badge__badge { - border-color: darken($ui-base-color, 8%); -} - -.scrollable { - overflow-y: scroll; - overflow-x: hidden; - flex: 1 1 auto; - -webkit-overflow-scrolling: touch; - - &.optionally-scrollable { - overflow-y: auto; - } - - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } - - &--flex { - display: flex; - flex-direction: column; - } - - &__append { - flex: 1 1 auto; - position: relative; - min-height: 120px; - } - - .scrollable { - flex: 1 1 auto; - } -} - -.scrollable.fullscreen { - @supports(display: grid) { // hack to fix Chrome <57 - contain: none; - } -} - -.react-toggle { - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - padding: 0; - user-select: none; - -webkit-tap-highlight-color: rgba($base-overlay-background, 0); - -webkit-tap-highlight-color: transparent; -} - -.react-toggle-screenreader-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-track { - width: 50px; - height: 24px; - padding: 0; - border-radius: 30px; - background-color: $ui-base-color; - transition: background-color 0.2s ease; -} - -.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($ui-base-color, 10%); -} - -.react-toggle--checked .react-toggle-track { - background-color: darken($ui-highlight-color, 2%); -} - -.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: $ui-highlight-color; -} - -.react-toggle-track-check { - position: absolute; - width: 14px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 8px; - opacity: 0; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle-track-x { - position: absolute; - width: 10px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - -.react-toggle-thumb { - position: absolute; - top: 1px; - left: 1px; - width: 22px; - height: 22px; - border: 1px solid $ui-base-color; - border-radius: 50%; - background-color: darken($simple-background-color, 2%); - box-sizing: border-box; - transition: all 0.25s ease; - transition-property: border-color, left; -} - -.react-toggle--checked .react-toggle-thumb { - left: 27px; - border-color: $ui-highlight-color; -} - -.getting-started__wrapper, -.getting_started, -.flex-spacer { - background: $ui-base-color; -} - -.getting-started__wrapper { - position: relative; - overflow-y: auto; -} - -.flex-spacer { - flex: 1 1 auto; -} - -.getting-started { - background: $ui-base-color; - flex: 1 0 auto; - - p { - color: $secondary-text-color; - } - - a { - color: $dark-text-color; - } - - &__trends { - flex: 0 1 auto; - opacity: 1; - animation: fade 150ms linear; - margin-top: 10px; - - h4 { - border-bottom: 1px solid lighten($ui-base-color, 8%); - padding: 10px; - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - - a { - color: $darker-text-color; - text-decoration: none; - } - } - - @media screen and (max-height: 810px) { - .trends__item:nth-of-type(3) { - display: none; - } - } - - @media screen and (max-height: 720px) { - .trends__item:nth-of-type(2) { - display: none; - } - } - - @media screen and (max-height: 670px) { - display: none; - } - - .trends__item { - border-bottom: 0; - padding: 10px; - - &__current { - color: $darker-text-color; - } - } - } -} - -.column-link__badge { - display: inline-block; - border-radius: 4px; - font-size: 12px; - line-height: 19px; - font-weight: 500; - background: $ui-base-color; - padding: 4px 8px; - margin: -6px 10px; -} - -.keyboard-shortcuts { - padding: 8px 0 0; - overflow: hidden; - - thead { - position: absolute; - left: -9999px; - } - - td { - padding: 0 10px 8px; - } - - kbd { - display: inline-block; - padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); - } -} - -.setting-text { - color: $darker-text-color; - background: transparent; - border: 0; - border-bottom: 2px solid $ui-primary-color; - outline: 0; - box-sizing: border-box; - display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; - width: 100%; - - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; - } - - @include limited-single-column('screen and (max-width: 600px)') { - font-size: 16px; - } - - &.light { - color: $inverted-text-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); - - &:focus, - &:active { - color: $inverted-text-color; - border-bottom-color: $ui-highlight-color; - } - } -} - -button.icon-button i.fa-retweet { - background-position: 0 0; - height: 19px; - transition: background-position 0.9s steps(10); - transition-duration: 0s; - vertical-align: middle; - width: 22px; - - &::before { - display: none !important; - } -} - -button.icon-button.active i.fa-retweet { - transition-duration: 0.9s; - background-position: 0 100%; -} - -.reduce-motion button.icon-button i.fa-retweet, -.reduce-motion button.icon-button.active i.fa-retweet { - transition: none; -} - -.reduce-motion button.icon-button.disabled i.fa-retweet { - color: darken($action-button-color, 13%); -} - -.load-more { - display: block; - color: $dark-text-color; - background-color: transparent; - border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; - margin: 0; - padding: 15px; - box-sizing: border-box; - width: 100%; - clear: both; - text-decoration: none; - - &:hover { - background: lighten($ui-base-color, 2%); - } -} - -.load-gap { - border-bottom: 1px solid lighten($ui-base-color, 8%); -} - -.timeline-hint { - text-align: center; - color: $darker-text-color; - padding: 15px; - box-sizing: border-box; - width: 100%; - cursor: default; - - strong { - font-weight: 500; - } - - a { - color: $highlight-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - color: lighten($highlight-text-color, 4%); - } - } -} - -.missing-indicator { - padding-top: 20px + 48px; - - .regeneration-indicator__figure { - background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg'); - } -} - -.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; -} - -.notification__dismiss-overlay { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible - - z-index: 999; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - display: flex; - - .wrappy { - width: $dismiss-overlay-width; - align-self: stretch; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); - box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; - } - - .ckbox { - border: 2px solid $ui-primary-color; - border-radius: 2px; - width: 30px; - height: 30px; - font-size: 20px; - color: $darker-text-color; - text-shadow: 0 0 5px black; - display: flex; - justify-content: center; - align-items: center; - } - - &:focus { - outline: 0 !important; - - .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; - } - } -} - -.text-btn { - display: inline-block; - padding: 0; - font-family: inherit; - font-size: inherit; - color: inherit; - border: 0; - background: transparent; - cursor: pointer; -} - -.loading-indicator { - color: $dark-text-color; - font-size: 12px; - font-weight: 400; - text-transform: uppercase; - overflow: visible; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; - justify-content: center; -} - -.circular-progress { - color: lighten($ui-base-color, 26%); - animation: 1.4s linear 0s infinite normal none running simple-rotate; - - circle { - stroke: currentColor; - stroke-dasharray: 80px, 200px; - stroke-dashoffset: 0; - animation: circular-progress 1.4s ease-in-out infinite; - } -} - -@keyframes circular-progress { - 0% { - stroke-dasharray: 1px, 200px; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -15px; - } - - 100% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -125px; - } -} - -@keyframes simple-rotate { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes spring-rotate-in { - 0% { - transform: rotate(0deg); - } - - 30% { - transform: rotate(-484.8deg); - } - - 60% { - transform: rotate(-316.7deg); - } - - 90% { - transform: rotate(-375deg); - } - - 100% { - transform: rotate(-360deg); - } -} - -@keyframes spring-rotate-out { - 0% { - transform: rotate(-360deg); - } - - 30% { - transform: rotate(124.8deg); - } - - 60% { - transform: rotate(-43.27deg); - } - - 90% { - transform: rotate(15deg); - } - - 100% { - transform: rotate(0deg); - } -} - -.spoiler-button { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - z-index: 100; - - &--minified { - display: flex; - left: 4px; - top: 4px; - width: auto; - height: auto; - align-items: center; - } - - &--click-thru { - pointer-events: none; - } - - &--hidden { - display: none; - } - - &__overlay { - display: block; - background: transparent; - width: 100%; - height: 100%; - border: 0; - - &__label { - display: inline-block; - background: rgba($base-overlay-background, 0.5); - border-radius: 8px; - padding: 8px 12px; - color: $primary-text-color; - font-weight: 500; - font-size: 14px; - } - - &:hover, - &:focus, - &:active { - .spoiler-button__overlay__label { - background: rgba($base-overlay-background, 0.8); - } - } - - &:disabled { - .spoiler-button__overlay__label { - background: rgba($base-overlay-background, 0.5); - } - } - } -} - -.setting-toggle { - display: block; - line-height: 24px; -} - -.setting-toggle__label, -.setting-meta__label { - color: $darker-text-color; - display: inline-block; - margin-bottom: 14px; - margin-left: 8px; - vertical-align: middle; -} - -.column-settings__row .radio-button { - display: block; -} - -.setting-meta__label { - float: right; -} - -@keyframes heartbeat { - from { - transform: scale(1); - transform-origin: center center; - animation-timing-function: ease-out; - } - - 10% { - transform: scale(0.91); - animation-timing-function: ease-in; - } - - 17% { - transform: scale(0.98); - animation-timing-function: ease-out; - } - - 33% { - transform: scale(0.87); - animation-timing-function: ease-in; - } - - 45% { - transform: scale(1); - animation-timing-function: ease-out; - } -} - -.pulse-loading { - animation: heartbeat 1.5s ease-in-out infinite both; -} - -.upload-area { - align-items: center; - background: rgba($base-overlay-background, 0.8); - display: flex; - height: 100%; - justify-content: center; - left: 0; - opacity: 0; - position: absolute; - top: 0; - visibility: hidden; - width: 100%; - z-index: 2000; - - * { - pointer-events: none; - } -} - -.upload-area__drop { - width: 320px; - height: 160px; - display: flex; - box-sizing: border-box; - position: relative; - padding: 8px; -} - -.upload-area__background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); -} - -.upload-area__content { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - color: $secondary-text-color; - font-size: 18px; - font-weight: 500; - border: 2px dashed $ui-base-lighter-color; - border-radius: 4px; -} - -.dropdown--active .emoji-button img { - opacity: 1; - filter: none; -} - -.loading-bar { - background-color: $ui-highlight-color; - height: 3px; - position: fixed; - top: 0; - left: 0; - z-index: 9999; -} - -.icon-badge-wrapper { - position: relative; -} - -.icon-badge { - position: absolute; - display: block; - right: -.25em; - top: -.25em; - background-color: $ui-highlight-color; - border-radius: 50%; - font-size: 75%; - width: 1em; - height: 1em; -} - -.conversation { - display: flex; - border-bottom: 1px solid lighten($ui-base-color, 8%); - padding: 5px; - padding-bottom: 0; - - &:focus { - background: lighten($ui-base-color, 2%); - outline: 0; - } - - &__avatar { - flex: 0 0 auto; - padding: 10px; - padding-top: 12px; - position: relative; - cursor: pointer; - } - - &__unread { - display: inline-block; - background: $highlight-text-color; - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - margin: -.1ex .15em .1ex; - } - - &__content { - flex: 1 1 auto; - padding: 10px 5px; - padding-right: 15px; - overflow: hidden; - - &__info { - overflow: hidden; - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - } - - &__relative-time { - font-size: 15px; - color: $darker-text-color; - padding-left: 15px; - } - - &__names { - color: $darker-text-color; - font-size: 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 4px; - flex-basis: 90px; - flex-grow: 1; - - a { - color: $primary-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - .status__content { - margin: 0; - } - } - - &--unread { - background: lighten($ui-base-color, 2%); - - &:focus { - background: lighten($ui-base-color, 4%); - } - - .conversation__content__info { - font-weight: 700; - } - - .conversation__content__relative-time { - color: $primary-text-color; - } - } -} - -.ui .flash-message { - margin-top: 10px; - margin-left: auto; - margin-right: auto; - margin-bottom: 0; - min-width: 75%; -} - -::-webkit-scrollbar-thumb { - border-radius: 0; -} - -noscript { - text-align: center; - - img { - width: 200px; - opacity: 0.5; - animation: flicker 4s infinite; - } - - div { - font-size: 14px; - margin: 30px auto; - color: $secondary-text-color; - max-width: 400px; - - a { - color: $highlight-text-color; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - - a { - word-break: break-word; - } - } -} - -@keyframes flicker { - 0% { opacity: 1; } - 30% { opacity: 0.75; } - 100% { opacity: 1; } -} - +@import 'misc'; @import 'boost'; @import 'accounts'; @import 'domains'; diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index db2b9f154..52516cfb5 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -11,12 +11,14 @@ max-height: 450px; overflow: hidden; - label, legend { + label, + legend { display: block; font-size: 14px; } - .boolean label, .radio_buttons label { + .boolean label, + .radio_buttons label { position: relative; padding-left: 28px; padding-top: 3px; @@ -58,7 +60,7 @@ cursor: pointer; text-decoration: none; outline: none; - transition: background .3s; + transition: background 0.3s; .text-icon-button { color: inherit; @@ -74,7 +76,8 @@ color: $primary-text-color; } - &.close, &.close:hover { + &.close, + &.close:hover { background: $error-value-color; color: $primary-text-color; } @@ -91,7 +94,7 @@ .glitch.local-settings__page { display: block; flex: auto; - padding: 15px 20px 15px 20px; + padding: 15px 20px; width: 360px; overflow-y: auto; } @@ -110,6 +113,10 @@ text-decoration: none; } } + + #mastodon-settings--collapsed-auto-height { + width: calc(4ch + 20px); + } } .glitch.local-settings__page__item.string, diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 9776e2265..6d6b8bc0e 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -348,7 +348,7 @@ padding: 0; border: 0; font-size: 0; - transition: opacity .2s ease-in-out; + transition: opacity 0.2s ease-in-out; &.active { opacity: 1; @@ -372,7 +372,6 @@ .video-player__volume__handle { bottom: 23px; } - } .audio-player { @@ -506,10 +505,15 @@ left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.85) 0, + rgba($base-shadow-color, 0.45) 60%, + transparent + ); padding: 0 15px; opacity: 0; - transition: opacity .1s ease; + transition: opacity 0.1s ease; &.active { opacity: 1; @@ -591,7 +595,6 @@ .player-button { display: inline-block; outline: 0; - flex: 0 0 auto; background: transparent; padding: 5px; @@ -655,7 +658,7 @@ } &::before { - content: ""; + content: ''; width: 50px; background: rgba($white, 0.35); border-radius: 4px; @@ -725,7 +728,7 @@ position: relative; &::before { - content: ""; + content: ''; width: 100%; background: rgba($white, 0.35); border-radius: 4px; @@ -762,7 +765,7 @@ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); .no-reduce-motion & { - transition: opacity .1s ease; + transition: opacity 0.1s ease; } &.active { diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss deleted file mode 100644 index e69de29bb..000000000 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ /dev/null diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss new file mode 100644 index 000000000..86b8b99c1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -0,0 +1,1814 @@ +.app-body { + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; +} + +.animated-number { + display: inline-flex; + flex-direction: column; + align-items: stretch; + overflow: hidden; + position: relative; +} + +.link-button { + display: block; + font-size: 15px; + line-height: 20px; + color: $highlight-text-color; + border: 0; + background: transparent; + padding: 0; + cursor: pointer; + text-decoration: none; + + &--destructive { + color: $error-value-color; + } + + &:hover, + &:active { + text-decoration: underline; + } + + &:disabled { + color: $ui-primary-color; + cursor: default; + } +} + +.button { + background-color: darken($ui-highlight-color, 3%); + border: 10px none; + border-radius: 4px; + box-sizing: border-box; + color: $primary-text-color; + cursor: pointer; + display: inline-block; + font-family: inherit; + font-size: 15px; + font-weight: 500; + letter-spacing: 0; + line-height: 22px; + overflow: hidden; + padding: 7px 18px; + position: relative; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + width: auto; + + &:active, + &:focus, + &:hover { + background-color: $ui-highlight-color; + } + + &--destructive { + &:active, + &:focus, + &:hover { + background-color: $error-red; + transition: none; + } + } + + &:disabled { + background-color: $ui-primary-color; + cursor: default; + } + + &.button-alternative { + color: $inverted-text-color; + background: $ui-primary-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-primary-color, 4%); + } + } + + &.button-alternative-2 { + background: $ui-base-lighter-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-base-lighter-color, 4%); + } + } + + &.button-secondary { + font-size: 16px; + line-height: 36px; + height: auto; + color: $darker-text-color; + text-transform: none; + background: transparent; + padding: 6px 17px; + border: 1px solid $ui-primary-color; + + &:active, + &:focus, + &:hover { + border-color: lighten($ui-primary-color, 4%); + color: lighten($darker-text-color, 4%); + text-decoration: none; + } + + &:disabled { + opacity: 0.5; + } + } + + &.button-tertiary { + background: transparent; + padding: 6px 17px; + color: $highlight-text-color; + border: 1px solid $highlight-text-color; + + &:active, + &:focus, + &:hover { + background: $ui-highlight-color; + color: $primary-text-color; + border: 0; + padding: 7px 18px; + } + + &:disabled { + opacity: 0.5; + } + + &.button--confirmation { + color: $valid-value-color; + border-color: $valid-value-color; + + &:active, + &:focus, + &:hover { + background: $valid-value-color; + color: $primary-text-color; + } + } + + &.button--destructive { + color: $error-value-color; + border-color: $error-value-color; + + &:active, + &:focus, + &:hover { + background: $error-value-color; + color: $primary-text-color; + } + } + } + + &.button--block { + display: block; + width: 100%; + } + + .layout-multiple-columns &.button--with-bell { + font-size: 12px; + padding: 0 8px; + } +} + +.icon-button { + display: inline-block; + padding: 0; + color: $action-button-color; + border: 0; + border-radius: 4px; + background: transparent; + cursor: pointer; + transition: all 100ms ease-in; + transition-property: background-color, color; + text-decoration: none; + + a { + color: inherit; + text-decoration: none; + } + + &:hover, + &:active, + &: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); + } + + &.disabled { + color: darken($action-button-color, 13%); + background-color: transparent; + cursor: default; + } + + &.active { + color: $highlight-text-color; + } + + &.copyable { + transition: background 300ms linear; + } + + &.copied { + background: $valid-value-color; + transition: none; + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &.inverted { + color: $lighter-text-color; + + &:hover, + &:active, + &:focus { + color: darken($lighter-text-color, 7%); + background-color: rgba($lighter-text-color, 0.15); + } + + &:focus { + background-color: rgba($lighter-text-color, 0.3); + } + + &.disabled { + color: lighten($lighter-text-color, 7%); + background-color: transparent; + } + + &.active { + color: $highlight-text-color; + + &.disabled { + color: lighten($highlight-text-color, 13%); + } + } + } + + &.overlayed { + box-sizing: content-box; + background: rgba($base-overlay-background, 0.6); + color: rgba($primary-text-color, 0.7); + border-radius: 4px; + padding: 2px; + + &:hover { + background: rgba($base-overlay-background, 0.9); + } + } + + &--with-counter { + display: inline-flex; + align-items: center; + width: auto !important; + padding: 0 4px 0 2px; + } + + &__counter { + display: inline-block; + width: auto; + margin-left: 4px; + font-size: 12px; + font-weight: 500; + } +} + +.text-icon, +.text-icon-button { + font-weight: 600; + font-size: 11px; + line-height: 27px; + cursor: default; +} + +.text-icon-button { + color: $lighter-text-color; + border: 0; + border-radius: 4px; + background: transparent; + cursor: pointer; + padding: 0 3px; + 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); + } + + &.disabled { + color: lighten($lighter-text-color, 20%); + background-color: transparent; + cursor: default; + } + + &.active { + color: $highlight-text-color; + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } +} + +body > [data-popper-placement] { + z-index: 3; +} + +.invisible { + font-size: 0; + line-height: 0; + display: inline-block; + width: 0; + height: 0; + position: absolute; + + img, + svg { + margin: 0 !important; + border: 0 !important; + padding: 0 !important; + width: 0 !important; + height: 0 !important; + } +} + +.ellipsis { + &::after { + content: '…'; + } +} + +.notification__favourite-icon-wrapper { + left: 0; + position: absolute; + + .fa.star-icon { + color: $gold-star; + } +} + +.icon-button.star-icon.active { + color: $gold-star; +} + +.icon-button.bookmark-icon.active { + color: $red-bookmark; +} + +.no-reduce-motion .icon-button.star-icon { + &.activate { + & > .fa-star { + animation: spring-rotate-in 1s linear; + } + } + + &.deactivate { + & > .fa-star { + animation: spring-rotate-out 1s linear; + } + } +} + +.notification__display-name { + color: inherit; + font-weight: 500; + text-decoration: none; + + &:hover { + color: $primary-text-color; + text-decoration: underline; + } +} + +.display-name { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + a { + color: inherit; + text-decoration: inherit; + } + + strong { + display: block; + } + + > a:hover { + strong { + text-decoration: underline; + } + } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } +} + +.display-name__html { + font-weight: 500; +} + +.display-name__account { + font-size: 14px; +} + +.image-loader { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE 10+ */ + + * { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE 10+ */ + } + + &::-webkit-scrollbar, + *::-webkit-scrollbar { + width: 0; + height: 0; + background: transparent; /* Chrome/Safari/Webkit */ + } + + .image-loader__preview-canvas { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + background: url('~images/void.png') repeat; + object-fit: contain; + } + + .loading-bar__container { + position: relative; + } + + .loading-bar { + position: absolute; + } + + &.image-loader--amorphous .image-loader__preview-canvas { + display: none; + } +} + +.zoomable-image { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + img { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + width: auto; + height: auto; + object-fit: contain; + } +} + +.dropdown-animation { + animation: dropdown 300ms cubic-bezier(0.1, 0.7, 0.1, 1); + + @keyframes dropdown { + from { + opacity: 0; + transform: scaleX(0.85) scaleY(0.75); + } + + to { + opacity: 1; + transform: scaleX(1) scaleY(1); + } + } + + &.top { + transform-origin: bottom; + } + + &.right { + transform-origin: left; + } + + &.bottom { + transform-origin: top; + } + + &.left { + transform-origin: right; + } + + .reduce-motion & { + animation: none; + } +} + +.dropdown { + display: inline-block; +} + +.dropdown__content { + display: none; + position: absolute; +} + +.dropdown-menu__separator { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + margin: 5px 7px 6px; + height: 0; +} + +.dropdown-menu { + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + z-index: 9999; + + &__text-button { + display: inline; + color: inherit; + background: transparent; + border: 0; + margin: 0; + padding: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + + &:focus { + outline: 1px dotted; + } + } + + &__container { + &__header { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + padding: 4px 14px; + padding-bottom: 8px; + font-size: 13px; + line-height: 18px; + color: $inverted-text-color; + } + + &__list { + list-style: none; + + &--scrollable { + max-height: 300px; + overflow-y: scroll; + } + } + + &--loading { + display: flex; + align-items: center; + justify-content: center; + padding: 30px 45px; + } + } +} + +.dropdown-menu__arrow { + position: absolute; + + &::before { + content: ''; + display: block; + width: 14px; + height: 5px; + background-color: $ui-secondary-color; + mask-image: url("data:image/svg+xml;utf8,<svg width='14' height='5' xmlns='http://www.w3.org/2000/svg'><path d='M7 0L0 5h14L7 0z' fill='white'/></svg>"); + } + + &.top { + bottom: -5px; + + &::before { + transform: rotate(180deg); + } + } + + &.right { + left: -9px; + + &::before { + transform: rotate(-90deg); + } + } + + &.bottom { + top: -5px; + } + + &.left { + right: -9px; + + &::before { + transform: rotate(90deg); + } + } +} + +.dropdown-menu__item { + font-size: 13px; + line-height: 18px; + display: block; + color: $inverted-text-color; + + a, + button { + font-family: inherit; + font-size: inherit; + line-height: inherit; + display: block; + width: 100%; + padding: 4px 14px; + border: 0; + margin: 0; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: inherit; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: inherit; + + &:focus, + &:hover, + &:active { + background: $ui-highlight-color; + color: $secondary-text-color; + outline: 0; + } + } +} + +.dropdown-menu__item--text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 4px 14px; +} + +.dropdown-menu__item.edited-timestamp__history__item { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &.dropdown-menu__item--text, + a, + button { + padding: 8px 14px; + } +} + +.inline-account { + display: inline-flex; + align-items: center; + vertical-align: top; + + .account__avatar { + margin-right: 5px; + border-radius: 50%; + } + + strong { + font-weight: 600; + } +} + +.dropdown--active .dropdown__content { + display: block; + line-height: 18px; + max-width: 311px; + right: 0; + text-align: left; + z-index: 9999; + + & > ul { + list-style: none; + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + min-width: 140px; + position: relative; + } + + &.dropdown__right { + right: 0; + } + + &.dropdown__left { + & > ul { + left: -98px; + } + } + + & > ul > li > a { + font-size: 13px; + line-height: 18px; + display: block; + padding: 4px 14px; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: $inverted-text-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:focus { + outline: 0; + } + + &:hover { + background: $ui-highlight-color; + color: $secondary-text-color; + } + } +} + +.dropdown__icon { + vertical-align: middle; +} + +.static-content { + padding: 10px; + padding-top: 20px; + color: $dark-text-color; + + h1 { + font-size: 16px; + font-weight: 500; + margin-bottom: 40px; + text-align: center; + } + + p { + font-size: 13px; + margin-bottom: 20px; + } +} + +.column, +.drawer { + flex: 1 1 100%; + overflow: hidden; +} + +@media screen and (min-width: 631px) { + .columns-area { + padding: 0; + } + + .column, + .drawer { + flex: 0 0 auto; + padding: 10px; + padding-left: 5px; + padding-right: 5px; + + &:first-child { + padding-left: 10px; + } + + &:last-child { + padding-right: 10px; + } + } + + .columns-area > div { + .column, + .drawer { + padding-left: 5px; + padding-right: 5px; + } + } +} + +.tabs-bar { + box-sizing: border-box; + display: flex; + background: lighten($ui-base-color, 8%); + flex: 0 0 auto; + overflow-y: auto; +} + +.tabs-bar__link { + display: block; + flex: 1 1 auto; + padding: 15px 10px; + padding-bottom: 13px; + color: $primary-text-color; + text-decoration: none; + text-align: center; + font-size: 14px; + font-weight: 500; + border-bottom: 2px solid lighten($ui-base-color, 8%); + transition: all 50ms linear; + transition-property: border-bottom, background, color; + + .fa { + font-weight: 400; + font-size: 16px; + } + + &:hover, + &:focus, + &:active { + @include multi-columns('screen and (min-width: 631px)') { + background: lighten($ui-base-color, 14%); + border-bottom-color: lighten($ui-base-color, 14%); + } + } + + &.active { + border-bottom: 2px solid $ui-highlight-color; + color: $highlight-text-color; + } + + span { + margin-left: 5px; + display: none; + } + + span.icon { + margin-left: 0; + display: inline; + } +} + +.icon-with-badge { + position: relative; + + &__badge { + position: absolute; + left: 9px; + top: -13px; + background: $ui-highlight-color; + border: 2px solid lighten($ui-base-color, 8%); + padding: 1px 6px; + border-radius: 6px; + font-size: 10px; + font-weight: 500; + line-height: 14px; + color: $primary-text-color; + } + + &__issue-badge { + position: absolute; + left: 11px; + bottom: 1px; + display: block; + background: $error-red; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + } +} + +.column-link--transparent .icon-with-badge__badge { + border-color: darken($ui-base-color, 8%); +} + +.scrollable { + overflow-y: scroll; + overflow-x: hidden; + flex: 1 1 auto; + -webkit-overflow-scrolling: touch; + + &.optionally-scrollable { + overflow-y: auto; + } + + @supports (display: grid) { + // hack to fix Chrome <57 + contain: strict; + } + + &--flex { + display: flex; + flex-direction: column; + } + + &__append { + flex: 1 1 auto; + position: relative; + min-height: 120px; + } + + .scrollable { + flex: 1 1 auto; + } +} + +.scrollable.fullscreen { + @supports (display: grid) { + // hack to fix Chrome <57 + contain: none; + } +} + +.react-toggle { + display: inline-block; + position: relative; + cursor: pointer; + background-color: transparent; + border: 0; + padding: 0; + user-select: none; + -webkit-tap-highlight-color: rgba($base-overlay-background, 0); + -webkit-tap-highlight-color: transparent; +} + +.react-toggle-screenreader-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.react-toggle--disabled { + cursor: not-allowed; + opacity: 0.5; + transition: opacity 0.25s; +} + +.react-toggle-track { + width: 50px; + height: 24px; + padding: 0; + border-radius: 30px; + background-color: $ui-base-color; + transition: background-color 0.2s ease; +} + +.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { + background-color: darken($ui-base-color, 10%); +} + +.react-toggle--checked .react-toggle-track { + background-color: darken($ui-highlight-color, 2%); +} + +.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { + background-color: $ui-highlight-color; +} + +.react-toggle-track-check { + position: absolute; + width: 14px; + height: 10px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + left: 8px; + opacity: 0; + transition: opacity 0.25s ease; +} + +.react-toggle--checked .react-toggle-track-check { + opacity: 1; + transition: opacity 0.25s ease; +} + +.react-toggle-track-x { + position: absolute; + width: 10px; + height: 10px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + right: 10px; + opacity: 1; + transition: opacity 0.25s ease; +} + +.react-toggle--checked .react-toggle-track-x { + opacity: 0; +} + +.react-toggle-thumb { + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border: 1px solid $ui-base-color; + border-radius: 50%; + background-color: darken($simple-background-color, 2%); + box-sizing: border-box; + transition: all 0.25s ease; + transition-property: border-color, left; +} + +.react-toggle--checked .react-toggle-thumb { + left: 27px; + border-color: $ui-highlight-color; +} + +.getting-started__wrapper, +.getting_started, +.flex-spacer { + background: $ui-base-color; +} + +.getting-started__wrapper { + position: relative; + overflow-y: auto; +} + +.flex-spacer { + flex: 1 1 auto; +} + +.getting-started { + background: $ui-base-color; + flex: 1 0 auto; + + p { + color: $secondary-text-color; + } + + a { + color: $dark-text-color; + } + + &__trends { + flex: 0 1 auto; + opacity: 1; + animation: fade 150ms linear; + margin-top: 10px; + + h4 { + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 10px; + font-size: 12px; + text-transform: uppercase; + font-weight: 500; + + a { + color: $darker-text-color; + text-decoration: none; + } + } + + @media screen and (max-height: 810px) { + .trends__item:nth-of-type(3) { + display: none; + } + } + + @media screen and (max-height: 720px) { + .trends__item:nth-of-type(2) { + display: none; + } + } + + @media screen and (max-height: 670px) { + display: none; + } + + .trends__item { + border-bottom: 0; + padding: 10px; + + &__current { + color: $darker-text-color; + } + } + } +} + +.column-link__badge { + display: inline-block; + border-radius: 4px; + font-size: 12px; + line-height: 19px; + font-weight: 500; + background: $ui-base-color; + padding: 4px 8px; + margin: -6px 10px; +} + +.keyboard-shortcuts { + padding: 8px 0 0; + overflow: hidden; + + thead { + position: absolute; + left: -9999px; + } + + td { + padding: 0 10px 8px; + } + + kbd { + display: inline-block; + padding: 3px 5px; + background-color: lighten($ui-base-color, 8%); + border: 1px solid darken($ui-base-color, 4%); + } +} + +.setting-text { + color: $darker-text-color; + background: transparent; + border: 0; + border-bottom: 2px solid $ui-primary-color; + outline: 0; + box-sizing: border-box; + display: block; + font-family: inherit; + margin-bottom: 10px; + padding: 7px 0; + width: 100%; + + &:focus, + &:active { + color: $primary-text-color; + border-bottom-color: $ui-highlight-color; + } + + @include limited-single-column('screen and (max-width: 600px)') { + font-size: 16px; + } + + &.light { + color: $inverted-text-color; + border-bottom: 2px solid lighten($ui-base-color, 27%); + + &:focus, + &:active { + color: $inverted-text-color; + border-bottom-color: $ui-highlight-color; + } + } +} + +button.icon-button i.fa-retweet { + background-position: 0 0; + height: 19px; + transition: background-position 0.9s steps(10); + transition-duration: 0s; + vertical-align: middle; + width: 22px; + + &::before { + display: none !important; + } +} + +button.icon-button.active i.fa-retweet { + transition-duration: 0.9s; + background-position: 0 100%; +} + +.reduce-motion button.icon-button i.fa-retweet, +.reduce-motion button.icon-button.active i.fa-retweet { + transition: none; +} + +.reduce-motion button.icon-button.disabled i.fa-retweet { + color: darken($action-button-color, 13%); +} + +.load-more { + display: block; + color: $dark-text-color; + background-color: transparent; + border: 0; + font-size: inherit; + text-align: center; + line-height: inherit; + margin: 0; + padding: 15px; + box-sizing: border-box; + width: 100%; + clear: both; + text-decoration: none; + + &:hover { + background: lighten($ui-base-color, 2%); + } +} + +.load-gap { + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.timeline-hint { + text-align: center; + color: $darker-text-color; + padding: 15px; + box-sizing: border-box; + width: 100%; + cursor: default; + + strong { + font-weight: 500; + } + + a { + color: $highlight-text-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + color: lighten($highlight-text-color, 4%); + } + } +} + +.missing-indicator { + padding-top: 20px + 48px; + + .regeneration-indicator__figure { + background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg'); + } +} + +.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { + border-top: 1px solid $ui-base-color; +} + +.notification__dismiss-overlay { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: -1px; + padding-left: 15px; // space for the box shadow to be visible + z-index: 999; + align-items: center; + justify-content: flex-end; + cursor: pointer; + display: flex; + + .wrappy { + width: $dismiss-overlay-width; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: lighten($ui-base-color, 8%); + border-left: 1px solid lighten($ui-base-color, 20%); + box-shadow: 0 0 5px black; + border-bottom: 1px solid $ui-base-color; + } + + .ckbox { + border: 2px solid $ui-primary-color; + border-radius: 2px; + width: 30px; + height: 30px; + font-size: 20px; + color: $darker-text-color; + text-shadow: 0 0 5px black; + display: flex; + justify-content: center; + align-items: center; + } + + &:focus { + outline: 0 !important; + + .ckbox { + box-shadow: 0 0 1px 1px $ui-highlight-color; + } + } +} + +.text-btn { + display: inline-block; + padding: 0; + font-family: inherit; + font-size: inherit; + color: inherit; + border: 0; + background: transparent; + cursor: pointer; +} + +.loading-indicator { + color: $dark-text-color; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + overflow: visible; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + justify-content: center; +} + +.circular-progress { + color: lighten($ui-base-color, 26%); + animation: 1.4s linear 0s infinite normal none running simple-rotate; + + circle { + stroke: currentColor; + stroke-dasharray: 80px, 200px; + stroke-dashoffset: 0; + animation: circular-progress 1.4s ease-in-out infinite; + } +} + +@keyframes circular-progress { + 0% { + stroke-dasharray: 1px, 200px; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 100px, 200px; + stroke-dashoffset: -15px; + } + + 100% { + stroke-dasharray: 100px, 200px; + stroke-dashoffset: -125px; + } +} + +@keyframes simple-rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes spring-rotate-in { + 0% { + transform: rotate(0deg); + } + + 30% { + transform: rotate(-484.8deg); + } + + 60% { + transform: rotate(-316.7deg); + } + + 90% { + transform: rotate(-375deg); + } + + 100% { + transform: rotate(-360deg); + } +} + +@keyframes spring-rotate-out { + 0% { + transform: rotate(-360deg); + } + + 30% { + transform: rotate(124.8deg); + } + + 60% { + transform: rotate(-43.27deg); + } + + 90% { + transform: rotate(15deg); + } + + 100% { + transform: rotate(0deg); + } +} + +.spoiler-button { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + z-index: 100; + + &--minified { + display: flex; + left: 4px; + top: 4px; + width: auto; + height: auto; + align-items: center; + } + + &--click-thru { + pointer-events: none; + } + + &--hidden { + display: none; + } + + &__overlay { + display: block; + background: transparent; + width: 100%; + height: 100%; + border: 0; + + &__label { + display: inline-block; + background: rgba($base-overlay-background, 0.5); + border-radius: 8px; + padding: 8px 12px; + color: $primary-text-color; + font-weight: 500; + font-size: 14px; + } + + &:hover, + &:focus, + &:active { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.8); + } + } + + &:disabled { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.5); + } + } + } +} + +.setting-toggle { + display: block; + line-height: 24px; +} + +.setting-toggle__label, +.setting-meta__label { + color: $darker-text-color; + display: inline-block; + margin-bottom: 14px; + margin-left: 8px; + vertical-align: middle; +} + +.column-settings__row .radio-button { + display: block; +} + +.setting-meta__label { + float: right; +} + +@keyframes heartbeat { + 0% { + transform: scale(1); + transform-origin: center center; + animation-timing-function: ease-out; + } + + 10% { + transform: scale(0.91); + animation-timing-function: ease-in; + } + + 17% { + transform: scale(0.98); + animation-timing-function: ease-out; + } + + 33% { + transform: scale(0.87); + animation-timing-function: ease-in; + } + + 45% { + transform: scale(1); + animation-timing-function: ease-out; + } +} + +.pulse-loading { + animation: heartbeat 1.5s ease-in-out infinite both; +} + +.upload-area { + align-items: center; + background: rgba($base-overlay-background, 0.8); + display: flex; + height: 100vh; + justify-content: center; + left: 0; + opacity: 0; + position: fixed; + top: 0; + visibility: hidden; + width: 100vw; + z-index: 2000; + + * { + pointer-events: none; + } +} + +.upload-area__drop { + width: 320px; + height: 160px; + display: flex; + box-sizing: border-box; + position: relative; + padding: 8px; +} + +.upload-area__background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 4px; + background: $ui-base-color; + box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); +} + +.upload-area__content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: $secondary-text-color; + font-size: 18px; + font-weight: 500; + border: 2px dashed $ui-base-lighter-color; + border-radius: 4px; +} + +.dropdown--active .emoji-button img { + opacity: 1; + filter: none; +} + +.loading-bar { + background-color: $ui-highlight-color; + height: 3px; + position: fixed; + top: 0; + left: 0; + z-index: 9999; +} + +.icon-badge-wrapper { + position: relative; +} + +.icon-badge { + position: absolute; + display: block; + right: -0.25em; + top: -0.25em; + background-color: $ui-highlight-color; + border-radius: 50%; + font-size: 75%; + width: 1em; + height: 1em; +} + +.conversation { + display: flex; + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 5px; + padding-bottom: 0; + + &:focus { + background: lighten($ui-base-color, 2%); + outline: 0; + } + + &__avatar { + flex: 0 0 auto; + padding: 10px; + padding-top: 12px; + position: relative; + cursor: pointer; + } + + &__unread { + display: inline-block; + background: $highlight-text-color; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + margin: -0.1ex 0.15em 0.1ex; + } + + &__content { + flex: 1 1 auto; + padding: 10px 5px; + padding-right: 15px; + overflow: hidden; + + &__info { + overflow: hidden; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } + + &__relative-time { + font-size: 15px; + color: $darker-text-color; + padding-left: 15px; + } + + &__names { + color: $darker-text-color; + font-size: 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 4px; + flex-basis: 90px; + flex-grow: 1; + + a { + color: $primary-text-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + + .status__content { + margin: 0; + } + } + + &--unread { + background: lighten($ui-base-color, 2%); + + &:focus { + background: lighten($ui-base-color, 4%); + } + + .conversation__content__info { + font-weight: 700; + } + + .conversation__content__relative-time { + color: $primary-text-color; + } + } +} + +.ui .flash-message { + margin-top: 10px; + margin-left: auto; + margin-right: auto; + margin-bottom: 0; + min-width: 75%; +} + +::-webkit-scrollbar-thumb { + border-radius: 0; +} + +noscript { + text-align: center; + + img { + width: 200px; + opacity: 0.5; + animation: flicker 4s infinite; + } + + div { + font-size: 14px; + margin: 30px auto; + color: $secondary-text-color; + max-width: 400px; + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + a { + word-break: break-word; + } + } +} + +@keyframes flicker { + 0% { + opacity: 1; + } + + 30% { + opacity: 0.75; + } + + 100% { + opacity: 1; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 972e01e7d..65060f422 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -75,7 +75,6 @@ width: 100%; height: 100%; box-sizing: border-box; - display: none; flex-direction: column; align-items: center; justify-content: center; @@ -99,7 +98,6 @@ height: 100%; box-sizing: border-box; padding: 25px; - display: none; flex-direction: column; align-items: center; justify-content: center; @@ -269,7 +267,8 @@ } .onboarding-modal__page__wrapper-0 { - background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; + background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / + auto 250px; height: 100%; padding: 0; } @@ -684,7 +683,6 @@ display: block; box-sizing: border-box; width: 100%; - margin: 0; color: $inverted-text-color; background: $simple-background-color; padding: 10px; @@ -819,7 +817,6 @@ font-family: inherit; font-size: 14px; resize: none; - border: 0; outline: 0; border-radius: 4px; border: 1px solid $ui-secondary-color; @@ -986,10 +983,10 @@ padding-left: 20px; padding-right: 20px; padding-bottom: 10px; - font-size: 14px; - label, input { + label, + input { vertical-align: middle; } } @@ -1020,7 +1017,9 @@ width: auto; outline: 0; font-family: inherit; - background: $simple-background-color 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(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px; + background: $simple-background-color + 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(darken($simple-background-color, 14%))}'/></svg>") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; @@ -1071,6 +1070,7 @@ &__container { padding: 30px; pointer-events: all; + overflow-y: auto; } .status__content { @@ -1130,7 +1130,7 @@ width: 100%; border: 0; padding: 10px; - font-family: 'mastodon-font-monospace', monospace; + font-family: mastodon-font-monospace, monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; @@ -1279,7 +1279,7 @@ text-decoration: none; &:hover { - text-decoration: underline + text-decoration: underline; } } } diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss index 96cf06742..93123075e 100644 --- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -26,11 +26,13 @@ img { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } video { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } figure { @@ -85,14 +87,14 @@ counter-increment: list-counter; &::before { - content: counter(list-counter) "."; + content: counter(list-counter) '.'; position: absolute; left: 0; } } ul > li::before { - content: ""; + content: ''; position: absolute; background-color: $darker-text-color; border-radius: 50%; diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index b8078bdb6..a6e98a868 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -4,7 +4,7 @@ } .search__input { - @include search-input(); + @include search-input; display: block; padding: 15px; @@ -181,7 +181,7 @@ path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 100% !important; + fill-opacity: 1 !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss index 67b01c886..490951fb4 100644 --- a/app/javascript/flavours/glitch/styles/components/sensitive.scss +++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss @@ -17,8 +17,10 @@ font-size: 12px; line-height: 18px; text-transform: uppercase; - opacity: .9; - transition: opacity .1s ease; + opacity: 0.9; + transition: opacity 0.1s ease; - .media-gallery:hover & { opacity: 1 } + .media-gallery:hover & { + opacity: 1; + } } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 74e5d0884..036b3f6ef 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -140,7 +140,7 @@ .scrollable { overflow: visible; - @supports(display: grid) { + @supports (display: grid) { contain: content; } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index a46fb94b2..21c28919a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -67,7 +67,8 @@ margin: -3px 0 0; } - p, pre, blockquote { + p, + pre { margin-bottom: 20px; white-space: pre-wrap; unicode-bidi: plaintext; @@ -77,79 +78,6 @@ } } - .status__content__text, - .e-content { - overflow: hidden; - - & > ul, - & > ol { - margin-bottom: 20px; - } - - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, h2 { - font-weight: 700; - font-size: 1.2em; - } - - h2 { - font-size: 1.1em; - } - - h3, h4, h5 { - font-weight: 500; - } - - blockquote { - padding-left: 10px; - border-left: 3px solid $darker-text-color; - color: $darker-text-color; - white-space: normal; - - p:last-child { - margin-bottom: 0; - } - } - - b, strong { - font-weight: 700; - } - - em, i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - ul, ol { - p { - margin: 0; - } - } - - ul { - margin-left: 1em; - list-style-type: disc; - } - - ol { - list-style-type: decimal; - list-style-position: inside; - } - } - a { color: $secondary-text-color; text-decoration: none; @@ -317,8 +245,13 @@ } @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } opacity: 1; @@ -381,9 +314,14 @@ right: 0; top: 0; bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + background-image: linear-gradient( + to bottom, + rgba($base-shadow-color, 0.75), + rgba($base-shadow-color, 0.65) 24px, + rgba($base-shadow-color, 0.8) + ); pointer-events: none; - content: ""; + content: ''; } .display-name:hover .display-name__html { @@ -396,26 +334,37 @@ text-overflow: ellipsis; padding-top: 0; - &:after { - content: ""; + &::after { + content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; - background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1)); + background: linear-gradient( + rgba($ui-base-color, 0), + rgba($ui-base-color, 1) + ); pointer-events: none; } - + a:hover { text-decoration: underline; } } - &:focus > .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1)); + + &:focus > .status__content::after { + background: linear-gradient( + rgba(lighten($ui-base-color, 4%), 0), + rgba(lighten($ui-base-color, 4%), 1) + ); } - &.status-direct > .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1)); + + &.status-direct > .status__content::after { + background: linear-gradient( + rgba(lighten($ui-base-color, 8%), 0), + rgba(lighten($ui-base-color, 8%), 1) + ); } .notification__message { @@ -428,7 +377,7 @@ } .notification__message { - margin: -10px 0px 10px 0; + margin: -10px 0px 10px; a:hover { text-decoration: underline; @@ -840,7 +789,8 @@ a.status__display-name, bottom: -1px; } - a .fa, a:hover .fa { + a .fa, + a:hover .fa { color: inherit; } } @@ -858,9 +808,9 @@ a.status-card { cursor: zoom-in; display: block; text-decoration: none; - width: 100%; - height: auto; - margin: 0; + width: 100%; + height: auto; + margin: 0; } .status-card-video { @@ -1071,11 +1021,10 @@ a.status-card.compact:hover { &.unread { &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; - pointer-events: 0; width: 100%; height: 100%; border-left: 4px solid $highlight-text-color; |