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