diff --git a/app/styles/about.scss b/app/styles/about.scss index 77d93917e..915cfd1f8 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -532,10 +532,6 @@ $small-breakpoint: 960px; background: transparent; margin: 0 -5px; - .account__header__fields { - border-top: 1px solid var(--brand-color--med); - } - .roles { display: none; } @@ -592,23 +588,6 @@ $small-breakpoint: 960px; border-radius: 0; } - .account__header__fields { - margin: 0; - border-top: 0; - - a { - color: var(--brand-color); - } - - dl:first-child .verified { - border-radius: 0 4px 0 0; - } - - .verified a { - color: $valid-value-color; - } - } - .account__header__content { padding: 20px; padding-bottom: 0; @@ -856,11 +835,6 @@ $small-breakpoint: 960px; background: var(--brand-color--med); padding: 20px 0; - .container-alt { - position: relative; - padding-right: 280px + 15px; - } - &__sections { display: flex; justify-content: space-between; @@ -1300,10 +1274,6 @@ $small-breakpoint: 960px; @media screen and (max-width: 840px) { .information-board { - .container-alt { - padding-right: 20px; - } - .panel { position: static; margin-top: 20px; @@ -1329,11 +1299,6 @@ $small-breakpoint: 960px; text-align: initial; } } - - .header .container-alt, - .features .container-alt { - display: block; - } } .cta { @@ -1491,67 +1456,6 @@ $small-breakpoint: 960px; border-radius: 0; } - .hero-widget { - margin-top: 30px; - margin-bottom: 0; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: var(--primary-text-color--faint); - } - - &__text { - border-radius: 0; - padding-bottom: 0; - } - - &__footer { - background: var(--brand-color--med); - padding: 10px; - border-radius: 0 0 4px 4px; - display: flex; - - &__column { - flex: 1 1 50%; - } - } - - .account { - padding: 10px 0; - border-bottom: 0; - - .account__display-name { - display: flex; - align-items: center; - } - - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } - } - - &__counter { - padding: 10px; - - strong { - font-family: var(--font-display), sans-serif; - font-size: 15px; - font-weight: 700; - display: block; - } - - span { - font-size: 14px; - color: var(--primary-text-color--faint); - } - } - } - .simple_form .user_agreement .label_input > label { font-weight: 400; color: var(--primary-text-color--faint); @@ -1580,18 +1484,6 @@ $small-breakpoint: 960px; grid-row: 1; display: flex; flex-direction: column; - - .box-widget { - order: 2; - flex: 0 0 auto; - } - - .hero-widget { - margin-top: 0; - margin-bottom: 10px; - order: 1; - flex: 0 0 auto; - } } &__column-registration { @@ -1605,42 +1497,6 @@ $small-breakpoint: 960px; @media screen and (max-width: $no-gap-breakpoint) { grid-gap: 0; - - .hero-widget { - display: block; - margin-bottom: 0; - box-shadow: none; - - &__img, - &__img img, - &__footer { - border-radius: 0; - } - } - - .hero-widget, - .box-widget, - .directory__tag { - border-bottom: 1px solid var(--brand-color--med); - } - - .directory { - margin-top: 0; - - &__tag { - margin-bottom: 0; - - & > a, - & > div { - border-radius: 0; - box-shadow: none; - } - - &:last-child { - border-bottom: 0; - } - } - } } } } diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index d9bbe2283..5c70a64d3 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -177,31 +177,6 @@ } } -.nothing-here { - background: var(--brand-color--med); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - color: var(--primary-text-color--faint); - font-size: 14px; - font-weight: 500; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - cursor: default; - border-radius: 4px; - padding: 20px; - min-height: 30vh; - - &--under-tabs { - border-radius: 0 0 4px 4px; - } - - &--flexible { - box-sizing: border-box; - min-height: 100%; - } -} - .account-role { display: inline-block; padding: 4px 6px; @@ -227,104 +202,6 @@ } } -.account__header__fields { - padding: 0; - margin: 15px -15px -15px; - border: 0 none; - border-top: 1px solid var(--brand-color--med); - border-bottom: 1px solid var(--brand-color--med); - font-size: 14px; - line-height: 20px; - - dl { - display: flex; - border-bottom: 1px solid var(--brand-color--med); - } - - dt, - dd { - box-sizing: border-box; - padding: 14px; - text-align: center; - max-height: 48px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - dt { - font-weight: 500; - width: 120px; - flex: 0 0 auto; - color: var(--primary-text-color--faint); - background: hsla(var(--background-color_hsl), 0.5); - } - - dd { - flex: 1 1 auto; - color: var(--primary-text-color--faint); - } - - a { - color: var(--highlight-text-color); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - .verified { - border: 1px solid rgba($valid-value-color, 0.5); - background: rgba($valid-value-color, 0.25); - - a { - color: $valid-value-color; - font-weight: 500; - } - - &__mark { - color: $valid-value-color; - } - } - - dl:last-child { - border-bottom: 0; - } -} - -.directory__tag .trends__item__current { - width: auto; -} - -.pending-account { - &__header { - color: var(--primary-text-color--faint); - - a { - color: var(--background-color); - text-decoration: none; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - - strong { - color: var(--primary-text-color); - font-weight: 700; - } - } - - &__body { - margin-top: 10px; - } -} - .account { padding: 10px; position: relative; diff --git a/app/styles/application.scss b/app/styles/application.scss index cb171dffd..dfa13b9ae 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -5,10 +5,7 @@ @import 'reset'; @import 'basics'; @import 'containers'; -@import 'lists'; @import 'footer'; -@import 'compact_header'; -@import 'widgets'; @import 'forms'; @import 'accounts'; @import 'stream_entries'; @@ -16,7 +13,7 @@ @import 'loading'; @import 'ui'; @import 'polls'; -@import 'introduction'; +// @import 'introduction'; @import 'emoji_picker'; @import 'about'; @import 'tables'; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 092f06202..4a5c8916b 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -176,13 +176,6 @@ body { margin-top: 1em; } - &__dismiss { - display: inline-block; - text-transform: uppercase; - margin-left: 5px; - font-size: 13px; - } - a { color: var(--brand-color--hicontrast); text-decoration: underline; diff --git a/app/styles/compact_header.scss b/app/styles/compact_header.scss deleted file mode 100644 index 3f6fc003e..000000000 --- a/app/styles/compact_header.scss +++ /dev/null @@ -1,34 +0,0 @@ -.compact-header { - h1 { - font-size: 24px; - line-height: 28px; - color: var(--primary-text-color--faint); - font-weight: 500; - margin-bottom: 20px; - padding: 0 10px; - word-wrap: break-word; - - @media screen and (max-width: 740px) { - text-align: center; - padding: 20px 10px 0; - } - - a { - color: inherit; - text-decoration: none; - } - - small { - font-weight: 400; - color: var(--primary-text-color--faint); - } - - img { - display: inline-block; - margin-bottom: -5px; - margin-right: 15px; - width: 36px; - height: 36px; - } - } -} diff --git a/app/styles/containers.scss b/app/styles/containers.scss index 53bd272c2..74eebe61e 100644 --- a/app/styles/containers.scss +++ b/app/styles/containers.scss @@ -1,14 +1,3 @@ -.container-alt { - width: 700px; - margin: 0 auto; - margin-top: 40px; - - @media screen and (max-width: 740px) { - width: 100%; - margin: 0; - } -} - .logo-container { margin: 100px auto 50px; @@ -111,80 +100,3 @@ margin-left: 8px; } } - -.grid-3 { - display: grid; - grid-gap: 10px; - grid-template-columns: 3fr 1fr; - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-column: 1 / 3; - grid-row: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 2; - } - - .column-2 { - grid-column: 2; - grid-row: 2; - } - - .column-3 { - grid-column: 1 / 3; - grid-row: 3; - } - - .landing-page__call-to-action { - min-height: 100%; - } - - @media screen and (max-width: 738px) { - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - .landing-page__call-to-action { - padding: 20px; - display: flex; - align-items: center; - justify-content: center; - } - - .row__information-board { - width: 100%; - justify-content: center; - align-items: center; - } - - .row__mascot { - display: none; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - grid-template-columns: minmax(0, 100%); - - .column-0 { - grid-column: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 3; - } - - .column-2 { - grid-column: 1; - grid-row: 2; - } - - .column-3 { - grid-column: 1; - grid-row: 4; - } - } -} diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 5471f9778..147199870 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -542,155 +542,6 @@ code { font-size: 24px; } -.flash-message { - background: var(--brand-color--med); - color: var(--primary-text-color--faint); - border-radius: 4px; - padding: 15px 10px; - margin-bottom: 30px; - text-align: center; - - &.notice { - border: 1px solid rgba($valid-value-color, 0.5); - background: rgba($valid-value-color, 0.25); - color: $valid-value-color; - } - - &.alert { - border: 1px solid rgba($error-value-color, 0.5); - background: rgba($error-value-color, 0.25); - color: $error-value-color; - } - - a { - display: inline-block; - color: var(--primary-text-color--faint); - text-decoration: none; - - &:hover { - color: var(--primary-text-color); - text-decoration: underline; - } - } - - p { - margin-bottom: 15px; - } - - .oauth-code { - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: 0; - padding: 10px; - font-family: var(--font-monospace), monospace; - background: var(--brand-color--med); - color: var(--primary-text-color); - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: var(--brand-color--faint); - } - } - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - @media screen and (max-width: 740px) and (min-width: 441px) { - margin-top: 40px; - } -} - -.form-footer { - margin-top: 30px; - text-align: center; - - a { - color: var(--primary-text-color--faint); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.quick-nav { - list-style: none; - margin-bottom: 25px; - font-size: 14px; - - li { - display: inline-block; - margin-right: 10px; - } - - a { - color: var(--highlight-text-color); - text-transform: uppercase; - text-decoration: none; - font-weight: 700; - - &:hover, - &:focus, - &:active { - color: var(--highlight-text-color); - } - } -} - -.oauth-prompt, -.follow-prompt { - margin-bottom: 30px; - color: var(--primary-text-color--faint); - - h2 { - font-size: 16px; - margin-bottom: 30px; - text-align: center; - } - - strong { - color: var(--primary-text-color--faint); - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - @media screen and (max-width: 740px) and (min-width: 441px) { - margin-top: 40px; - } -} - -.qr-wrapper { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - .qr-code { flex: 0 0 auto; background: var(--foreground-color); @@ -705,35 +556,7 @@ code { } } -.qr-alternative { - margin-bottom: 20px; - color: var(--primary-text-color--faint); - flex: 150px; - - samp { - display: block; - font-size: 14px; - } -} - -.table-form { - p { - margin-bottom: 15px; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - -.simple_form, -.table-form { +.simple_form { .warning { box-sizing: border-box; background: rgba($error-value-color, 0.5); @@ -773,173 +596,6 @@ code { } } -.action-pagination { - display: flex; - flex-wrap: wrap; - align-items: center; - - .actions, - .pagination { - flex: 1 1 auto; - } - - .actions { - padding: 30px 0; - padding-right: 20px; - flex: 0 0 auto; - } -} - -.post-follow-actions { - text-align: center; - color: var(--primary-text-color--faint); - - div { - margin-bottom: 4px; - } -} - -.alternative-login { - margin-top: 20px; - margin-bottom: 20px; - - h4 { - font-size: 16px; - color: var(--primary-text-color); - text-align: center; - margin-bottom: 20px; - border: 0; - padding: 0; - } - - .button { - display: block; - } -} - -.scope-danger { - color: $warning-red; -} - -.form_admin_settings_site_short_description, -.form_admin_settings_site_description, -.form_admin_settings_site_extended_description, -.form_admin_settings_site_terms, -.form_admin_settings_custom_css, -.form_admin_settings_closed_registrations_message { - textarea { - font-family: var(--font-monospace), monospace; - } -} - -.input-copy { - background: var(--background-color); - border: 1px solid var(--background-color); - border-radius: 4px; - display: flex; - align-items: center; - padding-right: 4px; - position: relative; - top: 1px; - transition: border-color 300ms linear; - - &__wrapper { - flex: 1 1 auto; - } - - input[type=text] { - background: transparent; - border: 0; - padding: 10px; - font-size: 14px; - font-family: var(--font-monospace), monospace; - } - - button { - flex: 0 0 auto; - margin: 4px; - text-transform: none; - font-weight: 400; - font-size: 14px; - padding: 7px 18px; - padding-bottom: 6px; - width: auto; - transition: background 300ms linear; - } - - &.copied { - border-color: $valid-value-color; - transition: none; - - button { - background: $valid-value-color; - transition: none; - } - } -} - -.connection-prompt { - margin-bottom: 25px; - - .fa-link { - background-color: var(--brand-color--med); - border-radius: 100%; - font-size: 24px; - padding: 10px; - } - - &__column { - align-items: center; - display: flex; - flex: 1; - flex-direction: column; - flex-shrink: 1; - max-width: 50%; - - &-sep { - align-self: center; - flex-grow: 0; - overflow: visible; - position: relative; - z-index: 1; - } - - p { - word-break: break-word; - } - } - - .account__avatar { - margin-bottom: 20px; - } - - &__connection { - background-color: var(--brand-color--med); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - padding: 25px 10px; - position: relative; - text-align: center; - - &::after { - background-color: var(--brand-color--med); - content: ''; - display: block; - height: 100%; - left: 50%; - position: absolute; - top: 0; - width: 1px; - } - } - - &__row { - align-items: flex-start; - display: flex; - flex-direction: row; - } -} - .columns-area { form.simple_form { padding: 15px; diff --git a/app/styles/lists.scss b/app/styles/lists.scss deleted file mode 100644 index 6019cd800..000000000 --- a/app/styles/lists.scss +++ /dev/null @@ -1,19 +0,0 @@ -.no-list { - list-style: none; - - li { - display: inline-block; - margin: 0 5px; - } -} - -.recovery-codes { - list-style: none; - margin: 0 auto; - - li { - font-size: 125%; - line-height: 1.5; - letter-spacing: 1px; - } -} diff --git a/app/styles/tables.scss b/app/styles/tables.scss index 8fbe8cca6..bb7c07a3a 100644 --- a/app/styles/tables.scss +++ b/app/styles/tables.scss @@ -224,20 +224,4 @@ a.table-action-link { font-weight: 700; } } - - .nothing-here { - border: 1px solid var(--background-color); - border-top: 0; - box-shadow: none; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 1px solid var(--background-color); - } - } - - @media screen and (max-width: 870px) { - .accounts-table tbody td.optional { - display: none; - } - } } diff --git a/app/styles/ui.scss b/app/styles/ui.scss index a8f09663a..2d4d54f71 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -219,12 +219,6 @@ display: flex; } -.domain_buttons { - height: 18px; - padding: 10px; - white-space: nowrap; -} - .muted { .status__content p, .status__content a { @@ -670,52 +664,6 @@ 100% { opacity: 1; } } -.layout-toggle { - display: flex; - padding: 5px; - - button { - box-sizing: border-box; - flex: 0 0 50%; - background: transparent; - padding: 5px; - border: 0; - position: relative; - - &:hover, - &:focus, - &:active { - svg path:first-child { - fill: var(--background-color); - } - } - } - - svg { - width: 100%; - height: auto; - - path:first-child { - fill: var(--brand-color--med); - } - - path:last-child { - fill: var(--background-color); - } - } - - &__active { - color: var(--brand-color); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: var(--brand-color--med); - border-radius: 50%; - padding: 0.35rem; - } -} - .verified-icon { display: inline-block; margin: 0 4px 0 1px; diff --git a/app/styles/widgets.scss b/app/styles/widgets.scss deleted file mode 100644 index 92e8c7121..000000000 --- a/app/styles/widgets.scss +++ /dev/null @@ -1,534 +0,0 @@ -.hero-widget { - margin-bottom: 10px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &__img { - width: 100%; - position: relative; - overflow: hidden; - border-radius: 4px 4px 0 0; - background: $base-shadow-color; - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 4px 4px 0 0; - } - } - - &__text { - background: var(--brand-color--med); - padding: 20px; - border-radius: 0 0 4px 4px; - font-size: 15px; - color: var(--primary-text-color--faint); - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - em { - display: inline; - margin: 0; - padding: 0; - font-weight: 700; - background: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: var(--primary-text-color); - } - - a { - color: var(--primary-text-color--faint); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } -} - -.endorsements-widget { - margin-bottom: 10px; - padding-bottom: 10px; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: var(--primary-text-color--faint); - } - - .account { - padding: 10px 0; - - &:last-child { - border-bottom: 0; - } - - .account__display-name { - display: flex; - align-items: center; - } - - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } - } -} - -.box-widget { - padding: 20px; - border-radius: 4px; - background: var(--background-color); - box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2); -} - -.contact-widget, -.landing-page__information.contact-widget { - box-sizing: border-box; - padding: 20px; - min-height: 100%; - border-radius: 4px; - background: var(--brand-color--med); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); -} - -.contact-widget { - font-size: 15px; - color: var(--primary-text-color--faint); - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - - strong { - font-weight: 500; - } - - p { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - &__mail { - margin-top: 10px; - - a { - color: var(--primary-text-color); - text-decoration: none; - } - } -} - -.moved-account-widget { - padding: 15px; - padding-bottom: 20px; - border-radius: 4px; - background: var(--brand-color--med); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - color: var(--primary-text-color--faint); - font-weight: 400; - margin-bottom: 10px; - - strong, - a { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: inherit; - text-decoration: underline; - - &.mention { - text-decoration: none; - - span { - text-decoration: none; - } - - &:focus, - &:hover, - &:active { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - - &__message { - margin-bottom: 15px; - - .fa { - margin-right: 5px; - color: var(--primary-text-color--faint); - } - } - - &__card { - .detailed-status__display-avatar { - position: relative; - cursor: pointer; - } - - .detailed-status__display-name { - margin-bottom: 0; - text-decoration: none; - - span { - font-weight: 400; - } - } - } -} - -.memoriam-widget { - padding: 20px; - border-radius: 4px; - background: $base-shadow-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - font-size: 14px; - color: var(--primary-text-color--faint); - margin-bottom: 10px; -} - -.page-header { - background: var(--brand-color--med); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - padding: 60px 15px; - text-align: center; - margin: 10px 0; - - h1 { - color: var(--primary-text-color); - font-size: 36px; - line-height: 1.1; - font-weight: 700; - margin-bottom: 10px; - } - - p { - font-size: 15px; - color: var(--primary-text-color--faint); - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin-top: 0; - background: var(--brand-color--faint); - - h1 { - font-size: 24px; - } - } -} - -.directory { - background: var(--brand-color--med); - border-radius: 4px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &__tag { - box-sizing: border-box; - margin-bottom: 10px; - - & > a, - & > div { - display: flex; - align-items: center; - justify-content: space-between; - background: var(--brand-color--med); - border-radius: 4px; - padding: 15px; - text-decoration: none; - color: inherit; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - } - - & > a { - &:hover, - &:active, - &:focus { - background: var(--brand-color--med); - } - } - - &.active > a { - background: var(--brand-color); - cursor: default; - } - - &.disabled > div { - opacity: 0.5; - cursor: default; - } - - h4 { - flex: 1 1 auto; - font-size: 18px; - font-weight: 700; - color: var(--primary-text-color); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .fa { - color: var(--primary-text-color--faint); - } - - small { - display: block; - font-weight: 400; - font-size: 15px; - margin-top: 8px; - color: var(--primary-text-color--faint); - } - } - - &.active h4 { - &, - .fa, - small { - color: var(--primary-text-color); - } - } - - .avatar-stack { - flex: 0 0 auto; - width: (36px + 4px) * 3; - } - - &.active .avatar-stack .account__avatar { - border-color: var(--brand-color); - } - } -} - -.avatar-stack { - display: flex; - justify-content: flex-end; - - .account__avatar { - flex: 0 0 auto; - width: 36px; - height: 36px; - border-radius: 50%; - position: relative; - margin-left: -10px; - background: var(--background-color); - border: 2px solid var(--brand-color--med); - - &:nth-child(1) { - z-index: 1; - } - - &:nth-child(2) { - z-index: 2; - } - - &:nth-child(3) { - z-index: 3; - } - } -} - -.accounts-table { - width: 100%; - - .account { - padding: 0; - border: 0; - } - - strong { - font-weight: 700; - } - - thead th { - text-align: center; - text-transform: uppercase; - color: var(--primary-text-color--faint); - font-weight: 700; - padding: 10px; - - &:first-child { - text-align: left; - } - } - - tbody td { - padding: 15px 0; - vertical-align: middle; - border-bottom: 1px solid var(--brand-color--med); - } - - tbody tr:last-child td { - border-bottom: 0; - } - - &__count { - width: 120px; - text-align: center; - font-size: 15px; - font-weight: 500; - color: var(--primary-text-color); - - small { - display: block; - color: var(--primary-text-color--faint); - font-weight: 400; - font-size: 14px; - } - } - - &__comment { - width: 50%; - vertical-align: initial !important; - } - - @media screen and (max-width: $no-gap-breakpoint) { - tbody td.optional { - display: none; - } - } -} - -.moved-account-widget, -.memoriam-widget, -.box-widget, -.contact-widget, -.landing-page__information.contact-widget, -.directory, -.page-header { - @media screen and (max-width: $no-gap-breakpoint) { - margin-bottom: 0; - box-shadow: none; - border-radius: 0; - } -} - -$maximum-width: 1235px; -$fluid-breakpoint: $maximum-width + 20px; - -.statuses-grid { - min-height: 600px; - - @media screen and (max-width: 640px) { - width: 100% !important; // Masonry layout is unnecessary at this width - } - - &__item { - width: (960px - 20px) / 3; - - @media screen and (max-width: $fluid-breakpoint) { - width: (940px - 20px) / 3; - } - - @media screen and (max-width: 640px) { - width: 100%; - } - - @media screen and (max-width: $no-gap-breakpoint) { - width: 100vw; - } - } - - .detailed-status { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 1px solid var(--background-color); - } - - &.compact { - .detailed-status__meta { - margin-top: 15px; - } - - .status__content { - font-size: 15px; - line-height: 20px; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - .status__content__spoiler-link { - line-height: 20px; - margin: 0; - } - } - - .media-gallery, - .status-card, - .video-player { - margin-top: 15px; - } - } - } -} - -.notice-widget { - margin-bottom: 10px; - color: var(--primary-text-color--faint); - - p { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - font-size: 14px; - line-height: 20px; - text-decoration: none; - font-weight: 500; - color: var(--brand-color); - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -}