File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/..//tmpr/../tmpr/..//wowZ/css/saas-ui.css
/* SaaS UI Styles - Inspired by beautiful/context-menu.css */
:root {
--saas-radius: 8px;
--saas-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
--saas-border: #e0e0e0;
--saas-bg-hover: #f5f5f5;
--saas-primary: #333;
--saas-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--saas-input-bg: #fff;
--saas-text: #333;
--saas-label: #555;
--saas-transition: all 0.2s ease;
}
/* Base Font Override for UI Elements */
.brand-icon-panel-content,
.brand-sub-settings,
.brand-tab,
.brand-control-label,
.brand-btn,
.brand-form-field,
.TheBrandButton {
font-family: var(--saas-font) !important;
}
/* --- Form Fields (Inputs, Textareas, Selects) --- */
.brand-form-field,
.rounded-textarea,
input[type="text"],
input[type="number"],
textarea,
select,
.select2-container--default .select2-selection--single {
border-radius: var(--saas-radius) !important;
border: 1px solid var(--saas-border) !important;
padding: 10px 12px !important;
font-size: 14px !important;
background: var(--saas-input-bg) !important;
color: var(--saas-text) !important;
box-shadow: none !important;
transition: var(--saas-transition) !important;
min-height: 40px; /* Ensure touch target size */
}
/* Fix for Select2 if used */
.select2-container--default .select2-selection--single {
height: auto !important;
display: flex !important;
align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Focus State */
.brand-form-field:focus,
input[type="text"]:focus,
textarea:focus,
.brand-form-field:active,
input[type="text"]:active {
border-color: var(--saas-primary) !important;
box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1) !important;
outline: none !important;
}
/* --- Labels --- */
.brand-control-label, label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--saas-label) !important;
margin-bottom: 6px !important;
display: block !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* --- Buttons --- */
.brand-btn, .TheBrandButton {
border-radius: var(--saas-radius) !important;
font-weight: 600 !important;
transition: var(--saas-transition) !important;
cursor: pointer !important;
border: 1px solid transparent !important;
padding: 8px 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
}
/* Primary Button */
.brand-btn.primary, .brand-btn-primary {
background: var(--saas-primary) !important;
color: white !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.brand-btn.primary:hover, .brand-btn-primary:hover {
background: #000 !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.brand-btn.primary:active, .brand-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}
/* Secondary / Default Button */
.brand-btn:not(.primary):not(.brand-btn-primary),
.TheBrandButton {
background: white !important;
border: 1px solid var(--saas-border) !important;
color: var(--saas-text) !important;
}
.brand-btn:not(.primary):not(.brand-btn-primary):hover,
.TheBrandButton:hover {
background: var(--saas-bg-hover) !important;
border-color: #d0d0d0 !important;
}
/* Icon Only Buttons */
.TheBrandButton.TheBrandButtonIconOnly {
padding: 8px !important;
width: 36px !important;
height: 36px !important;
}
/* --- Tabs --- */
.brand-tabs-menu {
border-bottom: 1px solid var(--saas-border) !important;
margin-bottom: 16px !important;
}
.brand-tabs-menu li, .brand-tab-item {
font-weight: 500 !important;
color: #777 !important;
border-bottom: 2px solid transparent !important;
padding: 8px 16px !important;
cursor: pointer !important;
transition: var(--saas-transition) !important;
}
.brand-tabs-menu li.active, .brand-tab-item.active {
color: var(--saas-primary) !important;
border-bottom-color: var(--saas-primary) !important;
}
.brand-tabs-menu li:hover:not(.active), .brand-tab-item:hover:not(.active) {
color: #333 !important;
background: var(--saas-bg-hover) !important;
border-radius: var(--saas-radius) var(--saas-radius) 0 0 !important;
}
/* --- Sidebar Containers --- */
.brand-icon-panel-content, .brand-sub-settings {
padding: 16px !important;
background: #fff; /* Ensure clean background */
}
/* Dividers */
.brand-divider {
height: 1px;
background: var(--saas-border);
margin: 16px 0;
}
/* Scrollbars - Clean & Minimal */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #bbb;
}
/* Material Icons Alignment */
.material-icons {
font-size: 20px !important;
vertical-align: middle;
}
.brand-btn .material-icons {
margin-right: 6px;
font-size: 18px !important;
}
.TheBrandButtonIconOnly .material-icons {
margin-right: 0;
}
/* Select2 Dropdown */
.select2-dropdown {
border-radius: var(--saas-radius) !important;
border: 1px solid var(--saas-border) !important;
box-shadow: var(--saas-shadow) !important;
}
.select2-results__option--highlighted[aria-selected] {
background-color: var(--saas-bg-hover) !important;
color: var(--saas-text) !important;
}
.select2-results__option[aria-selected=true] {
background-color: #e0e0e0 !important;
}
/* Spectrum Color Picker */
.sp-replacer {
border-radius: var(--saas-radius) !important;
border: 1px solid var(--saas-border) !important;
background: #fff !important;
padding: 4px !important;
}
.sp-replacer:hover {
border-color: #d0d0d0 !important;
background: var(--saas-bg-hover) !important;
}
.sp-preview {
border: 1px solid #eee !important;
border-radius: 4px !important;
}
.sp-dd {
display: none; /* Hide the little arrow if preferred, or style it */
}