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