diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
12 files changed, 124 insertions, 41 deletions
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index ba46c65c5..f676a8c77 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -16,7 +16,7 @@ $small-breakpoint: 960px; } .rich-formatting { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -31,7 +31,7 @@ $small-breakpoint: 960px; p, li { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -62,7 +62,7 @@ $small-breakpoint: 960px; } h1 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 26px; line-height: 30px; font-weight: 500; @@ -70,7 +70,7 @@ $small-breakpoint: 960px; color: $secondary-text-color; small { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; display: block; font-size: 18px; font-weight: 400; @@ -79,7 +79,7 @@ $small-breakpoint: 960px; } h2 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 22px; line-height: 26px; font-weight: 500; @@ -88,7 +88,7 @@ $small-breakpoint: 960px; } h3 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; @@ -97,7 +97,7 @@ $small-breakpoint: 960px; } h4 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; @@ -106,7 +106,7 @@ $small-breakpoint: 960px; } h5 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; @@ -115,7 +115,7 @@ $small-breakpoint: 960px; } h6 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 12px; line-height: 24px; font-weight: 500; @@ -180,7 +180,7 @@ $small-breakpoint: 960px; &__section { flex: 1 0 0; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; line-height: 28px; color: $primary-text-color; @@ -221,7 +221,7 @@ $small-breakpoint: 960px; bottom: -40px; .panel-header { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; @@ -452,7 +452,7 @@ $small-breakpoint: 960px; p, li { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -501,7 +501,7 @@ $small-breakpoint: 960px; } h1 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 26px; line-height: 30px; font-weight: 500; @@ -509,7 +509,7 @@ $small-breakpoint: 960px; color: $secondary-text-color; small { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; display: block; font-size: 18px; font-weight: 400; @@ -518,7 +518,7 @@ $small-breakpoint: 960px; } h2 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 22px; line-height: 26px; font-weight: 500; @@ -527,7 +527,7 @@ $small-breakpoint: 960px; } h3 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; @@ -536,7 +536,7 @@ $small-breakpoint: 960px; } h4 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; @@ -545,7 +545,7 @@ $small-breakpoint: 960px; } h5 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; @@ -554,7 +554,7 @@ $small-breakpoint: 960px; } h6 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 12px; line-height: 24px; font-weight: 500; @@ -621,7 +621,7 @@ $small-breakpoint: 960px; .hero .heading { padding-bottom: 20px; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -672,7 +672,7 @@ $small-breakpoint: 960px; text-decoration: none; padding: 12px 16px; line-height: 32px; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-weight: 500; font-size: 14px; @@ -745,7 +745,7 @@ $small-breakpoint: 960px; .about-short { background: darken($ui-base-color, 4%); padding: 50px 0 30px; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -1015,7 +1015,7 @@ $small-breakpoint: 960px; display: flex; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 13px; line-height: 18px; font-weight: 400; diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index b8cc33039..e16920dd4 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -443,7 +443,7 @@ $no-columns-breakpoint: 600px; border-radius: 0 0 4px 4px; padding: 10px; color: $darker-text-color; - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; font-size: 12px; word-wrap: break-word; min-height: 20px; diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 9c2499ac4..550b7fdfc 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -6,7 +6,7 @@ } body { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; background: darken($ui-base-color, 8%); font-size: 13px; line-height: 18px; @@ -29,8 +29,8 @@ body { // Fira Sans => Firefox OS // Droid Sans => Older Androids (<4.0) // Helvetica Neue => Older macOS <10.11 - // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", mastodon-font-sans-serif, sans-serif; + // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif; } &.app-body { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 3eddd7fb4..d87cd9c43 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -415,7 +415,7 @@ background-size: cover; background-position: center; position: absolute; - color: inherit; + color: $ui-primary-color; text-decoration: none; border-radius: 4px; @@ -423,6 +423,7 @@ &:active, &:focus { outline: 0; + color: $ui-secondary-color; &::before { content: ""; @@ -434,6 +435,14 @@ } } } + + &__icons { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + } } .account__section-headline { diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 9cd4e1fbe..0b7a74575 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -11,8 +11,26 @@ max-height: 450px; overflow: hidden; - label { + label, legend { display: block; + font-size: 14px; + } + + .boolean label, .radio_buttons label { + position: relative; + padding-left: 28px; + padding-top: 3px; + + input { + position: absolute; + left: 0; + top: 0; + } + } + + span.hint { + display: block; + color: $lighter-text-color; } h1 { @@ -42,6 +60,11 @@ outline: none; transition: background .3s; + .text-icon-button { + color: inherit; + transition: unset; + } + &:hover { background: $ui-secondary-color; } @@ -59,7 +82,7 @@ .glitch.local-settings__navigation { background: lighten($ui-secondary-color, 8%); - width: 200px; + width: 212px; font-size: 15px; line-height: 20px; overflow-y: auto; @@ -74,7 +97,26 @@ } .glitch.local-settings__page__item { - select { - margin-bottom: 5px; + margin-bottom: 2px; +} + +.glitch.local-settings__page__item.string, +.glitch.local-settings__page__item.radio_buttons { + margin-top: 10px; + margin-bottom: 10px; +} + +@media screen and (max-width: 630px) { + .glitch.local-settings__navigation { + width: 40px; + flex-shrink: 0; + } + + .glitch.local-settings__navigation__item { + padding: 10px; + + span:last-of-type { + display: none; + } } } diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index d1b9934d7..398458e47 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -37,7 +37,7 @@ outline: 0; padding: 12px 16px; line-height: 32px; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-weight: 500; font-size: 14px; } @@ -633,7 +633,7 @@ font-size: 18px; margin-bottom: 5px; color: $primary-text-color; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; } } diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index 949ca733f..86cf6c61b 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -35,7 +35,7 @@ font-weight: 500; font-size: 24px; color: $primary-text-color; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; margin-bottom: 20px; } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index cbd3de94c..be2bf7cea 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -1,7 +1,7 @@ $no-columns-breakpoint: 600px; code { - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; font-weight: 400; } @@ -474,7 +474,7 @@ code { width: 100%; border: none; padding: 10px; - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; @@ -718,7 +718,7 @@ code { .form_admin_settings_custom_css, .form_admin_settings_closed_registrations_message { textarea { - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; } } @@ -742,7 +742,7 @@ code { border: 0; padding: 10px; font-size: 14px; - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; } button { diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index aba8baf70..55a8983e5 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -84,7 +84,8 @@ // Change the background colors of media and video spoilers .media-spoiler, -.video-player__spoiler { +.video-player__spoiler, +.account-gallery__item a { background: $ui-base-color; } diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index b8c0efad8..70aaa5bb1 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -145,6 +145,19 @@ body.rtl { margin-right: 6px; } + .status__action-bar { + + &__counter { + margin-right: 0; + margin-left: 11px; + + .status__action-bar-button { + margin-right: 0; + margin-left: 4px; + } + } + } + .status__action-bar-button { float: right; margin-right: 0; @@ -285,4 +298,18 @@ body.rtl { } } } + + .public-layout { + .header { + .nav-button { + margin-left: 8px; + margin-right: 0; + } + } + + .public-account-header__tabs { + margin-left: 0; + margin-right: 20px; + } + } } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index fa876e603..9fd0b95bb 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -90,7 +90,7 @@ } samp { - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; } button.table-action-link { diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 715ecf98f..1ed1a5778 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -51,6 +51,10 @@ $media-modal-media-max-height: 80%; $no-gap-breakpoint: 415px; +$font-sans-serif: 'mastodon-font-sans-serif' !default; +$font-display: 'mastodon-font-display' !default; +$font-monospace: 'mastodon-font-monospace' !default; + // Avatar border size (8% default, 100% for rounded avatars) $ui-avatar-border-size: 8%; |