web-mojo
Version:
WEB-MOJO - A lightweight JavaScript framework for building data-driven web applications
324 lines (274 loc) • 9.67 kB
CSS
/**
* MOJO Authentication System CSS
* Complete styling for MOJO Framework authentication pages
*
* @version 2.0.0
* @license MIT
* @repository https://github.com/your-org/mojo-framework
*
* Usage in external projects:
* <link rel="stylesheet" href="node_modules/mojo-framework/src/css/auth.css">
*
* Or via CDN:
* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mojo-framework/css/auth.css">
*
* Or import in CSS:
* @import url('path/to/mojo/src/css/auth.css');
*/
/* ==========================================================================
CSS Custom Properties - Easy Theming for External Projects
========================================================================== */
/* ==========================================================================
CSS Custom Properties & Theming System
========================================================================== */
:root {
/* Default Theme: Light Background, Light Panel */
/* Background Variables */
--mojo-auth-bg: #f4f7f6;
/* Panel Variables */
--mojo-auth-panel-bg: #ffffff;
--mojo-auth-panel-border: rgba(0, 0, 0, 0.1);
--mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--mojo-auth-panel-text: var(--bs-body-color);
--mojo-auth-panel-text-muted: var(--bs-secondary-color);
--mojo-auth-panel-input-bg: var(--bs-body-bg);
--mojo-auth-panel-input-border: var(--bs-border-color);
--mojo-auth-panel-input-color: var(--bs-body-color);
--mojo-auth-panel-hr-bg: var(--bs-body-bg);
/* Brand & Accent Colors */
--mojo-auth-primary: #667eea;
--mojo-auth-primary-dark: #5a6fd4;
--mojo-auth-secondary: #764ba2;
/* Layout variables */
--mojo-auth-border-radius: var(--bs-border-radius-lg, 1rem);
--mojo-auth-card-padding: 2rem;
--mojo-auth-transition: all 0.2s ease;
}
/* ==========================================================================
BACKGROUND THEMES (Apply to <body>)
========================================================================== */
body.auth-bg-light {
--mojo-auth-bg: #f4f7f6;
}
body.auth-bg-dark {
--mojo-auth-bg: #1a202c;
}
body.auth-bg-gradient {
--mojo-auth-bg: linear-gradient(
135deg,
var(--mojo-auth-primary) 0%,
var(--mojo-auth-secondary) 100%
);
}
/* ==========================================================================
PANEL THEMES (Apply to <body>)
========================================================================== */
/* Light Panel (Default) */
body.auth-panel-light {
--mojo-auth-panel-bg: #ffffff;
--mojo-auth-panel-border: rgba(0, 0, 0, 0.1);
--mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--mojo-auth-panel-text: var(--bs-body-color);
--mojo-auth-panel-text-muted: var(--bs-secondary-color);
--mojo-auth-panel-input-bg: var(--bs-body-bg);
--mojo-auth-panel-input-border: var(--bs-border-color);
--mojo-auth-panel-input-color: var(--bs-body-color);
--mojo-auth-panel-hr-bg: var(--bs-body-bg);
}
/* Dark Panel */
body.auth-panel-dark {
--mojo-auth-panel-bg: #2d3748;
--mojo-auth-panel-border: rgba(255, 255, 255, 0.15);
--mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
--mojo-auth-panel-text: #f7fafc;
--mojo-auth-panel-text-muted: #a0aec0;
--mojo-auth-panel-input-bg: #1a202c;
--mojo-auth-panel-input-border: #4a5568;
--mojo-auth-panel-input-color: #f7fafc;
--mojo-auth-panel-hr-bg: #2d3748;
}
/* Translucent Panel */
body.auth-panel-translucent {
--mojo-auth-panel-bg: rgba(255, 255, 255, 0.85);
--mojo-auth-panel-border: rgba(255, 255, 255, 0.2);
--mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--mojo-auth-panel-text: #2d3748;
--mojo-auth-panel-text-muted: #4a5568;
--mojo-auth-panel-input-bg: rgba(255, 255, 255, 0.7);
--mojo-auth-panel-input-border: rgba(0, 0, 0, 0.1);
--mojo-auth-panel-input-color: #2d3748;
--mojo-auth-panel-hr-bg: transparent;
}
body.auth-bg-dark.auth-panel-translucent,
body.auth-bg-gradient.auth-panel-translucent {
--mojo-auth-panel-bg: rgba(45, 55, 72, 0.75);
--mojo-auth-panel-border: rgba(255, 255, 255, 0.1);
--mojo-auth-panel-text: #f7fafc;
--mojo-auth-panel-text-muted: #a0aec0;
--mojo-auth-panel-input-bg: rgba(26, 32, 44, 0.7);
--mojo-auth-panel-input-border: rgba(255, 255, 255, 0.2);
--mojo-auth-panel-input-color: #f7fafc;
--mojo-auth-panel-hr-bg: transparent;
}
/* ==========================================================================
Auth Page Foundation
========================================================================== */
.auth-page {
background: var(--mojo-auth-bg);
min-height: 100vh;
font-family: var(--bs-font-sans-serif);
transition: background 0.3s ease-in-out;
}
/* ==========================================================================
Card Container
========================================================================== */
.auth-page .card {
background: var(--mojo-auth-panel-bg) ;
border: 1px solid var(--mojo-auth-panel-border);
border-radius: var(--mojo-auth-border-radius);
box-shadow: var(--mojo-auth-panel-shadow);
color: var(--mojo-auth-panel-text);
backdrop-filter: blur(10px);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.3s ease,
border 0.3s ease;
}
.auth-page .card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.auth-page .card-body {
position: relative;
padding: var(--mojo-auth-card-padding);
}
/* ==========================================================================
Form Controls & Elements
========================================================================== */
.auth-page .form-label {
font-weight: 500;
color: var(--mojo-auth-panel-text);
}
.auth-page .form-text {
color: var(--mojo-auth-panel-text-muted);
}
.auth-page .form-control {
background-color: var(--mojo-auth-panel-input-bg);
border: 1px solid var(--mojo-auth-panel-input-border);
color: var(--mojo-auth-panel-input-color);
border-radius: var(--bs-border-radius);
transition: var(--mojo-auth-transition);
}
.auth-page .form-control::placeholder {
color: var(--mojo-auth-panel-text-muted);
opacity: 0.7;
}
.auth-page .form-control:focus,
.auth-page .form-check-input:focus {
border-color: var(--mojo-auth-primary);
box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
outline: none;
}
.auth-page .text-muted {
color: var(--mojo-auth-panel-text-muted) ;
}
/* Dividers */
.auth-page .position-relative hr {
border-color: var(--mojo-auth-panel-border);
opacity: 0.75;
}
.auth-page .position-relative .position-absolute {
background: var(--mojo-auth-panel-hr-bg);
color: var(--mojo-auth-panel-text-muted);
padding: 0 1rem;
font-size: 0.875rem;
font-weight: 500;
}
/* ==========================================================================
Buttons & Links
========================================================================== */
.auth-page .btn-primary {
background: linear-gradient(
135deg,
var(--mojo-auth-primary) 0%,
var(--mojo-auth-secondary) 100%
);
border: none;
border-radius: var(--bs-border-radius);
font-weight: 500;
transition: var(--mojo-auth-transition);
}
.auth-page .btn-primary:hover:not(:disabled) {
background: linear-gradient(
135deg,
var(--mojo-auth-primary-dark) 0%,
var(--mojo-auth-secondary) 100%
);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.auth-page a {
color: var(--mojo-auth-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.auth-page a:hover {
color: var(--mojo-auth-primary-dark);
text-decoration: underline;
}
/* ==========================================================================
Footer Links
========================================================================== */
.auth-footer-links a {
color: var(--mojo-auth-panel-text-muted);
text-decoration: none;
transition: all 0.2s ease;
}
.auth-footer-links a:hover {
color: var(--mojo-auth-primary);
text-decoration: underline;
}
body.auth-panel-dark .auth-footer-links a {
opacity: 0.8;
}
body.auth-panel-dark .auth-footer-links a:hover {
opacity: 1;
}
/* ==========================================================================
Alerts
========================================================================== */
body.auth-panel-dark .alert-danger {
background-color: rgba(220, 53, 69, 0.2);
color: #f8d7da;
}
body.auth-panel-dark .alert-success {
background-color: rgba(25, 135, 84, 0.2);
color: #d1e7dd;
}
/* ==========================================================================
(Remaining styles are mostly theme-agnostic and are left as is)
========================================================================== */
/* ... (other styles like password strength, responsive design, etc.) ... */
.auth-page .form-check-input:checked {
background-color: var(--mojo-auth-primary);
border-color: var(--mojo-auth-primary);
}
.auth-page .progress {
background-color: #e9ecef;
border-radius: 2px;
height: 4px;
}
.auth-page .alert {
border-radius: var(--bs-border-radius);
border: none;
box-shadow: var(--bs-box-shadow-sm);
}
@media (max-width: 768px) {
.auth-page {
padding: 1rem 0;
}
.auth-page .card {
margin: 0 1rem;
}
}