4 $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
9 @import '~primeng/resources/themes/bootstrap/theme.css';
10 @import '~primeng/resources/primeng.css';
11 @import '~video.js/dist/video-js.css';
13 @import './video-js-custom';
14 @import './loading-bar';
17 display: none !important;
21 font-family: $main-fonts;
22 font-weight: $font-regular;
26 #incompatible-browser {
35 font-weight: $font-semibold;
39 /* Force blank on readonly inputs */
40 background-color: #fff !important;
44 font-weight: $font-bold;
55 border-color: $red-error !important;
63 margin-left: $menu-width;
66 margin-left: $not-expanded-horizontal-margins;
67 margin-right: $not-expanded-horizontal-margins;
71 background-color: #F7F7F7;
77 padding-left: $not-expanded-horizontal-margins;
80 // Override some properties if the main content is expanded (no menu on the left)
85 margin-left: $expanded-horizontal-margins;
86 margin-right: $expanded-horizontal-margins;
90 padding-left: $expanded-horizontal-margins;
98 display: inline-block;
100 font-weight: $font-semibold;
101 @include disable-default-a-behaviour;
103 &.active, &.title-page-single {
104 border-bottom: 2px solid $orange-color;
105 font-weight: $font-bold;
110 &:hover, &:active, &:focus {
114 @media screen and (max-width: 500px) {
134 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
135 .glyphicon-refresh-animate {
136 animation: spin .7s infinite linear;
140 from { transform: scale(1) rotate(0deg);}
141 to { transform: scale(1) rotate(360deg);}
144 // ngprime data table customizations
146 font-size: 15px !important;
149 border: 1px solid #E5E5E5 !important;
150 padding-left: 15px !important;
151 overflow: hidden !important;
152 text-overflow: ellipsis !important;
153 white-space: nowrap !important;
157 background-color: #fff !important;
164 background-color: #f0f0f0 !important;
169 display: none !important;
174 border-top: none !important;
178 border-bottom: none !important;
190 border: none !important;
191 border-bottom: 1px solid #f0f0f0 !important;
192 text-align: left !important;
193 padding: 5px 0 5px 15px !important;
194 font-weight: $font-semibold !important;
195 color: #000 !important;
197 &.ui-sortable-column:hover {
198 background-color: #f0f0f0 !important;
199 border: 1px solid #f0f0f0 !important;
200 border-width: 0 1px !important;
203 border-width: 0 1px 0 0 !important;
207 &.ui-state-highlight {
208 background-color: #fff !important;
215 @extend .glyphicon-triangle-top;
219 @extend .glyphicon-triangle-bottom;
226 width: 250px !important;
227 padding: 0 !important;
230 my-edit-button + my-delete-button {
236 .ui-paginator-bottom {
238 border: none !important;
239 border: 1px solid #f0f0f0 !important;
242 justify-content: center;
246 color: #000 !important;
247 font-weight: $font-semibold !important;
248 margin-right: 20px !important;
249 outline: 0 !important;
250 border-radius: 3px !important;
251 padding: 5px 2px !important;
254 &, &:hover, &:active, &:focus {
255 color: #fff !important;
256 background-color: $orange-color !important;
264 // Bootstrap customizations
267 box-shadow: 0 3px 6px;
275 color: #000 !important;
286 font-weight: $font-semibold;
295 background-image: url('../assets/images/global/cross.svg');
304 .action-button-cancel {
305 @include peertube-button;
306 @include grey-button;
308 display: inline-block;
312 .action-button-submit {
313 @include peertube-button;
314 @include orange-button;
319 tabset:not(.bootstrap) {
321 font-size: 16px !important;
322 border: none !important;
324 .nav-item .nav-link {
328 border: none !important;
331 display: flex !important;
333 min-height: 30px !important;
338 color: #000 !important;
339 @include disable-default-a-behaviour;
343 background-color: #F0F0F0;
347 font-weight: $font-semibold !important;
354 .nav-item .nav-link {
357 @include disable-default-a-behaviour;
363 @include peertube-button;
364 @include orange-button;
367 .orange-button-link {
368 @include peertube-button-link;
369 @include orange-button;
373 @include peertube-button;
374 @include grey-button;
378 @include peertube-button-link;
379 @include grey-button;
382 // In tables, don't have a hover different background
384 .action-button-edit, .action-button-delete {
385 &:hover, &:active, &:focus, &[disabled], &.disabled {
386 background-color: $grey-color !important;
391 @media screen and (max-width: 900px) {
406 // On small screen, menu is absolute
407 @media screen and (max-width: 600px) {
409 width: 100% !important;
410 position: absolute !important;
428 input[type=text], input[type=password] {
429 width: 100% !important;
434 bs-dropdown-container {