client/src/app/modal/welcome-modal.component.scss

   1 @import '_mixins';
   2 @import '_variables';
   3
   4 .modal-body {
   5   font-size: 15px;
   6 }
   7
   8 .two-columns {
   9   display: flex;
  10   align-items: center;
  11   justify-content: center;
  12   margin-top: 50px;
  13 }
  14
  15 .mascot-fw {
  16   width: 170px;
  17 }
  18
  19 .mascot {
  20   display: block;
  21   min-width: 170px;
  22   margin-right: 2rem;
  23 }
  24
  25 .subtitle {
  26   font-weight: $font-semibold;
  27   margin-bottom: 10px;
  28   font-size: 16px;
  29 }
  30
  31 .block-documentation {
  32   .subtitle {
  33     margin-bottom: 20px;
  34   }
  35 }
  36
  37 li {
  38   margin-bottom: 10px;
  39 }
  40
  41 .configure-instance {
  42   text-align: center;
  43   font-weight: 600;
  44   font-size: 18px;
  45   margin: 20px 0 40px 0;
  46 }
  47
  48 .columns {
  49   display: flex;
  50
  51   .link-block {
  52     @include disable-default-a-behaviour;
  53
  54     color: var(--mainForegroundColor);
  55     padding: 10px;
  56     transition: background-color 0.2s ease-in;
  57     flex-basis: 33%;
  58
  59     &:hover {
  60       background-color: rgba(0, 0, 0, 0.05);
  61     }
  62
  63     .link-title {
  64       font-size: 16px;
  65       font-weight: $font-semibold;
  66       display: flex;
  67       justify-content: center;
  68       margin-bottom: 5px;
  69     }
  70
  71     .link-title,
  72     div {
  73       text-align: center;
  74     }
  75   }
  76 }
  77
  78 .configure-instance-button {
  79   @include peertube-button;
  80   @include orange-button;
  81   @include disable-default-a-behaviour;
  82
  83   display: inline-block;
  84 }
  85
  86 .action-button-understood {
  87   @include peertube-button;
  88   @include grey-button;
  89 }