src/wolnelektury/static/2022/styles/layout/_simple.scss

   1 .page-simple {
   2     margin: 0 16px 70px 16px;
   3     padding-bottom: 30px;
   4
   5     border-radius: 10px;
   6     background: #E1F1F2;
   7     display: flex;
   8     flex-direction: column;
   9     align-items: center;
  10
  11     &.wide {
  12         align-items: normal;
  13     }
  14
  15     .white-box {
  16         // for legacy templates
  17         width: 100%;
  18         display: flex;
  19         flex-direction: column;
  20         align-items: center;
  21     }
  22
  23     h1 {
  24         width: 100%;
  25         margin: 0 0 50px 0;
  26         padding: 32px 45px;
  27         border-radius: 10px 10px 0 0;
  28
  29         font-style: italic;
  30         font-weight: 300;
  31         font-size: 48px;
  32         line-height: 55px;
  33         letter-spacing: -0.02em;
  34         background: #083F4D;
  35         color: #92BD39;
  36     }
  37
  38     > p, form, > .normal-text {
  39         margin-left: 16px;
  40         margin-right: 16px;
  41         width: auto;
  42
  43         @include rwd($break3) {
  44             min-width: 300px;
  45             margin-left: 50px;
  46             margin-right: 50px;
  47         }
  48     }
  49
  50     .wlfund {
  51         margin: 0;
  52         width: 90%;
  53         border-collapse: separate;
  54
  55         tr {
  56             td {
  57                 padding: .625rem .3125rem .625rem;
  58                 border-top: .625rem solid rgba(255,255,255,0);
  59                 border-bottom: 1px solid #083F4D;
  60                 text-align: center;
  61             }
  62         }
  63     }
  64
  65     .form-info {
  66         h2 {
  67             font-size: 1.5em;
  68             margin-top: 0;
  69         }
  70     }
  71
  72 }
  73
  74 .page-simple, .nice-controls {
  75     button, input[type=submit] {
  76         margin: 24px 0;
  77         height: 56px;
  78         background: #083F4D;
  79         border: none;
  80         border-radius: 3px;
  81         font-weight: 600;
  82         font-size: 20px;
  83         line-height: 25px;
  84         display: flex;
  85         align-items: center;
  86         justify-content: center;
  87         text-align: center;
  88         color: #FFFFFF;
  89         width: 100%;
  90
  91         @include rwd($break3) {
  92             width: 340px;
  93         }
  94
  95         &.active {
  96             outline: 2px solid #083F4D;
  97             outline-offset: 3px;
  98         }
  99
 100         &:disabled {
 101             opacity: .8;
 102         }
 103
 104         &.button-orange {
 105             background: #FFA500;
 106             color: black;
 107             transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
 108             &:hover {
 109                 background: #92BD39;
 110             }
 111         }
 112     }
 113
 114     label {
 115         font-style: normal;
 116         font-weight: 600;
 117         font-size: 15px;
 118         line-height: 160%;
 119         color: #083F4D;
 120         margin-top: 24px;
 121     }
 122
 123     input, textarea, select {
 124         display: block;
 125         width: 100%;
 126         background: #FFFFFF;
 127         color: black;
 128         border: 1px solid #D5ECED;
 129         border-radius: 3px;
 130         transition: all cubic-bezier(0, 0, 0.2, 1) 250ms;
 131         padding: 10px;
 132         outline: 0;
 133     }
 134     input, select {
 135         height: 56px;
 136     }
 137     input[type=checkbox], input[type=radio] {
 138         display: inline;
 139         float: left;
 140         width: 1.2em;
 141         height: 1.2em;
 142         vertical-align: middle;
 143         margin-right: 1em;
 144     }
 145 }