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