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