/** * WordPress Download Manager - Front-End Styles * Version: 7.0.0 * Bootstrap 5 Compatible Classes * * Table of Contents: * 1. CSS Variables * 2. Base & Reset * 3. Typography * 4. Grid System * 5. Form Controls * 6. Buttons * 7. Cards * 8. List Groups * 9. Alerts & Badges * 10. Media Objects * 11. Modals * 12. Pagination * 13. Tables * 14. Progress Bars * 15. Navigation & Tabs * 16. Utilities * 17. WPDM Specific Components * 18. Dark Mode */ /* ========================================================================== 1. CSS Variables Note: Primary color variables are pushed to by WPDM from UI settings. These fallback values ensure the CSS works if settings not loaded. ========================================================================== */ .w3eden { /* Primary Colors - WPDM pushes --color-primary-* to */ --color-primary: #3e80f2; --color-primary-rgb: 62, 128, 242; --color-primary-hover: #2972f2; --color-primary-active: #0058f2; --color-primary-light: rgba(62, 128, 242, 0.1); /* Secondary Colors - WPDM uses --clr-sec naming */ --clr-sec: #6c757d; --clr-sec-rgb: 108, 117, 125; --clr-sec-hover: #5a6268; --clr-sec-active: #545b62; --clr-sec-light: rgba(108, 117, 125, 0.1); /* Success Colors */ --color-success: #01aa31; --color-success-rgb: 1, 170, 49; --color-success-hover: #0aad01; --color-success-active: #0c8c01; --color-success-light: rgba(1, 170, 49, 0.1); /* Info Colors */ --color-info: #2CA8FF; --color-info-rgb: 44, 168, 255; --color-info-hover: #1a9ff7; --color-info-active: #0d8ee6; --color-info-light: rgba(44, 168, 255, 0.1); /* Warning Colors */ --color-warning: #FFB236; --color-warning-rgb: 255, 178, 54; --color-warning-hover: #f5a623; --color-warning-active: #e69810; --color-warning-light: rgba(255, 178, 54, 0.1); /* Danger Colors */ --color-danger: #ff5062; --color-danger-rgb: 255, 80, 98; --color-danger-hover: #ff3d51; --color-danger-active: #ff2a40; --color-danger-light: rgba(255, 80, 98, 0.1); /* Additional Named Colors */ --color-green: #30b570; --color-blue: #0073ff; --color-purple: #8557D3; --color-red: #ff5062; --color-muted: rgba(69, 89, 122, 0.6); /* Light Colors */ --color-light: #f8fafc; --color-light-hover: #f1f5f9; /* Dark Colors */ --color-dark: #1e293b; --color-dark-hover: #0f172a; /* Backgrounds */ --bg-body: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; /* Text Colors */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --text-light: #cbd5e1; /* Borders */ --border-color: #e2e8f0; --border-light: #f1f5f9; /* Sizing */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Transitions */ --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Font */ --wpdm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Dark Mode Variables */ --dm-bg: #0f172a; --dm-bg-secondary: #1e293b; --dm-bg-tertiary: #334155; --dm-text: #f1f5f9; --dm-text-secondary: #cbd5e1; --dm-text-muted: #94a3b8; --dm-border: rgba(255, 255, 255, 0.1); --dm-border-light: rgba(255, 255, 255, 0.05); } /* ========================================================================== 2. Base & Reset ========================================================================== */ .w3eden { font-family: var(--wpdm-font); font-size: 14px; line-height: 1.5; color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .w3eden *, .w3eden *::before, .w3eden *::after { box-sizing: border-box; } /* Smooth Scrollbar */ .w3eden, .w3eden * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.6) transparent; } .w3eden::-webkit-scrollbar, .w3eden *::-webkit-scrollbar { width: 8px; height: 8px; } .w3eden::-webkit-scrollbar-track, .w3eden *::-webkit-scrollbar-track { background: transparent; border-radius: 4px; } .w3eden::-webkit-scrollbar-thumb, .w3eden *::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } .w3eden::-webkit-scrollbar-thumb:hover, .w3eden *::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7); border: 2px solid transparent; background-clip: padding-box; } .w3eden img { max-width: 100%; height: auto; } .w3eden .img-48{ width: 48px !important; height: auto; } .w3eden a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } .w3eden a:hover { color: var(--color-primary-hover); } .w3eden hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid var(--border-color); opacity: 1; } /* ========================================================================== 3. Typography ========================================================================== */ .w3eden h1, .w3eden .h1, .w3eden h2, .w3eden .h2, .w3eden h3, .w3eden .h3, .w3eden h4, .w3eden .h4, .w3eden h5, .w3eden .h5, .w3eden h6, .w3eden .h6 { margin: 0 !important; font-weight: 600; line-height: 1.3; color: var(--text-primary); } .w3eden h1, .w3eden .h1 { font-size: 2.25rem; } .w3eden h2, .w3eden .h2 { font-size: 1.875rem; } .w3eden h3, .w3eden .h3 { font-size: 1.5rem; } .w3eden h4, .w3eden .h4 { font-size: 1.25rem; } .w3eden h5, .w3eden .h5 { font-size: 1.125rem; } .w3eden h6, .w3eden .h6 { font-size: 1rem; } .w3eden p { margin-top: 0; margin-bottom: 1rem; } .w3eden small, .w3eden .small { font-size: 0.875em; } .w3eden .lead { font-size: 1.125rem; font-weight: 400; line-height: 1.6; } /* ========================================================================== 4. Grid System ========================================================================== */ .w3eden .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .w3eden .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .w3eden .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .w3eden .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 15px; padding-left: 15px; } /* Column classes */ .w3eden .col { flex: 1 0 0%; } .w3eden .col-auto { flex: 0 0 auto; width: auto; } .w3eden .col-1 { flex: 0 0 auto; width: 8.33333%; } .w3eden .col-2 { flex: 0 0 auto; width: 16.66667%; } .w3eden .col-3 { flex: 0 0 auto; width: 25%; } .w3eden .col-4 { flex: 0 0 auto; width: 33.33333%; } .w3eden .col-5 { flex: 0 0 auto; width: 41.66667%; } .w3eden .col-6 { flex: 0 0 auto; width: 50%; } .w3eden .col-7 { flex: 0 0 auto; width: 58.33333%; } .w3eden .col-8 { flex: 0 0 auto; width: 66.66667%; } .w3eden .col-9 { flex: 0 0 auto; width: 75%; } .w3eden .col-10 { flex: 0 0 auto; width: 83.33333%; } .w3eden .col-11 { flex: 0 0 auto; width: 91.66667%; } .w3eden .col-12 { flex: 0 0 auto; width: 100%; } /* Small devices (576px and up) */ @media (min-width: 576px) { .w3eden .col-sm { flex: 1 0 0%; } .w3eden .col-sm-auto { flex: 0 0 auto; width: auto; } .w3eden .col-sm-1 { flex: 0 0 auto; width: 8.33333%; } .w3eden .col-sm-2 { flex: 0 0 auto; width: 16.66667%; } .w3eden .col-sm-3 { flex: 0 0 auto; width: 25%; } .w3eden .col-sm-4 { flex: 0 0 auto; width: 33.33333%; } .w3eden .col-sm-5 { flex: 0 0 auto; width: 41.66667%; } .w3eden .col-sm-6 { flex: 0 0 auto; width: 50%; } .w3eden .col-sm-7 { flex: 0 0 auto; width: 58.33333%; } .w3eden .col-sm-8 { flex: 0 0 auto; width: 66.66667%; } .w3eden .col-sm-9 { flex: 0 0 auto; width: 75%; } .w3eden .col-sm-10 { flex: 0 0 auto; width: 83.33333%; } .w3eden .col-sm-11 { flex: 0 0 auto; width: 91.66667%; } .w3eden .col-sm-12 { flex: 0 0 auto; width: 100%; } } /* Medium devices (768px and up) */ @media (min-width: 768px) { .w3eden .col-md { flex: 1 0 0%; } .w3eden .col-md-auto { flex: 0 0 auto; width: auto; } .w3eden .col-md-1 { flex: 0 0 auto; width: 8.33333%; } .w3eden .col-md-2 { flex: 0 0 auto; width: 16.66667%; } .w3eden .col-md-3 { flex: 0 0 auto; width: 25%; } .w3eden .col-md-4 { flex: 0 0 auto; width: 33.33333%; } .w3eden .col-md-5 { flex: 0 0 auto; width: 41.66667%; } .w3eden .col-md-6 { flex: 0 0 auto; width: 50%; } .w3eden .col-md-7 { flex: 0 0 auto; width: 58.33333%; } .w3eden .col-md-8 { flex: 0 0 auto; width: 66.66667%; } .w3eden .col-md-9 { flex: 0 0 auto; width: 75%; } .w3eden .col-md-10 { flex: 0 0 auto; width: 83.33333%; } .w3eden .col-md-11 { flex: 0 0 auto; width: 91.66667%; } .w3eden .col-md-12 { flex: 0 0 auto; width: 100%; } } /* Large devices (992px and up) */ @media (min-width: 992px) { .w3eden .col-lg { flex: 1 0 0%; } .w3eden .col-lg-auto { flex: 0 0 auto; width: auto; } .w3eden .col-lg-1 { flex: 0 0 auto; width: 8.33333%; } .w3eden .col-lg-2 { flex: 0 0 auto; width: 16.66667%; } .w3eden .col-lg-3 { flex: 0 0 auto; width: 25%; } .w3eden .col-lg-4 { flex: 0 0 auto; width: 33.33333%; } .w3eden .col-lg-5 { flex: 0 0 auto; width: 41.66667%; } .w3eden .col-lg-6 { flex: 0 0 auto; width: 50%; } .w3eden .col-lg-7 { flex: 0 0 auto; width: 58.33333%; } .w3eden .col-lg-8 { flex: 0 0 auto; width: 66.66667%; } .w3eden .col-lg-9 { flex: 0 0 auto; width: 75%; } .w3eden .col-lg-10 { flex: 0 0 auto; width: 83.33333%; } .w3eden .col-lg-11 { flex: 0 0 auto; width: 91.66667%; } .w3eden .col-lg-12 { flex: 0 0 auto; width: 100%; } } /* Extra large devices (1200px and up) */ @media (min-width: 1200px) { .w3eden .col-xl { flex: 1 0 0%; } .w3eden .col-xl-auto { flex: 0 0 auto; width: auto; } .w3eden .col-xl-1 { flex: 0 0 auto; width: 8.33333%; } .w3eden .col-xl-2 { flex: 0 0 auto; width: 16.66667%; } .w3eden .col-xl-3 { flex: 0 0 auto; width: 25%; } .w3eden .col-xl-4 { flex: 0 0 auto; width: 33.33333%; } .w3eden .col-xl-5 { flex: 0 0 auto; width: 41.66667%; } .w3eden .col-xl-6 { flex: 0 0 auto; width: 50%; } .w3eden .col-xl-7 { flex: 0 0 auto; width: 58.33333%; } .w3eden .col-xl-8 { flex: 0 0 auto; width: 66.66667%; } .w3eden .col-xl-9 { flex: 0 0 auto; width: 75%; } .w3eden .col-xl-10 { flex: 0 0 auto; width: 83.33333%; } .w3eden .col-xl-11 { flex: 0 0 auto; width: 91.66667%; } .w3eden .col-xl-12 { flex: 0 0 auto; width: 100%; } } /* Gutter utilities */ .w3eden .g-0, .w3eden .gx-0 { --bs-gutter-x: 0; } .w3eden .g-0, .w3eden .gy-0 { --bs-gutter-y: 0; } .w3eden .g-0 > *, .w3eden .gx-0 > * { padding-right: 0; padding-left: 0; } .w3eden .g-1, .w3eden .gx-1 { --bs-gutter-x: 0.25rem; } .w3eden .g-1, .w3eden .gy-1 { --bs-gutter-y: 0.25rem; } .w3eden .g-2, .w3eden .gx-2 { --bs-gutter-x: 0.5rem; } .w3eden .g-2, .w3eden .gy-2 { --bs-gutter-y: 0.5rem; } .w3eden .g-3, .w3eden .gx-3 { --bs-gutter-x: 1rem; } .w3eden .g-3, .w3eden .gy-3 { --bs-gutter-y: 1rem; } .w3eden .g-4, .w3eden .gx-4 { --bs-gutter-x: 1.5rem; } .w3eden .g-4, .w3eden .gy-4 { --bs-gutter-y: 1.5rem; } .w3eden .g-5, .w3eden .gx-5 { --bs-gutter-x: 3rem; } .w3eden .g-5, .w3eden .gy-5 { --bs-gutter-y: 3rem; } /* ========================================================================== 5. Form Controls ========================================================================== */ .w3eden .form-control { display: block; width: 100%; height: 42px; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--text-primary); background-color: var(--bg-body); background-clip: padding-box; border: 1px solid var(--border-color); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); appearance: none; } .w3eden .form-control:hover { border-color: var(--text-light); } .w3eden .form-control:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } .w3eden .form-control::placeholder { color: var(--text-muted); opacity: 1; } .w3eden .form-control:disabled, .w3eden .form-control[readonly] { background-color: var(--bg-secondary); opacity: 1; } /* Textarea */ .w3eden textarea.form-control { min-height: calc(1.5em + 0.75rem + 2px); height: auto; } /* Form control sizes */ .w3eden .form-control-sm { height: 34px; padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-sm); } .w3eden .form-control-lg { height: 50px; padding: 0.625rem 1rem; font-size: 1.0625rem; border-radius: var(--radius); } /* Select */ .w3eden .form-select, .w3eden select.form-control { display: block; width: 100%; height: 42px; padding: 0.5rem 2.5rem 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--text-primary); background-color: var(--bg-body); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; border: 1px solid var(--border-color); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); appearance: none; cursor: pointer; } .w3eden .form-select:hover, .w3eden select.form-control:hover { border-color: var(--text-light); } .w3eden .form-select:focus, .w3eden select.form-control:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } /* Custom checkboxes and radios */ .w3eden .form-check { display: block; min-height: 1.5rem; padding-left: 1.5rem; margin-bottom: 0.125rem; } .w3eden .form-check-input { width: 1.125em; height: 1.125em; margin-top: 0.125em; margin-left: -1.5rem; vertical-align: top; background-color: var(--bg-body); background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid var(--border-color); appearance: none; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition); } .w3eden .form-check-input[type="checkbox"] { border-radius: 0.25em; } .w3eden .form-check-input[type="radio"] { border-radius: 50%; } .w3eden .form-check-input:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } .w3eden .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .w3eden .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .w3eden .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .w3eden .form-check-label { cursor: pointer; } .w3eden .form-check-inline { display: inline-block; margin-right: 1rem; } /* Form labels */ .w3eden .form-label { margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary); } /* Form text/help */ .w3eden .form-text { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--text-muted); } /* Input group */ .w3eden .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .w3eden .input-group > .form-control, .w3eden .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .w3eden .input-group > .form-control:focus, .w3eden .input-group > .form-select:focus { z-index: 3; } .w3eden .input-group .form-control:not(:first-child), .w3eden .input-group .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .w3eden .input-group .form-control:not(:last-child), .w3eden .input-group .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .w3eden .input-group-text { display: flex; align-items: center; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--text-secondary); text-align: center; white-space: nowrap; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); } .w3eden .input-group > :not(:first-child) { margin-left: -1px; } .w3eden .input-group-text:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .w3eden .input-group-text:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-btn.input-group-append .btn { border-radius: 0 var(--radius) var(--radius) 0; height: 100%; } /* ========================================================================== 6. Buttons ========================================================================== */ .w3eden .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; min-height: 38px; font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: var(--radius); box-sizing: border-box; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition); } .w3eden .btn:focus { outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25); } .w3eden .btn:disabled, .w3eden .btn.disabled { pointer-events: none; opacity: 0.65; } /* Button variants */ .w3eden .btn-primary { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); } .w3eden .btn-primary:hover { color: #fff; background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } .w3eden .btn-primary:focus { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35); } .w3eden .btn-secondary { color: #fff; background-color: var(--clr-sec); border-color: var(--clr-sec); } .w3eden .btn-secondary:hover { color: #fff; background-color: var(--clr-sec-hover); border-color: var(--clr-sec-hover); } .w3eden .btn-secondary:focus { box-shadow: 0 0 0 3px rgba(var(--clr-sec-rgb), 0.35); } .w3eden .btn-success { color: #fff; background-color: var(--color-success); border-color: var(--color-success); } .w3eden .btn-success:hover { color: #fff; background-color: var(--color-success-hover); border-color: var(--color-success-hover); } .w3eden .btn-success:focus { box-shadow: 0 0 0 3px rgba(var(--color-success-rgb), 0.35); } .w3eden .btn-info { color: #fff; background-color: var(--color-info); border-color: var(--color-info); } .w3eden .btn-info:hover { color: #fff; background-color: var(--color-info-hover); border-color: var(--color-info-hover); } .w3eden .btn-info:focus { box-shadow: 0 0 0 3px rgba(var(--color-info-rgb), 0.35); } .w3eden .btn-warning { color: #fff; background-color: var(--color-warning); border-color: var(--color-warning); } .w3eden .btn-warning:hover { color: #fff; background-color: var(--color-warning-hover); border-color: var(--color-warning-hover); } .w3eden .btn-warning:focus { box-shadow: 0 0 0 3px rgba(var(--color-warning-rgb), 0.35); } .w3eden .btn-danger { color: #fff; background-color: var(--color-danger); border-color: var(--color-danger); } .w3eden .btn-danger:hover { color: #fff; background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); } .w3eden .btn-danger:focus { box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), 0.35); } .w3eden .btn-light { color: var(--text-primary); background-color: var(--color-light); border-color: var(--border-color); } .w3eden .btn-light:hover { color: var(--text-primary); background-color: var(--color-light-hover); border-color: var(--border-color); } .w3eden .btn-dark { color: #fff; background-color: var(--color-dark); border-color: var(--color-dark); } .w3eden .btn-dark:hover { color: #fff; background-color: var(--color-dark-hover); border-color: var(--color-dark-hover); } /* Outline buttons */ .w3eden .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); background-color: transparent; } .w3eden .btn-outline-primary:hover { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); } .w3eden .btn-outline-secondary { color: var(--clr-sec); border-color: var(--clr-sec); background-color: transparent; } .w3eden .btn-outline-secondary:hover { color: #fff; background-color: var(--clr-sec); border-color: var(--clr-sec); } .w3eden .btn-outline-success { color: var(--color-success); border-color: var(--color-success); background-color: transparent; } .w3eden .btn-outline-success:hover { color: #fff; background-color: var(--color-success); border-color: var(--color-success); } .w3eden .btn-outline-danger { color: var(--color-danger); border-color: var(--color-danger); background-color: transparent; } .w3eden .btn-outline-danger:hover { color: #fff; background-color: var(--color-danger); border-color: var(--color-danger); } /* Link button */ .w3eden .btn-link { font-weight: 400; color: var(--color-primary); text-decoration: none; background-color: transparent; border-color: transparent; } .w3eden .btn-link:hover { color: var(--color-primary-hover); text-decoration: underline; } /* Button sizes */ .w3eden .btn-xs { padding: 0.125rem 0.5rem; min-height: 24px; font-size: 0.75rem; border-radius: var(--radius-sm); } .w3eden .btn-sm { padding: 0.25rem 0.75rem; min-height: 32px; font-size: 0.8125rem; border-radius: var(--radius-sm); } .w3eden .btn-lg { padding: 0.625rem 1.5rem; min-height: 48px; font-size: 1rem; border-radius: var(--radius-lg); } /* Block button */ .w3eden .btn-block { display: flex; width: 100%; } /* Button group */ .w3eden .btn-group { position: relative; display: inline-flex; vertical-align: middle; } .w3eden .btn-group > .btn { position: relative; flex: 1 1 auto; } .w3eden .btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .w3eden .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Loading state */ .w3eden .btn-loading { pointer-events: none; position: relative; color: transparent !important; } .w3eden .btn-loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: wpdm-spinner 0.6s linear infinite; } @keyframes wpdm-spinner { to { transform: rotate(360deg); } } /* Spin animation for icons */ .w3eden .btn.wpdm-spin { animation: wpdm-spin 2s infinite linear; } @keyframes wpdm-spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* ========================================================================== 7. Cards ========================================================================== */ .w3eden .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--bg-body); background-clip: border-box; border: 1px solid var(--border-color); border-radius: var(--radius-lg); } .w3eden .card > hr { margin-right: 0; margin-left: 0; } .w3eden .card-body { flex: 1 1 auto; padding: 1.25rem; } .w3eden .card-title { margin-bottom: 0.75rem; font-weight: 600; } .w3eden .card-subtitle { margin-top: -0.375rem; margin-bottom: 0; color: var(--text-muted); } .w3eden .card-text:last-child { margin-bottom: 0; } .w3eden .card-link + .card-link { margin-left: 1rem; } .w3eden .card-header { padding: 1rem 1.25rem; margin-bottom: 0; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .w3eden .card-header:first-child { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; } .w3eden .card-footer { padding: 1rem 1.25rem; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); } .w3eden .card-footer:last-child { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); } /* Card image */ .w3eden .card-img, .w3eden .card-img-top, .w3eden .card-img-bottom { width: 100%; } .w3eden .card-img, .w3eden .card-img-top { border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); } .w3eden .card-img, .w3eden .card-img-bottom { border-bottom-right-radius: calc(var(--radius-lg) - 1px); border-bottom-left-radius: calc(var(--radius-lg) - 1px); } /* Card overlay */ .w3eden .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; border-radius: calc(var(--radius-lg) - 1px); } /* Card groups */ .w3eden .card-group { display: flex; flex-flow: row wrap; } .w3eden .card-group > .card { flex: 1 0 0%; margin-bottom: 0; } .w3eden .card-group > .card + .card { margin-left: 0; border-left: 0; } .w3eden .card-group > .card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .w3eden .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ========================================================================== 8. List Groups ========================================================================== */ .w3eden .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: var(--radius); } .w3eden .list-group-item { position: relative; display: block; padding: 0.75rem 1rem; color: var(--text-primary); text-decoration: none; background-color: var(--bg-body); border: 1px solid var(--border-color); margin: 0px !important; } .w3eden .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .w3eden .list-group-item:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .w3eden .list-group-item + .list-group-item { border-top-width: 0; } .w3eden .list-group-item.disabled, .w3eden .list-group-item:disabled { color: var(--text-muted); pointer-events: none; background-color: var(--bg-body); } .w3eden .list-group-item.active { z-index: 2; color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); } /* Interactive list group */ .w3eden a.list-group-item, .w3eden button.list-group-item { width: 100%; text-align: inherit; } .w3eden a.list-group-item:hover, .w3eden a.list-group-item:focus, .w3eden button.list-group-item:hover, .w3eden button.list-group-item:focus { z-index: 1; color: var(--text-primary); text-decoration: none; background-color: var(--bg-secondary); } /* Flush list group */ .w3eden .list-group-flush { border-radius: 0; } .w3eden .list-group-flush > .list-group-item { border-width: 0 0 1px; } .w3eden .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } /* Horizontal list group */ .w3eden .list-group-horizontal { flex-direction: row; } .w3eden .list-group-horizontal > .list-group-item:first-child { border-bottom-left-radius: var(--radius); border-top-right-radius: 0; } .w3eden .list-group-horizontal > .list-group-item:last-child { border-top-right-radius: var(--radius); border-bottom-left-radius: 0; } .w3eden .list-group-horizontal > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } /* Numbered list group */ .w3eden .list-group-numbered { list-style-type: none; counter-reset: section; } .w3eden .list-group-numbered > .list-group-item::before { content: counters(section, ".") ". "; counter-increment: section; } /* Color variants */ .w3eden .list-group-item-primary { color: #3730a3; background-color: var(--color-primary-light); } .w3eden .list-group-item-success { color: #065f46; background-color: var(--color-success-light); } .w3eden .list-group-item-info { color: #0369a1; background-color: var(--color-info-light); } .w3eden .list-group-item-warning { color: #92400e; background-color: var(--color-warning-light); } .w3eden .list-group-item-danger { color: #991b1b; background-color: var(--color-danger-light); } /* ========================================================================== 9. Alerts & Badges ========================================================================== */ /* Alerts */ .w3eden .alert { position: relative; padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: var(--radius); } .w3eden .alert-heading { color: inherit; font-weight: 600; } .w3eden .alert-link { font-weight: 600; } .w3eden .alert-dismissible { padding-right: 3rem; } .w3eden .alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; } .w3eden .alert-primary { color: #3730a3; background-color: var(--color-primary-light); border-color: #c7d2fe; } .w3eden .alert-secondary { color: var(--clr-sec); background-color: var(--clr-sec-light); border-color: #e2e8f0; } .w3eden .alert-success { color: #065f46; background-color: var(--color-success-light); border-color: #a7f3d0; } .w3eden .alert-info { color: #0369a1; background-color: var(--color-info-light); border-color: #bae6fd; } .w3eden .alert-warning { color: #92400e; background-color: var(--color-warning-light); border-color: #fde68a; } .w3eden .alert-danger { color: #991b1b; background-color: var(--color-danger-light); border-color: #fecaca; } /* Badges */ .w3eden .badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 600; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--radius-sm); } .w3eden .badge:empty { display: none; } .w3eden .badge-primary, .w3eden .bg-primary { background-color: var(--color-primary) !important; } .w3eden .badge-secondary, .w3eden .bg-secondary { background-color: var(--clr-sec) !important; } .w3eden .badge-success, .w3eden .bg-success { background-color: var(--color-success) !important; } .w3eden .badge-info, .w3eden .bg-info { background-color: var(--color-info) !important; } .w3eden .badge-warning, .w3eden .bg-warning { background-color: var(--color-warning) !important; } .w3eden .badge-danger, .w3eden .bg-danger { background-color: var(--color-danger) !important; } .w3eden .badge-light, .w3eden .bg-light { background-color: var(--color-light) !important; color: var(--text-primary); } .w3eden .badge-dark, .w3eden .bg-dark { background-color: var(--color-dark) !important; } .w3eden .rounded-pill { border-radius: var(--radius-full) !important; } .w3eden .well { padding: 20px; border-radius: var(--radius); background-color: rgba(var(--clr-sec-rgb), .06); margin-bottom: 20px; } /* ========================================================================== 10. Media Objects ========================================================================== */ .w3eden .media { display: flex; align-items: flex-start; gap: 1rem; } .w3eden .media-body { flex: 1; min-width: 0; } .w3eden .media-left { flex-shrink: 0; } .w3eden .media-right { flex-shrink: 0; order: 1; } .w3eden .media-stacked { flex-direction: column; align-items: stretch; } .w3eden .media-stacked .media-left, .w3eden .media-stacked .media-right { order: 0; margin-bottom: 1rem; } .w3eden .media-list { padding-left: 0; list-style: none; } .w3eden .media-list .media { margin-bottom: 1rem; } .w3eden .media-list .media:last-child { margin-bottom: 0; } .w3eden .media img { border-radius: var(--radius); } .w3eden .media-center { align-items: center; } .w3eden .media-bottom { align-items: flex-end; } /* Two-column media grid */ .w3eden .media-grid { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .w3eden .media-grid--right { grid-template-columns: 1fr auto; } .w3eden .media-grid--right .media-image { order: 1; } .w3eden .media-grid .media-image img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); } .w3eden .media-grid .media-content { min-width: 0; } /* ========================================================================== 11. Modals ========================================================================== */ .w3eden .modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .w3eden .modal.show { display: block; } .w3eden .modal-dialog { position: relative; width: auto; margin: 1.75rem auto; pointer-events: none; max-width: 500px; } .w3eden .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translateY(-50px); } .w3eden .modal.show .modal-dialog { transform: none; } .w3eden .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); } .w3eden .modal-dialog-scrollable { height: calc(100% - 3.5rem); } .w3eden .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .w3eden .modal-dialog-scrollable .modal-body { overflow-y: auto; } .w3eden .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: var(--bg-body); background-clip: padding-box; border: 1px solid var(--border-color); border-radius: var(--radius-lg); outline: 0; box-shadow: var(--shadow-lg); } .w3eden .wpdm-modal-close{ border: none; background: none; padding: 6px; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; } .w3eden .wpdm-modal-close:hover{ background: rgba(var(--color-danger-rgb), 0.1); } .w3eden .wpdm-modal-close svg{ width: 16px; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); } .w3eden .modal-backdrop.fade { opacity: 0; } .w3eden .modal-backdrop.show { opacity: 1; } .w3eden .modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); } .w3eden .modal-title { margin-bottom: 0; line-height: 1.5; font-weight: 600; font-size: 1.125rem; } .w3eden .modal-body { position: relative; flex: 1 1 auto; padding: 1.5rem; } .w3eden .modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); border-bottom-right-radius: calc(var(--radius-lg) - 1px); border-bottom-left-radius: calc(var(--radius-lg) - 1px); gap: 0.5rem; } /* Close button */ .w3eden .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: var(--text-primary); background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: 0.5; cursor: pointer; transition: opacity var(--transition); } .w3eden .btn-close:hover { opacity: 1; } /* Modal sizes */ .w3eden .modal-sm { max-width: 300px; } .w3eden .modal-lg { max-width: 800px; } .w3eden .modal-xl { max-width: 1140px; } .w3eden .modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; } .w3eden .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } /* ========================================================================== 12. Pagination ========================================================================== */ .w3eden .pagination { display: flex; padding-left: 0; list-style: none; gap: 0.25rem; } .w3eden .page-link { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.875rem; color: var(--text-primary); text-decoration: none; background-color: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius); transition: color var(--transition), background-color var(--transition), border-color var(--transition); min-width: 38px; } .w3eden .page-link:hover { z-index: 2; color: var(--color-primary); background-color: var(--bg-secondary); border-color: var(--border-color); } .w3eden .page-link:focus { z-index: 3; color: var(--color-primary); background-color: var(--bg-secondary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } .w3eden .page-item.active .page-link { z-index: 3; color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); } .w3eden .page-item.disabled .page-link { color: var(--text-muted); pointer-events: none; background-color: var(--bg-body); border-color: var(--border-color); } /* Pagination sizes */ .w3eden .pagination-sm .page-link { padding: 0.375rem 0.625rem; font-size: 0.8125rem; min-width: 32px; } .w3eden .pagination-lg .page-link { padding: 0.625rem 1rem; font-size: 1.0625rem; min-width: 44px; } /* WPDM Pagination (page-numbers style) */ .w3eden .wpdm-pagination { justify-content: center; flex-wrap: wrap; } .w3eden .pagination-centered { justify-content: center; } .w3eden .pagination li { list-style: none; } .w3eden .pagination .page-numbers { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.875rem; min-width: 38px; min-height: 38px; color: var(--text-primary); text-decoration: none; background-color: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius); transition: color var(--transition), background-color var(--transition), border-color var(--transition); font-size: 0.9375rem; font-weight: 500; } .w3eden .pagination .page-numbers:hover { color: var(--color-primary); background-color: var(--bg-secondary); border-color: var(--border-color); text-decoration: none; } .w3eden .pagination .page-numbers.current, .w3eden .pagination .page-numbers.current-page { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); } .w3eden .pagination .page-numbers.dots { border: none; background: transparent; color: var(--text-muted); pointer-events: none; } .w3eden .pagination .page-numbers.prev, .w3eden .pagination .page-numbers.next { padding: 0.5rem; } /* ========================================================================== 13. Tables ========================================================================== */ .w3eden .table { width: 100%; margin-bottom: 1rem; color: var(--text-primary); vertical-align: top; border-color: var(--border-color); } .w3eden .table > :not(caption) > * > * { padding: 0.75rem; background-color: var(--bg-body); border-bottom-width: 1px; box-shadow: inset 0 0 0 9999px transparent; } .w3eden .table > tbody { vertical-align: inherit; } .w3eden .table > thead { vertical-align: bottom; } .w3eden .table > thead > * > * { font-weight: 600; background-color: var(--bg-secondary); } /* Bordered table */ .w3eden .table-bordered { border: 1px solid var(--border-color); } .w3eden .table-bordered > :not(caption) > * { border-width: 1px 0; } .w3eden .table-bordered > :not(caption) > * > * { border-width: 0 1px; } /* Borderless table */ .w3eden .table-borderless > :not(caption) > * > * { border-bottom-width: 0; } .w3eden .table-borderless > :not(:first-child) { border-top-width: 0; } /* Striped table */ .w3eden .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(0, 0, 0, 0.02); } /* Hover table */ .w3eden .table-hover > tbody > tr:hover > * { background-color: var(--bg-secondary); } /* Small table */ .w3eden .table-sm > :not(caption) > * > * { padding: 0.5rem; } /* Responsive table */ .w3eden .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== 14. Progress Bars ========================================================================== */ .w3eden .progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: var(--bg-tertiary); border-radius: var(--radius-full); } .w3eden .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; background-color: var(--color-primary); transition: width 0.6s ease; } .w3eden .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .w3eden .progress-bar-animated { animation: progress-bar-stripes 1s linear infinite; } @keyframes progress-bar-stripes { 0% { background-position-x: 1rem; } } .w3eden .progress-sm { height: 0.5rem; } .w3eden .progress-lg { height: 1.5rem; } /* ========================================================================== 15. Navigation & Tabs ========================================================================== */ .w3eden .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .w3eden .nav-link { display: block; padding: 0.5rem 1rem; color: var(--text-secondary); text-decoration: none; transition: color var(--transition), background-color var(--transition), border-color var(--transition); } .w3eden .nav-link:hover, .w3eden .nav-link:focus { color: var(--color-primary); } .w3eden .nav-link.disabled { color: var(--text-muted); pointer-events: none; cursor: default; } /* Tabs */ .w3eden .nav-tabs { border-bottom: 1px solid var(--border-color); } .w3eden .nav-tabs .nav-link { margin-bottom: -1px; background: none; border: 1px solid transparent; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .w3eden .nav-tabs .nav-link:hover, .w3eden .nav-tabs .nav-link:focus { border-color: var(--bg-tertiary) var(--bg-tertiary) var(--border-color); isolation: isolate; } .w3eden .nav-tabs .nav-link.active, .w3eden .nav-tabs .nav-item.show .nav-link { color: var(--text-primary); background-color: var(--bg-body); border-color: var(--border-color) var(--border-color) var(--bg-body); } /* Pills */ .w3eden .nav-pills .nav-link { background: none; border: 0; border-radius: var(--radius); } .w3eden .nav-pills .nav-link.active, .w3eden .nav-pills .show > .nav-link { color: #fff; background-color: var(--color-primary); } /* Fill and justify */ .w3eden .nav-fill > .nav-link, .w3eden .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .w3eden .nav-justified > .nav-link, .w3eden .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } /* Tab content */ .w3eden .tab-content > .tab-pane { display: none; } .w3eden .tab-content > .active { display: block; } /* ========================================================================== 16. Utilities ========================================================================== */ /* Display */ .w3eden .d-none { display: none !important; } .w3eden .d-inline { display: inline !important; } .w3eden .d-inline-block { display: inline-block !important; } .w3eden .d-block { display: block !important; } .w3eden .d-flex { display: flex !important; } .w3eden .d-inline-flex { display: inline-flex !important; } .w3eden .d-grid { display: grid !important; } /* Flexbox */ .w3eden .flex-row { flex-direction: row !important; } .w3eden .flex-column { flex-direction: column !important; } .w3eden .flex-row-reverse { flex-direction: row-reverse !important; } .w3eden .flex-column-reverse { flex-direction: column-reverse !important; } .w3eden .flex-wrap { flex-wrap: wrap !important; } .w3eden .flex-nowrap { flex-wrap: nowrap !important; } .w3eden .flex-grow-0 { flex-grow: 0 !important; } .w3eden .flex-grow-1 { flex-grow: 1 !important; } .w3eden .flex-shrink-0 { flex-shrink: 0 !important; } .w3eden .flex-shrink-1 { flex-shrink: 1 !important; } /* Justify content */ .w3eden .justify-content-start { justify-content: flex-start !important; } .w3eden .justify-content-end { justify-content: flex-end !important; } .w3eden .justify-content-center { justify-content: center !important; } .w3eden .justify-content-between { justify-content: space-between !important; } .w3eden .justify-content-around { justify-content: space-around !important; } .w3eden .justify-content-evenly { justify-content: space-evenly !important; } /* Align items */ .w3eden .align-items-start { align-items: flex-start !important; } .w3eden .align-items-end { align-items: flex-end !important; } .w3eden .align-items-center { align-items: center !important; } .w3eden .align-items-baseline { align-items: baseline !important; } .w3eden .align-items-stretch { align-items: stretch !important; } /* Align self */ .w3eden .align-self-auto { align-self: auto !important; } .w3eden .align-self-start { align-self: flex-start !important; } .w3eden .align-self-end { align-self: flex-end !important; } .w3eden .align-self-center { align-self: center !important; } .w3eden .align-self-baseline { align-self: baseline !important; } .w3eden .align-self-stretch { align-self: stretch !important; } /* Gap */ .w3eden .gap-0 { gap: 0 !important; } .w3eden .gap-1 { gap: 0.25rem !important; } .w3eden .gap-2 { gap: 0.5rem !important; } .w3eden .gap-3 { gap: 1rem !important; } .w3eden .gap-4 { gap: 1.5rem !important; } .w3eden .gap-5 { gap: 3rem !important; } /* Margin */ .w3eden .m-0 { margin: 0 !important; } .w3eden .m-1 { margin: 0.25rem !important; } .w3eden .m-2 { margin: 0.5rem !important; } .w3eden .m-3 { margin: 1rem !important; } .w3eden .m-4 { margin: 1.5rem !important; } .w3eden .m-5 { margin: 3rem !important; } .w3eden .m-auto { margin: auto !important; } .w3eden .mt-0 { margin-top: 0 !important; } .w3eden .mt-1 { margin-top: 0.25rem !important; } .w3eden .mt-2 { margin-top: 0.5rem !important; } .w3eden .mt-3 { margin-top: 1rem !important; } .w3eden .mt-4 { margin-top: 1.5rem !important; } .w3eden .mt-5 { margin-top: 3rem !important; } .w3eden .mt-auto { margin-top: auto !important; } .w3eden .mb-0 { margin-bottom: 0 !important; } .w3eden .mb-1 { margin-bottom: 0.25rem !important; } .w3eden .mb-2 { margin-bottom: 0.5rem !important; } .w3eden .mb-3 { margin-bottom: 1rem !important; } .w3eden .mb-4 { margin-bottom: 1.5rem !important; } .w3eden .mb-5 { margin-bottom: 3rem !important; } .w3eden .mb-auto { margin-bottom: auto !important; } .w3eden .ms-0 { margin-left: 0 !important; } .w3eden .ms-1 { margin-left: 0.25rem !important; } .w3eden .ms-2 { margin-left: 0.5rem !important; } .w3eden .ms-3 { margin-left: 1rem !important; } .w3eden .ms-4 { margin-left: 1.5rem !important; } .w3eden .ms-5 { margin-left: 3rem !important; } .w3eden .ms-auto { margin-left: auto !important; } .w3eden .me-0 { margin-right: 0 !important; } .w3eden .me-1 { margin-right: 0.25rem !important; } .w3eden .me-2 { margin-right: 0.5rem !important; } .w3eden .me-3 { margin-right: 1rem !important; } .w3eden .me-4 { margin-right: 1.5rem !important; } .w3eden .me-5 { margin-right: 3rem !important; } .w3eden .me-auto { margin-right: auto !important; } .w3eden .mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .w3eden .mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .w3eden .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .w3eden .mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .w3eden .mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .w3eden .mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .w3eden .mx-auto { margin-right: auto !important; margin-left: auto !important; } .w3eden .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .w3eden .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .w3eden .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .w3eden .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .w3eden .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .w3eden .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .w3eden .my-auto { margin-top: auto !important; margin-bottom: auto !important; } /* Padding */ .w3eden .p-0 { padding: 0 !important; } .w3eden .p-1 { padding: 0.25rem !important; } .w3eden .p-2 { padding: 0.5rem !important; } .w3eden .p-3 { padding: 1rem !important; } .w3eden .p-4 { padding: 1.5rem !important; } .w3eden .p-5 { padding: 3rem !important; } .w3eden .pt-0 { padding-top: 0 !important; } .w3eden .pt-1 { padding-top: 0.25rem !important; } .w3eden .pt-2 { padding-top: 0.5rem !important; } .w3eden .pt-3 { padding-top: 1rem !important; } .w3eden .pt-4 { padding-top: 1.5rem !important; } .w3eden .pt-5 { padding-top: 3rem !important; } .w3eden .pb-0 { padding-bottom: 0 !important; } .w3eden .pb-1 { padding-bottom: 0.25rem !important; } .w3eden .pb-2 { padding-bottom: 0.5rem !important; } .w3eden .pb-3 { padding-bottom: 1rem !important; } .w3eden .pb-4 { padding-bottom: 1.5rem !important; } .w3eden .pb-5 { padding-bottom: 3rem !important; } .w3eden .ps-0 { padding-left: 0 !important; } .w3eden .ps-1 { padding-left: 0.25rem !important; } .w3eden .ps-2 { padding-left: 0.5rem !important; } .w3eden .ps-3 { padding-left: 1rem !important; } .w3eden .ps-4 { padding-left: 1.5rem !important; } .w3eden .ps-5 { padding-left: 3rem !important; } .w3eden .pe-0 { padding-right: 0 !important; } .w3eden .pe-1 { padding-right: 0.25rem !important; } .w3eden .pe-2 { padding-right: 0.5rem !important; } .w3eden .pe-3 { padding-right: 1rem !important; } .w3eden .pe-4 { padding-right: 1.5rem !important; } .w3eden .pe-5 { padding-right: 3rem !important; } .w3eden .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .w3eden .px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .w3eden .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .w3eden .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .w3eden .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .w3eden .px-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .w3eden .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .w3eden .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .w3eden .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .w3eden .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .w3eden .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .w3eden .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* Width & Height */ .w3eden .w-25 { width: 25% !important; } .w3eden .w-50 { width: 50% !important; } .w3eden .w-75 { width: 75% !important; } .w3eden .w-100 { width: 100% !important; } .w3eden .w-auto { width: auto !important; } .w3eden .h-25 { height: 25% !important; } .w3eden .h-50 { height: 50% !important; } .w3eden .h-75 { height: 75% !important; } .w3eden .h-100 { height: 100% !important; } .w3eden .h-auto { height: auto !important; } /* Text alignment */ .w3eden .text-start { text-align: left !important; } .w3eden .text-end { text-align: right !important; } .w3eden .text-center { text-align: center !important; } /* Text transform */ .w3eden .text-lowercase { text-transform: lowercase !important; } .w3eden .text-uppercase { text-transform: uppercase !important; } .w3eden .text-capitalize { text-transform: capitalize !important; } /* Font weight */ .w3eden .fw-light { font-weight: 300 !important; } .w3eden .fw-normal { font-weight: 400 !important; } .w3eden .fw-medium { font-weight: 500 !important; } .w3eden .fw-semibold { font-weight: 600 !important; } .w3eden .fw-bold { font-weight: 700 !important; } /* Font style */ .w3eden .fst-italic { font-style: italic !important; } .w3eden .fst-normal { font-style: normal !important; } /* Text colors */ .w3eden .text-primary { color: var(--color-primary) !important; } .w3eden .text-secondary { color: var(--clr-sec) !important; } .w3eden .text-success { color: var(--color-success) !important; } .w3eden .text-info { color: var(--color-info) !important; } .w3eden .text-warning { color: var(--color-warning) !important; } .w3eden .text-danger { color: var(--color-danger) !important; } .w3eden .text-muted { color: var(--text-muted) !important; } .w3eden .text-white { color: #fff !important; } .w3eden .text-dark { color: var(--color-dark) !important; } /* Background colors */ .w3eden .bg-white { background-color: #fff !important; } .w3eden .bg-transparent { background-color: transparent !important; } /* Borders */ .w3eden .border { border: 1px solid var(--border-color) !important; } .w3eden .border-0 { border: 0 !important; } .w3eden .border-top { border-top: 1px solid var(--border-color) !important; } .w3eden .border-top-0 { border-top: 0 !important; } .w3eden .border-end { border-right: 1px solid var(--border-color) !important; } .w3eden .border-end-0 { border-right: 0 !important; } .w3eden .border-bottom { border-bottom: 1px solid var(--border-color) !important; } .w3eden .border-bottom-0 { border-bottom: 0 !important; } .w3eden .border-start { border-left: 1px solid var(--border-color) !important; } .w3eden .border-start-0 { border-left: 0 !important; } /* Border radius */ .w3eden .rounded { border-radius: var(--radius) !important; } .w3eden .rounded-0 { border-radius: 0 !important; } .w3eden .rounded-1 { border-radius: var(--radius-sm) !important; } .w3eden .rounded-2 { border-radius: var(--radius) !important; } .w3eden .rounded-3 { border-radius: var(--radius-lg) !important; } .w3eden .rounded-circle { border-radius: 50% !important; } /* Shadow */ .w3eden .shadow-none { box-shadow: none !important; } .w3eden .shadow-sm { box-shadow: var(--shadow-sm) !important; } .w3eden .shadow { box-shadow: var(--shadow) !important; } .w3eden .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* Position */ .w3eden .position-static { position: static !important; } .w3eden .position-relative { position: relative !important; } .w3eden .position-absolute { position: absolute !important; } .w3eden .position-fixed { position: fixed !important; } .w3eden .position-sticky { position: sticky !important; } /* Visibility */ .w3eden .visible { visibility: visible !important; } .w3eden .invisible { visibility: hidden !important; } /* Overflow */ .w3eden .overflow-auto { overflow: auto !important; } .w3eden .overflow-hidden { overflow: hidden !important; } .w3eden .overflow-visible { overflow: visible !important; } .w3eden .overflow-scroll { overflow: scroll !important; } /* Clearfix */ .w3eden .clearfix::after { display: block; clear: both; content: ""; } /* Float (legacy) */ .w3eden .pull-left, .w3eden .float-start { float: left !important; } .w3eden .pull-right, .w3eden .float-end { float: right !important; } .w3eden .float-none { float: none !important; } /* ========================================================================== 17. WPDM Specific Components ========================================================================== */ /* Package info list */ .w3eden .wpdm-package-info { list-style: none; padding: 0; margin: 0; } .w3eden .wpdm-package-info li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); } .w3eden .wpdm-package-info li:last-child { border-bottom: none; } .w3eden .wpdm-package-info li strong { color: var(--text-secondary); min-width: 100px; } /* Social lock buttons */ .w3eden .wpdm-social-lock { margin: 0 3px; text-transform: none; } .w3eden .wpdm-social-lock .fa { margin-right: 5px; } .w3eden .wpdm-social-lock.btn { border-radius: var(--radius-sm); margin-bottom: 5px; } /* Social platform colors */ .w3eden .btn-facebook { background-color: #1877f2; border-color: #1877f2; color: #fff; } .w3eden .btn-facebook:hover { background-color: #166fe5; border-color: #166fe5; color: #fff; } .w3eden .btn-twitter { background-color: #1da1f2; border-color: #1da1f2; color: #fff; } .w3eden .btn-twitter:hover { background-color: #0c85d0; border-color: #0c85d0; color: #fff; } .w3eden .btn-linkedin { background-color: #0a66c2; border-color: #0a66c2; color: #fff; } .w3eden .btn-linkedin:hover { background-color: #004182; border-color: #004182; color: #fff; } /* Changelog styles */ .w3eden .wpdm-changelog { --wpdm-cl-primary: var(--color-primary); --wpdm-cl-bg: var(--bg-body); --wpdm-cl-border: var(--border-color); --wpdm-cl-text: var(--text-primary); --wpdm-cl-muted: var(--text-muted); position: relative; padding-left: 24px; } .w3eden .wpdm-changelog__timeline { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--wpdm-cl-border); } .w3eden .wpdm-changelog__entry { position: relative; margin-bottom: 16px; } .w3eden .wpdm-changelog__entry:last-child { margin-bottom: 0; } .w3eden .wpdm-changelog__dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; background: var(--wpdm-cl-bg); border: 2px solid var(--wpdm-cl-border); border-radius: 50%; z-index: 1; } .w3eden .wpdm-changelog__entry--latest .wpdm-changelog__dot { background: var(--color-success); border-color: var(--color-success); animation: wpdm-changelog-pulse 2s infinite; } @keyframes wpdm-changelog-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } } .w3eden .wpdm-changelog__header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; background: var(--bg-secondary); border-radius: var(--radius); transition: background-color var(--transition); } .w3eden .wpdm-changelog__header:hover { background: var(--bg-tertiary); } .w3eden .wpdm-changelog__version { font-weight: 600; color: var(--wpdm-cl-text); } .w3eden .wpdm-changelog__date { font-size: 0.8125rem; color: var(--wpdm-cl-muted); } .w3eden .wpdm-changelog__badge { font-size: 0.6875rem; padding: 2px 6px; background: var(--color-success-light); color: #065f46; border-radius: var(--radius-full); font-weight: 600; text-transform: uppercase; } .w3eden .wpdm-changelog__toggle { margin-left: auto; width: 20px; height: 20px; color: var(--wpdm-cl-muted); transition: transform var(--transition); } .w3eden .wpdm-changelog__entry.is-expanded .wpdm-changelog__toggle { transform: rotate(180deg); } .w3eden .wpdm-changelog__content { display: none; padding: 12px 16px; margin-top: 8px; background: var(--wpdm-cl-bg); border: 1px solid var(--wpdm-cl-border); border-radius: var(--radius); } .w3eden .wpdm-changelog__entry.is-expanded .wpdm-changelog__content { display: block; } .w3eden .wpdm-changelog__content ul { margin: 0; padding-left: 20px; } .w3eden .wpdm-changelog__content li { margin-bottom: 4px; } .w3eden .wpdm-changelog__content li:last-child { margin-bottom: 0; } /* Filter toolbar */ .w3eden .wpdm-filter-toolbar { margin-bottom: 1.5rem; } .w3eden .wpdm-filter-toolbar .card-header { display: flex; align-items: center; gap: 1rem; } .w3eden .wpdm-filter-toolbar__icon { flex-shrink: 0; } .w3eden .wpdm-filter-toolbar__icon img { display: block; border-radius: var(--radius); } .w3eden .wpdm-filter-toolbar__title { margin: 0; font-size: 1.125rem; font-weight: 600; } .w3eden .wpdm-filter-toolbar__desc { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.875rem; } .w3eden .wpdm-filter-toolbar__search { position: relative; } .w3eden .wpdm-filter-toolbar__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .w3eden .wpdm-filter-toolbar__search input { padding-left: 40px; } /* File List Component */ .w3eden .wpdm-filelist-container { margin: 1rem 0; } .w3eden .wpdm-filelist-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 1rem; } .w3eden .wpdm-filelist-toolbar__left { display: flex; align-items: center; gap: 0.5rem; } .w3eden .wpdm-filelist-toolbar__right { display: flex; align-items: center; gap: 0.75rem; } .w3eden .wpdm-filelist-count { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; } .w3eden .wpdm-filelist-search { position: relative; display: flex; align-items: center; } .w3eden .wpdm-filelist-search__icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; } .w3eden .wpdm-filelist-search__input { padding: 0.5rem 0.75rem 0.5rem 2.25rem; font-size: 0.875rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-body); color: var(--text-primary); width: 180px; transition: border-color var(--transition), box-shadow var(--transition), width var(--transition); } .w3eden .wpdm-filelist-search__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); width: 220px; } .w3eden .wpdm-filelist-search__input::placeholder { color: var(--text-muted); } .w3eden .wpdm-filelist-toggle { display: flex; gap: 2px; background: var(--bg-tertiary); padding: 3px; border-radius: var(--radius); } .w3eden .wpdm-filelist-toggle__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--text-muted); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: all var(--transition); } .w3eden .wpdm-filelist-toggle__btn:hover { color: var(--text-primary); background: var(--bg-body); } .w3eden .wpdm-filelist-toggle__btn.active { color: var(--color-primary); background: var(--bg-body); box-shadow: var(--shadow-sm); } /* File List Grid */ .w3eden .wpdm-filelist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .w3eden .wpdm-filelist-grid--list { grid-template-columns: 1fr; } .w3eden .wpdm-filelist-grid--list .wpdm-filelist-item { flex-direction: row; align-items: center; text-align: left; padding: 0.75rem 1rem; max-width: none; } .w3eden .wpdm-filelist-grid--list .wpdm-filelist-item__icon, .w3eden .wpdm-filelist-grid--list .wpdm-filelist-item__thumb { width: 40px; height: 40px; flex-shrink: 0; } .w3eden .wpdm-filelist-grid--list .wpdm-filelist-item__info { flex: 1; min-width: 0; } .w3eden .wpdm-filelist-grid--list .wpdm-filelist-item__meta { justify-content: flex-start; } .w3eden .wpdm-filelist-grid--list .wpdm-filelist-item__actions { flex-shrink: 0; } /* File List Item - Grid Card */ .w3eden .wpdm-filelist-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 1.25rem 1rem; width: 100%; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .w3eden .wpdm-filelist-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .w3eden .wpdm-filelist-item__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--bg-secondary); border-radius: var(--radius-lg); color: var(--text-muted); } .w3eden .wpdm-filelist-item__icon svg { width: 28px; height: 28px; } .w3eden .wpdm-filelist-item__icon--pdf { color: #dc2626; background: #fef2f2; } .w3eden .wpdm-filelist-item__icon--doc { color: #2563eb; background: #eff6ff; } .w3eden .wpdm-filelist-item__icon--xls { color: #16a34a; background: #f0fdf4; } .w3eden .wpdm-filelist-item__icon--ppt { color: #ea580c; background: #fff7ed; } .w3eden .wpdm-filelist-item__icon--zip { color: #7c3aed; background: #f5f3ff; } .w3eden .wpdm-filelist-item__icon--image { color: #0891b2; background: #ecfeff; } .w3eden .wpdm-filelist-item__icon--video { color: #db2777; background: #fdf2f8; } .w3eden .wpdm-filelist-item__icon--audio { color: #9333ea; background: #faf5ff; } .w3eden .wpdm-filelist-item__thumb { width: 48px; height: 48px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .w3eden .wpdm-filelist-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .w3eden .wpdm-filelist-item__info { flex: 1; min-width: 0; width: 100%; overflow: hidden; } .w3eden .wpdm-filelist-item__title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .w3eden .wpdm-filelist-item__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); } .w3eden .wpdm-filelist-item__meta span { display: inline-flex; align-items: center; gap: 0.25rem; } .w3eden .wpdm-filelist-item__meta span:not(:last-child)::after { content: '\00B7'; margin-left: 0.5rem; color: var(--border-color); } .w3eden .wpdm-filelist-item__version { font-weight: 500; color: var(--color-primary); } .w3eden .wpdm-filelist-item__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .w3eden .wpdm-filelist-item__actions .btn { flex-shrink: 0; } .w3eden .wpdm-filelist-item__custom-actions { display: flex; align-items: center; gap: 0.5rem; } /* File list hidden state for search */ .w3eden .wpdm-filelist-item.wpdm-filelist-hidden { display: none; } /* File list no results message */ .w3eden .wpdm-filelist-no-results { grid-column: 1 / -1; padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* Responsive: Tablet */ @media (max-width: 768px) { .w3eden .wpdm-filelist-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } /* Responsive: Mobile */ @media (max-width: 575px) { .w3eden .wpdm-filelist-toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; } .w3eden .wpdm-filelist-toolbar__left, .w3eden .wpdm-filelist-toolbar__right { justify-content: space-between; } .w3eden .wpdm-filelist-search__input { width: 100%; } .w3eden .wpdm-filelist-search__input:focus { width: 100%; } .w3eden .wpdm-filelist-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .w3eden .wpdm-filelist-item { max-width: none; padding: 1rem 0.75rem; } .w3eden .wpdm-filelist-item__icon { width: 48px; height: 48px; } .w3eden .wpdm-filelist-item__icon svg { width: 24px; height: 24px; } .w3eden .wpdm-filelist-item__title { font-size: 0.8125rem; } .w3eden .wpdm-filelist-item__meta { font-size: 0.75rem; } .w3eden .wpdm-filelist-item__actions .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px; } } /* Responsive: Small Mobile */ @media (max-width: 400px) { .w3eden .wpdm-filelist-grid { grid-template-columns: 1fr; } .w3eden .wpdm-filelist-item { flex-direction: row; text-align: left; align-items: center; max-width: none; } .w3eden .wpdm-filelist-item__icon, .w3eden .wpdm-filelist-item__thumb { width: 40px; height: 40px; flex-shrink: 0; } .w3eden .wpdm-filelist-item__info { flex: 1; min-width: 0; } } /* Block UI */ svg#wpdm-loading path, svg#wpdm-loading rect { fill: #ff6700 !important; } .w3eden .blockui { position: relative; } .w3eden .blockui:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background: rgba(255, 255, 255, 0.8) url("../images/loader.svg") center center no-repeat; background-size: 64px; transition: ease-in-out 400ms; } /* Block UI Ends */