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