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