client/src/sass/application.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @import '_variables';
   4 @import '_mixins';
   5
   6 @import '_fonts';
   7
   8 @import '~video.js/dist/video-js.css';
   9
  10 $assets-path: '../assets/';
  11 @import './player/index';
  12 @import './loading-bar';
  13
  14 @import './bootstrap';
  15 @import './primeng-custom';
  16
  17 [hidden] {
  18   display: none !important;
  19 }
  20
  21 body {
  22   /*** theme ***/
  23   // now beware node-sass requires interpolation
  24   // for css custom properties #{$var}
  25   --mainColor: #{$orange-color};
  26   --mainHoverColor: #{$orange-hover-color};
  27   --mainBackgroundColor: #{$bg-color};
  28   --mainForegroundColor: #{$fg-color};
  29   --secondaryColor: #{$cyan-color};
  30
  31   --menuBackgroundColor: #{$menu-background};
  32   --menuForegroundColor: #{$menu-color};
  33   --submenuColor: #{$sub-menu-color};
  34
  35   --inputBackgroundColor: #{$input-background-color};
  36   --inputPlaceholderColor: #{$input-placeholder-color};
  37
  38   --actionButtonColor: #{$grey-foreground-color};
  39   --supportButtonBackgroundColor: #{transparent};
  40   --supportButtonColor: #{var(--actionButtonColor)};
  41   --supportButtonHeartColor: #{$support-button-heart};
  42
  43   font-family: $main-fonts;
  44   font-weight: $font-regular;
  45   color: var(--mainForegroundColor);
  46   background-color: var(--mainBackgroundColor);
  47   font-size: 14px;
  48 }
  49
  50 ::selection {
  51   color: var(--mainBackgroundColor);
  52   background-color: var(--mainHoverColor);
  53 }
  54
  55 #incompatible-browser {
  56   display: none;
  57   text-align: center;
  58   position: absolute;
  59   width: 100%;
  60   top: 45%;
  61 }
  62
  63 strong {
  64   font-weight: $font-semibold;
  65 }
  66
  67 input.readonly {
  68   /* Force blank on readonly inputs */
  69   background-color: var(--inputBackgroundColor) !important;
  70 }
  71
  72 input, textarea {
  73   outline: none;
  74   color: var(--mainForegroundColor);
  75 }
  76
  77 .btn-outline-secondary {
  78   border-color: $input-border-color;
  79 }
  80
  81 label {
  82   font-weight: $font-bold;
  83   font-size: 15px;
  84 }
  85
  86 .form-error {
  87   display: block;
  88   color: $red;
  89   margin-top: 5px;
  90 }
  91
  92 .input-error {
  93   border-color: $red !important;
  94 }
  95
  96 .fullWidth {
  97   width: 100%;
  98   margin-left: auto;
  99   margin-right: auto;
 100   max-width: initial;
 101 }
 102
 103 .glyphicon-black {
 104   color: black;
 105 }
 106
 107 .main-col {
 108   margin-left: $menu-width;
 109   width: auto;
 110
 111   .margin-content {
 112     margin-left: $not-expanded-horizontal-margins;
 113     margin-right: $not-expanded-horizontal-margins;
 114     flex-grow: 1;
 115   }
 116
 117   .sub-menu {
 118     background-color: var(--submenuColor);
 119     width: 100%;
 120     height: 81px;
 121     margin-bottom: $sub-menu-margin-bottom;
 122     display: flex;
 123     align-items: center;
 124     padding-left: $not-expanded-horizontal-margins;
 125     padding-right: $not-expanded-horizontal-margins;
 126   }
 127
 128   // Override some properties if the main content is expanded (no menu on the left)
 129   &.expanded {
 130     margin-left: 0;
 131
 132     .margin-content {
 133       margin-left: $expanded-horizontal-margins;
 134       margin-right: $expanded-horizontal-margins;
 135     }
 136
 137     .sub-menu {
 138       padding-left: $expanded-horizontal-margins;
 139       padding-right: $expanded-horizontal-margins;
 140     }
 141   }
 142 }
 143
 144 .title-page {
 145   color: var(--mainForegroundColor);
 146   font-size: 16px;
 147   display: inline-block;
 148   margin-right: 55px;
 149   font-weight: $font-semibold;
 150   @include disable-default-a-behaviour;
 151
 152   &.active, &.title-page-single {
 153     margin-top: 30px;
 154     margin-bottom: 25px;
 155   }
 156
 157   &.active {
 158     font-weight: $font-bold;
 159     border-bottom: 2px solid var(--mainColor);
 160   }
 161
 162   &.title-page-single {
 163     font-size: 125%;
 164   }
 165
 166   &:hover, &:active, &:focus {
 167     color: var(--mainForegroundColor);
 168   }
 169
 170   @media screen and (max-width: 500px) {
 171     margin-right: 15px;
 172   }
 173 }
 174
 175 .admin-sub-header {
 176   display: flex;
 177   align-items: center;
 178   margin-bottom: 30px;
 179
 180   .form-sub-title {
 181     flex-grow: 1;
 182   }
 183
 184   .admin-sub-nav a {
 185     @include disable-default-a-behaviour;
 186
 187     font-size: 16px;
 188     color: var(--mainForegroundColor);
 189     padding: 5px 15px;
 190     border-radius: 0.25rem;
 191
 192     &.active {
 193       font-weight: $font-semibold;
 194       background-color: #f0f0f0;
 195       color: #000;
 196     }
 197   }
 198 }
 199
 200 .form-sub-title {
 201   font-size: 20px;
 202   font-weight: bold;
 203 }
 204
 205 @keyframes spin {
 206   from { transform: scale(1) rotate(0deg);}
 207   to { transform: scale(1) rotate(360deg);}
 208 }
 209
 210 // In tables, don't have a hover different background
 211 table {
 212   .action-button-edit, .action-button-delete {
 213     &:hover, &:active, &:focus, &[disabled], &.disabled {
 214       background-color: $grey-background-color !important;
 215     }
 216   }
 217 }
 218
 219 .no-results {
 220   height: 40vh;
 221   display: flex;
 222   align-items: center;
 223   justify-content: center;
 224   font-size: 16px;
 225   font-weight: $font-semibold;
 226 }
 227
 228 .dropdown-item {
 229   @include dropdown-with-icon-item;
 230
 231   my-global-icon {
 232     width: 22px;
 233     height: 22px;
 234   }
 235 }
 236
 237 @media screen and (max-width: 1600px) {
 238   .main-col {
 239     &.expanded {
 240       .margin-content {
 241         margin-left: $expanded-horizontal-margins/2;
 242         margin-right: $expanded-horizontal-margins/2;
 243       }
 244     }
 245   }
 246 }
 247
 248 @media screen and (max-width: 900px) {
 249   .main-col {
 250     &.expanded {
 251       .margin-content {
 252         margin-left: $expanded-horizontal-margins/3;
 253         margin-right: $expanded-horizontal-margins/3;
 254       }
 255
 256       .sub-menu {
 257         padding-left: 50px;
 258
 259         .title-page {
 260           font-size: 17px;
 261         }
 262       }
 263     }
 264   }
 265 }
 266
 267 @media screen and (max-width: $small-view) {
 268   .main-col {
 269     margin-left: 0;
 270
 271     &, &.expanded {
 272       .margin-content {
 273         margin-left: 15px;
 274         margin-right: 15px;
 275       }
 276
 277       .sub-menu {
 278         width: 100vw;
 279         overflow-x: auto;
 280         padding-left: 15px;
 281         padding-right: 15px;
 282         margin-bottom: 10px;
 283       }
 284
 285       input[type=text], input[type=password] {
 286         width: 100% !important;
 287       }
 288     }
 289   }
 290 }