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