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