X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_mixins.scss;h=22c3b2a2f6196bc2a939f3535efac782bd9de429;hb=93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2;hp=bf7504d91fd3779acdc1ad0729f2e7cb8f0b3148;hpb=fa12eacc014aae8094d108634371640f2695bf9f;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index bf7504d91..22c3b2a2f 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -1,4 +1,5 @@ -@use '_variables'; +@use 'sass:math'; +@use '_variables' as *; @mixin disable-default-a-behaviour { &:hover, @@ -88,9 +89,10 @@ display: inline-block; height: $button-height; width: $width; + max-width: $width; color: pvar(--inputForegroundColor); background-color: pvar(--inputBackgroundColor); - border: 1px solid #C6C6C6; + border: 1px solid $input-border-color; border-radius: 3px; font-size: 15px; @@ -107,24 +109,11 @@ } } -@mixin peertube-input-group($width) { - width: $width; - min-height: $button-height; - padding-top: 0; - padding-bottom: 0; - flex-wrap: nowrap; - - .input-group-text { - font-size: 14px; - color: #808080; - } -} - @mixin peertube-textarea ($width, $height) { @include peertube-input-text($width); - color: pvar(--textareaForegroundColor); - background-color: pvar(--textareaBackgroundColor); + color: pvar(--textareaForegroundColor) !important; + background-color: pvar(--textareaBackgroundColor) !important; height: $height; padding: 5px 15px; font-size: 15px; @@ -149,7 +138,7 @@ &.disabled { cursor: default; color: #fff; - background-color: #C6C6C6; + background-color: $input-border-color; } my-global-icon { @@ -179,7 +168,7 @@ &.disabled { cursor: default; color: pvar(--mainColor); - background-color: #C6C6C6; + background-color: $input-border-color; } my-global-icon { @@ -206,7 +195,7 @@ @mixin grey-button { @include button-focus($grey-button-outline-color); - background-color: $grey-background-color; + background-color: pvar(--greyBackgroundColor); color: pvar(--greyForegroundColor); &:hover, @@ -215,7 +204,7 @@ &[disabled], &.disabled { color: pvar(--greyForegroundColor); - background-color: $grey-background-hover-color; + background-color: pvar(--greySecondaryBackgroundColor); } &[disabled], @@ -256,17 +245,23 @@ } @mixin peertube-button { - @include padding(0, 17px, 0, 13px); + padding: 0 13px; border: 0; font-weight: $font-semibold; font-size: 15px; height: $button-height; line-height: $button-height; - // FIXME: because of primeng that redefines border-radius of all input[type="..."] + + // Because of primeng that redefines border-radius of all input[type="..."] border-radius: 3px !important; + text-align: center; cursor: pointer; + + my-global-icon + * { + @include margin-right(4px); + } } @mixin peertube-button-link { @@ -355,6 +350,7 @@ background: pvar(--inputBackgroundColor); position: relative; font-size: 15px; + height: min-content; &.disabled { background-color: #E5E5E5; @@ -364,6 +360,10 @@ } } + select[disabled] { + background-color: #f9f9f9; + } + @media screen and (max-width: $width) { width: 100%; } @@ -385,10 +385,9 @@ select { padding: 0 35px 0 12px; position: relative; - border: 1px solid #C6C6C6; + border: 1px solid $input-border-color; background: transparent none; appearance: none; - cursor: pointer; height: $button-height; text-overflow: ellipsis; color: pvar(--mainForegroundColor); @@ -404,14 +403,17 @@ option { color: #000; + + &[value=undefined] { + font-weight: $font-semibold; + } } } &.peertube-select-button { @include grey-button; - select, - option { + select { font-weight: $font-semibold; color: pvar(--greyForegroundColor); border: 0; @@ -419,42 +421,64 @@ } } -// Thanks: https://codepen.io/triss90/pen/XNEdRe/ +// Thanks: https://codepen.io/manabox/pen/raQmpL @mixin peertube-radio-container { - input[type=radio] { - display: none; + [type=radio]:checked, + [type=radio]:not(:checked) { + position: absolute; + left: -9999px; + } - + label { - font-weight: $font-regular; - cursor: pointer; + [type=radio]:checked + label, + [type=radio]:not(:checked) + label { + position: relative; + padding-left: 28px; + cursor: pointer; + line-height: 20px; + display: inline-block; + font-size: 15px; + font-weight: $font-regular; + } - &::before { - @include margin-right(10px); - - position: relative; - top: -2px; - content: ''; - background: #fff; - border-radius: 100%; - border: 1px solid #000; - display: inline-block; - width: 15px; - height: 15px; - vertical-align: middle; - cursor: pointer; - text-align: center; - } - } + [type=radio]:checked + label::before, + [type=radio]:not(:checked) + label::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 18px; + height: 18px; + border: 1px solid $input-border-color; + border-radius: 100%; + background: #fff; + } - &:checked + label::before { - background-color: #000; - box-shadow: inset 0 0 0 4px #fff; - } + [type=radio]:checked + label::after, + [type=radio]:not(:checked) + label::after { + content: ''; + width: 10px; + height: 10px; + background: pvar(--mainColor); + position: absolute; + top: 4px; + left: 4px; + border-radius: 100%; + transition: all 0.2s ease; + } + [type=radio]:not(:checked) + label::after { + opacity: 0; + transform: scale(0); + } + [type=radio]:checked + label::after { + opacity: 1; + transform: scale(1); + } - &:focus + label::before { - outline: none; - border-color: #000; - } + .form-group-description { + display: block; + margin-top: -7px; + margin-bottom: 10px; + margin-left: 29px; } } @@ -471,7 +495,7 @@ width: 18px; min-width: 18px; height: 18px; - border: $border-width solid #C6C6C6; + border: $border-width solid $input-border-color; border-radius: 3px; vertical-align: middle; cursor: pointer; @@ -517,50 +541,6 @@ } } -@mixin table-badge { - border-radius: 2px; - padding: 1/4em 1/2em; - text-transform: uppercase; - font-weight: $font-bold; - font-size: 12px; - letter-spacing: 1/3px; - - &.badge-banned, - &.badge-red { - background-color: #ffcdd2; - color: #c63737; - } - - &.badge-banned { - text-decoration: line-through; - } - - &.badge-yellow { - background-color: #feedaf; - color: #8a5340; - } - - &.badge-brown { - background-color: #ffd8b2; - color: #805b36; - } - - &.badge-green { - background-color: #c8e6c9; - color: #256029; - } - - &.badge-blue { - background-color: #b3e5fc; - color: #23547b; - } - - &.badge-purple { - background-color: #eccfff; - color: #694382; - } -} - @mixin actor-avatar-size ($size) { display: inline-block; width: $size; @@ -582,30 +562,6 @@ } } -@mixin chevron ($size, $border-width) { - border-style: solid; - border-width: $border-width $border-width 0 0; - content: ''; - display: inline-block; - transform: rotate(-45deg); - height: $size; - width: $size; -} - -@mixin chevron-right ($size, $border-width) { - @include chevron($size, $border-width); - - left: 0; - transform: rotate(45deg); -} - -@mixin chevron-left ($size, $border-width) { - @include chevron($size, $border-width); - - left: 0.25em; - transform: rotate(-135deg); -} - @mixin in-content-small-title { text-transform: uppercase; color: pvar(--mainColor); @@ -627,12 +583,15 @@ @include button-with-icon(20px, 5px, -1px); } -@mixin row-blocks ($column-responsive: true) { +@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) { display: flex; - min-height: 130px; + min-height: $min-height; padding-bottom: 20px; margin-bottom: 20px; - border-bottom: 1px solid #C6C6C6; + + @if $separator { + border-bottom: 1px solid $input-border-color; + } @media screen and (max-width: $small-view) { @if $column-responsive { @@ -672,6 +631,7 @@ span { position: absolute; color: $grey-foreground-color; + @if $small { top: -1px; } @@ -694,10 +654,6 @@ white-space: nowrap; transition: width 0.6s ease; - &.secondary { - background-color: pvar(--secondaryColor); - } - &.red { background-color: lighten($color: #c54130, $amount: 10); } @@ -745,7 +701,7 @@ > div { box-sizing: border-box; - flex: 0 0 percentage(1/3); + flex: 0 0 percentage(math.div(1, 3)); padding: 0 5px; margin-bottom: 10px; @@ -850,7 +806,7 @@ height: $avatar-height; my-actor-avatar { - @include actor-avatar-size($avatar-height); + display: inline-block; } div { @@ -867,7 +823,7 @@ // applies ratio (default to 16:9) to a child element (using $selector) only using // an immediate's parent size. This allows to set a ratio without explicit // dimensions, as width/height cannot be computed from each other. -@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) { +@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) { $padding-percent: percentage($inverted-ratio); position: relative; @@ -900,8 +856,9 @@ vertical-align: top; } - .badge { + .pt-badge { @include margin-left(7px); + vertical-align: top; } } @@ -916,8 +873,8 @@ top: 50%; transform: translate(-50%, -50%) scale(0.5); - border-top: ($height / 2) solid transparent; - border-bottom: ($height / 2) solid transparent; + border-top: #{math.div($height, 2)} solid transparent; + border-bottom: #{math.div($height, 2)} solid transparent; border-left: $width solid rgba(255, 255, 255, 0.95); }