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