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;
45 @mixin peertube-textarea ($width, $height) {
46 @include peertube-input-text($width);
53 @mixin orange-button {
54 &, &:active, &:focus {
56 background-color: $orange-color;
61 background-color: $orange-hoover-color;
64 &[disabled], &.disabled {
67 background-color: #C6C6C6;
72 &, &:active, &:focus {
73 background-color: $grey-color;
77 &:hover, &:active, &:focus, &[disabled], &.disabled {
79 background-color: $grey-hoover-color;
82 &[disabled], &.disabled {
87 @mixin peertube-button {
89 font-weight: $font-semibold;
91 height: $button-height;
92 line-height: $button-height;
95 padding: 0 17px 0 13px;
100 @mixin peertube-button-link {
101 display: inline-block;
103 @include disable-default-a-behaviour;
104 @include peertube-button;
107 @mixin peertube-button-file ($width) {
110 display: inline-block;
113 @include peertube-button;
114 @include orange-button;
124 filter: alpha(opacity=0);
133 @mixin icon ($size) {
134 display: inline-block;
135 background-repeat: no-repeat;
136 background-size: contain;
139 vertical-align: middle;
143 @mixin peertube-select-container ($width) {
146 border: 1px solid #C6C6C6;
156 right: calc(0% + 15px);
161 pointer-events: none;
162 border: 5px solid rgba(0, 0, 0, 0);
163 border-top-color: #000000;
169 padding: 0 35px 0 12px;
170 width: calc(100% + 2px);
175 background: transparent none;
178 height: $button-height;
179 text-overflow: ellipsis;
187 text-shadow: 0 0 0 #000;
192 @mixin peertube-select-disabled-container ($width) {
193 @include peertube-select-container($width);
195 background-color: #E5E5E5;
202 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
203 @mixin peertube-radio-container {
204 input[type="radio"] {
208 font-weight: $font-regular;
217 border: 1px solid #000;
218 display: inline-block;
221 vertical-align: middle;
228 &:checked + label:before {
229 background-color: #000;
230 box-shadow: inset 0 0 0 4px #fff;
233 &:focus + label:before {
240 @mixin peertube-checkbox ($border-width) {
247 border: $border-width solid #000;
249 vertical-align: middle;
255 top: calc(2px - #{$border-width});
260 transform: rotate(45deg) scale(0);
261 border-right: 2px solid #fff;
262 border-bottom: 2px solid #fff;
267 border-color: transparent;
268 background: $orange-color;
269 animation: jelly 0.6s ease;
273 transform: rotate(45deg) scale(1);
279 font-weight: $font-regular;
287 @mixin avatar ($size) {
294 @mixin chevron ($size, $border-width) {
296 border-width: $border-width $border-width 0 0;
298 display: inline-block;
299 transform: rotate(-45deg);
304 @mixin chevron-right ($size, $border-width) {
305 @include chevron($size, $border-width);
308 transform: rotate(45deg);
311 @mixin chevron-left ($size, $border-width) {
312 @include chevron($size, $border-width);
315 transform: rotate(-135deg);
318 @mixin in-content-small-title {
319 text-transform: uppercase;
320 color: $orange-color;
321 font-weight: $font-bold;
325 @mixin sub-menu-with-actor {
328 flex-direction: column;
337 @include avatar(80px);
344 flex-direction: column;
345 justify-content: center;
351 .actor-display-name {
353 font-weight: $font-bold;
382 @mixin create-button {
383 @include peertube-button-link;
384 @include orange-button;
390 background-image: url('/assets/images/admin/add.svg');