client/src/sass/class-helpers.scss

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