wcfsetup/install/files/style/layout/form.scss

   1 input[type="date"],
   2 input[type="datetime"],
   3 input[type="email"],
   4 input[type="number"],
   5 input[type="password"],
   6 input[type="search"],
   7 input[type="tel"],
   8 input[type="text"],
   9 input[type="url"],
  10 select,
  11 textarea {
  12         margin: 0; /* safari fix */
  13         @include input;
  14 }
  15
  16 /* set placeholder color */
  17 input[type="date"],
  18 input[type="datetime"],
  19 input[type="email"],
  20 input[type="number"],
  21 input[type="password"],
  22 input[type="search"],
  23 input[type="tel"],
  24 input[type="text"],
  25 input[type="url"] {
  26         &::placeholder {
  27                 color: var(--wcfInputPlaceholder);
  28
  29                 &:focus,
  30                 &:hover {
  31                         color: var(--wcfInputPlaceholderActive);
  32                 }
  33         }
  34
  35         &[disabled],
  36         &[readonly] {
  37                 background-color: var(--wcfInputDisabledBackground) !important;
  38                 border-color: var(--wcfInputDisabledBorder) !important;
  39                 color: var(--wcfInputDisabledText) !important;
  40         }
  41 }
  42
  43 textarea::placeholder {
  44         color: var(--wcfInputPlaceholder);
  45
  46         &:focus,
  47         &:hover {
  48                 color: var(--wcfInputPlaceholderActive);
  49         }
  50 }
  51
  52 input[type="search"],
  53 input[type="text"] {
  54         -webkit-appearance: none;
  55 }
  56
  57 @media (pointer: coarse) {
  58         input[type="date"],
  59         input[type="datetime"],
  60         input[type="email"],
  61         input[type="number"],
  62         input[type="password"],
  63         input[type="search"],
  64         input[type="tel"],
  65         input[type="text"],
  66         input[type="url"],
  67         select,
  68         textarea {
  69                 font-size: 16px;
  70                 padding: 6px 8px;
  71         }
  72 }
  73
  74 textarea {
  75         border-width: 1px;
  76         font-weight: 400;
  77         resize: vertical;
  78         vertical-align: top;
  79         width: 100%;
  80
  81         @include wcfFontDefault;
  82
  83         &[disabled],
  84         &[readonly] {
  85                 background-color: var(--wcfInputDisabledBackground) !important;
  86                 border-color: var(--wcfInputDisabledBorder) !important;
  87                 color: var(--wcfInputDisabledText) !important;
  88         }
  89 }
  90
  91 input[disabled],
  92 textarea[disabled] {
  93         -webkit-text-fill-color: var(--wcfInputDisabledText); /* override safari font color change */
  94         -webkit-opacity: 1; /* override mobile safari opacity change affecting text color */
  95 }
  96
  97 select {
  98         // The width is determined by the browser based upon the longest <option> contained,
  99         // but this can cause the <select> to overflow the parent container. This is acceptable
 100         // to some extent, but on mobile it can cause the entire site to have a horizontal
 101         // scrollbar instead. Setting a `max-width` will cause the browser to respect the page
 102         // boundaries and nicely wrap the displayed value instead.
 103         max-width: 100%;
 104
 105         &.fullWidth {
 106                 width: 100%;
 107         }
 108 }
 109
 110 .formSubmit {
 111         display: flex;
 112         flex-direction: row-reverse;
 113         flex-wrap: wrap;
 114         gap: 10px;
 115         justify-content: center;
 116
 117         &:not(:first-child) {
 118                 margin-top: 30px;
 119         }
 120 }
 121
 122 @include screen-xs {
 123         .formSubmit {
 124                 input[type="button"],
 125                 input[type="reset"],
 126                 input[type="submit"],
 127                 .button,
 128                 a.button {
 129                         flex: 1;
 130                 }
 131         }
 132 }
 133
 134 .formSubmit.formSubmit.formSubmit + .section {
 135         /* Intentional selector to overwrite existing selector. */
 136         margin-top: 20px;
 137 }
 138
 139 .inputAddon {
 140         column-gap: 5px;
 141         display: flex;
 142
 143         &:not(:last-child) {
 144                 margin-bottom: 5px;
 145         }
 146
 147         > .inputPrefix,
 148         > .inputSuffix {
 149                 align-items: center;
 150                 display: flex;
 151                 flex: 0 0 auto;
 152         }
 153
 154         input {
 155                 flex: 1 auto;
 156
 157                 & + .inputPrefix {
 158                         margin-left: 5px;
 159                 }
 160         }
 161 }
 162
 163 .inputAddonTextarea {
 164         column-gap: 0;
 165         flex-wrap: wrap;
 166         row-gap: 5px;
 167
 168         > textarea {
 169                 flex: 0 0 100%;
 170         }
 171 }
 172
 173 .inputAddon input,
 174 input {
 175         &.tiny {
 176                 flex-grow: 0;
 177                 width: 80px;
 178         }
 179
 180         &.long {
 181                 width: 100%;
 182         }
 183
 184         @include screen-xs {
 185                 &.short {
 186                         flex-grow: 0;
 187                         width: 150px;
 188                 }
 189
 190                 &.medium {
 191                         width: 100%;
 192                 }
 193         }
 194
 195         @include screen-sm-up {
 196                 &.short {
 197                         flex-grow: 0;
 198                         min-width: 80px;
 199                         width: 10%;
 200                 }
 201
 202                 &.medium {
 203                         flex-grow: 0;
 204                         min-width: 150px;
 205                         width: 30%;
 206                 }
 207         }
 208 }
 209
 210 .formError {
 211         --color-error: #c00;
 212
 213         dt {
 214                 color: var(--color-error) !important;
 215         }
 216
 217         input,
 218         select,
 219         textarea {
 220                 border-color: var(--color-error) !important;
 221         }
 222 }
 223
 224 html[data-color-scheme="dark"] .formError {
 225         --color-error: #ff4747;
 226 }
 227
 228 .formSuccess {
 229         --color-success: rgb(46, 139, 87);
 230
 231         dt {
 232                 color: var(--color-success) !important;
 233         }
 234
 235         input,
 236         select,
 237         textarea {
 238                 border-color: var(--color-success) !important;
 239         }
 240 }
 241
 242 /* grid-based form controls */
 243 .formGrid {
 244         dt {
 245                 display: none;
 246         }
 247
 248         select {
 249                 width: 100%;
 250         }
 251 }
 252
 253 .formFieldRequired,
 254 .customOptionRequired {
 255         color: rgba(204, 0, 1, 1) !important;
 256 }
 257
 258 .formFieldRequiredNotice {
 259         color: var(--wcfContentDimmedText);
 260         margin-top: 20px;
 261         @include wcfFontSmall;
 262 }
 263
 264 html[data-color-scheme="dark"] :is(.formFieldRequired, .customOptionRequired) {
 265         color: #ff4444 !important;
 266 }
 267
 268 /* password strength estimator */
 269 .inputAddonPasswordStrength {
 270         align-items: flex-start;
 271
 272         input.medium {
 273                 align-self: stretch;
 274         }
 275
 276         @include screen-xs {
 277                 flex-wrap: wrap;
 278
 279                 input:is(.medium, .long) {
 280                         width: auto;
 281                 }
 282         }
 283 }
 284
 285 .passwordStrengthRating {
 286         flex: 0 0 auto;
 287
 288         @include screen-sm-up {
 289                 margin-left: 10px;
 290         }
 291
 292         @include screen-xs {
 293                 margin-top: 5px;
 294                 width: 100%;
 295         }
 296 }
 297
 298 .passwordStrengthScore {
 299         background-color: rgb(224, 224, 224);
 300         border-radius: 3px;
 301         display: block;
 302         height: 10px;
 303         overflow: hidden;
 304         position: relative;
 305
 306         &::before {
 307                 background-color: transparent;
 308                 bottom: 0;
 309                 content: "";
 310                 left: 0;
 311                 position: absolute;
 312                 top: 0;
 313                 transition:
 314                         background-color 0.12s linear,
 315                         width 0.12s linear;
 316                 width: 0;
 317         }
 318
 319         &[data-score="0"]::before {
 320                 background-color: #dd2c00;
 321                 width: 5%;
 322         }
 323         &[data-score="1"]::before {
 324                 background-color: #ff9100;
 325                 width: 20%;
 326         }
 327         &[data-score="2"]::before {
 328                 background-color: #cddc39;
 329                 width: 50%;
 330         }
 331         &[data-score="3"]::before {
 332                 background-color: #64dd17;
 333                 width: 85%;
 334         }
 335         &[data-score="4"]::before {
 336                 background-color: #2e7d32;
 337                 width: 100%;
 338         }
 339 }