diff options
Diffstat (limited to 'themes/danix-xyz-hacker/assets/css/main.min.css')
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/main.min.css | 784 |
1 files changed, 784 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css index eead573..cf5343a 100644 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ b/themes/danix-xyz-hacker/assets/css/main.min.css @@ -2423,6 +2423,790 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { box-shadow: 0 0 20px var(--accent-glow); } +/* ============================================ + FORM COMPONENTS (Week 4) + ============================================ */ + +/* Form input base styles */ + +.form-input, +.form-textarea, +.form-select { + width: 100%; + border-radius: 0.25rem; + border-width: 1px; + border-color: var(--border); + background-color: var(--bg2); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-family: IBM Plex Sans, sans-serif; + color: var(--text); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +article.form-input.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg,article +.form-textarea.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg,article +.form-select.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { + border-color: var(--border); + box-shadow: 0 0 20px var(--accent-glow); +} + +/* Input placeholder styling */ + +.form-input::-moz-placeholder, .form-textarea::-moz-placeholder { + color: var(--text-dim); + opacity: 0.7; +} + +.form-input::placeholder, +.form-textarea::placeholder { + color: var(--text-dim); + opacity: 0.7; +} + +/* Input focus state */ + +.form-input:focus, +.form-textarea:focus, +.form-select:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-color: var(--accent); + --tw-ring-offset-width: 2px; + ring-offset-color: var(--bg); + border-color: var(--accent); +} + +/* Input invalid/error state */ + +.form-input:invalid, +.form-textarea:invalid, +.form-select:invalid, +.form-input.error, +.form-textarea.error, +.form-select.error { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); +} + +.form-input:invalid:focus, +.form-textarea:invalid:focus, +.form-select:invalid:focus { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); + ring-offset-color: var(--bg); +} + +/* Input disabled state */ + +.form-input:disabled, +.form-textarea:disabled, +.form-select:disabled { + cursor: not-allowed; + background-color: var(--muted); + opacity: 0.5; +} + +/* Textarea specific */ + +.form-textarea { + min-height: 8rem; + resize: vertical; +} + +.form-textarea.auto-expand { + resize: none; + overflow-y: hidden; +} + +/* Select dropdown */ + +.form-select { + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a855f7' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + padding-right: 2.5rem; +} + +html.theme-light .form-select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239333ea' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); +} + +/* Checkbox and radio button base */ + +.form-checkbox, +.form-radio { + height: 1.25rem; + width: 1.25rem; + cursor: pointer; + accent-color: var(--accent); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 2px solid var(--border); + border-radius: 0.375rem; + flex-shrink: 0; +} + +.form-radio { + border-radius: 50%; +} + +/* Checkbox/radio focus state */ + +.form-checkbox:focus-visible, +.form-radio:focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-color: var(--accent); + --tw-ring-offset-width: 2px; + ring-offset-color: var(--bg); +} + +/* Checkbox/radio checked state */ + +.form-checkbox:checked, +.form-radio:checked { + background-color: var(--accent); + border-color: var(--accent); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; +} + +.form-radio:checked { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E"); +} + +/* Checkbox/radio disabled state */ + +.form-checkbox:disabled, +.form-radio:disabled { + cursor: not-allowed; + opacity: 0.5; + border-color: var(--muted); +} + +/* Form group layout */ + +.form-group > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.form-group label { + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + color: var(--text); +} + +.form-group.required label::after { + content: ' *'; + color: #ef4444; +} + +.form-group-input { + position: relative; +} + +.form-group-help { + font-size: 0.75rem; + line-height: 1rem; + color: var(--text-dim); +} + +.form-group.error .form-group-help { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +.form-error { + margin-top: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +/* Form layout utilities */ + +.form-row { + display: flex; + flex-direction: column; + gap: 1rem; +} + +@media (min-width: 768px) { + .form-row { + flex-direction: row; + } +} + +.form-row > .form-group { + flex: 1 1 0%; +} + +.form-inline { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 1rem; +} + +@media (min-width: 640px) { + .form-inline { + flex-direction: row; + } +} + +.form-inline .form-group { + flex: 1 1 0%; +} + +.form-inline .btn { + height: 2.5rem; +} + +/* Character count indicator */ + +.form-char-count { + text-align: right; + font-size: 0.75rem; + line-height: 1rem; + color: var(--text-dim); +} + +.form-char-count.warning { + --tw-text-opacity: 1; + color: rgb(245 158 11 / var(--tw-text-opacity, 1)); +} + +.form-char-count.error { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +/* ============================================ + MODAL COMPONENTS (Week 4) + ============================================ */ + +/* Modal backdrop */ + +.modal-backdrop { + visibility: hidden; + position: fixed; + inset: 0px; + z-index: 40; + background-color: rgb(0 0 0 / 0.5); + opacity: 0; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); +} + +.modal-backdrop.active { + visibility: visible; + opacity: 1; +} + +/* Modal container */ + +.modal { + visibility: hidden; + position: fixed; + inset: 0px; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + opacity: 0; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + pointer-events: none; +} + +.modal.active { + visibility: visible; + opacity: 1; + pointer-events: auto; +} + +.modal.active .modal-backdrop { + visibility: visible; + opacity: 1; + pointer-events: auto; +} + +/* Modal content box */ + +.modal-content { + display: flex; + max-height: 90vh; + width: 100%; + max-width: 32rem; + flex-direction: column; + border-radius: 0.5rem; + border-width: 1px; + border-color: var(--border); + background-color: var(--bg2); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +article.modal-content.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { + border-color: var(--border); + box-shadow: 0 0 20px var(--accent-glow); +} + +article.border.border-border\/30.modal-content.overflow-hidden.group.bg-bg { + border-color: var(--border); + box-shadow: 0 0 20px var(--accent-glow); +} + +.modal-content { + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + animation: modalSlideUp 0.3s ease-out; +} + +@keyframes modalSlideUp { + from { + transform: translateY(20px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Modal header */ + +.modal-header { + border-color: var(--border); +} + +.frosted-bar.modal-header { + border-color: var(--border); +} + +.modal-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + border-bottom-width: 1px; + border-color: var(--border); + padding: 1.5rem; +} + +.modal-title { + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 700; + color: var(--text); +} + +.modal-close { + display: flex; + height: 2rem; + width: 2rem; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 0.25rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.modal-close:hover { + background-color: var(--surface); +} + +.modal-close::before, +.modal-close::after { + content: ''; + position: absolute; + height: 0.125rem; + width: 1.25rem; + background-color: var(--text-dim); +} + +.modal-close::before { + transform: rotate(45deg); +} + +.modal-close::after { + transform: rotate(-45deg); +} + +.modal-close:hover::before, +.modal-close:hover::after { + background-color: var(--accent); +} + +/* Modal body */ + +.modal-body { + flex: 1 1 0%; +} + +.modal-body > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.modal-body { + overflow-y: auto; + padding: 1.5rem; +} + +/* Modal footer */ + +.modal-footer { + border-color: var(--border); +} + + + .frosted-bar.modal-footer { + border-color: var(--border); +} + +.modal-footer { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.75rem; + border-top-width: 1px; + border-color: var(--border); + padding: 1.5rem; +} + +/* Modal sizes */ + +.modal-content.modal-sm { + max-width: 24rem; +} + +.modal-content.modal-md { + max-width: 28rem; +} + +.modal-content.modal-lg { + max-width: 42rem; +} + +/* Modal variants */ + +.modal-content.modal-alert { + max-width: 24rem; +} + +.modal-content.modal-confirm { + max-width: 24rem; +} + +/* Modal button styling */ + +.modal-footer .btn { + min-width: 100px; +} + +/* ============================================ + INTERACTIVE PATTERNS (Week 4) + ============================================ */ + +/* Loading spinner */ + +.spinner { + display: inline-block; + width: 1rem; + height: 1rem; + border: 2px solid var(--border); + border-top-color: var(--accent); + border-radius: 50%; + animation: spin 0.6s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.spinner-sm { + width: 0.75rem; + height: 0.75rem; + border-width: 1.5px; +} + +.spinner-lg { + width: 1.5rem; + height: 1.5rem; + border-width: 3px; +} + +/* Button with spinner */ + +.btn:disabled .spinner { + margin-right: 0.5rem; + display: inline-block; +} + +/* Toast notification container */ + +.toast-container { + position: fixed; + bottom: 0px; + right: 0px; + z-index: 50; + max-width: 24rem; +} + +.toast-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} + +.toast-container { + padding: 1rem; +} + +@media (max-width: 640px) { + .toast-container { + left: 0px; + right: 0px; + padding-left: 1rem; + padding-right: 1rem; + } +} + +/* Toast base */ + +.toast { + display: flex; + align-items: flex-start; + gap: 0.75rem; + border-radius: 0.5rem; + border-width: 1px; + border-color: var(--border); + padding: 1rem; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +article.border.border-border\/30.toast.overflow-hidden.group.bg-bg { + border-color: var(--border); + box-shadow: 0 0 20px var(--accent-glow); +} + +article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { + border-color: var(--border); + box-shadow: 0 0 20px var(--accent-glow); +} + +.toast { + animation: slideInUp 0.3s ease-out; + background-color: var(--bg2); + color: var(--text); +} + +@keyframes slideInUp { + from { + transform: translateY(100%); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Toast variants */ + +.toast-success { + border-color: #10b981; + background-color: rgba(16, 185, 129, 0.1); +} + +.toast-success::before { + content: '✓'; + color: #10b981; + font-weight: bold; + flex-shrink: 0; +} + +.toast-error { + border-color: #ef4444; + background-color: rgba(239, 68, 68, 0.1); +} + +.toast-error::before { + content: '✕'; + color: #ef4444; + font-weight: bold; + flex-shrink: 0; +} + +.toast-info { + border-color: #3b82f6; + background-color: rgba(59, 130, 246, 0.1); +} + +.toast-info::before { + content: 'ℹ'; + color: #3b82f6; + flex-shrink: 0; +} + +.toast-warning { + border-color: #f59e0b; + background-color: rgba(245, 158, 11, 0.1); +} + +.toast-warning::before { + content: '⚠'; + color: #f59e0b; + flex-shrink: 0; +} + +.toast-close { + margin-left: auto; + display: flex; + height: 1.5rem; + width: 1.5rem; + flex-shrink: 0; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 0.25rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.toast-close:hover { + background-color: var(--surface); +} + +/* Tooltip */ + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip-text { + pointer-events: none; + visibility: hidden; + position: absolute; + white-space: nowrap; + border-radius: 0.25rem; + background-color: var(--bg2); + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; + color: var(--text-dim); + opacity: 0; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; + z-index: 50; + bottom: 125%; + left: 50%; + transform: translateX(-50%); +} + +.tooltip:hover .tooltip-text { + visibility: visible; + opacity: 1; +} + +.tooltip-text::after { + content: ''; + position: absolute; + height: 0.5rem; + width: 0.5rem; + background-color: var(--bg2); + bottom: -4px; + left: 50%; + transform: translateX(-50%) rotate(45deg); +} + +/* Tooltip directions */ + +.tooltip-bottom .tooltip-text { + top: 125%; + bottom: auto; +} + +.tooltip-bottom .tooltip-text::after { + top: -4px; + bottom: auto; + transform: translateX(-50%) rotate(225deg); +} + +.tooltip-left .tooltip-text { + left: auto; + right: 125%; + transform: none; +} + +.tooltip-left .tooltip-text::after { + left: auto; + right: -4px; + transform: rotate(135deg); +} + +.tooltip-right .tooltip-text { + left: 125%; + transform: none; +} + +.tooltip-right .tooltip-text::after { + left: -4px; + right: auto; + transform: rotate(315deg); +} + .hover\:bg-surface:hover { background-color: var(--surface); } |