client/src/sass/class-helpers.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_badges' as *;
   4 @use '_icons' as *;
   5 @use '_fonts' as *;
   6
   7 .link-orange {
   8   color: pvar(--mainForegroundColor);
   9   font-weight: $font-semibold;
  10   border-bottom: 0.18em solid pvar(--mainColor);
  11   display: inline-block;
  12   line-height: 1.1;
  13
  14   &:hover {
  15     color: pvar(--mainForegroundColor);
  16     opacity: 0.8;
  17   }
  18 }
  19
  20 .underline-orange {
  21   display: inline-block;
  22   border-bottom: 0.19em solid pvar(--mainColor);
  23 }
  24
  25 // ---------------------------------------------------------------------------
  26
  27 .peertube-button {
  28   @include peertube-button;
  29 }
  30
  31 .peertube-button-big {
  32   @include peertube-button-big;
  33 }
  34
  35 .peertube-button-link {
  36   @include peertube-button-link;
  37 }
  38
  39 .peertube-button-big-link {
  40   @include peertube-button-big-link;
  41 }
  42
  43 .orange-button {
  44   @include orange-button;
  45 }
  46
  47 .orange-button-inverted {
  48   @include orange-button-inverted;
  49 }
  50
  51 .grey-button {
  52   @include grey-button;
  53 }
  54
  55 .tertiary-button {
  56   @include tertiary-button;
  57 }
  58
  59 .peertube-radio-container {
  60   @include peertube-radio-container;
  61 }
  62
  63 // ---------------------------------------------------------------------------
  64
  65 .muted {
  66   @include muted;
  67 }
  68
  69 // ---------------------------------------------------------------------------
  70
  71 .pt-badge {
  72   @include peertube-badge;
  73 }
  74
  75 // ---------------------------------------------------------------------------
  76
  77 .form-group {
  78   margin-bottom: 1rem;
  79 }
  80
  81 .input-error:not(:focus) {
  82   &,
  83   + .nav-preview, // Markdown textarea
  84   + * + .tab-content {
  85     border-color: $red !important;
  86   }
  87 }
  88
  89 .input-group .input-error {
  90   z-index: 3;
  91 }
  92
  93 .form-error,
  94 .form-warning {
  95   display: block;
  96   margin-top: 5px;
  97   font-size: 0.9em;
  98 }
  99
 100 .form-error {
 101   color: $red;
 102 }
 103
 104 // Disable red error on input focus
 105 .input-error:focus,
 106 .input-group:focus-within {
 107   + .form-error,
 108   + * + .form-error, // Markdown textarea
 109   + * + * + .form-error {
 110     color: pvar(--mainForegroundColor);
 111   }
 112 }
 113
 114 .form-group-description {
 115   @include muted;
 116
 117   font-size: 14px;
 118   margin-top: 10px;
 119 }
 120
 121 label + .form-group-description {
 122   margin-bottom: 10px;
 123   margin-top: 0;
 124 }
 125
 126 // ---------------------------------------------------------------------------
 127
 128
 129 .sub-menu-entry {
 130   @include disable-default-a-behaviour;
 131   @include margin-right(55px);
 132
 133   opacity: 0.7;
 134   color: pvar(--mainForegroundColor);
 135   display: inline-block;
 136   font-weight: $font-semibold;
 137   border-bottom: 2px solid transparent;
 138   white-space: nowrap;
 139   font-size: 1rem;
 140
 141   &.active {
 142     border-bottom-color: pvar(--mainColor);
 143   }
 144
 145   &:hover,
 146   &:active,
 147   &:focus {
 148     color: pvar(--mainForegroundColor);
 149   }
 150
 151   &.active,
 152   &:hover,
 153   &:active,
 154   &:focus {
 155     opacity: 1;
 156     outline: 0 hidden !important;
 157   }
 158
 159   @media screen and (max-width: $mobile-view) {
 160     @include margin-left(15px);
 161   }
 162 }
 163
 164 .title-page-v2 {
 165   font-weight: normal;
 166   font-size: 15px;
 167   padding: 35px 25px;
 168 }
 169
 170 .title-page {
 171   @include margin-right(55px);
 172
 173   margin-top: 30px;
 174   margin-bottom: 25px;
 175
 176   color: pvar(--mainForegroundColor);
 177   display: inline-block;
 178   font-weight: $font-semibold;
 179   font-size: 1.25rem;
 180
 181   a {
 182     @include disable-default-a-behaviour;
 183
 184     color: inherit;
 185
 186     &:hover {
 187       color: inherit;
 188       opacity: 0.8;
 189     }
 190   }
 191
 192   @media screen and (max-width: $mobile-view) {
 193     @include margin-left(15px);
 194   }
 195 }
 196
 197 .admin-sub-header {
 198   display: flex;
 199   align-items: center;
 200   margin-bottom: 30px;
 201
 202   @media screen and (max-width: $small-view) {
 203     flex-direction: column;
 204   }
 205 }
 206
 207 // ---------------------------------------------------------------------------
 208
 209 .no-results {
 210   height: 40vh;
 211   max-height: 500px;
 212
 213   display: flex;
 214   flex-direction: column;
 215   align-items: center;
 216   justify-content: center;
 217   font-weight: $font-semibold;
 218 }
 219
 220 // ---------------------------------------------------------------------------
 221
 222 .chevron-down {
 223   @include chevron-down-default;
 224 }
 225
 226 .chevron-up {
 227   @include chevron-up-default;
 228 }
 229
 230 .chevron-right {
 231   @include chevron-right-default;
 232 }
 233
 234 .chevron-left {
 235   @include chevron-left-default;
 236 }
 237
 238 // ---------------------------------------------------------------------------
 239
 240 .callout {
 241   padding: 1.25rem;
 242   border: 1px solid #eee;
 243   border-radius: .25rem;
 244   position: relative;
 245
 246   > label {
 247     position: relative;
 248     top: -5px;
 249     left: -10px;
 250     color: #6c757d !important;
 251   }
 252
 253   &:not(.callout-light) {
 254     border-left-width: .25rem;
 255   }
 256
 257   &.callout-orange {
 258     border-color: pvar(--mainColorLightest);
 259
 260     &:not(.callout-light) {
 261       border-left-color: pvar(--mainColor);
 262     }
 263   }
 264 }
 265
 266 // ---------------------------------------------------------------------------
 267
 268 .anchor {
 269   position: relative;
 270   top: #{-($header-height + 20px)};
 271 }
 272
 273 .offset-content { // if sub-menu fixed
 274   .anchor {
 275     top: #{-($header-height + $sub-menu-height + 20px)};
 276   }
 277 }
 278
 279 // ---------------------------------------------------------------------------
 280
 281 .alert {
 282   &.pt-alert-primary {
 283     background-color: pvar(--mainColorVeryLight);
 284     border: 2px solid pvar(--mainColorLightest);
 285   }
 286 }
 287
 288 // ---------------------------------------------------------------------------
 289
 290 .chip {
 291   @include chip;
 292 }