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