client/src/sass/application.scss

   1 $icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/';
   2 @import '_bootstrap';
   3
   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 './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-hoover-color};
  27   --mainBackgroundColor: #{$bg-color};
  28   --mainForegroundColor: #{$fg-color};
  29   --submenuColor: #{$sub-menu-color};
  30   --inputColor: #{$input-background-color};
  31   --inputPlaceholderColor: #{$input-placeholder-color};
  32
  33   font-family: $main-fonts;
  34   font-weight: $font-regular;
  35   color: var(--mainForegroundColor);
  36   font-size: 14px;
  37 }
  38
  39 #incompatible-browser {
  40   display: none;
  41   text-align: center;
  42   position: absolute;
  43   width: 100%;
  44   top: 45%;
  45 }
  46
  47 strong {
  48   font-weight: $font-semibold;
  49 }
  50
  51 input.readonly {
  52   /* Force blank on readonly inputs */
  53   background-color: var(--inputColor) !important;
  54 }
  55
  56 input, textarea {
  57   outline: none;
  58   color: var(--mainForegroundColor);
  59 }
  60
  61 label {
  62   font-weight: $font-bold;
  63   font-size: 15px;
  64 }
  65
  66 .form-error {
  67   display: block;
  68   color: $red;
  69   margin-top: 5px;
  70 }
  71
  72 .input-error {
  73   border-color: $red !important;
  74 }
  75
  76 .fullWidth {
  77   width: 100%;
  78   margin-left: auto;
  79   margin-right: auto;
  80   max-width: initial;
  81 }
  82
  83 .glyphicon-black {
  84   color: black;
  85 }
  86
  87 .main-col {
  88   margin-left: $menu-width;
  89   width: auto;
  90
  91   .margin-content {
  92     margin-left: $not-expanded-horizontal-margins;
  93     margin-right: $not-expanded-horizontal-margins;
  94     flex-grow: 1;
  95   }
  96
  97   .sub-menu {
  98     background-color: var(--submenuColor);
  99     width: 100%;
 100     height: 81px;
 101     margin-bottom: 30px;
 102     display: flex;
 103     align-items: center;
 104     padding-left: $not-expanded-horizontal-margins;
 105     padding-right: $not-expanded-horizontal-margins;
 106   }
 107
 108   // Override some properties if the main content is expanded (no menu on the left)
 109   &.expanded {
 110     margin-left: 0;
 111
 112     .margin-content {
 113       margin-left: $expanded-horizontal-margins;
 114       margin-right: $expanded-horizontal-margins;
 115     }
 116
 117     .sub-menu {
 118       padding-left: $expanded-horizontal-margins;
 119       padding-right: $expanded-horizontal-margins;
 120     }
 121   }
 122 }
 123
 124 .title-page {
 125   color: var(--mainForegroundColor);
 126   font-size: 16px;
 127   display: inline-block;
 128   margin-right: 55px;
 129   font-weight: $font-semibold;
 130   @include disable-default-a-behaviour;
 131
 132   &.active, &.title-page-single {
 133     border-bottom: 2px solid var(--mainColor);
 134     font-weight: $font-bold;
 135     margin-top: 30px;
 136     margin-bottom: 25px;
 137   }
 138
 139   &:hover, &:active, &:focus {
 140     color: var(--mainForegroundColor);
 141   }
 142
 143   @media screen and (max-width: 500px) {
 144     margin-right: 20px;
 145   }
 146 }
 147
 148 .admin-sub-header {
 149   display: flex;
 150   align-items: center;
 151   margin-bottom: 30px;
 152
 153   .form-sub-title {
 154     flex-grow: 1;
 155   }
 156
 157   .admin-sub-nav a {
 158     @include disable-default-a-behaviour;
 159
 160     font-size: 16px;
 161     color: var(--mainForegroundColor);
 162     padding: 5px 15px;
 163     border-radius: 0.25rem;
 164
 165     &.active {
 166       font-weight: $font-semibold;
 167       background-color: #f0f0f0;
 168       color: #000;
 169     }
 170   }
 171 }
 172
 173 .form-sub-title {
 174   font-size: 20px;
 175   font-weight: bold;
 176 }
 177
 178 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 179 .glyphicon-refresh-animate {
 180   animation: spin .7s infinite linear;
 181 }
 182
 183 @keyframes spin {
 184   from { transform: scale(1) rotate(0deg);}
 185   to { transform: scale(1) rotate(360deg);}
 186 }
 187
 188 // Bootstrap customizations
 189 .dropdown-menu {
 190   border-radius: 3px;
 191   box-shadow: 0 3px 6px;
 192   font-size: 15px;
 193
 194   .dropdown-item {
 195     padding: 3px 15px;
 196   }
 197
 198   a {
 199     color: #000 !important;
 200   }
 201 }
 202
 203 .modal {
 204   .modal-content {
 205     background-color: var(--mainBackgroundColor);
 206   }
 207
 208   .modal-header {
 209     border-bottom: none;
 210     margin-bottom: 5px;
 211
 212     .modal-title {
 213       font-size: 20px;
 214       font-weight: $font-semibold;
 215     }
 216
 217     .close {
 218       @include icon(24px);
 219
 220       position: relative;
 221       top: 3px;
 222       float: right;
 223       background-image: url('../assets/images/global/cross.svg');
 224
 225       margin: 0;
 226       padding: 0;
 227       opacity: 1;
 228     }
 229   }
 230
 231   .inputs {
 232     margin-top: 40px;
 233     margin-bottom: 0;
 234     text-align: right;
 235
 236     .action-button-cancel {
 237       @include peertube-button;
 238       @include grey-button;
 239
 240       display: inline-block;
 241       margin-right: 10px;
 242     }
 243
 244     .action-button-submit {
 245       @include peertube-button;
 246       @include orange-button;
 247     }
 248   }
 249 }
 250
 251 // Nav customizations
 252 .nav .nav-link {
 253   display: flex !important;
 254   align-items: center;
 255   height: 30px !important;
 256   padding: 10px 15px !important;
 257 }
 258
 259 .nav.nav-pills {
 260   font-size: 16px !important;
 261
 262   .nav-link.active {
 263     font-weight: $font-semibold !important;
 264   }
 265
 266   a {
 267     @include disable-default-a-behaviour;
 268
 269     color: var(--mainForegroundColor);
 270   }
 271 }
 272
 273 ngb-tabset.bootstrap {
 274
 275   .nav-link {
 276     &, & a {
 277       @include disable-default-a-behaviour;
 278
 279       color: var(--mainForegroundColor) !important;
 280     }
 281   }
 282 }
 283
 284 .orange-button {
 285   @include peertube-button;
 286   @include orange-button;
 287 }
 288
 289 .orange-button-link {
 290   @include peertube-button-link;
 291   @include orange-button;
 292 }
 293
 294 .grey-button {
 295   @include peertube-button;
 296   @include grey-button;
 297 }
 298
 299 .grey-button-link {
 300   @include peertube-button-link;
 301   @include grey-button;
 302 }
 303
 304 // In tables, don't have a hover different background
 305 table {
 306   .action-button-edit, .action-button-delete {
 307     &:hover, &:active, &:focus, &[disabled], &.disabled {
 308       background-color: $grey-color !important;
 309     }
 310   }
 311 }
 312
 313 .no-results {
 314   height: 40vh;
 315   display: flex;
 316   align-items: center;
 317   justify-content: center;
 318   font-size: 16px;
 319   font-weight: $font-semibold;
 320 }
 321
 322 @media screen and (max-width: 1200px) {
 323   .main-col {
 324     &.expanded {
 325       .margin-content {
 326         margin-left: $expanded-horizontal-margins/2;
 327         margin-right: $expanded-horizontal-margins/2;
 328       }
 329     }
 330   }
 331 }
 332
 333 @media screen and (max-width: 900px) {
 334   .main-col {
 335     &.expanded {
 336       .margin-content {
 337         margin-left: $expanded-horizontal-margins/3;
 338         margin-right: $expanded-horizontal-margins/3;
 339       }
 340
 341       .sub-menu {
 342         padding-left: 50px;
 343
 344         .title-page {
 345           font-size: 15px;
 346         }
 347       }
 348     }
 349   }
 350 }
 351
 352 @media screen and (max-width: $small-view) {
 353   .main-col {
 354     margin-left: 0;
 355
 356     &, &.expanded {
 357       .margin-content {
 358         margin-left: 15px;
 359         margin-right: 15px;
 360       }
 361
 362       .sub-menu {
 363         padding-left: 15px;
 364         padding-right: 15px;
 365         margin-bottom: 10px;
 366       }
 367
 368       input[type=text], input[type=password] {
 369         width: 100% !important;
 370       }
 371     }
 372   }
 373 }