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 .title-page {
 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
 111   &.title-page-single {
 112     margin-top: 30px;
 113     margin-bottom: 25px;
 114   }
 115
 116   &.active {
 117     border-bottom-color: pvar(--mainColor);
 118   }
 119
 120   &.title-page-single {
 121     font-size: 125%;
 122   }
 123
 124   &:hover,
 125   &:active,
 126   &:focus {
 127     color: pvar(--mainForegroundColor);
 128   }
 129
 130   &.active,
 131   &:hover,
 132   &:active,
 133   &:focus,
 134   &.title-page-single {
 135     opacity: 1;
 136     outline: 0 hidden !important;
 137   }
 138
 139   @media screen and (max-width: $mobile-view) {
 140     @include margin-left(15px);
 141   }
 142 }
 143
 144 .title-page-v2 {
 145   font-weight: normal;
 146   font-size: 15px;
 147   padding: 35px 25px;
 148 }
 149
 150 .title-page-about,
 151 .title-page-settings {
 152   white-space: nowrap;
 153   font-size: 1rem;
 154 }
 155
 156 .admin-sub-header {
 157   display: flex;
 158   align-items: center;
 159   margin-bottom: 30px;
 160
 161   @media screen and (max-width: $small-view) {
 162     flex-direction: column;
 163   }
 164 }
 165
 166 // ---------------------------------------------------------------------------
 167
 168 .no-results {
 169   height: 40vh;
 170   max-height: 500px;
 171
 172   display: flex;
 173   flex-direction: column;
 174   align-items: center;
 175   justify-content: center;
 176   font-weight: $font-semibold;
 177 }
 178
 179 // ---------------------------------------------------------------------------
 180
 181 .chevron-down {
 182   @include chevron-down(0.55rem, 0.15rem);
 183
 184   margin: 0 8px;
 185 }
 186
 187 .chevron-up {
 188   @include chevron-up(0.55rem, 0.15rem);
 189
 190   margin: 0 8px;
 191 }
 192
 193 .chevron-right {
 194   @include chevron-right(0.55rem, 0.15rem);
 195
 196   margin: 0 8px;
 197 }
 198
 199 .chevron-left {
 200   @include chevron-left(0.55rem, 0.15rem);
 201
 202   margin: 0 8px;
 203 }
 204
 205 // ---------------------------------------------------------------------------
 206
 207 .callout {
 208   padding: 1.25rem;
 209   border: 1px solid #eee;
 210   border-radius: .25rem;
 211   position: relative;
 212
 213   > label {
 214     position: relative;
 215     top: -5px;
 216     left: -10px;
 217     color: #6c757d !important;
 218   }
 219
 220   &:not(.callout-light) {
 221     border-left-width: .25rem;
 222   }
 223
 224   &.callout-orange {
 225     border-color: pvar(--mainColorLightest);
 226
 227     &:not(.callout-light) {
 228       border-left-color: pvar(--mainColor);
 229     }
 230   }
 231 }
 232
 233 // ---------------------------------------------------------------------------
 234
 235 .anchor {
 236   position: relative;
 237   top: #{-($header-height + 20px)};
 238 }
 239
 240 .offset-content { // if sub-menu fixed
 241   .anchor {
 242     top: #{-($header-height + $sub-menu-height + 20px)};
 243   }
 244 }
 245
 246 // ---------------------------------------------------------------------------
 247
 248 .alert {
 249   &.pt-alert-primary {
 250     background-color: pvar(--mainColorVeryLight);
 251     border: 2px solid pvar(--mainColorLightest);
 252   }
 253 }