X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fapplication.scss;h=2af4563751927a820f4ad82ab8cfddb538aeb501;hb=6f03f944c34f78b38a68128413b55186e0676949;hp=2aa743cf1b718900dafefa582d8a24dfd7eace42;hpb=93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 2aa743cf1..2af456375 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -6,7 +6,7 @@ @use '_fonts'; -@use './classes'; +@use './class-helpers'; @use './custom-markup'; @use './ng-select'; @@ -26,6 +26,7 @@ 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}; @@ -132,31 +133,6 @@ code { vertical-align: middle; } -.form-group { - margin-bottom: 1rem; -} - -.form-error, -.form-warning { - display: block; - margin-top: 5px; -} - -.form-error { - color: $red; -} - -.input-error, -my-input-text ::ng-deep input { - border-color: $red !important; -} - -.full-width { - width: 100%; - margin: 0 auto; - max-width: initial; -} - .main-col { @include margin-left($menu-width); @@ -210,62 +186,6 @@ my-input-text ::ng-deep input { } } -.title-page { - @include disable-default-a-behaviour; - @include margin-right(55px); - - opacity: 0.6; - color: pvar(--mainForegroundColor); - font-size: 16px; - display: inline-block; - 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) { - @include margin-left(15px); - } -} - -.title-page-about, -.title-page-settings { - white-space: nowrap; - font-size: 115%; -} - -.admin-sub-header { - display: flex; - align-items: center; - margin-bottom: 30px; -} - // In tables, don't have a hover different background table { my-edit-button, @@ -283,27 +203,6 @@ table { } } -.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; - } -} - my-global-icon[iconName=external-link] { margin: 0 3px; width: 13px; @@ -311,73 +210,6 @@ my-global-icon[iconName=external-link] { color: pvar(--inputPlaceholderColor); } -.chevron-down { - @include chevron-down(0.55rem, 0.15rem); - - margin: 0 8px; -} - -.chevron-up { - @include chevron-up(0.55rem, 0.15rem); - - margin: 0 8px; -} - -.chevron-right { - @include chevron-right(0.55rem, 0.15rem); - - margin: 0 8px; -} - -.chevron-left { - @include chevron-left(0.55rem, 0.15rem); - - margin: 0 8px; -} - -/* offsetTop for scrollToAnchor */ - -.anchor { - position: relative; - top: #{-($header-height + 20px)}; -} - -.offset-content { // if sub-menu fixed - .anchor { - top: #{-($header-height + $sub-menu-height + 20px)}; - } -} - -.form-group-description { - @extend .muted !optional; - - font-size: 90%; - margin-top: 10px; -} - -.callout { - padding: 1.25rem; - border: 1px solid #eee; - border-radius: .25rem; - position: relative; - - > label { - position: relative; - top: -5px; - left: -10px; - color: #6c757d !important; - } - - &:not(.callout-light) { - border-left-width: .25rem; - } - - &.callout-info { - border-color: pvar(--mainColorLightest); - border-left-color: pvar(--mainColor); - } -} - @media screen and (max-width: #{breakpoint(xxl)}) { .main-col { --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; @@ -434,10 +266,6 @@ my-global-icon[iconName=external-link] { padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; } - .admin-sub-header { - flex-direction: column; - } - my-markdown-textarea { .root { max-width: 100% !important;