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