1 $icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/';
9 @import '~video.js/dist/video-js.css';
11 $assets-path: '../assets/';
12 @import './player/index';
13 @import './loading-bar';
15 @import './primeng-custom';
18 display: none !important;
23 // now beware node-sass requires interpolation
24 // for css custom properties #{$var}
25 --mainColor: #{$orange-color};
26 --mainHoverColor: #{$orange-hoover-color};
27 --mainBackgroundColor: #{$bg-color};
28 --mainForegroundColor: #{$fg-color};
29 --menuBackgroundColor: #{$menu-background};
30 --menuForegroundColor: #{$menu-color};
31 --submenuColor: #{$sub-menu-color};
32 --inputColor: #{$input-background-color};
33 --inputPlaceholderColor: #{$input-placeholder-color};
35 font-family: $main-fonts;
36 font-weight: $font-regular;
37 color: var(--mainForegroundColor);
41 #incompatible-browser {
50 font-weight: $font-semibold;
54 /* Force blank on readonly inputs */
55 background-color: var(--inputColor) !important;
60 color: var(--mainForegroundColor);
64 font-weight: $font-bold;
75 border-color: $red !important;
90 margin-left: $menu-width;
94 margin-left: $not-expanded-horizontal-margins;
95 margin-right: $not-expanded-horizontal-margins;
100 background-color: var(--submenuColor);
106 padding-left: $not-expanded-horizontal-margins;
107 padding-right: $not-expanded-horizontal-margins;
110 // Override some properties if the main content is expanded (no menu on the left)
115 margin-left: $expanded-horizontal-margins;
116 margin-right: $expanded-horizontal-margins;
120 padding-left: $expanded-horizontal-margins;
121 padding-right: $expanded-horizontal-margins;
127 color: var(--mainForegroundColor);
129 display: inline-block;
131 font-weight: $font-semibold;
132 @include disable-default-a-behaviour;
134 &.active, &.title-page-single {
135 border-bottom: 2px solid var(--mainColor);
136 font-weight: $font-bold;
141 &:hover, &:active, &:focus {
142 color: var(--mainForegroundColor);
145 @media screen and (max-width: 500px) {
160 @include disable-default-a-behaviour;
163 color: var(--mainForegroundColor);
165 border-radius: 0.25rem;
168 font-weight: $font-semibold;
169 background-color: #f0f0f0;
180 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
181 .glyphicon-refresh-animate {
182 animation: spin .7s infinite linear;
186 from { transform: scale(1) rotate(0deg);}
187 to { transform: scale(1) rotate(360deg);}
190 // Bootstrap customizations
193 box-shadow: 0 3px 6px;
201 color: #000 !important;
207 background-color: var(--mainBackgroundColor);
216 font-weight: $font-semibold;
225 background-image: url('../assets/images/global/cross.svg');
238 .action-button-cancel {
239 @include peertube-button;
240 @include grey-button;
242 display: inline-block;
246 .action-button-submit {
247 @include peertube-button;
248 @include orange-button;
253 // Nav customizations
255 display: flex !important;
257 height: 30px !important;
258 padding: 10px 15px !important;
262 font-size: 16px !important;
265 font-weight: $font-semibold !important;
269 @include disable-default-a-behaviour;
271 color: var(--mainForegroundColor);
275 ngb-tabset.bootstrap {
279 @include disable-default-a-behaviour;
281 color: var(--mainForegroundColor) !important;
286 .nav-tabs .nav-link.active {
287 background-color: var(--mainBackgroundColor) !important;
292 @include peertube-button;
293 @include orange-button;
296 .orange-button-link {
297 @include peertube-button-link;
298 @include orange-button;
302 @include peertube-button;
303 @include grey-button;
307 @include peertube-button-link;
308 @include grey-button;
311 // In tables, don't have a hover different background
313 .action-button-edit, .action-button-delete {
314 &:hover, &:active, &:focus, &[disabled], &.disabled {
315 background-color: $grey-color !important;
324 justify-content: center;
326 font-weight: $font-semibold;
329 @media screen and (max-width: 1200px) {
333 margin-left: $expanded-horizontal-margins/2;
334 margin-right: $expanded-horizontal-margins/2;
340 @media screen and (max-width: 900px) {
344 margin-left: $expanded-horizontal-margins/3;
345 margin-right: $expanded-horizontal-margins/3;
359 @media screen and (max-width: $small-view) {
375 input[type=text], input[type=password] {
376 width: 100% !important;