X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_mixins.scss;h=3eefdb6fb054a2807f3ca703ff7869727c8ee319;hb=f0a3988066f72a28bb44520af072f18d91d77dde;hp=99225e4e59642584e5edec220d3fca7b707578ba;hpb=769ac6c11fe3e8d79643032daa784a60116a6630;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 99225e4e5..3eefdb6fb 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -8,7 +8,9 @@ } @mixin disable-outline { - outline: none; + &:focus:not(.focus-visible) { + outline: none; + } &::-moz-focus-inner { border: 0; @@ -16,6 +18,12 @@ } } + +@mixin ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} /** * This mixin will crop text in block for needed amount of lines and put ellipsis at the end * @@ -23,11 +31,11 @@ * @param $line-height line-height property * @param $lines-to-show amount of lines to show */ - @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { +@mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { display: block; /* Fallback for non-webkit */ display: -webkit-box; - max-height: $font-size*$line-height*$lines-to-show; + max-height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */ font-size: $font-size; line-height: $line-height; @@ -51,18 +59,38 @@ -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; - text-align: justify; +} + +@mixin apply-svg-color ($color) { + /deep/ svg { + path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"], circle[fill="#000000"] { + fill: $color; + } + + path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"], circle[stroke="#000000"] { + stroke: $color; + } + } } @mixin peertube-input-text($width) { display: inline-block; height: $button-height; width: $width; - background: #fff; + background: var(--inputColor); border: 1px solid #C6C6C6; border-radius: 3px; padding-left: 15px; padding-right: 15px; + font-size: 15px; + + &::placeholder { + color: var(--inputPlaceholderColor); + } + + @media screen and (max-width: $width) { + width: 100%; + } } @mixin peertube-input-group($width) { @@ -73,6 +101,7 @@ .input-group-text{ font-size: 14px; + color: gray; } } @@ -87,12 +116,12 @@ @mixin orange-button { &, &:active, &:focus { color: #fff; - background-color: $orange-color; + background-color: var(--mainColor); } &:hover { color: #fff; - background-color: $orange-hoover-color; + background-color: var(--mainHoverColor); } &[disabled], &.disabled { @@ -100,22 +129,30 @@ color: #fff; background-color: #C6C6C6; } + + my-global-icon { + @include apply-svg-color(#fff) + } } @mixin grey-button { &, &:active, &:focus { - background-color: $grey-color; - color: #585858; + background-color: $grey-background-color; + color: $grey-foreground-color; } &:hover, &:active, &:focus, &[disabled], &.disabled { - color: #585858; - background-color: $grey-hoover-color; + color: $grey-foreground-color; + background-color: $grey-background-hover-color; } &[disabled], &.disabled { cursor: default; } + + my-global-icon { + @include apply-svg-color($grey-foreground-color) + } } @mixin peertube-button { @@ -138,6 +175,15 @@ @include peertube-button; } +@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { + my-global-icon { + position: relative; + width: $width; + margin-right: $margin-right; + top: $top; + } +} + @mixin peertube-button-file ($width) { position: relative; overflow: hidden; @@ -181,7 +227,7 @@ width: $width; border-radius: 3px; overflow: hidden; - background: #fff; + background: var(--inputColor); position: relative; font-size: 15px; @@ -211,6 +257,7 @@ cursor: pointer; height: $button-height; text-overflow: ellipsis; + color: var(--mainForegroundColor); &:focus { outline: none; @@ -220,6 +267,10 @@ color: transparent; text-shadow: 0 0 0 #000; } + + option { + color: #000; + } } } @@ -278,7 +329,7 @@ position: relative; width: 18px; height: 18px; - border: $border-width solid #000; + border: $border-width solid var(--mainForegroundColor); border-radius: 3px; vertical-align: middle; cursor: pointer; @@ -292,14 +343,14 @@ height: 12px; opacity: 0; transform: rotate(45deg) scale(0); - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; + border-right: 2px solid var(--mainBackgroundColor); + border-bottom: 2px solid var(--mainBackgroundColor); } } &:checked + span { border-color: transparent; - background: $orange-color; + background: var(--mainColor); animation: jelly 0.6s ease; &:after { @@ -357,7 +408,7 @@ @mixin in-content-small-title { text-transform: uppercase; - color: $orange-color; + color: var(--mainColor); font-weight: $font-bold; font-size: 13px; } @@ -365,10 +416,10 @@ @mixin actor-owner { @include disable-default-a-behaviour; - display: block; + display: inline-table; font-size: 13px; margin-top: 4px; - color: #000; + color: var(--mainForegroundColor); span:hover { opacity: 0.8; @@ -387,7 +438,7 @@ height: 160px; display: flex; flex-direction: column; - align-items: start; + align-items: flex-start; .actor { display: flex; @@ -444,18 +495,10 @@ } } -@mixin create-button ($imageUrl) { +@mixin create-button { @include peertube-button-link; @include orange-button; - - .icon.icon-add { - @include icon(20px); - - position: relative; - top: -1px; - margin-right: 5px; - background-image: url($imageUrl); - } + @include button-with-icon(20px, 5px, -1px); } @mixin row-blocks { @@ -471,4 +514,4 @@ text-align: center; align-items: center; } -} \ No newline at end of file +}