www/css/activate.css

   1 * {
   2     box-sizing: border-box;
   3 }
   4 html {
   5     min-height: 100%;
   6 }
   7
   8 body {
   9     font-family: Arial, sans-serif;
  10     font-size: 18px;
  11     color: #fff;
  12
  13     max-width: 960px;
  14
  15     margin-left: auto;
  16     margin-right: auto;
  17
  18     /*background: url(/img/web_background_24.png) no-repeat rgb(146,155,155);*/
  19     /* dark: #394443
  20        light: #7c8c8a
  21        pink: #f652c3
  22        progress:
  23         dark: #202222
  24         light: #dadada
  25    */
  26     /*background-size: 100%;*/
  27     background: radial-gradient(at 50% 100%, #7c8c8a, #394443);
  28 }
  29 div.content {
  30     max-width: 763px;
  31     margin-left: auto;
  32     margin-right: auto;
  33 }
  34
  35 form.profile div.twocol {
  36     display: flex;
  37 }
  38 form.profile div.twocol > div {
  39     flex-basis: 0;
  40     flex-grow: 1;
  41 }
  42 form.profile div.twocol > div.left {
  43     min-width: 380px;
  44 }
  45 form.profile div.twocol > div.right {
  46     padding-left: 1em;
  47 }
  48
  49 h1 {
  50     font-weight: normal;
  51     font-size: 24px;
  52 }
  53 .error {
  54     color: #F77;
  55 }
  56
  57 #gslogo {
  58     max-width: 100%;
  59     height: auto;
  60     margin-bottom: 2rem;
  61 }
  62
  63 ul#progressbar {
  64     display: flex;
  65     padding-left: 0px;
  66 }
  67 ul#progressbar li {
  68     font-size: 15px;
  69     background-color: #1e2020;
  70     color: #dadada;
  71     font-weight: bold;
  72     text-transform: uppercase;
  73     white-space: pre-line;
  74
  75     display: block;
  76     flex-basis: 0;
  77     flex-grow: 1;
  78
  79     text-align: center;
  80     padding-top: 16px;
  81
  82     padding-bottom: 16px;
  83
  84 }
  85 ul#progressbar li + li {
  86     border-left: 34px solid;
  87     border-image: url('../img/progress-i2i.svg');
  88     border-image-slice: 0 0 0 100%;
  89 }
  90 ul#progressbar li.active {
  91     background-color: #dadada;
  92     color: #4b504f;
  93     border-left: 30px solid;
  94     border-image: url('../img/progress-i2a.svg');
  95     border-image-slice: 0 0 0 100%;
  96 }
  97
  98 p, form {
  99     text-align: center;
 100 }
 101 form.profile, form.profile p {
 102     text-align: left;
 103 }
 104
 105 form.code {
 106     background-color: #f652c3;
 107     padding: 0.5rem;
 108     width: 20rem;
 109     margin-left: auto;
 110     margin-right: auto;
 111     display: flex;
 112     column-gap: 0.5rem;
 113 }
 114 form.code .code-input {
 115     width: 100%;
 116     padding: 0.5em;
 117     border: 0.2em solid #7d9387;
 118 }
 119 form.code button {
 120     background-color: #4b504f;
 121     color: white;
 122     border: 0.2em solid #7d9387;
 123     border: none;
 124 }
 125
 126 form.profile .twocol p:first-child {
 127     margin-top: 0;
 128 }
 129 form.profile .profile-row {
 130     display: flex;
 131     margin-bottom: 0.2rem;
 132 }
 133 form.profile .profile-row > * {
 134     width: 50%;
 135 }
 136
 137 form.profile .profile-row.minage > label {
 138     width: 70%;
 139 }
 140 form.profile .profile-row.minage > div {
 141     width: 30%;
 142     text-align: right;
 143 }
 144 form.profile .profile-row.minage > div label {
 145     display: block;
 146     margin-bottom: 0.5em;
 147     white-space: nowrap;
 148 }
 149 form.profile .profile-row.minage .tag {
 150     display: inline-block;
 151     width: 2.5em;
 152     padding: 0.1em;
 153     border: 1px solid white;
 154     border-radius: 0.5em;
 155     text-align: center;
 156     font-weight: bold;
 157 }
 158 .tag.teal {
 159     background-color: #00b29e;
 160     background: linear-gradient(165deg, white, #00b29e 50%, #00b29e);
 161 }
 162 .tag.orange {
 163     background-color: #dd780e;
 164     background: linear-gradient(165deg, white, #dd780e 50%, #dd780e);
 165 }
 166 .tag.red {
 167     background-color: #fc2841;
 168     background: linear-gradient(165deg, white, #fc2841 50%, #fc2841);
 169 }
 170
 171 form.profile input[type="radio"] {
 172     accent-color: #f652c3;
 173     width: 1.2em;
 174     height: 1.2em;
 175 }
 176 form.profile input[type="text"] {
 177     border: none;
 178 }
 179 form.profile input:focus, form.profile button:focus {
 180     outline: 2px solid #f652c3;
 181 }
 182
 183 form.profile button {
 184     margin-top: 2rem;
 185     background-color: #4b504f;
 186     color: white;
 187     padding: 0.5em 2em;
 188     font-weight: bold;
 189     width: 100%;
 190     border: none;
 191 }
 192
 193 form.profile .avatarlabel {
 194     display: none;
 195 }
 196 form.profile .avatars {
 197     display: flex;
 198     flex-wrap: wrap;
 199     max-height: 400px;
 200     overflow: scroll;
 201     scrollbar-color: #f652c3 transparent;
 202 }
 203
 204 form.profile .avatar {
 205     display: block;
 206 }
 207 form.profile .avatar input {
 208     position: fixed;
 209     opacity: 0;
 210     top: 0;
 211     left: 0;
 212     width: 0;
 213     height: 0;
 214 }
 215 form.profile .avatar label {
 216     display: inline-block;
 217 }
 218 form.profile .avatar input + label {
 219     border: 4px solid transparent;
 220 }
 221 form.profile .avatar input:checked + label {
 222     border: 4px solid #f652c3;
 223 }
 224 form.profile .avatar input + label img {
 225     filter: grayscale(100%);
 226 }
 227 form.profile .avatar input + label img:hover {
 228     filter: none;
 229 }
 230 form.profile .avatar input:checked + label img {
 231     filter: none;
 232 }
 233
 234 form.profile .intro-mobile {
 235     display: none;
 236 }
 237
 238
 239 @media (max-width: 820px) {
 240     body {
 241         margin-left: 5px;
 242         margin-right: 5px;
 243     }
 244     form.code {
 245         width: 100%;
 246         flex-direction: column;
 247     }
 248     ul#progressbar {
 249         display: none;
 250     }
 251
 252     form.profile .intro-mobile {
 253         display: block;
 254     }
 255     form.profile .intro-desktop {
 256         display: none;
 257     }
 258
 259     form.profile .avatarlabel {
 260         display: block;
 261     }
 262     form.profile .avatars {
 263         flex-wrap: nowrap;
 264         margin-bottom: 1rem;
 265     }
 266     form.profile .avatar {
 267         /* make space for scrollbar */
 268         margin-bottom: 0.5rem;
 269     }
 270     form.profile div.twocol {
 271         display: block;
 272     }
 273     form.profile div.twocol > div.right {
 274         padding-left: 0;
 275     }
 276     form.profile .profile-row.minage > div label {
 277         margin-right: 1rem;
 278     }
 279     form button {
 280         padding: 1rem;
 281     }
 282 }
 283
 284 @media (min-height: 500px) {
 285     p, form.code {
 286         margin-top: 3rem;
 287     }
 288     p.error + form.code {
 289         margin-top: 1rem;
 290     }
 291     form.profile p.error {
 292         margin-top: 1rem;
 293         margin-bottom: 0;
 294     }
 295     form.profile ul.error {
 296         margin-top: 0;
 297     }
 298     p.intro-mobile {
 299         margin-top: 1rem;
 300     }
 301 }