client/src/sass/application.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
   5 @import '_bootstrap';
   6
   7 $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
   8 @import '~npm-font-source-sans-pro/source-sans-pro';
   9
  10 @import '~primeng/resources/themes/bootstrap/theme.css';
  11 @import '~primeng/resources/primeng.css';
  12 @import '~video.js/dist/video-js.css';
  13
  14 @import './video-js-custom';
  15 @import './loading-bar';
  16
  17 [hidden] {
  18   display: none !important;
  19 }
  20
  21 body {
  22   font-family: $main-fonts;
  23   font-weight: $font-regular;
  24   color: #000;
  25 }
  26
  27 strong {
  28   font-weight: $font-semibold;
  29 }
  30
  31 input.readonly {
  32   /* Force blank on readonly inputs */
  33   background-color: #fff !important;
  34 }
  35
  36 label {
  37   font-weight: $font-bold;
  38   font-size: 15px;
  39 }
  40
  41 .form-error {
  42   display: block;
  43   color: $red-error;
  44   margin-top: 5px;
  45 }
  46
  47 .input-error {
  48   border-color: $red-error !important;
  49 }
  50
  51 .glyphicon-black {
  52   color: black;
  53 }
  54
  55 .main-col {
  56   margin-left: $menu-width;
  57
  58   .margin-content {
  59     margin-left: $not-expanded-horizontal-margins;
  60     margin-right: $not-expanded-horizontal-margins;
  61   }
  62
  63   .sub-menu {
  64     background-color: #F7F7F7;
  65     width: 100%;
  66     height: 81px;
  67     margin-bottom: 30px;
  68     display: flex;
  69     align-items: center;
  70     padding-left: $not-expanded-horizontal-margins;
  71   }
  72
  73   // Override some properties if the main content is expanded (no menu on the left)
  74   &.expanded {
  75     margin-left: 0;
  76
  77     .margin-content {
  78       margin-left: $expanded-horizontal-margins;
  79       margin-right: $expanded-horizontal-margins;
  80     }
  81
  82     .sub-menu {
  83       padding-left: $expanded-horizontal-margins;
  84     }
  85   }
  86 }
  87
  88 .title-page {
  89   color: #000;
  90   font-size: 16px;
  91   display: inline-block;
  92   margin-right: 55px;
  93   font-weight: $font-semibold;
  94   @include disable-default-a-behaviour;
  95
  96   &.active, &.title-page-single {
  97     border-bottom: 2px solid $orange-color;
  98     font-weight: $font-bold;
  99     margin-top: 30px;
 100     margin-bottom: 25px;
 101   }
 102
 103   &:hover, &:active, &:focus {
 104     color: #000;
 105   }
 106 }
 107
 108 .admin-sub-header {
 109   display: flex;
 110   align-items: center;
 111   margin-bottom: 30px;
 112
 113   .admin-sub-title {
 114     flex-grow: 1;
 115   }
 116 }
 117
 118 .admin-sub-title {
 119   font-size: 20px;
 120   font-weight: bold;
 121 }
 122
 123 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 124 .glyphicon-refresh-animate {
 125   animation: spin .7s infinite linear;
 126 }
 127
 128 @keyframes spin {
 129   from { transform: scale(1) rotate(0deg);}
 130   to { transform: scale(1) rotate(360deg);}
 131 }
 132
 133 // ngprime data table customizations
 134 p-table {
 135   font-size: 15px !important;
 136
 137   td {
 138     border: 1px solid #E5E5E5 !important;
 139     padding-left: 15px !important;
 140     overflow: hidden !important;
 141     text-overflow: ellipsis !important;
 142     white-space: nowrap !important;
 143   }
 144
 145   tr {
 146     background-color: #fff !important;
 147     height: 46px;
 148   }
 149
 150   .ui-table-tbody {
 151     tr {
 152       &:hover {
 153         background-color: #f0f0f0 !important;
 154       }
 155
 156       &:not(:hover) {
 157         .action-cell * {
 158           display: none !important;
 159         }
 160       }
 161
 162       &:first-child td {
 163         border-top: none !important;
 164       }
 165
 166       &:last-child td {
 167         border-bottom: none !important;
 168       }
 169     }
 170
 171     .expander {
 172       cursor: pointer;
 173       position: relative;
 174       top: 1px;
 175     }
 176   }
 177
 178   th {
 179     border: none !important;
 180     border-bottom: 1px solid #f0f0f0 !important;
 181     text-align: left !important;
 182     padding: 5px 0 5px 15px !important;
 183     font-weight: $font-semibold !important;
 184     color: #000 !important;
 185
 186     &.ui-sortable-column:hover {
 187       background-color: #f0f0f0 !important;
 188       border: 1px solid #f0f0f0 !important;
 189       border-width: 0 1px !important;
 190
 191       &:first-child {
 192         border-width: 0 1px 0 0 !important;
 193       }
 194     }
 195
 196     &.ui-state-highlight {
 197       background-color: #fff !important;
 198
 199       .fa {
 200         @extend .glyphicon;
 201         font-size: 11px;
 202
 203         &.fa-sort-asc {
 204           @extend .glyphicon-triangle-top;
 205         }
 206
 207         &.fa-sort-desc {
 208           @extend .glyphicon-triangle-bottom;
 209         }
 210       }
 211     }
 212   }
 213
 214   .action-cell {
 215     width: 250px !important;
 216     padding: 0 !important;
 217     text-align: center;
 218   }
 219
 220   p-paginator {
 221     .ui-paginator-bottom {
 222       position: relative;
 223       border: none !important;
 224       border: 1px solid #f0f0f0 !important;
 225       height: 40px;
 226       display: flex;
 227       justify-content: center;
 228       align-items: center;
 229
 230       a {
 231         color: #000 !important;
 232         font-weight: $font-semibold !important;
 233         margin-right: 20px !important;
 234         outline: 0 !important;
 235         border-radius: 3px !important;
 236         padding: 5px 2px !important;
 237
 238         &.ui-state-active {
 239           &, &:hover, &:active, &:focus {
 240             color: #fff !important;
 241             background-color: $orange-color !important;
 242           }
 243         }
 244       }
 245     }
 246   }
 247 }
 248
 249 // Bootstrap customizations
 250 .dropdown-menu {
 251   border-radius: 3px;
 252   box-shadow: 0 3px 6px;
 253   font-size: 15px;
 254
 255   .dropdown-item {
 256     padding: 3px 15px;
 257   }
 258
 259   a {
 260     color: #000 !important;
 261   }
 262 }
 263
 264 .modal {
 265   .modal-header {
 266     border-bottom: none;
 267     margin-bottom: 5px;
 268
 269     .modal-title {
 270       font-size: 20px;
 271       font-weight: $font-semibold;
 272     }
 273
 274     .close {
 275       @include icon(24px);
 276
 277       position: relative;
 278       right: -1px;
 279       float: right;
 280       background-image: url('../assets/images/global/cross.svg');
 281     }
 282   }
 283
 284   .inputs {
 285     margin-top: 40px;
 286     margin-bottom: 0;
 287     text-align: right;
 288
 289     .action-button-cancel {
 290       @include peertube-button;
 291       @include grey-button;
 292
 293       display: inline-block;
 294       margin-right: 10px;
 295     }
 296
 297     .action-button-submit {
 298       @include peertube-button;
 299       @include orange-button;
 300     }
 301   }
 302 }
 303
 304 tabset:not(.bootstrap) {
 305   .nav {
 306     font-size: 16px !important;
 307     border: none !important;
 308
 309     .nav-item .nav-link {
 310       margin-right: 30px;
 311       padding: 0;
 312       border-radius: 3px;
 313       border: none !important;
 314
 315       .tab-link {
 316         display: flex !important;
 317         align-items: center;
 318         min-height: 30px !important;
 319         padding: 0 15px;
 320       }
 321
 322       &, & a {
 323         color: #000 !important;
 324         @include disable-default-a-behaviour;
 325       }
 326
 327       &.active, &:hover {
 328         background-color: #F0F0F0;
 329       }
 330
 331       &.active {
 332         font-weight: $font-semibold !important;
 333       }
 334     }
 335   }
 336 }
 337
 338 tabset.bootstrap {
 339   .nav-item .nav-link {
 340     &, & a {
 341       color: #000;
 342       @include disable-default-a-behaviour;
 343     }
 344   }
 345 }
 346
 347 .orange-button {
 348   @include peertube-button;
 349   @include orange-button;
 350 }
 351
 352 .orange-button-link {
 353   @include peertube-button-link;
 354   @include orange-button;
 355 }
 356
 357 .grey-button {
 358   @include peertube-button;
 359   @include grey-button;
 360 }
 361
 362 .grey-button-link {
 363   @include peertube-button-link;
 364   @include grey-button;
 365 }
 366
 367 // In tables, don't have a hover different background
 368 table {
 369   .action-button-edit, .action-button-delete {
 370     &:hover, &:active, &:focus, &[disabled], &.disabled {
 371       background-color: $grey-color !important;
 372     }
 373   }
 374 }
 375
 376 @media screen and (max-width: 900px) {
 377   .main-col {
 378     &, &.expanded {
 379       .margin-content {
 380         margin-left: 50px;
 381         margin-right: 50px;
 382       }
 383
 384       .sub-menu {
 385         padding-left: 50px;
 386       }
 387     }
 388   }
 389 }
 390
 391 // On small screen, menu is absolute
 392 @media screen and (max-width: 600px) {
 393   .title-menu-left {
 394     width: 100% !important;
 395     position: absolute !important;
 396     z-index: 10000;
 397   }
 398
 399   .main-col {
 400     margin-left: 0;
 401
 402     &, &.expanded {
 403       .margin-content {
 404         margin-left: 15px;
 405         margin-right: 15px;
 406       }
 407
 408       .sub-menu {
 409         padding-left: 15px;
 410         margin-bottom: 10px;
 411       }
 412
 413       input[type=text], input[type=password] {
 414         width: 100% !important;
 415       }
 416     }
 417   }
 418
 419   bs-dropdown-container {
 420     z-index: 10000;
 421   }
 422 }