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