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 label {
  90   font-weight: $font-bold;
  91   font-size: 15px;
  92 }
  93
  94 .form-error {
  95   display: block;
  96   color: $red;
  97   margin-top: 5px;
  98 }
  99
 100 .input-error {
 101   border-color: $red !important;
 102 }
 103
 104 .fullWidth {
 105   width: 100%;
 106   margin-left: auto;
 107   margin-right: auto;
 108   max-width: initial;
 109 }
 110
 111 .glyphicon-black {
 112   color: black;
 113 }
 114
 115 .row {
 116   margin: 0 !important;
 117 }
 118
 119 .main-col {
 120   margin-left: $menu-width;
 121   width: calc(100% - #{$menu-width});
 122   outline: none;
 123
 124   .margin-content {
 125     margin-left: $not-expanded-horizontal-margins;
 126     margin-right: $not-expanded-horizontal-margins;
 127     flex-grow: 1;
 128   }
 129
 130   .sub-menu {
 131     background-color: pvar(--submenuColor);
 132     width: 100%;
 133     height: 81px;
 134     margin-bottom: $sub-menu-margin-bottom;
 135     display: flex;
 136     align-items: center;
 137     padding-left: $not-expanded-horizontal-margins;
 138     padding-right: $not-expanded-horizontal-margins;
 139   }
 140
 141   // Override some properties if the main content is expanded (no menu on the left)
 142   &.expanded {
 143     margin-left: 0;
 144     width: 100%;
 145
 146     .margin-content {
 147       margin-left: $expanded-horizontal-margins;
 148       margin-right: $expanded-horizontal-margins;
 149     }
 150
 151     .sub-menu {
 152       padding-left: $expanded-horizontal-margins;
 153       padding-right: $expanded-horizontal-margins;
 154     }
 155   }
 156
 157   &.lock-scroll .main-row > router-outlet + * {
 158     // Lock and hide body scrollbars
 159     position: fixed;
 160
 161     // Lock and hide sub-menu scrollbars
 162     .sub-menu {
 163       overflow-x: hidden;
 164     }
 165   }
 166 }
 167
 168 .title-page {
 169   color: pvar(--mainForegroundColor);
 170   font-size: 16px;
 171   display: inline-block;
 172   margin-right: 55px;
 173   font-weight: $font-semibold;
 174   @include disable-default-a-behaviour;
 175
 176   &.active, &.title-page-single {
 177     margin-top: 30px;
 178     margin-bottom: 25px;
 179   }
 180
 181   &.active {
 182     font-weight: $font-bold;
 183     border-bottom: 2px solid pvar(--mainColor);
 184   }
 185
 186   &.title-page-single {
 187     font-size: 125%;
 188   }
 189
 190   &:hover, &:active, &:focus {
 191     color: pvar(--mainForegroundColor);
 192   }
 193
 194   @media screen and (max-width: $mobile-view) {
 195     margin-right: 15px;
 196   }
 197 }
 198
 199 .title-page-about,
 200 .title-page-settings {
 201   white-space: nowrap;
 202   font-size: 115%;
 203   font-weight: $font-regular;
 204
 205   &.active {
 206     font-weight: $font-semibold;
 207   }
 208 }
 209
 210 .admin-sub-header {
 211   display: flex;
 212   align-items: center;
 213   margin-bottom: 30px;
 214
 215   .form-sub-title {
 216     flex-grow: 1;
 217   }
 218
 219   .admin-sub-nav a {
 220     @include disable-default-a-behaviour;
 221
 222     font-size: 16px;
 223     color: pvar(--mainForegroundColor);
 224     padding: 5px 15px;
 225     border-radius: 0.25rem;
 226
 227     &.active {
 228       font-weight: $font-semibold;
 229       background-color: #f0f0f0;
 230       color: #000;
 231     }
 232   }
 233 }
 234
 235 .form-sub-title {
 236   font-size: 20px;
 237   font-weight: bold;
 238 }
 239
 240 @keyframes spin {
 241   from { transform: scale(1) rotate(0deg);}
 242   to { transform: scale(1) rotate(360deg);}
 243 }
 244
 245 // In tables, don't have a hover different background
 246 table {
 247   .action-button-edit, .action-button-delete {
 248     &:hover, &:active, &:focus, &[disabled], &.disabled {
 249       background-color: $grey-background-color !important;
 250     }
 251   }
 252 }
 253
 254 .no-results {
 255   height: 40vh;
 256   display: flex;
 257   align-items: center;
 258   justify-content: center;
 259   font-size: 16px;
 260   font-weight: $font-semibold;
 261 }
 262
 263 .dropdown-item {
 264   @include dropdown-with-icon-item;
 265
 266   my-global-icon {
 267     width: 22px;
 268     height: 22px;
 269   }
 270 }
 271
 272 .anchor {
 273   position: relative;
 274   top: #{-($header-height + 20px)};
 275 }
 276
 277 @media screen and (max-width: #{breakpoint(xxl)}) {
 278   .main-col {
 279     &.expanded {
 280       .margin-content {
 281         margin-left: $expanded-horizontal-margins/2;
 282         margin-right: $expanded-horizontal-margins/2;
 283       }
 284     }
 285   }
 286 }
 287
 288 @media screen and (max-width: #{breakpoint(lg)}) {
 289   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
 290   .main-col {
 291     &, &.expanded {
 292       .margin-content {
 293         margin-left: $expanded-horizontal-margins/3;
 294         margin-right: $expanded-horizontal-margins/3;
 295       }
 296
 297       .sub-menu {
 298         padding-left: 50px;
 299         padding-right: 50px;
 300
 301         .title-page {
 302           font-size: 17px;
 303         }
 304       }
 305     }
 306   }
 307 }
 308
 309 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 310   .main-col {
 311     width: 100%;
 312   }
 313 }
 314
 315 @media screen and (max-width: $small-view) {
 316   .main-col {
 317     margin-left: 0;
 318
 319     &, &.expanded {
 320       .margin-content {
 321         margin-left: 15px;
 322         margin-right: 15px;
 323       }
 324
 325       .sub-menu {
 326         width: 100vw;
 327         padding-left: 15px;
 328         padding-right: 15px;
 329         margin-bottom: $sub-menu-margin-bottom-small-view;
 330         overflow-x: auto;
 331       }
 332
 333       .admin-sub-header {
 334         @include admin-sub-header-responsive(15px*2);
 335       }
 336
 337       my-markdown-textarea {
 338         .root {
 339           max-width: 100% !important;
 340         }
 341       }
 342
 343       input[type=text],
 344       input[type=password],
 345       input[type=email],
 346       textarea,
 347       .peertube-select-container {
 348         width: 100% !important;
 349       }
 350
 351       .caption input[type=text] {
 352         width: unset !important;
 353         flex-grow: 1;
 354       }
 355     }
 356   }
 357 }
 358
 359 // overflow-databale responsive rules
 360 @media screen and (min-width: #{breakpoint(lg)}) {
 361   .main-col {
 362     &.expanded {
 363       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
 364     }
 365
 366     &:not(.expanded) {
 367       @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
 368     }
 369   }
 370 }
 371
 372 @media screen and (max-width: #{breakpoint(lg)}) {
 373   .main-col {
 374     &.expanded {
 375       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
 376     }
 377
 378     &:not(.expanded) {
 379       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
 380     }
 381   }
 382 }
 383
 384 @media screen and (max-width: $small-view) {
 385   .main-col {
 386     &:not(.expanded),
 387     &.expanded {
 388       @include overflow-datatable(breakpoint(lg), 15px);
 389     }
 390   }
 391 }
 392
 393 @media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
 394   .main-col {
 395     &:not(.expanded) {
 396       .admin-sub-header {
 397         @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
 398       }
 399
 400       .sub-menu {
 401         overflow-x: auto;
 402         width: calc(100vw - #{$menu-width});
 403       }
 404     }
 405   }
 406 }