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