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