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