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