client/src/app/+about/about-instance/about-instance.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .about-instance-title {
   5   display: flex;
   6   justify-content: space-between;
   7
   8   .title {
   9     font-size: 20px;
  10     font-weight: $font-semibold;
  11   }
  12
  13   .contact-admin {
  14     @include peertube-button-link;
  15     @include orange-button;
  16
  17     height: fit-content;
  18   }
  19 }
  20
  21 .instance-badges {
  22   font-size: 16px;
  23   margin-bottom: 20px;
  24
  25   .badge {
  26     @include margin-right(5px);
  27
  28     font-size: 12px;
  29     font-weight: $font-semibold;
  30
  31     &.category {
  32       background-color: pvar(--mainColor);
  33     }
  34   }
  35 }
  36
  37 .section-title {
  38   font-weight: $font-semibold;
  39   font-size: 16px;
  40   margin-bottom: 5px;
  41   display: flex;
  42   align-items: center;
  43 }
  44
  45 .middle-title {
  46   @include in-content-small-title;
  47
  48   margin-top: 0;
  49   margin-bottom: 25px;
  50 }
  51
  52 .block {
  53   margin-bottom: 75px;
  54   font-size: 15px;
  55 }
  56
  57 .short-description {
  58   margin-top: 10px;
  59 }
  60
  61 .short-description .dedicated-to-nsfw {
  62   margin-top: 20px;
  63   font-weight: $font-semibold;
  64 }
  65
  66 .anchor-link {
  67   @include disable-outline;
  68
  69   position: relative;
  70
  71   &:hover,
  72   &:active {
  73     &::after {
  74       @include margin-left(0.2em);
  75
  76       content: '#';
  77       display: inline-block;
  78     }
  79   }
  80
  81   .middle-title,
  82   .section-title {
  83     display: inline-block;
  84   }
  85
  86   .section-title {
  87     color: var(--mainForegroundColor);
  88   }
  89 }