Video Category

Vidéo de la demo Backtro d'Overflow de Logon System. Source vidéo : ...

, .bm-login-form form input[type="password"], .bm-login-form form input[type="email"]{ display: block; width: 100%; height: auto; margin: 0; padding: 9px 12px; background: rgba(var(--bm-color-bg-secondary), 1); border: 1px solid rgba(var(--bm-color-border), 1); border-radius: var(--bm-radius-button); color: rgba(var(--bm-color-text-primary), 1); font-family: inherit; font-size: 14px; line-height: 1.4; outline: none; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .bm-login-form form input[type="text"]:focus, .bm-login-form form input[type="password"]:focus, .bm-login-form form input[type="email"]:focus{ border-color: rgba(var(--bm-color-accent), 1); box-shadow: 0 0 0 3px rgba(var(--bm-color-accent), 0.15); } .bm-login-form form .login-remember{ margin: 4px 0 18px; } .bm-login-form form .login-remember label{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: rgba(var(--bm-color-text-primary), 0.8); cursor: pointer; } .bm-login-form form .login-remember input[type="checkbox"]{ margin: 0; width: 16px; height: 16px; flex-shrink: 0; accent-color: rgba(var(--bm-color-accent), 1); } .bm-login-form form .login-submit{ margin: 0; } .bm-login-form form input[type="submit"], .bm-login-form form button[type="submit"]{ display: block; width: 100%; margin: 0; padding: 10px 16px; background: rgba(var(--bm-color-accent), 1); border: 1px solid rgba(var(--bm-color-accent), 1); border-radius: var(--bm-radius-button); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; cursor: pointer; outline: none; box-shadow: none; text-shadow: none; transition: filter 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .bm-login-form form input[type="submit"]:hover, .bm-login-form form button[type="submit"]:hover{ filter: brightness(1.1); } .bm-login-form form input[type="submit"]:focus, .bm-login-form form button[type="submit"]:focus{ box-shadow: 0 0 0 3px rgba(var(--bm-color-accent), 0.3); } body.bm-messages-dark .bm-login-form form input[type="text"], body.bm-messages-dark .bm-login-form form input[type="password"], body.bm-messages-dark .bm-login-form form input[type="email"]{ background: rgba(var(--bm-color-bg), 1); border-color: rgba(var(--bm-color-border), 0.5); } body.bm-messages-dark .bm-login-form form input[type="text"]:focus, body.bm-messages-dark .bm-login-form form input[type="password"]:focus, body.bm-messages-dark .bm-login-form form input[type="email"]:focus{ border-color: rgba(var(--bm-color-border), 1); box-shadow: 0 0 0 3px rgba(var(--bm-color-border), 0.4); } body.bm-messages-dark .bm-login-form form input[type="submit"], body.bm-messages-dark .bm-login-form form button[type="submit"]{ background: rgba(var(--bm-color-bg-secondary), 1); border: 1px solid rgba(var(--bm-color-border), 0.5); color: rgba(var(--bm-color-text-primary), 1); } body.bm-messages-dark .bm-login-form form input[type="submit"]:focus, body.bm-messages-dark .bm-login-form form button[type="submit"]:focus{ box-shadow: 0 0 0 3px rgba(var(--bm-color-border), 0.5); }