.form .avatar { width: 128px; height: 128px; } .form .avatar + input[type="file"] { margin: 16px 0 0 0; vertical-align: middle; } .form form > div:not(:last-child) { margin-bottom: 16px; } .form form label, .trophies-panel p { display: inline-block; margin-bottom: 4px; } .form label + .desc { margin: 0 0 4px 0; } .form input[type='text'], .form input[type='email'], .form input[type='date'], .form input[type='password'], .form input[type='search'], .form textarea, .trophies-panel > div { display: block; width: 100%; padding: 6px 8px; background: var(--background); color: var(--text); border: var(--border); /* Transitions when resizing with the mouse produces apparent lag */ transition: all .15s ease, width 0s, height 0s; } .form input[type='text']:focus, .form input[type='email']:focus, .form input[type='date']:focus, .form input[type='password']:focus, .form input[type='search']:focus, .form textarea:focus { border-color: var(--border-focused); } .form textarea { max-width: 100%; resize: vertical; } .form input[type="checkbox"], .form input[type="radio"] { display: inline; vertical-align: middle; } .form input[type="submit"] { /*width: 20%;*/ } .form form .msgerror { color: var(--error); font-weight: 400; margin-top: 5px; } .form .desc { font-size: 80%; opacity: .75; } .form hr { height: 3px; border: var(--hr-border); border-width: 1px 0; margin: 24px 0; } .trophies-panel label { margin-right: 5px; } .trophies-panel p:first-child { margin-top: 0; } .trophies-panel p label { margin: 0; } /* Editor */ .editor textarea { font-family: monospace; height: 192px; }