X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fapplication.scss;h=1297855dad58e69c6f59fa09d753be9e83cde0e2;hb=4158e67c8d7eb39712e598d3f409c6739eef5f0b;hp=ae511aa024621b63aa193a01db3bf888c817a22d;hpb=bc4c9cc1d75d591c217d61ab22a107b7f1044c76;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index ae511aa02..1297855da 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,20 +1,19 @@ -$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; +@use 'sass:math'; -@import '_bootstrap-variables'; -@import '_variables'; -@import '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_icons' as *; -@import '_fonts'; +@use '_fonts'; -@import './bootstrap'; -@import './primeng-custom'; -@import './ng-select'; +@use './class-helpers'; +@use './custom-markup'; +@use './ng-select'; -@import './classes'; +@use './bootstrap'; +@use './primeng-custom'; -[hidden] { - display: none !important; -} +@use './z-index'; body { /*** theme ***/ @@ -23,13 +22,17 @@ body { --mainColor: #{$main-color}; --mainColorLighter: #{$main-color-lighter}; --mainColorLightest: #{$main-color-lightest}; + --mainColorVeryLight: #{$main-color-very-light}; + --mainHoverColor: #{$main-hover-color}; + --mainBackgroundHoverColor: #{$main-background-hover-color}; + --mainBackgroundColor: #{$bg-color}; --mainForegroundColor: #{$fg-color}; - --secondaryColor: #{$secondary-color}; --greyForegroundColor: #{$grey-foreground-color}; --greyBackgroundColor: #{$grey-background-color}; + --greySecondaryBackgroundColor: #{$grey-background-hover-color}; --menuBackgroundColor: #{$menu-background}; --menuForegroundColor: #{$menu-color}; @@ -40,12 +43,14 @@ body { --inputForegroundColor: #{$input-foreground-color}; --inputBackgroundColor: #{$input-background-color}; --inputPlaceholderColor: #{$input-placeholder-color}; + --inputBorderColor: #{$input-border-color}; --textareaForegroundColor: #{$textarea-foreground-color}; --textareaBackgroundColor: #{$textarea-background-color}; --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color}; --actionButtonColor: #{$grey-foreground-color}; + --supportButtonBackgroundColor: #{transparent}; --supportButtonColor: #{pvar(--actionButtonColor)}; --supportButtonHeartColor: #{$support-button-heart}; @@ -60,11 +65,14 @@ body { font-weight: $font-regular; color: pvar(--mainForegroundColor); background-color: pvar(--mainBackgroundColor); - font-size: 14px; + font-size: 1rem; // On desktop browsers, make sure vertical scroll bar is always visible // Allow to disable the scrollbar instead of hide it when the content fit the body // And not move the content and header horizontally sticked to right when the content is updating overflow-y: scroll; + + // Fix "reboot" style that set text-align: left + text-align: start; } ::selection { @@ -80,11 +88,15 @@ noscript, margin: 1rem auto; } +a { + text-decoration: none; +} + strong { font-weight: $font-semibold; } -input.readonly { +input[readonly] { /* Force blank on readonly inputs */ background-color: pvar(--inputBackgroundColor) !important; } @@ -103,7 +115,7 @@ button { label { font-weight: $font-bold; - font-size: 15px; + margin-bottom: 0.5rem; } code { @@ -117,40 +129,14 @@ code { vertical-align: middle; } -.form-error { - display: block; - color: $red; - margin-top: 5px; -} - -.input-error, -my-input-toggle-hidden ::ng-deep input { - border-color: $red !important; -} - -.full-width { - width: 100%; - margin-left: auto; - margin-right: auto; - max-width: initial; -} - -.glyphicon-black { - color: #000; -} - -.row { - margin: 0 !important; -} - .main-col { - margin-left: $menu-width; + @include margin-left($menu-width); + width: calc(100% - #{$menu-width}); outline: none; .margin-content { - margin-left: pvar(--horizontalMarginContent); - margin-right: pvar(--horizontalMarginContent); + margin: 0 pvar(--horizontalMarginContent); flex-grow: 1; } @@ -159,8 +145,7 @@ my-input-toggle-hidden ::ng-deep input { width: 100%; display: flex; align-items: center; - padding-left: pvar(--horizontalMarginContent); - padding-right: pvar(--horizontalMarginContent); + padding: 0 pvar(--horizontalMarginContent); height: $sub-menu-height; margin-bottom: $sub-menu-margin-bottom; overflow-x: auto; @@ -182,7 +167,7 @@ my-input-toggle-hidden ::ng-deep input { --horizontalMarginContent: #{$expanded-horizontal-margins}; --mainColWidth: 100vw; - margin-left: 0; + @include margin-left(0); width: 100%; } @@ -197,159 +182,40 @@ my-input-toggle-hidden ::ng-deep input { } } -.title-page { - @include disable-default-a-behaviour; - - opacity: 0.6; - color: pvar(--mainForegroundColor); - font-size: 16px; - display: inline-block; - margin-right: 55px; - font-weight: $font-semibold; - border-bottom: 2px solid transparent; - - &.title-page-single { - margin-top: 30px; - margin-bottom: 25px; - } - - &.active { - border-bottom-color: pvar(--mainColor); - } - - &.title-page-single { - font-size: 125%; - } - - &:hover, - &:active, - &:focus { - color: pvar(--mainForegroundColor); - } - - &.active, - &:hover, - &:active, - &:focus, - &.title-page-single { - opacity: 1; - outline: 0 hidden !important; - } - - @media screen and (max-width: $mobile-view) { - margin-right: 15px; - } -} - -.title-page-about, -.title-page-settings { - white-space: nowrap; - font-size: 115%; -} - -.admin-sub-header { - display: flex; - align-items: center; - margin-bottom: 30px; - - .form-sub-title { - flex-grow: 1; - } - - .admin-sub-nav a { - @include disable-default-a-behaviour; - - font-size: 16px; - color: pvar(--mainForegroundColor); - padding: 5px 15px; - border-radius: 0.25rem; - font-weight: $font-semibold; - opacity: 0.6; - - &.active { - background-color: pvar(--submenuBackgroundColor); - } - - &.active, - &:hover, - &:active, - &:focus { - opacity: 1; - } - } -} - -.form-sub-title { - font-size: 20px; - font-weight: bold; -} - // In tables, don't have a hover different background table { - .action-button-edit, - .action-button-delete { - &:hover, - &:active, - &:focus, - &[disabled], - &.disabled { - background-color: $grey-background-color !important; + my-edit-button, + my-delete-button { + .action-button { + &:hover, + &:active, + &:focus, + &[disabled], + &.disabled { + background-color: pvar(--greyBackgroundColor) !important; + opacity: 0.8; + } } } } -.no-results { - height: 40vh; - max-height: 500px; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 16px; - font-weight: $font-semibold; -} - -.dropdown-item { - @include dropdown-with-icon-item; - - my-global-icon { - width: 22px; - height: 22px; - } -} - -/* offsetTop for scrollToAnchor */ - -.anchor { +my-global-icon[iconName=external-link] { + margin: 0 0.3em; + width: 0.9em; + height: 0.9em; + display: inline-block; + color: pvar(--inputPlaceholderColor); position: relative; - top: #{-($header-height + 20px)}; -} - -.offset-content { // if sub-menu fixed - .anchor { - top: #{-($header-height + $sub-menu-height + 20px)}; - } -} - -.form-group-description { - @extend .text-muted; - - font-size: 90%; - margin-top: 10px; -} - -ngx-loading-bar { - z-index: z(header) + 1 !important; + top: -0.1em; } @media screen and (max-width: #{breakpoint(xxl)}) { .main-col { - --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2}; + --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; --videosHorizontalMarginContent: 30px; &.expanded { - --horizontalMarginContent: #{$expanded-horizontal-margins / 2}; + --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 2)}; } } } @@ -359,14 +225,13 @@ ngx-loading-bar { --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)}; } - /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ + /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */ .main-col, .main-col.expanded { - --horizontalMarginContent: #{$expanded-horizontal-margins / 3}; + --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)}; .sub-menu { - padding-left: 50px; - padding-right: 50px; + padding: 0 50px; .title-page { font-size: 17px; @@ -386,12 +251,11 @@ ngx-loading-bar { .main-col.expanded { --horizontalMarginContent: 15px; - margin-left: 0; + @include margin-left(0); .sub-menu { width: 100vw; - padding-left: 15px; - padding-right: 15px; + padding: 0 15px; margin-bottom: $sub-menu-margin-bottom-small-view; overflow-x: auto; } @@ -401,29 +265,6 @@ ngx-loading-bar { padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; } - .admin-sub-header { - flex-direction: column; - - .form-sub-title { - margin-right: 0 !important; - margin-bottom: 10px; - text-align: center; - } - - .admin-sub-nav { - display: block; - overflow-x: auto; - white-space: nowrap; - height: 50px; - padding: 10px 0; - width: 100%; - - a { - margin-left: 5px; - } - } - } - my-markdown-textarea { .root { max-width: 100% !important;