diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/index.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 133 |
1 files changed, 122 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 63211392e..9f96a3154 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -287,8 +287,12 @@ text-overflow: ellipsis; white-space: nowrap; + a { + color: inherit; + text-decoration: inherit; + } + strong { - display: block; height: 18px; font-size: 16px; font-weight: 500; @@ -308,7 +312,7 @@ white-space: nowrap; } - &:hover { + > a:hover { strong { text-decoration: underline; } @@ -548,7 +552,44 @@ } } +.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; @@ -559,6 +600,7 @@ display: block; flex: 1 1 auto; padding: 15px 10px; + padding-bottom: 13px; color: $primary-text-color; text-decoration: none; text-align: center; @@ -573,31 +615,53 @@ font-size: 16px; } - &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $highlight-text-color; - } - &: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%); } } - span:last-child { + &.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; + } } -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .tabs-bar { - display: none; +.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; } } +.column-link--transparent .icon-with-badge__badge { + border-color: darken($ui-base-color, 8%); +} + .scrollable { overflow-y: scroll; overflow-x: hidden; @@ -1268,6 +1332,52 @@ height: 1em; } +.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: lighten($ui-base-color, 16%); + } + } + } + + svg { + width: 100%; + height: auto; + + path:first-child { + fill: lighten($ui-base-color, 12%); + } + + path:last-child { + fill: darken($ui-base-color, 14%); + } + } + + &__active { + color: $ui-highlight-color; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: lighten($ui-base-color, 12%); + border-radius: 50%; + padding: 0.35rem; + } +} + ::-webkit-scrollbar-thumb { border-radius: 0; } @@ -1322,3 +1432,4 @@ noscript { @import 'emoji_picker'; @import 'local_settings'; @import 'error_boundary'; +@import 'single_column'; |