client/src/sass/application.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @import '_bootstrap-variables';
   4 @import '_variables';
   5 @import '_mixins';
   6
   7 @import '_fonts';
   8
   9 @import '~video.js/dist/video-js.css';
  10
  11 $assets-path: '../assets/';
  12 @import './player/index';
  13 @import './loading-bar';
  14
  15 @import './bootstrap';
  16 @import './primeng-custom';
  17
  18 [hidden] {
  19   display: none !important;
  20 }
  21
  22 body {
  23   /*** theme ***/
  24   // now beware node-sass requires interpolation
  25   // for css custom properties #{$var}
  26   --mainColor: #{$main-color};
  27   --mainColorLighter: #{$main-color-lighter};
  28   --mainColorLightest: #{$main-color-lightest};
  29   --mainHoverColor: #{$main-hover-color};
  30   --mainBackgroundColor: #{$bg-color};
  31   --mainForegroundColor: #{$fg-color};
  32   --secondaryColor: #{$secondary-color};
  33
  34   --greyForegroundColor: #{$grey-foreground-color};
  35
  36   --menuBackgroundColor: #{$menu-background};
  37   --menuForegroundColor: #{$menu-color};
  38   --submenuColor: #{$sub-menu-color};
  39
  40   --inputForegroundColor: #{$input-foreground-color};
  41   --inputBackgroundColor: #{$input-background-color};
  42   --inputPlaceholderColor: #{$input-placeholder-color};
  43
  44   --textareaForegroundColor: #{$textarea-foreground-color};
  45   --textareaBackgroundColor: #{$textarea-background-color};
  46   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
  47
  48   --actionButtonColor: #{$grey-foreground-color};
  49   --supportButtonBackgroundColor: #{transparent};
  50   --supportButtonColor: #{pvar(--actionButtonColor)};
  51   --supportButtonHeartColor: #{$support-button-heart};
  52
  53   --activatedActionButtonColor: #{$activated-action-button-color};
  54
  55   font-family: $main-fonts;
  56   font-weight: $font-regular;
  57   color: pvar(--mainForegroundColor);
  58   background-color: pvar(--mainBackgroundColor);
  59   font-size: 14px;
  60 }
  61
  62 ::selection {
  63   color: pvar(--mainBackgroundColor);
  64   background-color: pvar(--mainHoverColor);
  65 }
  66
  67 #incompatible-browser {
  68   display: none;
  69   text-align: center;
  70   position: absolute;
  71   width: 100%;
  72   top: 45%;
  73 }
  74
  75 strong {
  76   font-weight: $font-semibold;
  77 }
  78
  79 input.readonly {
  80   /* Force blank on readonly inputs */
  81   background-color: pvar(--inputBackgroundColor) !important;
  82 }
  83
  84 input, textarea {
  85   outline: none;
  86   color: pvar(--mainForegroundColor);
  87 }
  88
  89 button {
  90   background: unset;
  91   @include disable-outline;
  92 }
  93
  94 label {
  95   font-weight: $font-bold;
  96   font-size: 15px;
  97 }
  98
  99 .form-error {
 100   display: block;
 101   color: $red;
 102   margin-top: 5px;
 103 }
 104
 105 .input-error {
 106   border-color: $red !important;
 107 }
 108
 109 .fullWidth {
 110   width: 100%;
 111   margin-left: auto;
 112   margin-right: auto;
 113   max-width: initial;
 114 }
 115
 116 .glyphicon-black {
 117   color: black;
 118 }
 119
 120 .row {
 121   margin: 0 !important;
 122 }
 123
 124 .main-col {
 125   margin-left: $menu-width;
 126   width: calc(100% - #{$menu-width});
 127   outline: none;
 128
 129   .margin-content {
 130     margin-left: $not-expanded-horizontal-margins;
 131     margin-right: $not-expanded-horizontal-margins;
 132     flex-grow: 1;
 133   }
 134
 135   .sub-menu {
 136     background-color: pvar(--submenuColor);
 137     width: 100%;
 138     height: 81px;
 139     margin-bottom: $sub-menu-margin-bottom;
 140     display: flex;
 141     align-items: center;
 142     padding-left: $not-expanded-horizontal-margins;
 143     padding-right: $not-expanded-horizontal-margins;
 144   }
 145
 146   // Override some properties if the main content is expanded (no menu on the left)
 147   &.expanded {
 148     margin-left: 0;
 149     width: 100%;
 150
 151     .margin-content {
 152       margin-left: $expanded-horizontal-margins;
 153       margin-right: $expanded-horizontal-margins;
 154     }
 155
 156     .sub-menu {
 157       padding-left: $expanded-horizontal-margins;
 158       padding-right: $expanded-horizontal-margins;
 159     }
 160   }
 161
 162   &.lock-scroll .main-row > router-outlet + * {
 163     // Lock and hide body scrollbars
 164     position: fixed;
 165
 166     // Lock and hide sub-menu scrollbars
 167     .sub-menu {
 168       overflow-x: hidden;
 169     }
 170   }
 171 }
 172
 173 .title-page {
 174   color: pvar(--mainForegroundColor);
 175   font-size: 16px;
 176   display: inline-block;
 177   margin-right: 55px;
 178   font-weight: $font-semibold;
 179   @include disable-default-a-behaviour;
 180
 181   &.active, &.title-page-single {
 182     margin-top: 30px;
 183     margin-bottom: 25px;
 184   }
 185
 186   &.active {
 187     font-weight: $font-bold;
 188     border-bottom: 2px solid pvar(--mainColor);
 189   }
 190
 191   &.title-page-single {
 192     font-size: 125%;
 193   }
 194
 195   &:hover, &:active, &:focus {
 196     color: pvar(--mainForegroundColor);
 197   }
 198
 199   @media screen and (max-width: $mobile-view) {
 200     margin-right: 15px;
 201   }
 202 }
 203
 204 .title-page-about,
 205 .title-page-settings {
 206   white-space: nowrap;
 207   font-size: 115%;
 208   font-weight: $font-regular;
 209
 210   &.active {
 211     font-weight: $font-semibold;
 212   }
 213 }
 214
 215 .admin-sub-header {
 216   display: flex;
 217   align-items: center;
 218   margin-bottom: 30px;
 219
 220   .form-sub-title {
 221     flex-grow: 1;
 222   }
 223
 224   .admin-sub-nav a {
 225     @include disable-default-a-behaviour;
 226
 227     font-size: 16px;
 228     color: pvar(--mainForegroundColor);
 229     padding: 5px 15px;
 230     border-radius: 0.25rem;
 231
 232     &.active {
 233       font-weight: $font-semibold;
 234       background-color: #f0f0f0;
 235       color: #000;
 236     }
 237   }
 238 }
 239
 240 .form-sub-title {
 241   font-size: 20px;
 242   font-weight: bold;
 243 }
 244
 245 @keyframes spin {
 246   from { transform: scale(1) rotate(0deg);}
 247   to { transform: scale(1) rotate(360deg);}
 248 }
 249
 250 // In tables, don't have a hover different background
 251 table {
 252   .action-button-edit, .action-button-delete {
 253     &:hover, &:active, &:focus, &[disabled], &.disabled {
 254       background-color: $grey-background-color !important;
 255     }
 256   }
 257 }
 258
 259 .no-results {
 260   height: 40vh;
 261   max-height: 500px;
 262
 263   display: flex;
 264   align-items: center;
 265   justify-content: center;
 266   font-size: 16px;
 267   font-weight: $font-semibold;
 268 }
 269
 270 .dropdown-item {
 271   @include dropdown-with-icon-item;
 272
 273   my-global-icon {
 274     width: 22px;
 275     height: 22px;
 276   }
 277 }
 278
 279 .anchor {
 280   position: relative;
 281   top: #{-($header-height + 20px)};
 282 }
 283
 284 @media screen and (max-width: #{breakpoint(xxl)}) {
 285   .main-col {
 286     &.expanded {
 287       .margin-content {
 288         margin-left: $expanded-horizontal-margins/2;
 289         margin-right: $expanded-horizontal-margins/2;
 290       }
 291     }
 292   }
 293 }
 294
 295 @media screen and (max-width: #{breakpoint(lg)}) {
 296   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
 297   .main-col {
 298     &, &.expanded {
 299       .margin-content {
 300         margin-left: $expanded-horizontal-margins/3;
 301         margin-right: $expanded-horizontal-margins/3;
 302       }
 303
 304       .sub-menu {
 305         padding-left: 50px;
 306         padding-right: 50px;
 307
 308         .title-page {
 309           font-size: 17px;
 310         }
 311       }
 312     }
 313   }
 314 }
 315
 316 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 317   .main-col {
 318     width: 100%;
 319   }
 320 }
 321
 322 @media screen and (max-width: $small-view) {
 323   .main-col {
 324     margin-left: 0;
 325
 326     &, &.expanded {
 327       .margin-content {
 328         margin-left: 15px;
 329         margin-right: 15px;
 330       }
 331
 332       .sub-menu {
 333         width: 100vw;
 334         padding-left: 15px;
 335         padding-right: 15px;
 336         margin-bottom: $sub-menu-margin-bottom-small-view;
 337         overflow-x: auto;
 338       }
 339
 340       .admin-sub-header {
 341         @include admin-sub-header-responsive(15px*2);
 342       }
 343
 344       my-markdown-textarea {
 345         .root {
 346           max-width: 100% !important;
 347         }
 348       }
 349
 350       input[type=text],
 351       input[type=password],
 352       input[type=email],
 353       textarea,
 354       .peertube-select-container {
 355         width: 100% !important;
 356       }
 357
 358       .caption input[type=text] {
 359         width: unset !important;
 360         flex-grow: 1;
 361       }
 362     }
 363   }
 364 }
 365
 366 // overflow-databale responsive rules
 367 @media screen and (min-width: #{breakpoint(lg)}) {
 368   .main-col {
 369     &.expanded {
 370       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
 371     }
 372
 373     &:not(.expanded) {
 374       @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
 375     }
 376   }
 377 }
 378
 379 @media screen and (max-width: #{breakpoint(lg)}) {
 380   .main-col {
 381     &.expanded {
 382       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
 383     }
 384
 385     &:not(.expanded) {
 386       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
 387     }
 388   }
 389 }
 390
 391 @media screen and (max-width: $small-view) {
 392   .main-col {
 393     &:not(.expanded),
 394     &.expanded {
 395       @include overflow-datatable(breakpoint(lg), 15px);
 396     }
 397   }
 398 }
 399
 400 @media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
 401   .main-col {
 402     &:not(.expanded) {
 403       .admin-sub-header {
 404         @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
 405       }
 406
 407       .sub-menu {
 408         overflow-x: auto;
 409         width: calc(100vw - #{$menu-width});
 410       }
 411     }
 412   }
 413 }