client/src/sass/class-helpers/_common.scss

   1 @use '_badges' as *;
   2 @use '_icons' as *;
   3 @use '_mixins' as *;
   4 @use '_variables' 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 .muted {
  27   @include muted;
  28 }
  29
  30 // ---------------------------------------------------------------------------
  31
  32 .pt-badge {
  33   @include peertube-badge;
  34 }
  35
  36 // ---------------------------------------------------------------------------
  37
  38 .no-results {
  39   height: 40vh;
  40   max-height: 500px;
  41
  42   display: flex;
  43   flex-direction: column;
  44   align-items: center;
  45   justify-content: center;
  46   font-weight: $font-semibold;
  47 }
  48
  49 // ---------------------------------------------------------------------------
  50
  51 .chevron-down {
  52   @include chevron-down-default;
  53 }
  54
  55 .chevron-up {
  56   @include chevron-up-default;
  57 }
  58
  59 .chevron-right {
  60   @include chevron-right-default;
  61 }
  62
  63 .chevron-left {
  64   @include chevron-left-default;
  65 }
  66
  67 // ---------------------------------------------------------------------------
  68
  69 .callout {
  70   padding: 1.25rem;
  71   border: 1px solid #eee;
  72   border-radius: 0.25rem;
  73   position: relative;
  74
  75   >label {
  76     position: relative;
  77     top: -5px;
  78     left: -10px;
  79     color: #6c757d !important;
  80   }
  81
  82   &:not(.callout-light) {
  83     border-left-width: 0.25rem;
  84   }
  85
  86   &.callout-orange {
  87     border-color: pvar(--mainColorLightest);
  88
  89     &:not(.callout-light) {
  90       border-left-color: pvar(--mainColor);
  91     }
  92   }
  93 }
  94
  95 // ---------------------------------------------------------------------------
  96
  97 .anchor {
  98   position: relative;
  99   top: #{- ($header-height + 20px)};
 100 }
 101
 102 .offset-content {
 103
 104   // if sub-menu fixed
 105   .anchor {
 106     top: #{- ($header-height + $sub-menu-height + 20px)};
 107   }
 108 }
 109
 110 // ---------------------------------------------------------------------------
 111
 112 .alert {
 113   &.pt-alert-primary {
 114     background-color: pvar(--mainColorVeryLight);
 115     border: 2px solid pvar(--mainColorLightest);
 116   }
 117 }
 118
 119 // ---------------------------------------------------------------------------
 120
 121 .chip {
 122   @include chip;
 123 }