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