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 @import '_fonts';
   8
   9 @import '~primeng/resources/themes/bootstrap/theme.css';
  10 @import '~primeng/resources/primeng.css';
  11 @import '~video.js/dist/video-js.css';
  12
  13 $assets-path: '../assets/';
  14 @import './player/player';
  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   @media screen and (max-width: 500px) {
 116     margin-right: 20px;
 117   }
 118 }
 119
 120 .admin-sub-header {
 121   display: flex;
 122   align-items: center;
 123   margin-bottom: 30px;
 124
 125   .form-sub-title {
 126     flex-grow: 1;
 127   }
 128 }
 129
 130 .form-sub-title {
 131   font-size: 20px;
 132   font-weight: bold;
 133 }
 134
 135 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 136 .glyphicon-refresh-animate {
 137   animation: spin .7s infinite linear;
 138 }
 139
 140 @keyframes spin {
 141   from { transform: scale(1) rotate(0deg);}
 142   to { transform: scale(1) rotate(360deg);}
 143 }
 144
 145 // ngprime data table customizations
 146 p-table {
 147   font-size: 15px !important;
 148
 149   td {
 150     border: 1px solid #E5E5E5 !important;
 151     padding-left: 15px !important;
 152     overflow: hidden !important;
 153     text-overflow: ellipsis !important;
 154     white-space: nowrap !important;
 155   }
 156
 157   tr {
 158     background-color: #fff !important;
 159     height: 46px;
 160   }
 161
 162   .ui-table-tbody {
 163     tr {
 164       &:hover {
 165         background-color: #f0f0f0 !important;
 166       }
 167
 168       &:not(:hover) {
 169         .action-cell * {
 170           display: none !important;
 171         }
 172       }
 173
 174       &:first-child td {
 175         border-top: none !important;
 176       }
 177
 178       &:last-child td {
 179         border-bottom: none !important;
 180       }
 181     }
 182
 183     .expander {
 184       cursor: pointer;
 185       position: relative;
 186       top: 1px;
 187     }
 188   }
 189
 190   th {
 191     border: none !important;
 192     border-bottom: 1px solid #f0f0f0 !important;
 193     text-align: left !important;
 194     padding: 5px 0 5px 15px !important;
 195     font-weight: $font-semibold !important;
 196     color: #000 !important;
 197
 198     &.ui-sortable-column:hover {
 199       background-color: #f0f0f0 !important;
 200       border: 1px solid #f0f0f0 !important;
 201       border-width: 0 1px !important;
 202
 203       &:first-child {
 204         border-width: 0 1px 0 0 !important;
 205       }
 206     }
 207
 208     &.ui-state-highlight {
 209       background-color: #fff !important;
 210
 211       .fa {
 212         @extend .glyphicon;
 213         font-size: 11px;
 214
 215         &.fa-sort-asc {
 216           @extend .glyphicon-triangle-top;
 217         }
 218
 219         &.fa-sort-desc {
 220           @extend .glyphicon-triangle-bottom;
 221         }
 222       }
 223     }
 224   }
 225
 226   .action-cell {
 227     width: 250px !important;
 228     padding: 0 !important;
 229     text-align: center;
 230
 231     my-edit-button + my-delete-button {
 232       margin-left: 5px;
 233     }
 234   }
 235
 236   p-paginator {
 237     .ui-paginator-bottom {
 238       position: relative;
 239       border: none !important;
 240       border: 1px solid #f0f0f0 !important;
 241       height: 40px;
 242       display: flex;
 243       justify-content: center;
 244       align-items: center;
 245
 246       a {
 247         color: #000 !important;
 248         font-weight: $font-semibold !important;
 249         margin-right: 20px !important;
 250         outline: 0 !important;
 251         border-radius: 3px !important;
 252         padding: 5px 2px !important;
 253
 254         &.ui-state-active {
 255           &, &:hover, &:active, &:focus {
 256             color: #fff !important;
 257             background-color: $orange-color !important;
 258           }
 259         }
 260       }
 261     }
 262   }
 263 }
 264
 265 // Bootstrap customizations
 266 .dropdown-menu {
 267   border-radius: 3px;
 268   box-shadow: 0 3px 6px;
 269   font-size: 15px;
 270
 271   .dropdown-item {
 272     padding: 3px 15px;
 273   }
 274
 275   a {
 276     color: #000 !important;
 277   }
 278 }
 279
 280 .modal {
 281   .modal-header {
 282     border-bottom: none;
 283     margin-bottom: 5px;
 284
 285     .modal-title {
 286       font-size: 20px;
 287       font-weight: $font-semibold;
 288     }
 289
 290     .close {
 291       @include icon(24px);
 292
 293       position: relative;
 294       right: -1px;
 295       float: right;
 296       background-image: url('../assets/images/global/cross.svg');
 297     }
 298   }
 299
 300   .inputs {
 301     margin-top: 40px;
 302     margin-bottom: 0;
 303     text-align: right;
 304
 305     .action-button-cancel {
 306       @include peertube-button;
 307       @include grey-button;
 308
 309       display: inline-block;
 310       margin-right: 10px;
 311     }
 312
 313     .action-button-submit {
 314       @include peertube-button;
 315       @include orange-button;
 316     }
 317   }
 318 }
 319
 320 tabset:not(.bootstrap) {
 321   .nav {
 322     font-size: 16px !important;
 323     border: none !important;
 324
 325     .nav-item .nav-link {
 326       margin-right: 30px;
 327       padding: 0;
 328       border-radius: 3px;
 329       border: none !important;
 330
 331       .tab-link {
 332         display: flex !important;
 333         align-items: center;
 334         min-height: 30px !important;
 335         padding: 0 15px;
 336       }
 337
 338       &, & a {
 339         color: #000 !important;
 340         @include disable-default-a-behaviour;
 341       }
 342
 343       &.active, &:hover {
 344         background-color: #F0F0F0;
 345       }
 346
 347       &.active {
 348         font-weight: $font-semibold !important;
 349       }
 350     }
 351   }
 352 }
 353
 354 tabset.bootstrap {
 355   .nav-item .nav-link {
 356     &, & a {
 357       color: #000;
 358       @include disable-default-a-behaviour;
 359     }
 360   }
 361 }
 362
 363 .orange-button {
 364   @include peertube-button;
 365   @include orange-button;
 366 }
 367
 368 .orange-button-link {
 369   @include peertube-button-link;
 370   @include orange-button;
 371 }
 372
 373 .grey-button {
 374   @include peertube-button;
 375   @include grey-button;
 376 }
 377
 378 .grey-button-link {
 379   @include peertube-button-link;
 380   @include grey-button;
 381 }
 382
 383 // In tables, don't have a hover different background
 384 table {
 385   .action-button-edit, .action-button-delete {
 386     &:hover, &:active, &:focus, &[disabled], &.disabled {
 387       background-color: $grey-color !important;
 388     }
 389   }
 390 }
 391
 392 @media screen and (max-width: 900px) {
 393   .main-col {
 394     &, &.expanded {
 395       .margin-content {
 396         margin-left: 50px;
 397         margin-right: 50px;
 398       }
 399
 400       .sub-menu {
 401         padding-left: 50px;
 402       }
 403     }
 404   }
 405 }
 406
 407 // On small screen, menu is absolute
 408 @media screen and (max-width: 600px) {
 409   .title-menu-left {
 410     width: 100% !important;
 411     position: absolute !important;
 412     z-index: 10000;
 413   }
 414
 415   .main-col {
 416     margin-left: 0;
 417
 418     &, &.expanded {
 419       .margin-content {
 420         margin-left: 15px;
 421         margin-right: 15px;
 422       }
 423
 424       .sub-menu {
 425         padding-left: 15px;
 426         margin-bottom: 10px;
 427       }
 428
 429       input[type=text], input[type=password] {
 430         width: 100% !important;
 431       }
 432     }
 433   }
 434
 435   bs-dropdown-container {
 436     z-index: 10000;
 437   }
 438 }