diff options
Diffstat (limited to 'app/javascript/styles')
-rw-r--r-- | app/javascript/styles/mastodon-light/diff.scss | 376 | ||||
-rw-r--r-- | app/javascript/styles/mastodon-light/variables.scss | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/about.scss | 3 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/accounts.scss | 3 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 82 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 6 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 10 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/rtl.scss | 4 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/stream_entries.scss | 4 |
9 files changed, 419 insertions, 71 deletions
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index d35a59821..ee8a7d265 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -1,6 +1,10 @@ // Notes! // Sass color functions, "darken" and "lighten" are automatically replaced. +html { + scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25); +} + // Change the colors of button texts .button { color: $white; @@ -11,18 +15,139 @@ } // Change default background colors of columns -.column { - > .scrollable { +.column > .scrollable, +.getting-started, +.column-inline-form { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.column-back-button, +.column-header { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + } + + &--slim-button { + border: 0; + top: -49px; + right: 1px; + } +} + +.column-header__back-button, +.column-header__button, +.column-header__button.active, +.account__header__bar { + background: $white; +} + +.column-header__button.active { + color: $ui-highlight-color; + + &:hover, + &:active, + &:focus { + color: $ui-highlight-color; background: $white; } } -.drawer__inner { +.account__header__bar .avatar .account__avatar { + border-color: $white; +} + +.getting-started__footer a { + color: $ui-secondary-color; + text-decoration: underline; +} + +.column-subheading { + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.getting-started, +.scrollable { + .column-link { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:hover, + &:active, + &:focus { + background: $ui-base-color; + } + } +} + +.getting-started .navigation-bar { + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + } +} + +.compose-form__autosuggest-wrapper, +.poll__text input[type="text"], +.compose-form .spoiler-input__input, +.compose-form__poll-wrapper select, +.search__input, +.setting-text, +.box-widget input[type="text"], +.box-widget input[type="email"], +.box-widget input[type="password"], +.box-widget textarea, +.statuses-grid .detailed-status { + border: 1px solid lighten($ui-base-color, 8%); +} + +.search__input { + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + border-bottom: 0; + } +} + +.list-editor .search .search__input { + border-top: 0; + border-bottom: 0; +} + +.compose-form__poll-wrapper select { + 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(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px; +} + +.compose-form__poll-wrapper, +.compose-form__poll-wrapper .poll__footer { + border-top-color: lighten($ui-base-color, 8%); +} + +.notification__filter-bar { + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.compose-form .compose-form__buttons-wrapper { background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.drawer__header, +.drawer__inner { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); } .drawer__inner__mastodon { - background: $ui-base-color 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($white)}"/></svg>') no-repeat bottom / 100% auto; + background: $white 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; } // Change the colors used in compose-form @@ -93,16 +218,16 @@ .detailed-status, .detailed-status__action-bar { - background: darken($ui-base-color, 6%); + background: $white; } // Change the background colors of status__content__spoiler-link .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { - background: $ui-base-lighter-color; + background: $ui-base-color; &:hover { - background: lighten($ui-base-lighter-color, 6%); + background: lighten($ui-base-color, 4%); } } @@ -112,41 +237,47 @@ background: $ui-base-color; } +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $white; +} + .account-gallery__item a { background-color: $ui-base-color; } // Change the colors used in the dropdown menu .dropdown-menu { - background: $ui-base-color; + background: $white; &__arrow { &.left { - border-left-color: $ui-base-color; + border-left-color: $white; } &.top { - border-top-color: $ui-base-color; + border-top-color: $white; } &.bottom { - border-bottom-color: $ui-base-color; + border-bottom-color: $white; } &.right { - border-right-color: $ui-base-color; + border-right-color: $white; } } &__item { a { - background: $ui-base-color; + background: $white; color: $darker-text-color; } } } // Change the text colors on inverted background +.privacy-dropdown__option.active, +.privacy-dropdown__option:hover, .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option:hover .privacy-dropdown__option__content, @@ -162,7 +293,7 @@ .actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover button, -.admin-wrapper .sidebar ul li a.selected, +.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .simple_form .block-button, .simple_form .button, .simple_form button { @@ -170,7 +301,7 @@ } .dropdown-menu__separator { - border-bottom-color: lighten($ui-base-color, 12%); + border-bottom-color: lighten($ui-base-color, 4%); } // Change the background colors of modals @@ -185,6 +316,12 @@ background: $ui-base-color; } +.column-header__collapsible-inner { + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, @@ -233,13 +370,139 @@ background: $white; } +.tabs-bar { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-bottom: 0; + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + } + + &__link { + padding-bottom: 14px; + border-bottom-width: 1px; + border-bottom-color: lighten($ui-base-color, 8%); + + &:hover, + &:active, + &:focus { + background: $ui-base-color; + } + + &.active { + &:hover, + &:active, + &:focus { + background: transparent; + border-bottom-color: $ui-highlight-color; + } + } + } +} + // Change the default colors used on some parts of the profile pages .activity-stream-tabs { background: $account-background-color; border-bottom-color: lighten($ui-base-color, 8%); } +.box-widget, +.nothing-here, +.page-header, +.directory__tag > a, +.directory__tag > div, +.landing-page__call-to-action, +.contact-widget, +.landing .hero-widget__text, +.landing-page__information.contact-widget { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-left: 0; + border-right: 0; + border-top: 0; + } +} + +.landing .hero-widget__text { + border-top: 0; + border-bottom: 0; +} + +.simple_form { + input[type=text], + input[type=number], + input[type=email], + input[type=password], + textarea { + &:hover { + border-color: lighten($ui-base-color, 12%); + } + } +} + +.landing .hero-widget__footer { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; + + @media screen and (max-width: $no-gap-breakpoint) { + border: 0; + } +} + +.brand__tagline { + color: $ui-secondary-color; +} + +.directory__tag > a { + &:hover, + &:active, + &:focus { + background: $ui-base-color; + } + + @media screen and (max-width: $no-gap-breakpoint) { + border: 0; + } +} + +.directory__tag.active > a, +.directory__tag.active > div { + border-color: $ui-highlight-color; + + &, + h4, + h4 small, + .fa, + .trends__item__current { + color: $white; + } + + &:hover, + &:active, + &:focus { + background: $ui-highlight-color; + } +} + +.batch-table { + &__toolbar, + &__row, + .nothing-here { + border-color: lighten($ui-base-color, 8%); + } +} + .activity-stream { + border: 1px solid lighten($ui-base-color, 8%); + + &--under-tabs { + border-top: 0; + } + .entry { background: $account-background-color; @@ -294,6 +557,22 @@ background: rgba($error-red, 0.5); text-shadow: none; } + + .recommended { + border-color: $ui-highlight-color; + color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + } +} + +.compose-form .compose-form__warning { + border-color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + + &, + a { + color: $ui-highlight-color; + } } .status__content, @@ -312,14 +591,41 @@ } .public-layout { + .account__section-headline { + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + } + } + .header, .public-account-header, .public-account-bio { box-shadow: none; } + .public-account-bio, + .hero-widget__text { + background: $account-background-color; + border: 1px solid lighten($ui-base-color, 8%); + } + .header { - background: lighten($ui-base-color, 12%); + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border: 0; + } + + .brand { + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + } } .public-account-header { @@ -331,17 +637,50 @@ } } + &__bar { + &::before { + background: $account-background-color; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; + } + + .avatar img { + border-color: $account-background-color; + } + + @media screen and (max-width: $no-columns-breakpoint) { + background: $account-background-color; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; + } + } + &__tabs { &__name { h1, h1 small { color: $white; + + @media screen and (max-width: $no-columns-breakpoint) { + color: $primary-text-color; + } } } } + + &__extra { + .public-account-bio { + border: 0; + } + + .public-account-bio .account__header__fields { + border-color: lighten($ui-base-color, 8%); + } + } } } +.notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; } @@ -355,6 +694,9 @@ .activity-stream, .nothing-here, .directory__tag > a, -.directory__tag > div { +.directory__tag > div, +.card > a, +.page-header, +.compose-form .compose-form__warning { box-shadow: none; } diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index 9f6d470b1..01748148f 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -17,7 +17,7 @@ $ui-base-color: $classic-secondary-color !default; $ui-base-lighter-color: #b0c0cf; $ui-primary-color: #9bcbed; $ui-secondary-color: $classic-base-color !default; -$ui-highlight-color: #2b5fd9; +$ui-highlight-color: #2b90d9; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index d3b4a5909..61637ce96 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -659,7 +659,8 @@ $small-breakpoint: 960px; align-items: center; padding: 50px; - img { + svg { + fill: $primary-text-color; height: 52px; } diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index a93e1ea12..f95313a25 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -197,7 +197,8 @@ } } -.account-role { +.account-role, +.simple_form .recommended { display: inline-block; padding: 4px 6px; cursor: default; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 63c38ff42..597a8d1dc 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -337,7 +337,6 @@ position: absolute; top: 5px; right: 5px; - z-index: 1; } .compose-form__autosuggest-wrapper { @@ -413,15 +412,6 @@ height: 0; } - .emoji-picker-wrapper { - position: relative; - height: 0; - - &.emoji-picker-wrapper--hidden { - display: none; - } - } - .autosuggest-textarea__suggestions { box-sizing: border-box; display: none; @@ -1839,7 +1829,7 @@ a.account__display-name { display: flex; flex-direction: column; - @media screen and (min-width: 360px) { + @media screen and (min-width: $no-gap-breakpoint) { padding: 0 10px; } } @@ -1965,11 +1955,6 @@ a.account__display-name { font-size: 16px; } - &.active { - border-bottom: 2px solid $highlight-text-color; - color: $highlight-text-color; - } - &:hover, &:focus, &:active { @@ -1979,6 +1964,11 @@ a.account__display-name { } } + &.active { + border-bottom: 2px solid $highlight-text-color; + color: $highlight-text-color; + } + span { margin-left: 5px; display: none; @@ -2021,7 +2011,7 @@ a.account__display-name { top: 15px; } - @media screen and (min-width: 360px) { + @media screen and (min-width: $no-gap-breakpoint) { padding: 10px 0; } @@ -2135,7 +2125,7 @@ a.account__display-name { } } -@media screen and (min-width: 360px) { +@media screen and (min-width: $no-gap-breakpoint) { .tabs-bar { margin: 10px auto; margin-bottom: 0; @@ -2212,17 +2202,6 @@ a.account__display-name { height: calc(100% - 10px); overflow-y: hidden; - .search__input { - line-height: 18px; - font-size: 16px; - padding: 15px; - padding-right: 30px; - } - - .search__icon .fa { - top: 15px; - } - .navigation-bar { padding-top: 20px; padding-bottom: 20px; @@ -2709,21 +2688,22 @@ a.account__display-name { } .setting-text { - color: $darker-text-color; - background: transparent; - border: 0; - border-bottom: 2px solid $ui-primary-color; - box-sizing: border-box; display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; + box-sizing: border-box; width: 100%; + margin: 0; + color: $inverted-text-color; + background: $simple-background-color; + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + border: 0; + outline: 0; + border-radius: 4px; - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $highlight-text-color; + &:focus { + outline: 0; } @media screen and (max-width: 600px) { @@ -3085,6 +3065,10 @@ a.status-card.compact:hover { display: flex; } +.column-header__links { + margin-bottom: 14px; +} + .column-header__links .text-btn { margin-right: 10px; } @@ -3895,8 +3879,10 @@ a.status-card.compact:hover { @include search-input; display: block; - padding: 10px; + padding: 15px; padding-right: 30px; + line-height: 18px; + font-size: 16px; } .search__icon { @@ -3911,7 +3897,7 @@ a.status-card.compact:hover { .fa { position: absolute; - top: 10px; + top: 16px; right: 10px; z-index: 2; display: inline-block; @@ -3941,7 +3927,7 @@ a.status-card.compact:hover { } .fa-times-circle { - top: 11px; + top: 17px; transform: rotate(0deg); color: $action-button-color; cursor: pointer; @@ -4747,7 +4733,6 @@ a.status-card.compact:hover { display: block; text-decoration: none; color: $secondary-text-color; - line-height: 0; position: relative; z-index: 1; @@ -5474,8 +5459,8 @@ noscript { } .column-inline-form { - padding: 7px 15px; - padding-right: 5px; + padding: 15px; + padding-right: 0; display: flex; justify-content: flex-start; align-items: center; @@ -5486,7 +5471,6 @@ noscript { input { width: 100%; - margin-bottom: 6px; &:focus { outline: 0; @@ -5496,7 +5480,7 @@ noscript { .icon-button { flex: 0 0 auto; - margin: 0 5px; + margin: 0 10px; } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 2d68d2b70..3564bf07b 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -21,7 +21,8 @@ justify-content: center; align-items: center; - img { + svg { + fill: $primary-text-color; height: 42px; margin-right: 10px; } @@ -256,12 +257,13 @@ display: block; padding: 15px; - img { + svg { display: block; height: 18px; width: auto; position: relative; bottom: -2px; + fill: $primary-text-color; @media screen and (max-width: $no-gap-breakpoint) { height: 20px; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index f3de87791..456ee4e0d 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -79,6 +79,12 @@ code { text-decoration: none; } } + + .recommended { + position: absolute; + margin: 0 4px; + margin-top: -2px; + } } } @@ -443,6 +449,10 @@ code { height: 41px; } + h4 { + margin-bottom: 15px !important; + } + .label_input { &__wrapper { position: relative; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index a59f59f59..58bc53b14 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -43,6 +43,10 @@ body.rtl { left: 10px; } + .columns-area { + direction: rtl; + } + .column-header__buttons { left: 0; right: auto; diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index bfbb907e0..19ce0ab8f 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -4,6 +4,10 @@ overflow: hidden; margin-bottom: 10px; + &--under-tabs { + border-radius: 0 0 4px 4px; + } + @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; border-radius: 0; |