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   --inputBackgroundColor: #{$input-background-color};
  39   --inputPlaceholderColor: #{$input-placeholder-color};
  40
  41   --actionButtonColor: #{$grey-foreground-color};
  42   --supportButtonBackgroundColor: #{transparent};
  43   --supportButtonColor: #{var(--actionButtonColor)};
  44   --supportButtonHeartColor: #{$support-button-heart};
  45
  46   font-family: $main-fonts;
  47   font-weight: $font-regular;
  48   color: var(--mainForegroundColor);
  49   background-color: var(--mainBackgroundColor);
  50   font-size: 14px;
  51 }
  52
  53 ::selection {
  54   color: var(--mainBackgroundColor);
  55   background-color: var(--mainHoverColor);
  56 }
  57
  58 #incompatible-browser {
  59   display: none;
  60   text-align: center;
  61   position: absolute;
  62   width: 100%;
  63   top: 45%;
  64 }
  65
  66 strong {
  67   font-weight: $font-semibold;
  68 }
  69
  70 input.readonly {
  71   /* Force blank on readonly inputs */
  72   background-color: var(--inputBackgroundColor) !important;
  73 }
  74
  75 input, textarea {
  76   outline: none;
  77   color: var(--mainForegroundColor);
  78 }
  79
  80 .btn-outline-secondary {
  81   border-color: $input-border-color;
  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;
 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
 153 .title-page {
 154   color: var(--mainForegroundColor);
 155   font-size: 16px;
 156   display: inline-block;
 157   margin-right: 55px;
 158   font-weight: $font-semibold;
 159   @include disable-default-a-behaviour;
 160
 161   &.active, &.title-page-single {
 162     margin-top: 30px;
 163     margin-bottom: 25px;
 164   }
 165
 166   &.active {
 167     font-weight: $font-bold;
 168     border-bottom: 2px solid var(--mainColor);
 169   }
 170
 171   &.title-page-single {
 172     font-size: 125%;
 173   }
 174
 175   &:hover, &:active, &:focus {
 176     color: var(--mainForegroundColor);
 177   }
 178
 179   @media screen and (max-width: $mobile-view) {
 180     margin-right: 15px;
 181   }
 182 }
 183
 184 .title-page-about,
 185 .title-page-settings {
 186   white-space: nowrap;
 187   font-size: 115%;
 188   font-weight: $font-regular;
 189
 190   &.active {
 191     font-weight: $font-semibold;
 192   }
 193 }
 194
 195 .admin-sub-header {
 196   display: flex;
 197   align-items: center;
 198   margin-bottom: 30px;
 199
 200   .form-sub-title {
 201     flex-grow: 1;
 202   }
 203
 204   .admin-sub-nav a {
 205     @include disable-default-a-behaviour;
 206
 207     font-size: 16px;
 208     color: var(--mainForegroundColor);
 209     padding: 5px 15px;
 210     border-radius: 0.25rem;
 211
 212     &.active {
 213       font-weight: $font-semibold;
 214       background-color: #f0f0f0;
 215       color: #000;
 216     }
 217   }
 218 }
 219
 220 .form-sub-title {
 221   font-size: 20px;
 222   font-weight: bold;
 223 }
 224
 225 @keyframes spin {
 226   from { transform: scale(1) rotate(0deg);}
 227   to { transform: scale(1) rotate(360deg);}
 228 }
 229
 230 // In tables, don't have a hover different background
 231 table {
 232   .action-button-edit, .action-button-delete {
 233     &:hover, &:active, &:focus, &[disabled], &.disabled {
 234       background-color: $grey-background-color !important;
 235     }
 236   }
 237 }
 238
 239 .no-results {
 240   height: 40vh;
 241   display: flex;
 242   align-items: center;
 243   justify-content: center;
 244   font-size: 16px;
 245   font-weight: $font-semibold;
 246 }
 247
 248 .dropdown-item {
 249   @include dropdown-with-icon-item;
 250
 251   my-global-icon {
 252     width: 22px;
 253     height: 22px;
 254   }
 255 }
 256
 257 .anchor {
 258   position: relative;
 259   top: #{-($header-height + 20px)};
 260 }
 261
 262 @media screen and (max-width: #{map-get($grid-breakpoints, xxl)}) {
 263   .main-col {
 264     &.expanded {
 265       .margin-content {
 266         margin-left: $expanded-horizontal-margins/2;
 267         margin-right: $expanded-horizontal-margins/2;
 268       }
 269     }
 270   }
 271 }
 272
 273 @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
 274   .main-col {
 275     &.expanded {
 276       .margin-content {
 277         margin-left: $expanded-horizontal-margins/3;
 278         margin-right: $expanded-horizontal-margins/3;
 279       }
 280
 281       .sub-menu {
 282         padding-left: 50px;
 283
 284         .title-page {
 285           font-size: 17px;
 286         }
 287       }
 288     }
 289   }
 290 }
 291
 292 @media screen and (max-width: $small-view) {
 293   .main-col {
 294     margin-left: 0;
 295
 296     &, &.expanded {
 297       .margin-content {
 298         margin-left: 15px;
 299         margin-right: 15px;
 300       }
 301
 302       .sub-menu {
 303         width: 100vw;
 304         overflow-x: auto;
 305         padding-left: 15px;
 306         padding-right: 15px;
 307         margin-bottom: 10px;
 308       }
 309
 310       input[type=text], input[type=password] {
 311         width: 100% !important;
 312       }
 313     }
 314   }
 315 }