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