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