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   }
 162
 163   tr {
 164     background-color: #fff !important;
 165     height: 46px;
 166
 167     &:hover {
 168       background-color: #f0f0f0 !important;
 169     }
 170
 171     &:not(:hover) {
 172       .action-cell * {
 173         display: none !important;
 174       }
 175     }
 176
 177     &:first-child td {
 178       border-top: none !important;
 179     }
 180
 181     &:last-child td {
 182       border-bottom: none !important;
 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:not(.ui-state-active) {
 195       background-color: #f0f0f0 !important;
 196       border: 1px solid #f0f0f0 !important;
 197       border-width: 0 1px !important;
 198     }
 199
 200     &.ui-state-active {
 201       color: #fff !important;
 202       background-color: $orange-color !important;
 203       border: 1px solid $orange-color !important;
 204       border-width: 0 1px !important;
 205     }
 206   }
 207
 208   .action-cell {
 209     width: 250px !important;
 210     padding: 0 !important;
 211     text-align: center;
 212   }
 213
 214   p-paginator {
 215     .ui-paginator-bottom {
 216       position: relative;
 217       border: none !important;
 218       border: 1px solid #f0f0f0 !important;
 219       height: 40px;
 220       display: flex;
 221       justify-content: center;
 222       align-items: center;
 223
 224       a {
 225         color: #000 !important;
 226         font-weight: $font-semibold !important;
 227         margin-right: 20px !important;
 228         outline: 0 !important;
 229         border-radius: 3px !important;
 230         padding: 5px 2px !important;
 231
 232         &.ui-state-active {
 233           &, &:hover, &:active, &:focus {
 234             color: #fff !important;
 235             background-color: $orange-color !important;
 236           }
 237         }
 238       }
 239     }
 240   }
 241 }
 242
 243 // Bootstrap customizations
 244 .dropdown-menu {
 245   border-radius: 3px;
 246   box-shadow: 0 3px 6px;
 247   font-size: 15px;
 248
 249   .dropdown-item {
 250     padding: 3px 15px;
 251   }
 252
 253   a {
 254     color: #000 !important;
 255   }
 256 }
 257
 258 .modal {
 259   .modal-header {
 260     border-bottom: none;
 261     margin-bottom: 5px;
 262
 263     .modal-title {
 264       font-size: 20px;
 265       font-weight: $font-semibold;
 266     }
 267
 268     .close {
 269       @include icon(24px);
 270
 271       position: relative;
 272       right: -1px;
 273       float: right;
 274       background-image: url('../assets/images/global/cross.svg');
 275     }
 276   }
 277
 278   .inputs {
 279     margin-top: 40px;
 280     margin-bottom: 0;
 281     text-align: right;
 282
 283     .action-button-cancel {
 284       @include peertube-button;
 285       @include grey-button;
 286
 287       display: inline-block;
 288       margin-right: 10px;
 289     }
 290
 291     .action-button-submit {
 292       @include peertube-button;
 293       @include orange-button;
 294     }
 295   }
 296 }
 297
 298 .nav {
 299   font-size: 16px !important;
 300   border: none !important;
 301
 302   .nav-item .nav-link {
 303     margin-right: 30px;
 304     padding: 0;
 305     border-radius: 3px;
 306     border: none !important;
 307
 308     .tab-link {
 309       display: flex !important;
 310       align-items: center;
 311       height: 30px !important;
 312       padding: 0 15px;
 313     }
 314
 315     &, & a {
 316       color: #000 !important;
 317       @include disable-default-a-behaviour;
 318     }
 319
 320     &.active, &:hover {
 321       background-color: #F0F0F0;
 322     }
 323
 324     &.active {
 325       font-weight: $font-semibold !important;
 326     }
 327   }
 328 }
 329
 330 .orange-button {
 331   @include peertube-button;
 332   @include orange-button;
 333 }
 334
 335 .orange-button-link {
 336   @include peertube-button-link;
 337   @include orange-button;
 338 }
 339
 340 .grey-button {
 341   @include peertube-button;
 342   @include grey-button;
 343 }
 344
 345 .grey-button-link {
 346   @include peertube-button-link;
 347   @include grey-button;
 348 }
 349
 350 // On small screen, menu is absolute
 351 @media screen and (max-width: 800px) {
 352   .title-menu-left {
 353     width: 150px !important;
 354     position: absolute !important;
 355     z-index: 10000;
 356   }
 357
 358   .main-col {
 359     margin-left: 0;
 360
 361     &, &.expanded {
 362       .margin-content {
 363         margin-left: 10px;
 364         margin-right: 10px;
 365       }
 366
 367       .sub-menu {
 368         padding-left: 10px;
 369         margin-bottom: 10px;
 370       }
 371
 372       input[type=text], input[type=password] {
 373         width: 100% !important;
 374       }
 375     }
 376   }
 377 }