client/src/sass/application.scss

   1 $FontPathSourceSansPro: "../fonts/source-sans-pro";
   2 @import '~source-sans-pro/source-sans-pro';
   3 @import '~primeng/resources/themes/bootstrap/theme.css';
   4 @import '~primeng/resources/primeng.css';
   5 @import '~video.js/dist/video-js.css';
   6 @import './video-js-custom.scss';
   7
   8 [hidden] {
   9   display: none !important;
  10 }
  11
  12 body {
  13   font-family: 'Source Sans Pro';
  14   font-weight: $font-regular;
  15   color: #000;
  16 }
  17
  18 input.readonly {
  19   /* Force blank on readonly inputs */
  20   background-color: #fff !important;
  21 }
  22
  23 label {
  24   font-weight: $font-bold;
  25   font-size: 15px;
  26 }
  27
  28 .form-error {
  29   display: block;
  30   color: $red-error;
  31   margin-top: 5px;
  32 }
  33
  34 .input-error {
  35   border-color: $red-error !important;
  36 }
  37
  38 .glyphicon-black {
  39   color: black;
  40 }
  41
  42 .main-col {
  43   margin-left: $menu-width;
  44
  45   .title-page {
  46     color: #000;
  47     font-size: 16px;
  48     display: inline-block;
  49     margin-right: 55px;
  50     font-weight: $font-semibold;
  51     @include disable-default-a-behaviour;
  52
  53     &.active, &.title-page-single {
  54       border-bottom: 2px solid $orange-color;
  55       font-weight: $font-bold;
  56       margin-top: 30px;
  57       margin-bottom: 25px;
  58     }
  59   }
  60
  61   .margin-content {
  62     margin-left: $not-expanded-horizontal-margins;
  63     margin-right: $not-expanded-horizontal-margins;
  64   }
  65
  66   .sub-menu {
  67     background-color: #F7F7F7;
  68     width: 100%;
  69     height: 81px;
  70     margin-bottom: 30px;
  71     display: flex;
  72     align-items: center;
  73     padding-left: $not-expanded-horizontal-margins;
  74   }
  75
  76   // Override some properties if the main content is expanded (no menu on the left)
  77   &.expanded {
  78     margin-left: 0;
  79
  80     .margin-content {
  81       margin-left: $expanded-horizontal-margins;
  82       margin-right: $expanded-horizontal-margins;
  83     }
  84
  85     .sub-menu {
  86       padding-left: $expanded-horizontal-margins;
  87     }
  88   }
  89 }
  90
  91 // On small screen, menu is absolute and displayed over the page
  92 @media screen and (max-width: 500px) {
  93   .title-menu-left {
  94     width: 120px;
  95     position: absolute !important;
  96     z-index: 10000;
  97   }
  98
  99   .main-col {
 100     width: 100% !important;
 101   }
 102
 103   .fake-menu {
 104     display: none;
 105   }
 106 }
 107
 108 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 109 .glyphicon-refresh-animate {
 110   -animation: spin .7s infinite linear;
 111   -ms-animation: spin .7s infinite linear;
 112   -webkit-animation: spinw .7s infinite linear;
 113   -moz-animation: spinm .7s infinite linear;
 114 }
 115
 116 @keyframes spin {
 117   from { transform: scale(1) rotate(0deg);}
 118   to { transform: scale(1) rotate(360deg);}
 119 }
 120
 121 @-webkit-keyframes spinw {
 122   from { -webkit-transform: rotate(0deg);}
 123   to { -webkit-transform: rotate(360deg);}
 124 }
 125
 126 @-moz-keyframes spinm {
 127   from { -moz-transform: rotate(0deg);}
 128   to { -moz-transform: rotate(360deg);}
 129 }
 130
 131 /* ngprime data table customizations */
 132 p-datatable {
 133   .action-cell {
 134     text-align: center;
 135
 136     .glyphicon {
 137       cursor: pointer;
 138     }
 139   }
 140 }
 141
 142 .dropdown-menu {
 143   border-radius: 3px;
 144   box-shadow: 0 3px 6px;
 145   font-size: 15px;
 146
 147   .dropdown-item {
 148     padding: 3px 15px;
 149   }
 150
 151   a {
 152     color: #000 !important;
 153   }
 154 }
 155
 156 .modal {
 157   .modal-header {
 158     border-bottom: none;
 159
 160     .title-page-single {
 161       margin: 0;
 162     }
 163   }
 164 }
 165
 166 .orange-button {
 167   @include peertube-button;
 168   @include orange-button;
 169 }
 170
 171 .orange-button-link {
 172   @include peertube-button-link;
 173   @include orange-button;
 174 }
 175
 176 .grey-button {
 177   @include peertube-button;
 178   @include grey-button;
 179 }
 180
 181 .grey-button-link {
 182   @include peertube-button-link;
 183   @include grey-button;
 184 }