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