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-bold;
   9   border-bottom: 0.19em solid pvar(--mainColor);
  10   display: inline-block;
  11   line-height: 1.2;
  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 }
  89
  90 .form-error {
  91   color: $red;
  92 }
  93
  94 // Disable red error on input focus
  95 .input-error:focus,
  96 .input-group:focus-within {
  97   & + .form-error,
  98   & + * + .form-error, // Markdown textarea
  99   & + * + * + .form-error {
 100     color: pvar(--mainForegroundColor);
 101   }
 102 }
 103
 104 .form-group-description {
 105   @extend .muted !optional;
 106
 107   font-size: 14px;
 108   margin-top: 10px;
 109 }
 110
 111 label + .form-group-description {
 112   margin-bottom: 10px;
 113   margin-top: 0;
 114 }
 115
 116 // ---------------------------------------------------------------------------
 117
 118
 119 .sub-menu-entry {
 120   @include disable-default-a-behaviour;
 121   @include margin-right(55px);
 122
 123   opacity: 0.7;
 124   color: pvar(--mainForegroundColor);
 125   display: inline-block;
 126   font-weight: $font-semibold;
 127   border-bottom: 2px solid transparent;
 128   white-space: nowrap;
 129   font-size: 1rem;
 130
 131   &.active {
 132     border-bottom-color: pvar(--mainColor);
 133   }
 134
 135   &:hover,
 136   &:active,
 137   &:focus {
 138     color: pvar(--mainForegroundColor);
 139   }
 140
 141   &.active,
 142   &:hover,
 143   &:active,
 144   &:focus {
 145     opacity: 1;
 146     outline: 0 hidden !important;
 147   }
 148
 149   @media screen and (max-width: $mobile-view) {
 150     @include margin-left(15px);
 151   }
 152 }
 153
 154 .title-page-v2 {
 155   font-weight: normal;
 156   font-size: 15px;
 157   padding: 35px 25px;
 158 }
 159
 160 .title-page {
 161   @include margin-right(55px);
 162
 163   margin-top: 30px;
 164   margin-bottom: 25px;
 165
 166   color: pvar(--mainForegroundColor);
 167   display: inline-block;
 168   font-weight: $font-semibold;
 169   font-size: 1.25rem;
 170
 171   a {
 172     @include disable-default-a-behaviour;
 173
 174     color: inherit;
 175
 176     &:hover {
 177       color: inherit;
 178       opacity: 0.8;
 179     }
 180   }
 181
 182   @media screen and (max-width: $mobile-view) {
 183     @include margin-left(15px);
 184   }
 185 }
 186
 187 .admin-sub-header {
 188   display: flex;
 189   align-items: center;
 190   margin-bottom: 30px;
 191
 192   @media screen and (max-width: $small-view) {
 193     flex-direction: column;
 194   }
 195 }
 196
 197 // ---------------------------------------------------------------------------
 198
 199 .no-results {
 200   height: 40vh;
 201   max-height: 500px;
 202
 203   display: flex;
 204   flex-direction: column;
 205   align-items: center;
 206   justify-content: center;
 207   font-weight: $font-semibold;
 208 }
 209
 210 // ---------------------------------------------------------------------------
 211
 212 .chevron-down {
 213   @include chevron-down(0.55rem, 0.15rem);
 214
 215   margin: 0 8px;
 216 }
 217
 218 .chevron-up {
 219   @include chevron-up(0.55rem, 0.15rem);
 220
 221   margin: 0 8px;
 222 }
 223
 224 .chevron-right {
 225   @include chevron-right(0.55rem, 0.15rem);
 226
 227   margin: 0 8px;
 228 }
 229
 230 .chevron-left {
 231   @include chevron-left(0.55rem, 0.15rem);
 232
 233   margin: 0 8px;
 234 }
 235
 236 // ---------------------------------------------------------------------------
 237
 238 .callout {
 239   padding: 1.25rem;
 240   border: 1px solid #eee;
 241   border-radius: .25rem;
 242   position: relative;
 243
 244   > label {
 245     position: relative;
 246     top: -5px;
 247     left: -10px;
 248     color: #6c757d !important;
 249   }
 250
 251   &:not(.callout-light) {
 252     border-left-width: .25rem;
 253   }
 254
 255   &.callout-orange {
 256     border-color: pvar(--mainColorLightest);
 257
 258     &:not(.callout-light) {
 259       border-left-color: pvar(--mainColor);
 260     }
 261   }
 262 }
 263
 264 // ---------------------------------------------------------------------------
 265
 266 .anchor {
 267   position: relative;
 268   top: #{-($header-height + 20px)};
 269 }
 270
 271 .offset-content { // if sub-menu fixed
 272   .anchor {
 273     top: #{-($header-height + $sub-menu-height + 20px)};
 274   }
 275 }
 276
 277 // ---------------------------------------------------------------------------
 278
 279 .alert {
 280   &.pt-alert-primary {
 281     background-color: pvar(--mainColorVeryLight);
 282     border: 2px solid pvar(--mainColorLightest);
 283   }
 284 }