diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
12 files changed, 478 insertions, 114 deletions
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 8b8c615ee..0fae137f0 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -199,7 +199,8 @@ } } -.account-role { +.account-role, +.simple_form .recommended { display: inline-block; padding: 4px 6px; cursor: default; diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index c0340e3f8..d2233207d 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -46,6 +46,18 @@ vertical-align: middle; margin-right: 5px; } + + &-composite { + @include avatar-radius; + overflow: hidden; + + & div { + @include avatar-radius; + float: left; + position: relative; + box-sizing: border-box; + } + } } .account__avatar-overlay { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 7a8accc27..b354e7acf 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -11,15 +11,42 @@ justify-content: flex-start; overflow-x: auto; position: relative; -} -@include limited-single-column('screen and (min-width: 360px)', $parent: null) { - .columns-area { - padding: 10px; - } + &__panels { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + + &__pane { + height: 100%; + overflow: hidden; + pointer-events: none; + display: flex; + justify-content: flex-end; + + &--start { + justify-content: flex-start; + } + + &__inner { + width: 285px; + pointer-events: auto; + height: 100%; + } + } - .react-swipeable-view-container .columns-area { - height: calc(100% - 20px) !important; + &__main { + box-sizing: border-box; + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + + @media screen and (min-width: 360px) { + padding: 0 10px; + } + } } } @@ -63,62 +90,6 @@ overflow: hidden; } -@include limited-single-column('screen and (min-width: 360px)', $parent: null) { - .tabs-bar { - margin: 10px; - margin-bottom: 0; - } -} - -:root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 630px)', $parent: null) { - .column { - flex: auto; - width: 100%; - min-width: 0; - max-width: none; - padding: 0; - } - - .columns-area { - flex-direction: column; - } - - .search__input, - .autosuggest-textarea__textarea { - font-size: 16px; - } - } -} - -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .columns-area { - padding: 0; - } - - .column { - 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 { - padding-left: 5px; - padding-right: 5px; - } - } -} - .column-back-button { background: lighten($ui-base-color, 4%); color: $highlight-text-color; @@ -183,9 +154,31 @@ padding: 15px; text-decoration: none; - &:hover { + &:hover, + &:focus, + &:active { background: lighten($ui-base-color, 11%); } + + &:focus { + outline: 0; + } + + &--transparent { + background: transparent; + color: $ui-secondary-color; + + &:hover, + &:focus, + &:active { + background: transparent; + color: $primary-text-color; + } + + &.active { + color: $ui-highlight-color; + } + } } .column-link__icon { @@ -277,7 +270,7 @@ flex-direction: column; overflow: hidden; - .wide & { + .wide .columns-area:not(.columns-area--mobile) & { flex: auto; min-width: 330px; max-width: 400px; @@ -294,6 +287,10 @@ margin-left: 0; } +.column-header__links { + margin-bottom: 14px; +} + .column-header__links .text-btn { margin-right: 10px; } @@ -438,6 +435,10 @@ contain: strict; } + & > span { + max-width: 400px; + } + a { color: $highlight-text-color; text-decoration: none; @@ -503,27 +504,3 @@ margin: 0 5px; } } - -.floating-action-button { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - width: 3.9375rem; - height: 3.9375rem; - bottom: 1.3125rem; - right: 1.3125rem; - background: darken($ui-highlight-color, 3%); - color: $white; - border-radius: 50%; - font-size: 21px; - line-height: 21px; - text-decoration: none; - box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); - - &:hover, - &:focus, - &:active { - background: lighten($ui-highlight-color, 7%); - } -} diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index ba517a2ab..62eca49a1 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -12,7 +12,8 @@ opacity: 0.0; &.composer--spoiler--visible { - height: 47px; + height: 36px; + margin-bottom: 11px; opacity: 1.0; } @@ -98,6 +99,9 @@ border-radius: 4px; padding: 10px; background: $ui-primary-color; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; & > header { margin-bottom: 5px; @@ -225,7 +229,7 @@ } } -.composer--textarea, +.compose-form__autosuggest-wrapper, .autosuggest-input { position: relative; @@ -284,6 +288,11 @@ } } +.autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; +} + .autosuggest-textarea__suggestions { display: block; position: absolute; @@ -485,6 +494,7 @@ box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); border-radius: 0 0 4px 4px; height: 27px; + flex: 0 0 auto; & > * { display: inline-block; @@ -575,6 +585,7 @@ text-align: right; white-space: nowrap; overflow: hidden; + justify-content: flex-end; & > .count { display: inline-block; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 9f426448f..f054ddbc0 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -86,9 +86,8 @@ box-sizing: border-box; margin: 0; border: none; - padding: 10px 30px 10px 10px; + padding: 15px 30px 15px 15px; width: 100%; - height: 36px; outline: 0; color: $darker-text-color; background: $ui-base-color; @@ -276,6 +275,7 @@ background: lighten($ui-base-color, 13%) 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; flex: 1; min-height: 47px; + display: none; > img { display: block; @@ -295,6 +295,10 @@ border: none; cursor: inherit; } + + @media screen and (min-height: 640px) { + display: block; + } } .pseudo-drawer { 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'; diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index f59ef019e..3ef141133 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -12,7 +12,7 @@ .search__icon { .fa { position: absolute; - top: 10px; + top: 16px; right: 10px; z-index: 2; display: inline-block; @@ -42,7 +42,7 @@ } .fa-times-circle { - top: 11px; + top: 17px; transform: rotate(0deg); cursor: pointer; diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss new file mode 100644 index 000000000..ca962abd2 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -0,0 +1,232 @@ +.compose-panel { + width: 285px; + margin-top: 10px; + display: flex; + flex-direction: column; + height: calc(100% - 10px); + overflow-y: hidden; + + .drawer--search input { + line-height: 18px; + font-size: 16px; + padding: 15px; + padding-right: 30px; + } + + .search__icon .fa { + top: 15px; + } + + .drawer--account { + flex: 0 1 48px; + } + + .flex-spacer { + background: transparent; + } + + .composer { + flex: 1; + overflow-y: hidden; + display: flex; + flex-direction: column; + min-height: 310px; + } + + .compose-form__autosuggest-wrapper { + overflow-y: auto; + background-color: $white; + border-radius: 4px 4px 0 0; + flex: 0 1 auto; + } + + .autosuggest-textarea__textarea { + overflow-y: hidden; + } + + .compose-form__upload-thumbnail { + height: 80px; + } +} + +.navigation-panel { + margin-top: 10px; + margin-bottom: 10px; + height: calc(100% - 20px); + overflow-y: auto; + + hr { + border: 0; + background: transparent; + border-top: 1px solid lighten($ui-base-color, 4%); + margin: 10px 0; + } +} + +@media screen and (min-width: 600px) { + .tabs-bar__link { + span { + display: inline; + } + } +} + +.columns-area--mobile { + flex-direction: column; + width: 100%; + margin: 0 auto; + + .column, + .drawer { + width: 100%; + height: 100%; + padding: 0; + } + + .autosuggest-textarea__textarea { + font-size: 16px; + } + + .search__input { + line-height: 18px; + font-size: 16px; + padding: 15px; + padding-right: 30px; + } + + .search__icon .fa { + top: 15px; + } + + @media screen and (min-width: 360px) { + padding: 10px 0; + } + + @media screen and (min-width: 630px) { + .detailed-status { + padding: 15px; + + .media-gallery, + .video-player { + margin-top: 15px; + } + } + + .account__header__bar { + padding: 5px 10px; + } + + .navigation-bar, + .compose-form { + padding: 15px; + } + + .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 15px; + } + + .status { + padding: 15px; + min-height: 48px + 2px; + + .media-gallery, + &__action-bar, + .video-player { + margin-top: 10px; + } + } + + .account { + padding: 15px 10px; + + &__header__bio { + margin: 0 -10px; + } + } + + .notification { + &__message { + padding-top: 15px; + } + + .status { + padding-top: 8px; + } + + .account { + padding-top: 8px; + } + } + } +} + +.floating-action-button { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + width: 3.9375rem; + height: 3.9375rem; + bottom: 1.3125rem; + right: 1.3125rem; + background: darken($ui-highlight-color, 3%); + color: $white; + border-radius: 50%; + font-size: 21px; + line-height: 21px; + text-decoration: none; + box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); + + &:hover, + &:focus, + &:active { + background: lighten($ui-highlight-color, 7%); + } +} + +@media screen and (min-width: 360px) { + .tabs-bar { + margin: 10px auto; + margin-bottom: 0; + width: 100%; + } + + .react-swipeable-view-container .columns-area--mobile { + height: calc(100% - 20px) !important; + } + + .getting-started__wrapper, + .getting-started__trends, + .search { + margin-bottom: 10px; + } +} + +@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { + .columns-area__panels__pane--compositional { + display: none; + } +} + +@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { + .floating-action-button, + .tabs-bar__link.optional { + display: none; + } + + .search-page .search { + display: none; + } +} + +@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { + .columns-area__panels__pane--navigational { + display: none; + } +} + +@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { + .tabs-bar { + display: none; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 327694a7e..ee4440e89 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -209,7 +209,7 @@ outline: 0; background: lighten($ui-base-color, 4%); - .status.status-direct { + &.status.status-direct:not(.read) { background: lighten($ui-base-color, 12%); &.muted { @@ -249,8 +249,9 @@ margin-top: 8px; } - &.status-direct { + &.status-direct:not(.read) { background: lighten($ui-base-color, 8%); + border-bottom-color: lighten($ui-base-color, 12%); } &.light { @@ -333,7 +334,7 @@ &:focus > .status__content:after { background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1)); } - &.status-direct> .status__content:after { + &.status-direct:not(.read)> .status__content:after { background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1)); } @@ -599,7 +600,7 @@ } } -.status__display-name, +a.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name { diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 2b8d7a682..dae29a003 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index ce2a2eeb5..7da8edbde 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -27,15 +27,16 @@ } } -.status.status-direct { +.status.status-direct:not(.read) { background: darken($ui-base-color, 8%); + border-bottom-color: darken($ui-base-color, 12%); &.collapsed> .status__content:after { background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); } } -.focusable:focus.status.status-direct { +.focusable:focus.status.status-direct:not(.read) { background: darken($ui-base-color, 4%); &.collapsed> .status__content:after { @@ -124,7 +125,7 @@ // Change the default color of several parts of the compose form .composer { - .composer--spoiler input, .composer--textarea textarea { + .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { color: lighten($ui-base-color, 80%); &:disabled { background: lighten($simple-background-color, 10%) } diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 9e0a93ec2..11fae3121 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -43,6 +43,10 @@ body.rtl { left: 10px; } + .columns-area { + direction: rtl; + } + .column-header__buttons { left: 0; right: auto; |