diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
13 files changed, 1356 insertions, 353 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss new file mode 100644 index 000000000..c6cc6c615 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -0,0 +1,274 @@ +.image { + position: relative; + overflow: hidden; + + &__preview { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + &.loaded &__preview { + display: none; + } + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + border: 0; + background: transparent; + opacity: 0; + } + + &.loaded img { + opacity: 1; + } +} + +.link-footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + z-index: 1; + font-size: 13px; + + p { + color: $dark-text-color; + margin-bottom: 20px; + + strong { + font-weight: 500; + } + + a { + color: $dark-text-color; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + +.about { + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__footer { + color: $dark-text-color; + text-align: center; + font-size: 15px; + line-height: 22px; + margin-top: 20px; + } + + &__header { + margin-bottom: 30px; + + &__hero { + width: 100%; + height: auto; + aspect-ratio: 1.9; + background: lighten($ui-base-color, 4%); + border-radius: 8px; + margin-bottom: 30px; + } + + h1, + p { + text-align: center; + } + + h1 { + font-size: 24px; + line-height: 1.5; + font-weight: 700; + margin-bottom: 10px; + } + + p { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: $darker-text-color; + } + } + + &__meta { + background: lighten($ui-base-color, 4%); + border-radius: 4px; + display: flex; + margin-bottom: 30px; + font-size: 15px; + + &__column { + box-sizing: border-box; + width: 50%; + padding: 20px; + } + + &__divider { + width: 0; + border: 0; + border-style: solid; + border-color: lighten($ui-base-color, 8%); + border-left-width: 1px; + min-height: calc(100% - 60px); + flex: 0 0 auto; + } + + h4 { + font-size: 15px; + text-transform: uppercase; + color: $darker-text-color; + font-weight: 500; + margin-bottom: 20px; + } + + @media screen and (max-width: 600px) { + display: block; + + h4 { + text-align: center; + } + + &__column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + &__divider { + min-height: 0; + width: 100%; + border-left-width: 0; + border-top-width: 1px; + } + } + + .layout-multiple-columns & { + display: block; + + h4 { + text-align: center; + } + + &__column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + &__divider { + min-height: 0; + width: 100%; + border-left-width: 0; + border-top-width: 1px; + } + } + } + + &__mail { + color: $primary-text-color; + text-decoration: none; + font-weight: 500; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + + .link-footer { + padding: 0; + margin-top: 60px; + text-align: center; + font-size: 15px; + line-height: 22px; + + @media screen and (min-width: $no-gap-breakpoint) { + display: none; + } + } + + .account { + padding: 0; + border: 0; + } + + .account__avatar-wrapper { + margin-left: 0; + } + + .account__relationship { + display: none; + } + + &__section { + margin-bottom: 10px; + + &__title { + font-size: 17px; + font-weight: 600; + line-height: 22px; + padding: 20px; + border-radius: 4px; + background: lighten($ui-base-color, 4%); + color: $highlight-text-color; + cursor: pointer; + } + + &.active &__title { + border-radius: 4px 4px 0 0; + } + + &__body { + border: 1px solid lighten($ui-base-color, 4%); + border-top: 0; + padding: 20px; + font-size: 15px; + line-height: 22px; + } + } + + &__domain-blocks { + margin-top: 30px; + width: 100%; + border-collapse: collapse; + break-inside: auto; + + th { + text-align: left; + font-weight: 500; + color: $darker-text-color; + } + + thead tr, + tbody tr { + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + tbody tr:last-child { + border-bottom: 0; + } + + th, + td { + padding: 8px; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 4e912b18b..00519adf1 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -541,6 +541,7 @@ &__buttons { display: flex; align-items: center; + gap: 8px; padding-top: 55px; overflow: hidden; @@ -550,14 +551,6 @@ box-sizing: content-box; padding: 2px; } - - & > .icon-button { - margin-right: 8px; - } - - .button { - margin: 0 8px; - } } &__name { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 1440682f3..c61815e07 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -42,27 +42,62 @@ &__main { box-sizing: border-box; width: 100%; - max-width: 600px; flex: 0 0 auto; display: flex; flex-direction: column; @media screen and (min-width: $no-gap-breakpoint) { padding: 0 10px; + max-width: 600px; } } } } +$ui-header-height: 55px; + +.ui__header { + display: none; + box-sizing: border-box; + height: $ui-header-height; + position: sticky; + top: 0; + z-index: 2; + justify-content: space-between; + align-items: center; + + &__logo { + display: inline-flex; + padding: 15px; + + .logo { + height: $ui-header-height - 30px; + width: auto; + } + } + + &__links { + display: flex; + align-items: center; + gap: 10px; + padding: 0 10px; + + .button { + flex: 0 0 auto; + } + } +} + .tabs-bar__wrapper { background: darken($ui-base-color, 8%); position: sticky; - top: 0; + top: $ui-header-height; z-index: 2; padding-top: 0; @media screen and (min-width: $no-gap-breakpoint) { padding-top: 10px; + top: 0; } .tabs-bar { @@ -117,6 +152,7 @@ box-sizing: border-box; width: 100%; background: lighten($ui-base-color, 4%); + border-radius: 4px 4px 0 0; color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; @@ -178,6 +214,8 @@ font-size: 16px; padding: 15px; text-decoration: none; + overflow: hidden; + white-space: nowrap; &:hover, &:focus, @@ -204,6 +242,17 @@ color: $highlight-text-color; } } + + &--logo { + background: transparent; + padding: 10px; + + &:hover, + &:focus, + &:active { + background: transparent; + } + } } .column-link__icon { @@ -255,6 +304,7 @@ display: flex; font-size: 16px; background: lighten($ui-base-color, 4%); + border-radius: 4px 4px 0 0; flex: 0 0 auto; cursor: pointer; position: relative; @@ -309,6 +359,8 @@ > .scrollable { background: $ui-base-color; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } } @@ -352,6 +404,11 @@ &:focus { text-shadow: 0 0 4px darken($ui-highlight-color, 5%); } + + &:disabled { + color: $dark-text-color; + cursor: default; + } } .column-header__notif-cleaning-buttons { @@ -570,7 +627,6 @@ } .empty-column-indicator, -.error-column, .follow_requests-unlocked_explanation { color: $dark-text-color; background: $ui-base-color; @@ -607,7 +663,48 @@ } .error-column { + padding: 20px; + background: $ui-base-color; + border-radius: 4px; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; flex-direction: column; + cursor: default; + + &__image { + width: 70%; + max-width: 350px; + margin-top: -50px; + } + + &__message { + text-align: center; + color: $darker-text-color; + font-size: 15px; + line-height: 22px; + + h1 { + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + color: $primary-text-color; + } + + p { + max-width: 48ch; + } + + &__actions { + margin-top: 30px; + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + } + } } // more fixes for the navbar-under mode @@ -849,7 +946,7 @@ .column-actions { display: flex; - align-items: start; + align-items: flex-start; justify-content: center; padding: 40px; padding-top: 40px; @@ -881,3 +978,28 @@ color: $darker-text-color; } } + +.dismissable-banner { + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + align-items: center; + gap: 30px; + + &__message { + flex: 1 1 auto; + padding: 20px 15px; + cursor: default; + font-size: 14px; + line-height: 18px; + color: $primary-text-color; + } + + &__action { + padding: 15px; + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index 1468bd4f5..72d3aad1d 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -1,4 +1,4 @@ -.composer { +.compose-form { padding: 10px; .emoji-picker-dropdown { @@ -25,16 +25,16 @@ } } -.no-reduce-motion .composer--spoiler { +.no-reduce-motion .spoiler-input { transition: height 0.4s ease, opacity 0.4s ease; } -.composer--spoiler { +.spoiler-input { height: 0; transform-origin: bottom; opacity: 0.0; - &.composer--spoiler--visible { + &.spoiler-input--visible { height: 36px; margin-bottom: 11px; opacity: 1.0; @@ -64,7 +64,7 @@ } } -.composer--warning { +.compose-form__warning { color: $inverted-text-color; margin-bottom: 15px; background: $ui-primary-color; @@ -123,7 +123,7 @@ } } -.composer--reply { +.reply-indicator { margin: 0 0 10px; border-radius: 4px; padding: 10px; @@ -131,117 +131,117 @@ min-height: 23px; overflow-y: auto; flex: 0 2 auto; +} - & > header { - margin-bottom: 5px; - overflow: hidden; +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; - & > .account.small { color: $inverted-text-color; } + & > .account.small { color: $inverted-text-color; } +} - & > .cancel { - float: right; - line-height: 24px; - } - } +.reply-indicator__cancel { + float: right; + line-height: 24px; +} - & > .content { - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 14px; - line-height: 20px; - color: $inverted-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; - overflow: hidden; +.reply-indicator__content { + position: relative; + margin: 10px 0; + padding: 0 12px; + font-size: 14px; + line-height: 20px; + color: $inverted-text-color; + word-wrap: break-word; + font-weight: 400; + overflow: visible; + white-space: pre-wrap; + padding-top: 5px; + overflow: hidden; - p, pre, blockquote { - margin-bottom: 20px; - white-space: pre-wrap; + p, pre, blockquote { + margin-bottom: 20px; + white-space: pre-wrap; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; } + } - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } + h1, h2, h3, h4, h5 { + margin-top: 20px; + margin-bottom: 20px; + } - h1, h2 { - font-weight: 700; - font-size: 18px; - } + h1, h2 { + font-weight: 700; + font-size: 18px; + } - h2 { - font-size: 16px; - } + h2 { + font-size: 16px; + } - h3, h4, h5 { - font-weight: 500; - } + h3, h4, h5 { + font-weight: 500; + } - blockquote { - padding-left: 10px; - border-left: 3px solid $inverted-text-color; - color: $inverted-text-color; - white-space: normal; + blockquote { + padding-left: 10px; + border-left: 3px solid $inverted-text-color; + color: $inverted-text-color; + white-space: normal; - p:last-child { - margin-bottom: 0; - } + p:last-child { + margin-bottom: 0; } + } - b, strong { - font-weight: 700; - } + b, strong { + font-weight: 700; + } - em, i { - font-style: italic; - } + em, i { + font-style: italic; + } - sub { - font-size: smaller; - vertical-align: sub; - } + sub { + font-size: smaller; + vertical-align: sub; + } - sup { - font-size: smaller; - vertical-align: super; - } + sup { + font-size: smaller; + vertical-align: super; + } - ul, ol { - margin-left: 1em; + ul, ol { + margin-left: 1em; - p { - margin: 0; - } + p { + margin: 0; } + } - ul { - list-style-type: disc; - } + ul { + list-style-type: disc; + } - ol { - list-style-type: decimal; - } + ol { + list-style-type: decimal; + } - a { - color: $lighter-text-color; - text-decoration: none; + a { + color: $lighter-text-color; + text-decoration: none; - &:hover { text-decoration: underline } + &:hover { text-decoration: underline } - &.mention { - &:hover { - text-decoration: none; + &.mention { + &:hover { + text-decoration: none; - span { text-decoration: underline } - } + span { text-decoration: underline } } } } @@ -253,8 +253,12 @@ } } -.compose-form__autosuggest-wrapper, -.autosuggest-input { +.compose-form .compose-form__autosuggest-wrapper { + position: relative; +} + +.compose-form .autosuggest-textarea, +.compose-form .autosuggest-input { position: relative; width: 100%; @@ -284,10 +288,6 @@ all: unset; } - &:disabled { - background: $ui-secondary-color; - } - &:focus { outline: 0; } @@ -304,7 +304,7 @@ } } -.composer--textarea--icons { +.compose-form__textarea-icons { display: block; position: absolute; top: 29px; @@ -401,25 +401,25 @@ } } -.composer--upload_form { +.compose-form__upload-wrapper { overflow: hidden; +} - & > .content { - display: flex; - flex-direction: row; - flex-wrap: wrap; - font-family: inherit; - padding: 5px; - overflow: hidden; - } +.compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-family: inherit; + padding: 5px; + overflow: hidden; } -.composer--upload_form--item { +.compose-form__upload { flex: 1 1 0; margin: 5px; min-width: 40%; - & > div { + .compose-form__upload-thumbnail { position: relative; border-radius: 4px; height: 140px; @@ -459,52 +459,52 @@ } } -.composer--upload_form--actions { +.compose-form__upload__actions { background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); display: flex; align-items: flex-start; justify-content: space-between; } -.composer--upload_form--progress { +.upload-progress { display: flex; padding: 10px; color: $darker-text-color; overflow: hidden; - & > .fa { + .fa { font-size: 34px; margin-right: 10px; } - & > .message { - flex: 1 1 auto; + span { + display: block; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } +} - & > span { - display: block; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - } +.upload-progress__message { + flex: 1 1 auto; +} - & > .backdrop { - position: relative; - margin-top: 5px; - border-radius: 6px; - width: 100%; - height: 6px; - background: $ui-base-lighter-color; - - & > .tracker { - position: absolute; - top: 0; - left: 0; - height: 6px; - border-radius: 6px; - background: $ui-highlight-color; - } - } - } +.upload-progress__backdrop { + position: relative; + margin-top: 5px; + border-radius: 6px; + width: 100%; + height: 6px; + background: $ui-base-lighter-color; +} + +.upload-progress__tracker { + position: absolute; + top: 0; + left: 0; + height: 6px; + border-radius: 6px; + background: $ui-highlight-color; } .compose-form__modifiers { @@ -514,7 +514,7 @@ background: $simple-background-color; } -.composer--options-wrapper { +.compose-form__buttons-wrapper { padding: 10px; background: darken($simple-background-color, 8%); border-radius: 0 0 4px 4px; @@ -524,11 +524,12 @@ flex: 0 0 auto; } -.composer--options { +.compose-form__buttons { display: flex; flex: 0 0 auto; - & > * { + & .icon-button, + & .text-icon-button { display: inline-block; box-sizing: content-box; padding: 0 3px; @@ -550,30 +551,41 @@ } } -.compose--counter-wrapper { +.character-counter__wrapper { align-self: center; margin-right: 4px; } -.composer--options--dropdown { - &.open { - & > .value { - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - color: $primary-text-color; - background: $ui-highlight-color; +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { transition: none; } - &.top { - & > .value { - border-radius: 0 0 4px 4px; - box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1); + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; } } } + + &.top .privacy-dropdown__value { + border-radius: 0 0 4px 4px; + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } } -.composer--options--dropdown--content { +.privacy-dropdown__dropdown { position: absolute; border-radius: 4px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); @@ -582,14 +594,14 @@ transform-origin: 50% 0; } -.composer--options--dropdown--content--item { +.privacy-dropdown__option { display: flex; align-items: center; padding: 10px; color: $inverted-text-color; cursor: pointer; - & > .content { + .privacy-dropdown__option__content { flex: 1 1 auto; color: $lighter-text-color; @@ -607,7 +619,7 @@ background: $ui-highlight-color; color: $primary-text-color; - & > .content { + .privacy-dropdown__option__content { color: $primary-text-color; strong { color: $primary-text-color } @@ -617,31 +629,25 @@ &.active:hover { background: lighten($ui-highlight-color, 4%) } } -.composer--publisher { - padding-top: 10px; - text-align: right; - white-space: nowrap; - overflow: hidden; +.compose-form__publish { + display: flex; justify-content: flex-end; + min-width: 0; flex: 0 0 auto; + column-gap: 5px; - & > .primary { - display: inline-block; - margin: 0; - padding: 7px 10px; - text-align: center; - } + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; - & > .side_arm { - display: inline-block; - margin: 0 5px; - padding: 7px 0; - width: 36px; - text-align: center; - } + button { + padding: 7px 10px; + text-align: center; + } - &.over { - & > .count { color: $warning-red } + & > .side_arm { + width: 36px; + } } } diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 0089445e1..790650cfa 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -111,7 +111,7 @@ position: relative; input { - font-size: 14px; + font-size: 16px; font-weight: 400; padding: 7px 9px; padding-right: 25px; @@ -132,6 +132,10 @@ &:active { outline: 0 !important; } + + &::-webkit-search-cancel-button { + display: none; + } } } diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss new file mode 100644 index 000000000..bad77fc1c --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -0,0 +1,115 @@ +.account-card__header { + position: relative; +} + +.explore__search-header { + background: darken($ui-base-color, 4%); + justify-content: center; + align-items: center; + padding: 15px; + + .search { + width: 100%; + margin-bottom: 0; + } + + .search__input { + border: 1px solid lighten($ui-base-color, 8%); + padding: 10px; + } + + .search .fa { + top: 10px; + right: 10px; + color: $dark-text-color; + } + + .search .fa-times-circle { + top: 12px; + } +} + +.explore__search-results { + flex: 1 1 auto; + display: flex; + flex-direction: column; +} + +.story { + display: flex; + align-items: center; + color: $primary-text-color; + text-decoration: none; + padding: 15px 0; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &:hover, + &:active, + &:focus { + background-color: lighten($ui-base-color, 4%); + } + + &__details { + padding: 0 15px; + flex: 1 1 auto; + + &__publisher { + color: $darker-text-color; + margin-bottom: 4px; + } + + &__title { + font-size: 19px; + line-height: 24px; + font-weight: 500; + margin-bottom: 4px; + } + + &__shared { + color: $darker-text-color; + } + } + + &__thumbnail { + flex: 0 0 auto; + margin: 0 15px; + position: relative; + width: 120px; + height: 120px; + + .skeleton { + width: 100%; + height: 100%; + } + + img { + border-radius: 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__preview { + border-radius: 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: fill; + position: absolute; + top: 0; + left: 0; + z-index: 0; + + &--hidden { + display: none; + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index b54c3f696..b00038afd 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -20,6 +20,11 @@ background: transparent; padding: 0; cursor: pointer; + text-decoration: none; + + &--destructive { + color: $error-value-color; + } &:hover, &:active { @@ -110,6 +115,27 @@ &:hover { border-color: lighten($ui-primary-color, 4%); color: lighten($darker-text-color, 4%); + text-decoration: none; + } + + &:disabled { + opacity: 0.5; + } + } + + &.button-tertiary { + background: transparent; + padding: 6px 17px; + color: $highlight-text-color; + border: 1px solid $highlight-text-color; + + &:active, + &:focus, + &:hover { + background: $ui-highlight-color; + color: $primary-text-color; + border: 0; + padding: 7px 18px; } &:disabled { @@ -168,6 +194,15 @@ color: $highlight-text-color; } + &.copyable { + transition: background 300ms linear; + } + + &.copied { + background: $valid-value-color; + transition: none; + } + &::-moz-focus-inner { border: 0; } @@ -222,11 +257,12 @@ display: inline-flex; align-items: center; width: auto !important; + padding: 0 4px 0 2px; } &__counter { display: inline-block; - width: 14px; + width: auto; margin-left: 4px; font-size: 12px; font-weight: 500; @@ -863,6 +899,10 @@ position: relative; min-height: 120px; } + + .scrollable { + flex: 1 1 auto; + } } .scrollable.fullscreen { @@ -1004,43 +1044,6 @@ color: $dark-text-color; } - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - z-index: 1; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: $dark-text-color; - font-size: 13px; - margin-bottom: 20px; - - a { - color: $dark-text-color; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $darker-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - &__trends { flex: 0 1 auto; opacity: 1; @@ -1735,7 +1738,7 @@ noscript { @import 'domains'; @import 'status'; @import 'modal'; -@import 'composer'; +@import 'compose_form'; @import 'columns'; @import 'regeneration_indicator'; @import 'directory'; @@ -1751,3 +1754,7 @@ noscript { @import 'error_boundary'; @import 'single_column'; @import 'announcements'; +@import 'explore'; +@import 'signed_out'; +@import 'privacy_policy'; +@import 'about'; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index e95bea0d7..ab8609170 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -23,6 +23,7 @@ left: 0; width: 100%; height: 100%; + box-sizing: border-box; display: flex; flex-direction: column; align-items: center; @@ -415,7 +416,6 @@ } .boost-modal, -.favourite-modal, .confirmation-modal, .report-modal, .actions-modal, @@ -460,7 +460,7 @@ } } -.favourite-modal .status-direct { +.boost-modal .status-direct { background-color: inherit; } @@ -477,8 +477,7 @@ } } -.boost-modal__container, -.favourite-modal__container { +.boost-modal__container { overflow-x: scroll; padding: 10px; @@ -489,7 +488,6 @@ } .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .block-modal__action-bar { @@ -511,13 +509,11 @@ } } -.boost-modal__status-header, -.favourite-modal__status-header { +.boost-modal__status-header { font-size: 15px; } -.boost-modal__status-time, -.favourite-modal__status-time { +.boost-modal__status-time { float: right; font-size: 14px; } @@ -1289,11 +1285,11 @@ } } -.modal-root__container .composer--options--dropdown { +.modal-root__container .privacy-dropdown { flex-grow: 0; } -.modal-root__container .composer--options--dropdown--content { +.modal-root__container .privacy-dropdown__dropdown { pointer-events: auto; z-index: 9999; } @@ -1304,3 +1300,123 @@ img.modal-warning { margin-bottom: 15px; width: 60px; } + +.interaction-modal { + max-width: 90vw; + width: 600px; + background: $ui-base-color; + border-radius: 8px; + overflow: hidden; + position: relative; + display: block; + padding: 20px; + + h3 { + font-size: 22px; + line-height: 33px; + font-weight: 700; + text-align: center; + } + + &__icon { + color: $highlight-text-color; + margin: 0 5px; + } + + &__lead { + padding: 20px; + text-align: center; + + h3 { + margin-bottom: 15px; + } + + p { + font-size: 17px; + line-height: 22px; + color: $darker-text-color; + } + } + + &__choices { + display: flex; + + &__choice { + flex: 0 0 auto; + width: 50%; + box-sizing: border-box; + padding: 20px; + + h3 { + margin-bottom: 20px; + } + + p { + color: $darker-text-color; + margin-bottom: 20px; + } + + .button { + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + @media screen and (max-width: $no-gap-breakpoint - 1px) { + &__choices { + display: block; + + &__choice { + width: auto; + margin-bottom: 20px; + } + } + } +} + +.copypaste { + display: flex; + align-items: center; + gap: 10px; + + input { + display: block; + font-family: inherit; + background: darken($ui-base-color, 8%); + border: 1px solid $highlight-text-color; + color: $darker-text-color; + border-radius: 4px; + padding: 6px 9px; + line-height: 22px; + font-size: 14px; + transition: border-color 300ms linear; + flex: 1 1 auto; + overflow: hidden; + + &:focus { + outline: 0; + background: darken($ui-base-color, 4%); + } + } + + .button { + flex: 0 0 auto; + transition: background 300ms linear; + } + + &.copied { + input { + border: 1px solid $valid-value-color; + transition: none; + } + + .button { + background: $valid-value-color; + transition: none; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss new file mode 100644 index 000000000..96cf06742 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -0,0 +1,207 @@ +.privacy-policy { + background: $ui-base-color; + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__body { + margin-top: 20px; + } +} + +.prose { + color: $secondary-text-color; + font-size: 15px; + line-height: 22px; + + p, + ul, + ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + img { + margin-top: 2em; + margin-bottom: 2em; + } + + video { + margin-top: 2em; + margin-bottom: 2em; + } + + figure { + margin-top: 2em; + margin-bottom: 2em; + + figcaption { + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + } + + figure > * { + margin-top: 0; + margin-bottom: 0; + } + + h1 { + font-size: 1.5em; + margin-top: 0; + margin-bottom: 1em; + line-height: 1.33; + } + + h2 { + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + h3, + h4, + h5, + h6 { + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + ol { + counter-reset: list-counter; + } + + li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + ol > li { + counter-increment: list-counter; + + &::before { + content: counter(list-counter) "."; + position: absolute; + left: 0; + } + } + + ul > li::before { + content: ""; + position: absolute; + background-color: $darker-text-color; + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: 0.5em; + left: 0.25em; + } + + ul > li, + ol > li { + position: relative; + padding-left: 1.75em; + } + + & > ul > li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + & > ul > li > *:first-child { + margin-top: 1.25em; + } + + & > ul > li > *:last-child { + margin-bottom: 1.25em; + } + + & > ol > li > *:first-child { + margin-top: 1.25em; + } + + & > ol > li > *:last-child { + margin-bottom: 1.25em; + } + + ul ul, + ul ol, + ol ul, + ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + b { + color: $primary-text-color; + font-weight: 700; + } + + em, + i { + font-style: italic; + } + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + + code { + font-size: 0.875em; + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding: 0.2em 0.3em; + } + + hr { + border: 0; + border-top: 1px solid lighten($ui-base-color, 4%); + margin-top: 3em; + margin-bottom: 3em; + } + + hr + * { + margin-top: 0; + } + + h2 + * { + margin-top: 0; + } + + h3 + * { + margin-top: 0; + } + + h4 + *, + h5 + *, + h6 + * { + margin-top: 0; + } + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 17a34db62..70af0f651 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -28,10 +28,6 @@ &:focus { background: lighten($ui-base-color, 4%); } - - @media screen and (max-width: 600px) { - font-size: 16px; - } } .search__icon { @@ -132,6 +128,7 @@ align-items: center; padding: 15px; border-bottom: 1px solid lighten($ui-base-color, 8%); + gap: 15px; &:last-child { border-bottom: 0; @@ -173,16 +170,8 @@ font-size: 24px; font-weight: 500; text-align: right; - padding-right: 15px; - margin-left: 5px; color: $secondary-text-color; text-decoration: none; - - &__asterisk { - color: $darker-text-color; - font-size: 18px; - vertical-align: super; - } } &__sparkline { @@ -191,7 +180,7 @@ path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 1 !important; + fill-opacity: 100% !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss new file mode 100644 index 000000000..efb49305d --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -0,0 +1,110 @@ +.sign-in-banner { + padding: 10px; + + p { + color: $darker-text-color; + margin-bottom: 20px; + + a { + color: $secondary-text-color; + text-decoration: none; + unicode-bidi: isolate; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + } + } + + .button { + margin-bottom: 10px; + } +} + +.server-banner { + padding: 20px 0; + + &__introduction { + color: $darker-text-color; + margin-bottom: 20px; + + strong { + font-weight: 600; + } + + a { + color: inherit; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + } + + &__hero { + display: block; + border-radius: 4px; + width: 100%; + height: auto; + margin-bottom: 20px; + aspect-ratio: 1.9; + border: 0; + background: $ui-base-color; + object-fit: cover; + } + + &__description { + margin-bottom: 20px; + } + + &__meta { + display: flex; + gap: 10px; + max-width: 100%; + + &__column { + flex: 0 0 auto; + width: calc(50% - 5px); + overflow: hidden; + } + } + + &__number { + font-weight: 600; + color: $primary-text-color; + font-size: 14px; + } + + &__number-label { + color: $darker-text-color; + font-weight: 500; + font-size: 14px; + } + + h4 { + text-transform: uppercase; + color: $darker-text-color; + margin-bottom: 10px; + font-weight: 600; + } + + .account { + padding: 0; + border: 0; + } + + .account__avatar-wrapper { + margin-left: 0; + } + + .spacer { + margin: 10px 0; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 3843bcd68..d91306151 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -6,6 +6,26 @@ height: calc(100% - 10px); overflow-y: hidden; + .hero-widget { + box-shadow: none; + + &__text, + &__img, + &__img img { + border-radius: 0; + } + + &__text { + padding: 15px; + color: $secondary-text-color; + + strong { + font-weight: 700; + color: $primary-text-color; + } + } + } + .search__input { line-height: 18px; font-size: 16px; @@ -21,11 +41,7 @@ flex: 0 1 48px; } - .flex-spacer { - background: transparent; - } - - .composer { + .compose-form { flex: 1; overflow-y: hidden; display: flex; @@ -43,10 +59,6 @@ .autosuggest-textarea__textarea { overflow-y: hidden; } - - .compose-form__upload-thumbnail { - height: 80px; - } } .navigation-panel { @@ -61,6 +73,14 @@ flex: 0 0 auto; } + .logo { + height: 30px; + width: auto; + } +} + +.navigation-panel, +.compose-panel { hr { flex: 0 0 auto; border: 0; @@ -130,97 +150,71 @@ padding-top: 0; } - @media screen and (min-width: 630px) { - .detailed-status { - padding: 15px; + .detailed-status { + padding: 15px; - .media-gallery, - .video-player, - .audio-player { - margin-top: 15px; - } + .media-gallery, + .video-player, + .audio-player { + margin-top: 15px; } + } - .account__header__bar { - padding: 5px 10px; - } + .account__header__bar { + padding: 5px 10px; + } - .navigation-bar, - .compose-form { - padding: 15px; - } + .navigation-bar, + .compose-form { + padding: 15px; + } - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } + .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 15px; + } - .notification__report { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; + .notification__report { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; - &__avatar { - left: 15px; - top: 17px; - } + &__avatar { + left: 15px; + top: 17px; } + } - .status { - padding: 15px; - min-height: 48px + 2px; + .status { + padding: 15px; + min-height: 48px + 2px; - .media-gallery, - &__action-bar, - .video-player, - .audio-player { - margin-top: 10px; - } + .media-gallery, + &__action-bar, + .video-player, + .audio-player { + margin-top: 10px; } + } - .account { - padding: 15px 10px; + .account { + padding: 15px 10px; - &__header__bio { - margin: 0 -10px; - } + &__header__bio { + margin: 0 -10px; } + } - .notification { - &__message { - padding-top: 15px; - } - - .status { - padding-top: 8px; - } + .notification { + &__message { + padding-top: 15px; + } - .account { - padding-top: 8px; - } + .status { + 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, 2%); - 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: $ui-highlight-color; + .account { + padding-top: 8px; + } } } @@ -237,37 +231,104 @@ .search { margin-bottom: 10px; } -} -@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { - .columns-area__panels__pane--compositional { + .tabs-bar__link.optional { display: none; } - .with-fab .scrollable .item-list:last-child { - padding-bottom: 5.25rem; + .search-page .search { + display: none; } -} -@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { - .floating-action-button, - .tabs-bar__link.optional { + .navigation-panel__legal { display: none; } +} - .search-page .search { - display: none; +@media screen and (max-width: $no-gap-breakpoint - 1px) { + $sidebar-width: 285px; + + .columns-area__panels__main { + width: calc(100% - $sidebar-width); + } + + .columns-area__panels { + min-height: calc(100vh - $ui-header-height); + } + + .columns-area__panels__pane--navigational { + min-width: $sidebar-width; + + .columns-area__panels__pane__inner { + width: $sidebar-width; + } + + .navigation-panel { + margin: 0; + background: $ui-base-color; + border-left: 1px solid lighten($ui-base-color, 8%); + height: 100vh; + } + + .navigation-panel__sign-in-banner, + .navigation-panel__logo, + .getting-started__trends { + display: none; + } + + .column-link__icon { + font-size: 18px; + } + } + + .ui__header { + display: flex; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + .column-header, + .column-back-button, + .scrollable, + .error-column { + border-radius: 0 !important; } } -@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { +@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) { + $sidebar-width: 55px; + + .columns-area__panels__main { + width: calc(100% - $sidebar-width); + } + .columns-area__panels__pane--navigational { - display: none; + min-width: $sidebar-width; + + .columns-area__panels__pane__inner { + width: $sidebar-width; + } + + .column-link span { + display: none; + } + + .list-panel { + display: none; + } } } -@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { - .tabs-bar { +.explore__search-header { + display: none; +} + +@media screen and (max-width: $no-gap-breakpoint - 1px) { + .columns-area__panels__pane--compositional { display: none; } + + .explore__search-header { + display: flex; + } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 9511e0c61..5e4bddc67 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -559,12 +559,10 @@ } .status__prepend { - margin-top: -10px; - margin-bottom: 10px; + margin-top: -2px; + margin-bottom: 8px; margin-left: 58px; color: $dark-text-color; - padding: 8px 0; - padding-bottom: 2px; font-size: 14px; position: relative; @@ -669,6 +667,7 @@ display: inline-block; font-weight: 500; font-size: 12px; + line-height: 17px; margin-left: 6px; } |