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   .sub-menu {
 140     background-color: pvar(--submenuColor);
 141     width: 100%;
 142     height: 81px;
 143     margin-bottom: $sub-menu-margin-bottom;
 144     display: flex;
 145     align-items: center;
 146     padding-left: $not-expanded-horizontal-margins;
 147     padding-right: $not-expanded-horizontal-margins;
 148   }
 149
 150   // Override some properties if the main content is expanded (no menu on the left)
 151   &.expanded {
 152     margin-left: 0;
 153     width: 100%;
 154
 155     .margin-content {
 156       margin-left: $expanded-horizontal-margins;
 157       margin-right: $expanded-horizontal-margins;
 158     }
 159
 160     .sub-menu {
 161       padding-left: $expanded-horizontal-margins;
 162       padding-right: $expanded-horizontal-margins;
 163     }
 164   }
 165
 166   &.lock-scroll .main-row > router-outlet + * {
 167     // Lock and hide body scrollbars
 168     position: fixed;
 169
 170     // Lock and hide sub-menu scrollbars
 171     .sub-menu {
 172       overflow-x: hidden;
 173     }
 174   }
 175 }
 176
 177 .title-page {
 178   color: pvar(--mainForegroundColor);
 179   font-size: 16px;
 180   display: inline-block;
 181   margin-right: 55px;
 182   font-weight: $font-semibold;
 183   @include disable-default-a-behaviour;
 184
 185   &.active, &.title-page-single {
 186     margin-top: 30px;
 187     margin-bottom: 25px;
 188   }
 189
 190   &.active {
 191     font-weight: $font-bold;
 192     border-bottom: 2px solid pvar(--mainColor);
 193   }
 194
 195   &.title-page-single {
 196     font-size: 125%;
 197   }
 198
 199   &:hover, &:active, &:focus {
 200     color: pvar(--mainForegroundColor);
 201   }
 202
 203   @media screen and (max-width: $mobile-view) {
 204     margin-right: 15px;
 205   }
 206 }
 207
 208 .title-page-about,
 209 .title-page-settings {
 210   white-space: nowrap;
 211   font-size: 115%;
 212   font-weight: $font-regular;
 213
 214   &.active {
 215     font-weight: $font-semibold;
 216   }
 217 }
 218
 219 .admin-sub-header {
 220   display: flex;
 221   align-items: center;
 222   margin-bottom: 30px;
 223
 224   .form-sub-title {
 225     flex-grow: 1;
 226   }
 227
 228   .admin-sub-nav a {
 229     @include disable-default-a-behaviour;
 230
 231     font-size: 16px;
 232     color: pvar(--mainForegroundColor);
 233     padding: 5px 15px;
 234     border-radius: 0.25rem;
 235
 236     &.active {
 237       font-weight: $font-semibold;
 238       background-color: #f0f0f0;
 239       color: #000;
 240     }
 241   }
 242 }
 243
 244 .form-sub-title {
 245   font-size: 20px;
 246   font-weight: bold;
 247 }
 248
 249 @keyframes spin {
 250   from { transform: scale(1) rotate(0deg);}
 251   to { transform: scale(1) rotate(360deg);}
 252 }
 253
 254 // In tables, don't have a hover different background
 255 table {
 256   .action-button-edit, .action-button-delete {
 257     &:hover, &:active, &:focus, &[disabled], &.disabled {
 258       background-color: $grey-background-color !important;
 259     }
 260   }
 261 }
 262
 263 .no-results {
 264   height: 40vh;
 265   max-height: 500px;
 266
 267   display: flex;
 268   align-items: center;
 269   justify-content: center;
 270   font-size: 16px;
 271   font-weight: $font-semibold;
 272 }
 273
 274 .dropdown-item {
 275   @include dropdown-with-icon-item;
 276
 277   my-global-icon {
 278     width: 22px;
 279     height: 22px;
 280   }
 281 }
 282
 283 .anchor {
 284   position: relative;
 285   top: #{-($header-height + 20px)};
 286 }
 287
 288 @media screen and (max-width: #{breakpoint(xxl)}) {
 289   .main-col {
 290     &.expanded {
 291       .margin-content {
 292         margin-left: $expanded-horizontal-margins/2;
 293         margin-right: $expanded-horizontal-margins/2;
 294       }
 295     }
 296   }
 297 }
 298
 299 @media screen and (max-width: #{breakpoint(lg)}) {
 300   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
 301   .main-col {
 302     &, &.expanded {
 303       .margin-content {
 304         margin-left: $expanded-horizontal-margins/3;
 305         margin-right: $expanded-horizontal-margins/3;
 306       }
 307
 308       .sub-menu {
 309         padding-left: 50px;
 310         padding-right: 50px;
 311
 312         .title-page {
 313           font-size: 17px;
 314         }
 315       }
 316     }
 317   }
 318 }
 319
 320 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 321   .main-col {
 322     width: 100%;
 323   }
 324 }
 325
 326 @media screen and (max-width: $small-view) {
 327   .main-col {
 328     margin-left: 0;
 329
 330     &, &.expanded {
 331       .margin-content {
 332         margin-left: 15px;
 333         margin-right: 15px;
 334       }
 335
 336       .sub-menu {
 337         width: 100vw;
 338         padding-left: 15px;
 339         padding-right: 15px;
 340         margin-bottom: $sub-menu-margin-bottom-small-view;
 341         overflow-x: auto;
 342       }
 343
 344       .admin-sub-header {
 345         @include admin-sub-header-responsive(15px*2);
 346       }
 347
 348       my-markdown-textarea {
 349         .root {
 350           max-width: 100% !important;
 351         }
 352       }
 353
 354       input[type=text],
 355       input[type=password],
 356       input[type=email],
 357       textarea,
 358       .peertube-select-container {
 359         width: 100% !important;
 360       }
 361
 362       .caption input[type=text] {
 363         width: unset !important;
 364         flex-grow: 1;
 365       }
 366     }
 367   }
 368 }
 369
 370 // overflow-databale responsive rules
 371 @media screen and (min-width: #{breakpoint(lg)}) {
 372   .main-col {
 373     &.expanded {
 374       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
 375     }
 376
 377     &:not(.expanded) {
 378       @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
 379     }
 380   }
 381 }
 382
 383 @media screen and (max-width: #{breakpoint(lg)}) {
 384   .main-col {
 385     &.expanded {
 386       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
 387     }
 388
 389     &:not(.expanded) {
 390       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
 391     }
 392   }
 393 }
 394
 395 @media screen and (max-width: $small-view) {
 396   .main-col {
 397     &:not(.expanded),
 398     &.expanded {
 399       @include overflow-datatable(breakpoint(lg), 15px);
 400     }
 401   }
 402 }
 403
 404 @media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
 405   .main-col {
 406     &:not(.expanded) {
 407       .admin-sub-header {
 408         @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
 409       }
 410
 411       .sub-menu {
 412         overflow-x: auto;
 413         width: calc(100vw - #{$menu-width});
 414       }
 415     }
 416   }
 417 }