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

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