From 75076abeac2d1e4e0c23b5d4555b2220ad58a73d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 6 Feb 2023 20:20:14 +0100 Subject: [PATCH] more styles cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/_mixins.scss | 26 --- app/styles/autosuggest.scss | 5 - app/styles/basics.scss | 69 ------- app/styles/components/columns.scss | 26 --- app/styles/components/compose-form.scss | 230 +++++++++++----------- app/styles/components/media-gallery.scss | 240 +++++++++++------------ app/styles/components/modal.scss | 5 - app/styles/components/status.scss | 3 +- app/styles/fonts.scss | 22 --- app/styles/forms.scss | 18 -- app/styles/ui.scss | 6 - 11 files changed, 238 insertions(+), 412 deletions(-) delete mode 100644 app/styles/_mixins.scss diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss deleted file mode 100644 index 370badad5..000000000 --- a/app/styles/_mixins.scss +++ /dev/null @@ -1,26 +0,0 @@ -// THEME MIXINS - -// standard container drop shadow -@mixin standard-panel-shadow { - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -} - -// common properties for all standard containers -@mixin standard-panel { - @include standard-panel-shadow; - border-radius: 10px; -} - -// SHORTCUTS -@mixin avatar-radius { - border-radius: 50%; - background: transparent no-repeat; - background-position: 50%; - background-clip: padding-box; -} - -@mixin avatar-size($size: 48px) { - width: $size; - height: $size; - background-size: $size $size; -} diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss index 3e0f8451c..f81cbf195 100644 --- a/app/styles/autosuggest.scss +++ b/app/styles/autosuggest.scss @@ -1,8 +1,3 @@ -.autosuggest-input { - position: relative; -} - -.autosuggest-input input, .react-datepicker__input-container input { // display: block; // box-sizing: border-box; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 966dfa5b8..fec5daa0e 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -8,54 +8,6 @@ body.with-modals { @apply overflow-hidden; } -body { - &.player { - text-align: center; - } - - &.embed { - margin: 0; - padding-bottom: 0; - - .container { - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; - } - } - - &.admin { - position: fixed; - width: 100%; - height: 100%; - padding: 0; - } - - &.error { - @apply text-gray-400; - position: absolute; - text-align: center; - width: 100%; - height: 100%; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - - .dialog { - vertical-align: middle; - margin: 20px; - - h1 { - font-size: 20px; - line-height: 28px; - font-weight: 400; - } - } - } -} - // Note: this is needed for React HotKeys performance. Removing this // will cause severe performance degradation on Safari. div[tabindex='-1']:focus { @@ -68,27 +20,6 @@ div[tabindex='-1']:focus { noscript { text-align: center; - - img { - width: 200px; - opacity: 0.5; - animation: flicker 4s infinite; - } - - div { - @apply text-gray-400; - font-size: 14px; - margin: 30px auto; - max-width: 400px; - - a { - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - } } .emojione { diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index 4ed61c298..dc0b1dc75 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -1,29 +1,3 @@ -.column { - width: 350px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - flex: 1 1 100%; -} - -@media screen and (min-width: 631px) { - .column { - flex: 0 0 auto; - padding: 10px; - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } -} - .empty-column-indicator, .error-column { @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg; diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index a07917e91..b6bc4f108 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -28,150 +28,152 @@ @apply text-gray-900 text-sm; font-family: inherit; } -} -.compose-form__upload-wrapper { overflow: hidden; } + &__upload-wrapper { overflow: hidden; } -.compose-form__uploads-wrapper { - display: flex; - flex-direction: row; - flex-wrap: wrap; + &__uploads-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; - &.contains-media { - padding: 5px; - } -} - -.compose-form__upload { - flex: 1 1 0; - min-width: 40%; - margin: 5px; - position: relative; - border-radius: 4px; - overflow: hidden; - - &__actions { - @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear; - - &.active { - @apply opacity-100; - } - - .icon-button { - @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center; + &.contains-media { + padding: 5px; } } - &-description { - @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear; + &__upload { + flex: 1 1 0; + min-width: 40%; + margin: 5px; + position: relative; + border-radius: 4px; + overflow: hidden; - &.active { - @apply opacity-100; - } + &__actions { + @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear; - textarea { - @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0; + &.active { + @apply opacity-100; + } - &::placeholder { - @apply text-white/60; + .icon-button { + @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center; } } - } - &-preview { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; + &-description { + @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear; - video { + &.active { + @apply opacity-100; + } + + textarea { + @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0; + + &::placeholder { + @apply text-white/60; + } + } + } + + &-preview { + position: absolute; width: 100%; height: 100%; - object-fit: cover; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + + video { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + &__upload-thumbnail { + background-position: center; + background-size: contain; + background-repeat: no-repeat; + height: 160px; + width: 100%; + overflow: hidden; + position: relative; + + &.video { + background-image: url('../assets/images/video-placeholder.png'); + background-size: cover; + } + + &.audio { + background-image: url('../assets/images/audio-placeholder.png'); + background-size: cover; } } } -.compose-form__upload-thumbnail { - background-position: center; - background-size: contain; - background-repeat: no-repeat; - height: 160px; - width: 100%; - overflow: hidden; - position: relative; - - &.video { - background-image: url('../assets/images/video-placeholder.png'); - background-size: cover; - } - - &.audio { - background-image: url('../assets/images/audio-placeholder.png'); - background-size: cover; - } -} - -.privacy-dropdown__dropdown { - @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden; - - &.top { - transform-origin: 50% 100%; - } - - &.bottom { - transform-origin: 50% 0; - } -} - -.privacy-dropdown__option { - @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer; - +.privacy-dropdown { &.active { - @apply bg-gray-100 dark:bg-gray-800; - } + &.top .privacy-dropdown__value { + @apply rounded-t-md; + } - &:hover, - &.active { - .privacy-dropdown__option__content, - .privacy-dropdown__option__content strong { - @apply text-black dark:text-white; + .privacy-dropdown__dropdown { + @apply block shadow-md; } } - &.active { - @apply hover:bg-gray-200 dark:hover:bg-gray-700; + &__dropdown { + @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden; + + &.top { + transform-origin: 50% 100%; + } + + &.bottom { + transform-origin: 50% 0; + } } -} -.privacy-dropdown__option__icon { - @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5; -} + &__option { + @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer; -.privacy-dropdown__option__content { - @apply flex-auto text-primary-600 dark:text-primary-400; + &.active { + @apply bg-gray-100 dark:bg-gray-800; + } - strong { - @apply block font-medium text-black dark:text-white; + &:hover, + &.active { + .privacy-dropdown__option__content, + .privacy-dropdown__option__content strong { + @apply text-black dark:text-white; + } + } - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - @apply font-bold; + &.active { + @apply hover:bg-gray-200 dark:hover:bg-gray-700; + } + + &__icon { + @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5; + } + + &__content { + @apply flex-auto text-primary-600 dark:text-primary-400; + + strong { + @apply block font-medium text-black dark:text-white; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + @apply font-bold; + } + } } } } } - -.privacy-dropdown.active { - &.top .privacy-dropdown__value { - @apply rounded-t-md; - } - - .privacy-dropdown__dropdown { - @apply block shadow-md; - } -} diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 4e95b0ca1..ea27ed2fc 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -1,3 +1,5 @@ +$media-compact-size: 50px; + .media-gallery { box-sizing: border-box; overflow: hidden; @@ -6,147 +8,145 @@ position: relative; width: 100%; height: auto; -} -.media-gallery__item { - border: 0; - box-sizing: border-box; - display: block; - float: left; - position: relative; - border-radius: 10px; - overflow: hidden; + &__item { + border: 0; + box-sizing: border-box; + display: block; + float: left; + position: relative; + border-radius: 10px; + overflow: hidden; - &__icons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + &__icons { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); - .svg-icon { - @apply h-24 w-24; + .svg-icon { + @apply h-24 w-24; + } + } + + &-overflow { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.75); + z-index: 2; + color: #333; + text-align: center; + font-weight: bold; + font-size: 50px; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + } + + &-thumbnail { + @apply text-gray-400; + cursor: zoom-in; + display: block; + text-decoration: none; + line-height: 0; + position: relative; + z-index: 1; + height: 100%; + width: 100%; + + video { + width: 100%; + height: 100%; + object-fit: cover; + } } } - &-overflow { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.75); - z-index: 2; - color: #333; - text-align: center; - font-weight: bold; - font-size: 50px; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - } -} - -.media-gallery__item-thumbnail { - @apply text-gray-400; - cursor: zoom-in; - display: block; - text-decoration: none; - line-height: 0; - position: relative; - z-index: 1; - height: 100%; - width: 100%; - - video { + &__preview { + @apply bg-gray-200 dark:bg-gray-900 rounded-lg; width: 100%; height: 100%; object-fit: cover; - } -} + position: absolute; + top: 0; + left: 0; + z-index: 0; -.media-gallery__preview { - @apply bg-gray-200 dark:bg-gray-900 rounded-lg; - width: 100%; - height: 100%; - object-fit: cover; - position: absolute; - top: 0; - left: 0; - z-index: 0; - - &--hidden { - display: none; - } -} - -.media-gallery__gifv { - height: 100%; - overflow: hidden; - position: relative; - width: 100%; -} - -.media-gallery__item-gifv-thumbnail { - @apply rounded-md; - cursor: zoom-in; - height: 100%; - object-fit: cover; - position: relative; - width: 100%; - z-index: 1; - transform: none; - top: 0; -} - -.media-gallery__gifv__label, -.media-gallery__filename__label, -.media-gallery__file-extension__label { - @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90; - font-size: 11px; - transition: opacity 0.1s ease; - line-height: 18px; -} - -.media-gallery__gifv { - &.autoplay { - .media-gallery__gifv__label { + &--hidden { display: none; } } - &:hover { - .media-gallery__gifv__label { - opacity: 1; + &__gifv { + height: 100%; + overflow: hidden; + position: relative; + width: 100%; + } + + &__item-gifv-thumbnail { + @apply rounded-md; + cursor: zoom-in; + height: 100%; + object-fit: cover; + position: relative; + width: 100%; + z-index: 1; + transform: none; + top: 0; + } + + &__gifv__label, + &__filename__label, + &__file-extension__label { + @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90; + font-size: 11px; + transition: opacity 0.1s ease; + line-height: 18px; + } + + &__gifv { + &.autoplay { + .media-gallery__gifv__label { + display: none; + } + } + + &:hover { + .media-gallery__gifv__label { + opacity: 1; + } } } -} -$media-compact-size: 50px; - -.media-gallery--compact { - height: $media-compact-size !important; - background: transparent; - - .media-gallery__item { - width: $media-compact-size !important; + &--compact { height: $media-compact-size !important; - inset: auto !important; - float: left !important; - margin-right: 5px; + background: transparent; - &-overflow { - font-size: 20px; + .media-gallery__item { + width: $media-compact-size !important; + height: $media-compact-size !important; + inset: auto !important; + float: left !important; + margin-right: 5px; + + &-overflow { + font-size: 20px; + } + + &__icons .svg-icon { + @apply h-8 w-8; + } } - &__icons .svg-icon { - @apply h-8 w-8; + .media-gallery__file-extension__label { + display: none; } } - - .media-gallery__file-extension__label { - display: none; - } } diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index a9e70a671..b236c4428 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -254,11 +254,6 @@ svg { stroke-width: 1.5; - - &.feather { - // Feather icons are a little larger - transform: scale(0.9); - } } } } diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 0cea26e38..22b3cb872 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -116,8 +116,9 @@ a.status-card { padding-bottom: 10px; &__status { - @include standard-panel; padding: 15px 0 10px; + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); + border-radius: 10px; } .status { diff --git a/app/styles/fonts.scss b/app/styles/fonts.scss index 7ee787c1f..574c07c27 100644 --- a/app/styles/fonts.scss +++ b/app/styles/fonts.scss @@ -2,21 +2,6 @@ // TYPEOGRAPHY MIXINS -// declare the font family using these shortcuts -@mixin font-inter { font-family: Inter, Arial, sans-serif !important; } - -// Declare font weights as a numerical value in rendered output -// Prevents certain browsers which do not play nice with "light, medium" textual declarations -// Numeical values always work more consistently across browsers -// Each font-weight is linked with the @font-face declaration to the actual font file -@mixin font-weight($weight) { - @if $weight == 'light' { font-weight: 300; } - @if $weight == 'normal' { font-weight: 400; } - @if $weight == 'medium' { font-weight: 500; } - @if $weight == 'bold' { font-weight: 700; } - @if $weight == 'extrabold' { font-weight: 800; } -} - // Use these mixins to define font-size and line-height // html and body declaration allows developer to pass px value as argument // Rendered css will default to "rem" and fall back to "px" for unsupported browsers @@ -26,10 +11,3 @@ font-size: #{$px + 'px'}; font-size: #{$rem + 'rem'}; } - -@mixin line-height($size) { - $rem: math.div($size, 10); - $px: $size; - line-height: #{$px + 'px'}; - line-height: #{$rem + 'rem'}; -} diff --git a/app/styles/forms.scss b/app/styles/forms.scss index a581b2fb7..3678652f1 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -22,26 +22,8 @@ select { margin-left: -1px; } -.captcha { - background-color: #fff; - border-radius: 4px; - - img { - display: table; - margin: 0 auto; - } - - input[type='text'] { - border-radius: 0 0 4px 4px; - } -} - .input.with_label.toggle .label_input { display: flex; font-size: 14px; align-items: center; - - .theme-toggle { - margin-left: 10px; - } } diff --git a/app/styles/ui.scss b/app/styles/ui.scss index 1b975fb24..5e67fd949 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -125,12 +125,6 @@ font-family: inherit; padding: 7px 0; - &:focus, - &:active { - @apply text-gray-900; - border-bottom-color: var(--highlight-text-color); - } - @media screen and (max-width: 600px) { font-size: 16px; }