3 @mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active {
5 text-decoration: none !important;
6 outline: none !important;
10 @mixin disable-outline {
19 @mixin peertube-word-wrap {
21 word-wrap: break-word;
22 overflow-wrap: break-word;
23 -webkit-hyphens: auto;
30 @mixin peertube-input-text($width) {
31 display: inline-block;
32 height: $button-height;
35 border: 1px solid #C6C6C6;
41 @mixin peertube-input-group($width) {
43 height: $button-height;
52 @mixin peertube-textarea ($width, $height) {
53 @include peertube-input-text($width);
60 @mixin orange-button {
61 &, &:active, &:focus {
63 background-color: $orange-color;
68 background-color: $orange-hoover-color;
71 &[disabled], &.disabled {
74 background-color: #C6C6C6;
79 &, &:active, &:focus {
80 background-color: $grey-color;
84 &:hover, &:active, &:focus, &[disabled], &.disabled {
86 background-color: $grey-hoover-color;
89 &[disabled], &.disabled {
94 @mixin peertube-button {
96 font-weight: $font-semibold;
98 height: $button-height;
99 line-height: $button-height;
102 padding: 0 17px 0 13px;
107 @mixin peertube-button-link {
108 display: inline-block;
110 @include disable-default-a-behaviour;
111 @include peertube-button;
114 @mixin peertube-button-file ($width) {
117 display: inline-block;
120 @include peertube-button;
121 @include orange-button;
131 filter: alpha(opacity=0);
140 @mixin icon ($size) {
141 display: inline-block;
142 background-repeat: no-repeat;
143 background-size: contain;
146 vertical-align: middle;
150 @mixin peertube-select-container ($width) {
153 border: 1px solid #C6C6C6;
163 right: calc(0% + 15px);
168 pointer-events: none;
169 border: 5px solid rgba(0, 0, 0, 0);
170 border-top-color: #000;
176 padding: 0 35px 0 12px;
177 width: calc(100% + 2px);
182 background: transparent none;
185 height: $button-height;
186 text-overflow: ellipsis;
194 text-shadow: 0 0 0 #000;
199 @mixin peertube-select-disabled-container ($width) {
200 @include peertube-select-container($width);
202 background-color: #E5E5E5;
209 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
210 @mixin peertube-radio-container {
211 input[type="radio"] {
215 font-weight: $font-regular;
224 border: 1px solid #000;
225 display: inline-block;
228 vertical-align: middle;
235 &:checked + label:before {
236 background-color: #000;
237 box-shadow: inset 0 0 0 4px #fff;
240 &:focus + label:before {
247 @mixin peertube-checkbox ($border-width) {
254 border: $border-width solid #000;
256 vertical-align: middle;
262 top: calc(2px - #{$border-width});
267 transform: rotate(45deg) scale(0);
268 border-right: 2px solid #fff;
269 border-bottom: 2px solid #fff;
274 border-color: transparent;
275 background: $orange-color;
276 animation: jelly 0.6s ease;
280 transform: rotate(45deg) scale(1);
286 font-weight: $font-regular;
293 &[disabled] + span + span{
300 @mixin avatar ($size) {
307 @mixin chevron ($size, $border-width) {
309 border-width: $border-width $border-width 0 0;
311 display: inline-block;
312 transform: rotate(-45deg);
317 @mixin chevron-right ($size, $border-width) {
318 @include chevron($size, $border-width);
321 transform: rotate(45deg);
324 @mixin chevron-left ($size, $border-width) {
325 @include chevron($size, $border-width);
328 transform: rotate(-135deg);
331 @mixin in-content-small-title {
332 text-transform: uppercase;
333 color: $orange-color;
334 font-weight: $font-bold;
339 @include disable-default-a-behaviour;
351 @include avatar(18px);
359 @mixin sub-menu-with-actor {
362 flex-direction: column;
371 @include avatar(80px);
378 flex-direction: column;
379 justify-content: center;
385 .actor-display-name {
387 font-weight: $font-bold;
395 color: $grey-actor-name;
404 @include actor-owner;
420 @mixin create-button ($imageUrl) {
421 @include peertube-button-link;
422 @include orange-button;
430 background-image: url($imageUrl);
437 padding-bottom: 20px;
439 border-bottom: 1px solid #C6C6C6;
441 @media screen and (max-width: 800px) {
442 flex-direction: column;