3 @mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active {
5 text-decoration: none !important;
6 outline: none !important;
10 @mixin disable-outline {
11 &:focus:not(.focus-visible) {
25 text-overflow: ellipsis;
28 * This mixin will crop text in block for needed amount of lines and put ellipsis at the end
30 * @param $font-size font-size property
31 * @param $line-height line-height property
32 * @param $lines-to-show amount of lines to show
34 @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) {
36 /* Fallback for non-webkit */
38 max-height: $font-size * $line-height * $lines-to-show;
39 /* Fallback for non-webkit */
40 font-size: $font-size;
41 line-height: $line-height;
42 -webkit-line-clamp: $lines-to-show;
43 -webkit-box-orient: vertical;
45 text-overflow: ellipsis;
48 @mixin prefix($property, $parameters...) {
49 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
50 #{$prefix}#{$property}: $parameters;
54 @mixin peertube-word-wrap {
56 word-wrap: break-word;
57 overflow-wrap: break-word;
58 -webkit-hyphens: auto;
64 @mixin apply-svg-color ($color) {
69 circle[fill="#000000"],
70 polygon[fill="#000000"] {
74 path[stroke="#000000"],
76 rect[stroke="#000000"],
77 circle[stroke="#000000"],
78 polygon[stroke="#000000"] {
82 stop[stop-color="#000000"] {
88 @mixin peertube-input-text($width) {
89 display: inline-block;
90 height: $button-height;
92 background: var(--inputColor);
93 border: 1px solid #C6C6C6;
100 color: var(--inputPlaceholderColor);
103 @media screen and (max-width: $width) {
108 @mixin peertube-input-group($width) {
110 height: $button-height;
120 @mixin peertube-textarea ($width, $height) {
121 @include peertube-input-text($width);
128 @mixin orange-button {
129 &, &:active, &:focus {
131 background-color: var(--mainColor);
136 background-color: var(--mainHoverColor);
139 &[disabled], &.disabled {
142 background-color: #C6C6C6;
146 @include apply-svg-color(#fff)
151 &, &:active, &:focus {
152 background-color: $grey-background-color;
153 color: $grey-foreground-color;
156 &:hover, &:active, &:focus, &[disabled], &.disabled {
157 color: $grey-foreground-color;
158 background-color: $grey-background-hover-color;
161 &[disabled], &.disabled {
166 @include apply-svg-color($grey-foreground-color)
170 @mixin peertube-button {
172 font-weight: $font-semibold;
174 height: $button-height;
175 line-height: $button-height;
178 padding: 0 17px 0 13px;
183 @mixin peertube-button-link {
184 display: inline-block;
186 @include disable-default-a-behaviour;
187 @include peertube-button;
190 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
194 margin-right: $margin-right;
199 @mixin peertube-button-file ($width) {
202 display: inline-block;
205 @include peertube-button;
206 @include orange-button;
216 filter: alpha(opacity=0);
225 @mixin icon ($size) {
226 display: inline-block;
227 background-repeat: no-repeat;
228 background-size: contain;
231 vertical-align: middle;
235 @mixin peertube-select-container ($width) {
238 border: 1px solid #C6C6C6;
242 background: var(--inputColor);
248 right: calc(0% + 15px);
253 pointer-events: none;
254 border: 5px solid rgba(0, 0, 0, 0);
255 border-top-color: #000;
261 padding: 0 35px 0 12px;
262 width: calc(100% + 2px);
267 background: transparent none;
270 height: $button-height;
271 text-overflow: ellipsis;
272 color: var(--mainForegroundColor);
280 text-shadow: 0 0 0 #000;
289 @mixin peertube-select-disabled-container ($width) {
290 @include peertube-select-container($width);
292 background-color: #E5E5E5;
299 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
300 @mixin peertube-radio-container {
301 input[type="radio"] {
305 font-weight: $font-regular;
314 border: 1px solid #000;
315 display: inline-block;
318 vertical-align: middle;
325 &:checked + label:before {
326 background-color: #000;
327 box-shadow: inset 0 0 0 4px #fff;
330 &:focus + label:before {
337 @mixin peertube-checkbox ($border-width) {
344 border: $border-width solid var(--mainForegroundColor);
346 vertical-align: middle;
352 top: calc(2px - #{$border-width});
357 transform: rotate(45deg) scale(0);
358 border-right: 2px solid var(--mainBackgroundColor);
359 border-bottom: 2px solid var(--mainBackgroundColor);
364 border-color: transparent;
365 background: var(--mainColor);
366 animation: jelly 0.6s ease;
370 transform: rotate(45deg) scale(1);
376 font-weight: $font-regular;
383 &[disabled] + span + span{
390 @mixin avatar ($size) {
397 @mixin chevron ($size, $border-width) {
399 border-width: $border-width $border-width 0 0;
401 display: inline-block;
402 transform: rotate(-45deg);
407 @mixin chevron-right ($size, $border-width) {
408 @include chevron($size, $border-width);
411 transform: rotate(45deg);
414 @mixin chevron-left ($size, $border-width) {
415 @include chevron($size, $border-width);
418 transform: rotate(-135deg);
421 @mixin in-content-small-title {
422 text-transform: uppercase;
423 color: var(--mainColor);
424 font-weight: $font-bold;
429 @include disable-default-a-behaviour;
431 display: inline-table;
434 color: var(--mainForegroundColor);
441 @include avatar(18px);
449 @mixin sub-menu-with-actor {
452 flex-direction: column;
453 align-items: flex-start;
461 @include avatar(80px);
468 flex-direction: column;
469 justify-content: center;
475 .actor-display-name {
477 font-weight: $font-bold;
485 color: $grey-actor-name;
494 @include actor-owner;
510 @mixin create-button {
511 @include peertube-button-link;
512 @include orange-button;
513 @include button-with-icon(20px, 5px, -1px);
519 padding-bottom: 20px;
521 border-bottom: 1px solid #C6C6C6;
523 @media screen and (max-width: 800px) {
524 flex-direction: column;
531 @mixin dropdown-with-icon-item {