diff options
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/about.scss | 56 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 104 |
2 files changed, 114 insertions, 46 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index deab66ff2..66da44086 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -121,7 +121,7 @@ .information-board { background: darken($ui-base-color, 4%); - padding: 40px 0; + padding: 20px 0; .panel { position: absolute; @@ -147,10 +147,15 @@ white-space: nowrap; overflow: hidden; + a, span { font-weight: 400; color: lighten($ui-base-color, 34%); } + + a { + text-decoration: none; + } } } @@ -162,13 +167,14 @@ .information-board-sections { display: flex; justify-content: space-between; + flex-wrap: wrap; } .section { flex: 1 0 0; font: 16px/28px 'mastodon-font-sans-serif', sans-serif; text-align: right; - padding: 0 15px; + padding: 10px 15px; span, strong { @@ -190,14 +196,6 @@ color: $primary-text-color; } } - - @media screen and (max-width: 500px) { - flex-direction: column; - - .section { - text-align: left; - } - } } .owner { @@ -317,6 +315,17 @@ } } + p, + li { + font: inherit; + font-weight: inherit; + margin-bottom: 0; + } + + hr { + border-color: rgba($ui-base-lighter-color, .6); + } + .header { line-height: 30px; overflow: hidden; @@ -553,6 +562,7 @@ } #mastodon-timeline { + display: flex; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; font-family: 'mastodon-font-sans-serif', sans-serif; @@ -567,11 +577,20 @@ overflow: hidden; box-shadow: 0 0 6px rgba($black, 0.1); + .column-header { + color: inherit; + font-family: inherit; + font-size: 16px; + line-height: inherit; + font-weight: inherit; + margin: 0; + padding: 15px; + } + .column { padding: 0; border-radius: 4px; overflow: hidden; - height: 100%; } .scrollable { @@ -652,21 +671,17 @@ } } - @media screen and (max-width: 800px) { + @media screen and (max-width: 840px) { .container { padding: 0 20px; } - .information-board { - padding-bottom: 20px; - } - .information-board .container { padding-right: 20px; .panel { position: static; - margin-top: 30px; + margin-top: 20px; width: 100%; border-radius: 4px; @@ -694,6 +709,10 @@ @media screen and (max-width: 675px) { .header-wrapper { padding-top: 0; + + &.compact .hero .heading { + padding-bottom: 20px; + } } .header .container, @@ -707,14 +726,13 @@ } .header { - padding-top: 0; .hero { margin-top: 30px; padding: 0; .heading { - padding-bottom: 20px; + padding: 0 20px 20px; } } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index fe74bae84..fa604df5c 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -149,12 +149,16 @@ color: $ui-base-lighter-color; } + &.disabled { + color: $ui-primary-color; + } + &.active { color: $ui-highlight-color; - } - &.disabled { - color: $ui-primary-color; + &.disabled { + color: lighten($ui-highlight-color, 13%); + } } } @@ -215,16 +219,18 @@ } .dropdown--active::after { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px; - border-color: transparent transparent $ui-secondary-color; - bottom: 8px; - right: 104px; + @media screen and (min-width: 1025px) { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 0 4.5px 7.8px; + border-color: transparent transparent $ui-secondary-color; + bottom: 8px; + right: 104px; + } } .invisible { @@ -1837,6 +1843,8 @@ cursor: pointer; flex: 0 0 auto; font-size: 16px; + border: 0; + text-align: start; padding: 15px; z-index: 3; @@ -1999,12 +2007,6 @@ &:hover { background: lighten($ui-base-color, 11%); } - - &.hidden-on-mobile { - @include single-column('screen and (max-width: 1024px)') { - display: none; - } - } } .column-link__icon { @@ -2388,12 +2390,6 @@ button.icon-button.active i.fa-retweet { } } - &.hidden-on-mobile { - @include single-column('screen and (max-width: 1024px)') { - display: none; - } - } - &:focus, &:active { outline: 0; @@ -2672,6 +2668,8 @@ button.icon-button.active i.fa-retweet { cursor: pointer; display: flex; flex-direction: column; + border: 0; + width: 100%; height: 100%; justify-content: center; position: relative; @@ -2754,6 +2752,7 @@ button.icon-button.active i.fa-retweet { align-items: center; background: rgba($base-overlay-background, 0.5); box-sizing: border-box; + border: 0; color: $primary-text-color; cursor: pointer; display: flex; @@ -3848,7 +3847,8 @@ button.icon-button.active i.fa-retweet { .boost-modal, .confirmation-modal, -.report-modal { +.report-modal, +.actions-modal { background: lighten($ui-secondary-color, 8%); color: $ui-base-color; border-radius: 8px; @@ -3873,6 +3873,15 @@ button.icon-button.active i.fa-retweet { } } +.actions-modal { + .status { + background: $white; + border-bottom-color: $ui-secondary-color; + padding-top: 10px; + padding-bottom: 10px; + } +} + .boost-modal__container { overflow-x: scroll; padding: 10px; @@ -3914,7 +3923,7 @@ button.icon-button.active i.fa-retweet { } .confirmation-modal { - max-width: 280px; + max-width: 85vw; @media screen and (min-width: 480px) { max-width: 380px; @@ -3939,6 +3948,47 @@ button.icon-button.active i.fa-retweet { } } +.actions-modal { + .status { + overflow-y: auto; + max-height: 300px; + } + + max-height: 80vh; + max-width: 80vw; + + ul { + overflow-y: auto; + flex-shrink: 0; + + li:empty { + margin: 0; + } + + li:not(:empty) { + a { + color: $ui-base-color; + display: flex; + padding: 10px; + align-items: center; + text-decoration: none; + + &.active { + &, + button { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + button:first-child { + margin-right: 10px; + } + } + } + } +} + .confirmation-modal__action-bar { .confirmation-modal__cancel-button { background-color: transparent; |