You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
650 lines
14 KiB
650 lines
14 KiB
/* Custom CSS for Plutus - God of Wealth Theme */
|
|
|
|
/* Plutus-inspired theme colors extracted from the god image */
|
|
:root {
|
|
--plutus-gold: #d4af37;
|
|
--plutus-rich-gold: #b8860b;
|
|
--plutus-amber: #ffbf00;
|
|
--plutus-bronze: #cd7f32;
|
|
--plutus-dark-bronze: #8b4513;
|
|
--plutus-charcoal: #2c2c2c;
|
|
--plutus-deep-navy: #1a1a2e;
|
|
--plutus-warm-white: #faf8f0;
|
|
--plutus-cream: #f5e6d3;
|
|
--plutus-success: #228b22;
|
|
--plutus-warning: #ff8c00;
|
|
--plutus-danger: #dc143c;
|
|
}
|
|
|
|
/* Custom navbar styling with Plutus theme */
|
|
.navbar.is-dark {
|
|
background: linear-gradient(135deg, var(--plutus-deep-navy) 0%, var(--plutus-charcoal) 100%);
|
|
border-bottom: 2px solid var(--plutus-gold);
|
|
box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
.navbar-brand .navbar-item {
|
|
font-weight: 700;
|
|
font-size: 1.2rem;
|
|
color: var(--plutus-gold) !important;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.navbar-item {
|
|
color: var(--plutus-warm-white) !important;
|
|
transition: color 0.3s ease, background-color 0.3s ease;
|
|
}
|
|
|
|
.navbar-item:hover {
|
|
color: var(--plutus-amber) !important;
|
|
background-color: rgba(212, 175, 55, 0.1) !important;
|
|
}
|
|
|
|
.navbar-link {
|
|
color: var(--plutus-warm-white) !important;
|
|
}
|
|
|
|
.navbar-link:hover {
|
|
color: var(--plutus-amber) !important;
|
|
background-color: rgba(212, 175, 55, 0.1) !important;
|
|
}
|
|
|
|
/* Navbar dropdown styling */
|
|
.navbar-dropdown {
|
|
background-color: var(--plutus-deep-navy) !important;
|
|
border-color: var(--plutus-gold) !important;
|
|
box-shadow: 0 8px 16px rgba(212, 175, 55, 0.2) !important;
|
|
}
|
|
|
|
.navbar-dropdown .navbar-item {
|
|
color: var(--plutus-warm-white) !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.navbar-dropdown .navbar-item:hover {
|
|
color: var(--plutus-amber) !important;
|
|
background-color: rgba(212, 175, 55, 0.1) !important;
|
|
}
|
|
|
|
/* Hero section customization */
|
|
.hero.is-primary {
|
|
background: linear-gradient(135deg, var(--plutus-gold) 0%, var(--plutus-amber) 100%);
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
/* Content boxes with Plutus theme */
|
|
.box {
|
|
background-color: rgba(250, 248, 240, 0.95);
|
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
|
box-shadow: 0 0.5em 1em -0.125em rgba(212, 175, 55, 0.2), 0 0px 0 1px rgba(212, 175, 55, 0.1);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.box:hover {
|
|
box-shadow: 0 0.5em 1.5em -0.125em rgba(212, 175, 55, 0.3), 0 0px 0 1px rgba(212, 175, 55, 0.2);
|
|
border-color: rgba(212, 175, 55, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Button styling with Plutus theme */
|
|
.button.is-primary {
|
|
background-color: var(--plutus-gold);
|
|
border-color: var(--plutus-rich-gold);
|
|
color: var(--plutus-charcoal);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.button.is-primary:hover {
|
|
background-color: var(--plutus-amber);
|
|
border-color: var(--plutus-gold);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-1px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Table enhancements with Plutus theme */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
|
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
.table {
|
|
background-color: rgba(250, 248, 240, 0.95);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.table th {
|
|
background-color: var(--plutus-gold);
|
|
color: var(--plutus-charcoal);
|
|
font-weight: 700;
|
|
border-color: var(--plutus-rich-gold);
|
|
}
|
|
|
|
.table td {
|
|
border-color: rgba(212, 175, 55, 0.2);
|
|
}
|
|
|
|
.table tr:hover {
|
|
background-color: rgba(212, 175, 55, 0.1);
|
|
}
|
|
|
|
/* Footer styling */
|
|
.footer {
|
|
background: linear-gradient(135deg, var(--plutus-deep-navy) 0%, var(--plutus-charcoal) 100%);
|
|
color: var(--plutus-warm-white);
|
|
padding: 2rem 1.5rem;
|
|
margin-top: 2rem;
|
|
border-top: 2px solid var(--plutus-gold);
|
|
}
|
|
|
|
/* Notification improvements with theme */
|
|
.notification {
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
.notification.is-success {
|
|
background-color: rgba(34, 139, 34, 0.9);
|
|
color: var(--plutus-warm-white);
|
|
}
|
|
|
|
.notification.is-danger {
|
|
background-color: rgba(220, 20, 60, 0.9);
|
|
color: var(--plutus-warm-white);
|
|
}
|
|
|
|
.notification.is-info {
|
|
background-color: rgba(212, 175, 55, 0.9);
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
/* Form styling with Plutus theme */
|
|
.field .control .input:focus,
|
|
.field .control .textarea:focus {
|
|
border-color: var(--plutus-gold);
|
|
box-shadow: 0 0 0 0.125em rgba(212, 175, 55, 0.25);
|
|
}
|
|
|
|
.field .control .input,
|
|
.field .control .textarea,
|
|
.field .control .select select {
|
|
background-color: rgba(250, 248, 240, 0.95);
|
|
border-color: rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
/* Tags with Plutus theme */
|
|
.tag.is-success {
|
|
background-color: var(--plutus-success);
|
|
color: var(--plutus-warm-white);
|
|
}
|
|
|
|
.tag.is-warning {
|
|
background-color: var(--plutus-warning);
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
.tag.is-danger {
|
|
background-color: var(--plutus-danger);
|
|
color: var(--plutus-warm-white);
|
|
}
|
|
|
|
.tag.is-info {
|
|
background-color: var(--plutus-gold);
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
/* Plutus Background Implementation */
|
|
body {
|
|
background-image: url('../images/plutus3.JPG');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
}
|
|
|
|
/* Dark overlay for better content readability */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(26, 26, 46, 0.85) 0%,
|
|
rgba(44, 44, 44, 0.75) 50%,
|
|
rgba(26, 26, 46, 0.85) 100%
|
|
);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Content area styling for better readability over background */
|
|
main.section {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1488px !important; /* 20% wider than Bulma's default 1240px */
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Title styling with Plutus theme */
|
|
.title {
|
|
color: var(--plutus-gold);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
/* Breadcrumb styling */
|
|
.breadcrumb {
|
|
background-color: rgba(250, 248, 240, 0.9);
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
|
padding: 0.75rem 1rem;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: var(--plutus-bronze);
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
color: var(--plutus-gold);
|
|
}
|
|
|
|
.breadcrumb .is-active a {
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
/* Level component styling */
|
|
.level {
|
|
background-color: rgba(250, 248, 240, 0.85);
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* Modal styling with Plutus theme */
|
|
.modal-card-head {
|
|
background-color: var(--plutus-gold);
|
|
color: var(--plutus-charcoal);
|
|
}
|
|
|
|
.modal-card-body {
|
|
background-color: var(--plutus-warm-white);
|
|
}
|
|
|
|
.modal-card-foot {
|
|
background-color: var(--plutus-cream);
|
|
}
|
|
|
|
/* Code blocks styling */
|
|
pre {
|
|
background-color: var(--plutus-charcoal) !important;
|
|
color: var(--plutus-cream) !important;
|
|
border: 1px solid var(--plutus-gold);
|
|
}
|
|
|
|
code {
|
|
background-color: rgba(44, 44, 44, 0.9) !important;
|
|
color: var(--plutus-amber) !important;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Dashboard-specific styling - remove background image */
|
|
.dashboard-page body {
|
|
background-image: none !important;
|
|
background-color: var(--plutus-warm-white);
|
|
}
|
|
|
|
.dashboard-page body::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Plutus image styling for dashboard */
|
|
.plutus-image {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 1000px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4);
|
|
border: 3px solid var(--plutus-gold);
|
|
margin: 2rem auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Payment Status Colors */
|
|
:root {
|
|
--status-success: #90ee90; /* Light green for Success */
|
|
--status-pending: #f5deb3; /* Light mustard for Pending */
|
|
--status-refund: #dda0dd; /* Light purple for Refund */
|
|
--status-failed: #ffcccb; /* Light red for Failed */
|
|
}
|
|
|
|
/* Payment Status Badges */
|
|
.status-badge {
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.status-badge.success {
|
|
background-color: var(--status-success);
|
|
color: #2d5016;
|
|
border-color: #7ab317;
|
|
}
|
|
|
|
.status-badge.pending {
|
|
background-color: var(--status-pending);
|
|
color: #8b4513;
|
|
border-color: #daa520;
|
|
}
|
|
|
|
.status-badge.refund {
|
|
background-color: var(--status-refund);
|
|
color: #4b0082;
|
|
border-color: #9370db;
|
|
}
|
|
|
|
.status-badge.failed {
|
|
background-color: var(--status-failed);
|
|
color: #8b0000;
|
|
border-color: #dc143c;
|
|
}
|
|
|
|
/* Status Icons */
|
|
.status-badge i.fas {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Hover effects for clickable status badges */
|
|
.status-badge.clickable {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.status-badge.clickable:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Error Alert Styling */
|
|
.error-alert {
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
border: 1px solid;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.error-alert-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.error-alert-header .icon {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.error-alert-body {
|
|
margin-left: 1.5rem;
|
|
}
|
|
|
|
.error-message {
|
|
margin-bottom: 0.25rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.error-suggestion {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.8rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.error-details {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.error-details summary {
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.error-details pre {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.7rem;
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Error Type Specific Styling */
|
|
.error-alert.insufficient-funds {
|
|
background-color: #ffe4e1;
|
|
color: #8b0000;
|
|
border-color: #dc143c;
|
|
}
|
|
|
|
.error-alert.insufficient-funds .icon {
|
|
color: #dc143c;
|
|
}
|
|
|
|
.error-alert.incorrect-card {
|
|
background-color: #fff8dc;
|
|
color: #8b4513;
|
|
border-color: #daa520;
|
|
}
|
|
|
|
.error-alert.incorrect-card .icon {
|
|
color: #daa520;
|
|
}
|
|
|
|
.error-alert.general-decline {
|
|
background-color: #ffebcd;
|
|
color: #a0522d;
|
|
border-color: #cd853f;
|
|
}
|
|
|
|
.error-alert.general-decline .icon {
|
|
color: #cd853f;
|
|
}
|
|
|
|
.error-alert.bank-contact {
|
|
background-color: #e6e6fa;
|
|
color: #4b0082;
|
|
border-color: #9370db;
|
|
}
|
|
|
|
.error-alert.bank-contact .icon {
|
|
color: #9370db;
|
|
}
|
|
|
|
.error-alert.processing-error {
|
|
background-color: #e0f6ff;
|
|
color: #006b96;
|
|
border-color: #0088cc;
|
|
}
|
|
|
|
.error-alert.processing-error .icon {
|
|
color: #0088cc;
|
|
}
|
|
|
|
.error-alert.network-error {
|
|
background-color: #f0f0f0;
|
|
color: #555;
|
|
border-color: #999;
|
|
}
|
|
|
|
.error-alert.network-error .icon {
|
|
color: #999;
|
|
}
|
|
|
|
/* Compact Error Alert for Table Rows */
|
|
.error-alert-compact {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
border: 1px solid;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.error-alert-compact .icon {
|
|
margin-right: 0.25rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.error-alert-compact.insufficient-funds {
|
|
background-color: #ffe4e1;
|
|
color: #8b0000;
|
|
border-color: #dc143c;
|
|
}
|
|
|
|
.error-alert-compact.incorrect-card {
|
|
background-color: #fff8dc;
|
|
color: #8b4513;
|
|
border-color: #daa520;
|
|
}
|
|
|
|
.error-alert-compact.general-decline {
|
|
background-color: #ffebcd;
|
|
color: #a0522d;
|
|
border-color: #cd853f;
|
|
}
|
|
|
|
.error-alert-compact.bank-contact {
|
|
background-color: #e6e6fa;
|
|
color: #4b0082;
|
|
border-color: #9370db;
|
|
}
|
|
|
|
.error-alert-compact.processing-error {
|
|
background-color: #e0f6ff;
|
|
color: #006b96;
|
|
border-color: #0088cc;
|
|
}
|
|
|
|
.error-alert-compact.network-error {
|
|
background-color: #f0f0f0;
|
|
color: #555;
|
|
border-color: #999;
|
|
}
|
|
|
|
/* Payment Method Management Styles */
|
|
.payment-method-card {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.payment-method-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.payment-method-selected {
|
|
border-color: var(--plutus-blue) !important;
|
|
background-color: rgba(50, 115, 220, 0.1) !important;
|
|
}
|
|
|
|
.stripe-elements-container {
|
|
border: 1px solid #dbdbdb;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
background-color: white;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.payment-method-type-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.setup-progress {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.setup-step {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.setup-step-number {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: #dbdbdb;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.setup-step.is-active .setup-step-number {
|
|
background-color: var(--plutus-gold);
|
|
}
|
|
|
|
.setup-step.is-completed .setup-step-number {
|
|
background-color: var(--plutus-success);
|
|
}
|
|
|
|
.payment-method-summary {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-left: 4px solid var(--plutus-gold);
|
|
}
|
|
|
|
/* Success animations */
|
|
.success-checkmark {
|
|
animation: checkmark 0.6s ease-in-out;
|
|
}
|
|
|
|
@keyframes checkmark {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
50% { transform: scale(1.2); opacity: 1; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* Responsive improvements */
|
|
@media (max-width: 768px) {
|
|
.payment-type-selection .column {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.setup-progress {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|