1875 lines
36 KiB
CSS
1875 lines
36 KiB
CSS
/**
|
|
* Hi-School Slide Manager Dashboard Styles
|
|
*
|
|
* Full-width Divi-compatible styles for the slide management dashboard
|
|
*
|
|
* @package Hi_School_Slide_Manager
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ==========================================
|
|
Full-Width Layout Override
|
|
========================================== */
|
|
|
|
#main-content .container-fluid {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#content-area.full-width {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ==========================================
|
|
Custom Header Bar
|
|
========================================== */
|
|
|
|
.hssm-header-bar {
|
|
background: #ff0000;;
|
|
color: #fff;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.hssm-header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 40px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hssm-logo-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.hssm-site-title {
|
|
margin: 0;
|
|
font-size: 1.8em;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.hssm-icon {
|
|
font-size: 1.2em;
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
|
|
}
|
|
|
|
.hssm-site-subtitle {
|
|
font-size: 0.9em;
|
|
color: #bdc3c7;
|
|
font-weight: 300;
|
|
margin-left: 44px;
|
|
}
|
|
|
|
.hssm-header-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hssm-nav-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.hssm-nav-btn:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.hssm-nav-home {
|
|
background: rgb(255, 255, 255, 0.3);
|
|
border-color: rgb(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.hssm-nav-admin {
|
|
background: rgb(255, 255, 255, 0.3);
|
|
border-color: rgb(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.hssm-nav-preview {
|
|
background: rgb(255, 255, 255, 0.3);
|
|
border-color: rgb(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.hssm-nav-logout {
|
|
background: rgb(255, 255, 255, 0.3);
|
|
border-color: rgb(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.hssm-user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-left: 20px;
|
|
padding-left: 20px;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.hssm-user-name {
|
|
font-size: 14px;
|
|
color: #ecf0f1;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ==========================================
|
|
Dashboard Main Content
|
|
========================================== */
|
|
|
|
.hssm-dashboard-main {
|
|
padding: 30px 40px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
min-height: calc(100vh - 120px);
|
|
}
|
|
|
|
/* ==========================================
|
|
Enhanced Navigation Tabs
|
|
========================================== */
|
|
|
|
.hssm-dashboard-nav {
|
|
margin-bottom: 30px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-nav-tabs {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.hssm-nav-tabs li {
|
|
flex: 1;
|
|
}
|
|
|
|
.hssm-nav-tabs a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 18px 20px;
|
|
background: transparent;
|
|
color: #6c757d;
|
|
text-decoration: none;
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hssm-nav-tabs li.active a,
|
|
.hssm-nav-tabs a:hover {
|
|
background: #fff;
|
|
color: #2c3e50;
|
|
border-bottom-color: #3498db;
|
|
}
|
|
|
|
.hssm-nav-tabs li.active a {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ==========================================
|
|
Tab Content Enhancement
|
|
========================================== */
|
|
|
|
.hssm-tab-content {
|
|
display: none;
|
|
background: #fff;
|
|
padding: 0;
|
|
border-radius: 8px;
|
|
min-height: 600px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.hssm-tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.hssm-tab-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 25px 30px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
background: #f8f9fa;
|
|
margin: 0;
|
|
}
|
|
|
|
.hssm-tab-header h2 {
|
|
margin: 0;
|
|
color: #2c3e50;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hssm-tab-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ==========================================
|
|
Messages
|
|
========================================== */
|
|
|
|
.hssm-messages {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hssm-message {
|
|
padding: 12px 16px;
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
border-left: 4px solid;
|
|
background: #fff;
|
|
}
|
|
|
|
.hssm-message.success {
|
|
border-left-color: #4caf50;
|
|
background-color: #f1f8e9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.hssm-message.error {
|
|
border-left-color: #f44336;
|
|
background-color: #ffebee;
|
|
color: #c62828;
|
|
}
|
|
|
|
.hssm-message.warning {
|
|
border-left-color: #ff9800;
|
|
background-color: #fff3e0;
|
|
color: #ef6c00;
|
|
}
|
|
|
|
.hssm-message.info {
|
|
border-left-color: #2196f3;
|
|
background-color: #e3f2fd;
|
|
color: #1565c0;
|
|
}
|
|
|
|
/* ==========================================
|
|
Form Styling
|
|
========================================== */
|
|
|
|
.hssm-tab-content input[type=text], .hssm-tab-content input[type=text]:focus, .hssm-textarea, .hssm-textarea:focus {
|
|
color:#212529 !important;
|
|
}
|
|
|
|
.hssm-slide-form {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hssm-form-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #6c757d;
|
|
color: #fff;
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.hssm-form-header h3 {
|
|
font-family: Open Sans,Arial,sans-serif;
|
|
color: #fff;
|
|
margin: 0;
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hssm-remove-form {
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.hssm-remove-form:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.hssm-form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.hssm-form-section {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.hssm-form-section h4 {
|
|
margin: 0 0 20px 0;
|
|
color: #275191;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #ffffff;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.hssm-buttons-section {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* ==========================================
|
|
Form Fields
|
|
========================================== */
|
|
|
|
.hssm-field {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hssm-field-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hssm-field label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
color: #275191;
|
|
}
|
|
|
|
.hssm-input,
|
|
.hssm-textarea,
|
|
.hssm-select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background-color: #ffffff;
|
|
color: #275191;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.hssm-input:focus,
|
|
.hssm-textarea:focus,
|
|
.hssm-select:focus {
|
|
outline: none;
|
|
border-color: #ffffff;
|
|
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25);
|
|
}
|
|
|
|
.hssm-textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
/* ==========================================
|
|
Checkboxes and Radio Buttons
|
|
========================================== */
|
|
|
|
.hssm-checkboxes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hssm-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: normal !important;
|
|
margin-bottom: 0 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hssm-checkbox input[type="checkbox"] {
|
|
width: auto !important;
|
|
margin-right: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.hssm-radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.hssm-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: normal !important;
|
|
margin-bottom: 0 !important;
|
|
cursor: pointer;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.hssm-radio:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.hssm-radio input[type="radio"] {
|
|
width: auto !important;
|
|
margin-right: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.hssm-help-text {
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ==========================================
|
|
Image Upload
|
|
========================================== */
|
|
|
|
.hssm-image-upload {
|
|
text-align: center;
|
|
}
|
|
|
|
.hssm-image-preview {
|
|
width: 100%;
|
|
height: 200px;
|
|
border: 2px dashed #ced4da;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
transition: border-color 0.3s ease;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.hssm-image-preview:hover {
|
|
border-color: #ffffff;
|
|
}
|
|
|
|
.hssm-image-preview.has-image {
|
|
border-style: solid;
|
|
}
|
|
|
|
.hssm-placeholder {
|
|
color: #6c757d;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hssm-image-preview.has-image .hssm-placeholder {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================
|
|
Enhanced Buttons
|
|
========================================== */
|
|
|
|
.hssm-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
background-color: #f8f9fa;
|
|
color: #275191;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-btn:hover {
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.hssm-btn-primary {
|
|
background: linear-gradient(135deg, #3498db 0%, #275191 100%);
|
|
color: #fff;
|
|
border-color: #275191;
|
|
}
|
|
|
|
.hssm-btn-primary:hover {
|
|
background: linear-gradient(135deg, #3498db 0%, #21618c 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.hssm-btn-success {
|
|
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
|
|
color: #fff;
|
|
border-color: #229954;
|
|
}
|
|
|
|
.hssm-btn-success:hover {
|
|
background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.hssm-btn-secondary {
|
|
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
|
|
color: #fff;
|
|
border-color: #7f8c8d;
|
|
}
|
|
|
|
.hssm-btn-secondary:hover {
|
|
background: linear-gradient(135deg, #7f8c8d 0%, #6c757d 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.hssm-btn-outline {
|
|
background: transparent;
|
|
color: #6c757d;
|
|
border: 2px solid #dee2e6;
|
|
}
|
|
|
|
.hssm-btn-outline:hover {
|
|
background: #f8f9fa;
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.hssm-btn-small {
|
|
padding: 8px 14px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hssm-btn-large {
|
|
padding: 16px 32px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ==========================================
|
|
Analytics Cards
|
|
========================================== */
|
|
|
|
.hssm-analytics-content {
|
|
padding: 30px;
|
|
}
|
|
|
|
.hssm-analytics-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hssm-analytics-card {
|
|
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
|
|
padding: 25px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
text-align: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.hssm-analytics-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-analytics-card h3 {
|
|
margin: 0 0 15px 0;
|
|
color: #6c757d;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.hssm-analytics-number {
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ==========================================
|
|
Form Enhancements - Compact Layout
|
|
========================================== */
|
|
|
|
.hssm-slide-form {
|
|
background: #fff;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
margin-bottom: 25px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.hssm-slide-form:hover {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-form-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #ff0000;
|
|
color: #fff;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.hssm-form-header h3 {
|
|
margin: 0;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hssm-remove-form {
|
|
background: rgba(231, 76, 60, 0.2);
|
|
border: 1px solid rgba(231, 76, 60, 0.3);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.hssm-remove-form:hover {
|
|
background: rgba(231, 76, 60, 0.4);
|
|
border-color: rgba(231, 76, 60, 0.5);
|
|
}
|
|
|
|
.hssm-form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hssm-form-section {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.hssm-form-section h4 {
|
|
margin: 0 0 15px 0;
|
|
color: #275191;
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #3498db;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
/* Compact field layouts */
|
|
.hssm-field {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.hssm-field-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.hssm-field label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-weight: 500;
|
|
color: #ff0000;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hssm-input,
|
|
.hssm-textarea,
|
|
.hssm-select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.hssm-textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* Compact image upload */
|
|
.hssm-image-upload-compact {
|
|
text-align: center;
|
|
}
|
|
|
|
.hssm-image-preview-small {
|
|
width: 100%;
|
|
height: 150px;
|
|
border: 2px dashed #ced4da;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
transition: border-color 0.3s ease;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.hssm-image-preview-small:hover {
|
|
border-color: #ffffff;
|
|
}
|
|
|
|
.hssm-image-preview-small.has-image {
|
|
border-style: solid;
|
|
}
|
|
|
|
.hssm-image-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* Compact checkboxes */
|
|
.hssm-checkboxes-compact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hssm-checkbox-compact {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: normal !important;
|
|
margin-bottom: 0 !important;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hssm-checkbox-compact input[type="checkbox"] {
|
|
width: auto !important;
|
|
margin-right: 6px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Compact button management */
|
|
.hssm-buttons-container-compact {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.hssm-button-row-compact {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr auto;
|
|
gap: 5px;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
padding: 8px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.hssm-input-small {
|
|
padding: 6px 8px !important;
|
|
font-size: 12px !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.hssm-btn-tiny {
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
min-width: auto;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Enhanced form actions */
|
|
.hssm-form-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
padding: 15px 20px;
|
|
background: #f1f3f4;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.hssm-schedule-slide {
|
|
background: linear-gradient(135deg, #3498db 0%, #275191 100%);
|
|
color: #fff;
|
|
border-color: #275191;
|
|
}
|
|
|
|
.hssm-schedule-slide:hover {
|
|
background: linear-gradient(135deg, #275191 0%, #3498db 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.hssm-publish-slide {
|
|
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
|
|
color: #fff;
|
|
border-color: #229954;
|
|
}
|
|
|
|
.hssm-publish-slide:hover {
|
|
background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Loading states for compact forms */
|
|
.hssm-slide-form.hssm-loading {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
position: relative;
|
|
}
|
|
|
|
.hssm-slide-form.hssm-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: -10px 0 0 -10px;
|
|
border: 2px solid #3498db;
|
|
border-radius: 50%;
|
|
border-top-color: transparent;
|
|
animation: spin 1s linear infinite;
|
|
z-index: 9999;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Image upload states */
|
|
.hssm-image-preview-small.has-image span {
|
|
display: none;
|
|
}
|
|
|
|
.hssm-image-preview-small:not(.has-image) {
|
|
color: #6c757d;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Form transitions */
|
|
.hssm-slide-form {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hssm-slide-form:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ==========================================
|
|
Responsive Design
|
|
========================================== */
|
|
|
|
@media (max-width: 1200px) {
|
|
.hssm-form-grid {
|
|
grid-template-columns: 1fr 250px;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.hssm-form-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hssm-image-upload-compact {
|
|
max-width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hssm-form-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hssm-form-actions .hssm-btn {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.hssm-form-actions .hssm-btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hssm-field-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hssm-button-row-compact {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hssm-image-preview-small {
|
|
height: 100px;
|
|
}
|
|
|
|
.hssm-form-section {
|
|
padding: 12px;
|
|
}
|
|
|
|
.hssm-form-header {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.hssm-form-header h3 {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Filters Enhancement
|
|
========================================== */
|
|
|
|
.hssm-filters {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hssm-filters .hssm-select {
|
|
width: auto;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.hssm-preview-controls,
|
|
.hssm-analytics-controls {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ==========================================
|
|
Bulk Actions Enhancement
|
|
========================================== */
|
|
|
|
.hssm-bulk-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
padding: 25px;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
/* ==========================================
|
|
Button Management
|
|
========================================== */
|
|
|
|
.hssm-button-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.hssm-button-text,
|
|
.hssm-button-url {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.hssm-remove-button {
|
|
background-color: #dc3545;
|
|
color: #fff;
|
|
border-color: #dc3545;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hssm-remove-button:hover {
|
|
background-color: #c82333;
|
|
border-color: #c82333;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ==========================================
|
|
Form Actions
|
|
========================================== */
|
|
|
|
.hssm-form-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
padding: 20px 30px;
|
|
background: #f1f3f4;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.hssm-bulk-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
padding: 30px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
/* ==========================================
|
|
Filters
|
|
========================================== */
|
|
|
|
.hssm-filters {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hssm-filters .hssm-select {
|
|
width: auto;
|
|
min-width: 150px;
|
|
}
|
|
|
|
/* ==========================================
|
|
Slides List
|
|
========================================== */
|
|
|
|
.hssm-slides-list {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.hssm-slide-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
background: #fff;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.hssm-slide-item:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-slide-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.hssm-slide-title {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
color: #333;
|
|
}
|
|
|
|
.hssm-slide-meta {
|
|
color: #6c757d;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.hssm-slide-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ==========================================
|
|
Banner Preview
|
|
========================================== */
|
|
|
|
.hssm-banner-preview {
|
|
min-height: 300px;
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hssm-preview-controls {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hssm-preview-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ==========================================
|
|
Loading States
|
|
========================================== */
|
|
|
|
.hssm-loading {
|
|
position: relative;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hssm-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: -10px 0 0 -10px;
|
|
border: 2px solid #ffffff;
|
|
border-radius: 50%;
|
|
border-top-color: transparent;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Responsive Design
|
|
========================================== */
|
|
|
|
@media (max-width: 1200px) {
|
|
.hssm-header-content,
|
|
.hssm-dashboard-main {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hssm-header-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hssm-header-nav {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.hssm-user-menu {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
border-left: none;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
padding-top: 15px;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hssm-dashboard-main {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.hssm-status-bar {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hssm-nav-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hssm-nav-tabs li {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.hssm-nav-tabs a {
|
|
padding: 15px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hssm-tab-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hssm-tab-actions {
|
|
width: 100%;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.hssm-tab-actions .hssm-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hssm-form-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hssm-field-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hssm-button-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.hssm-filters,
|
|
.hssm-preview-controls,
|
|
.hssm-analytics-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hssm-filters .hssm-select,
|
|
.hssm-preview-controls .hssm-select,
|
|
.hssm-analytics-controls .hssm-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.hssm-bulk-actions,
|
|
.hssm-preview-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hssm-bulk-actions .hssm-btn,
|
|
.hssm-preview-actions .hssm-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hssm-slide-item {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hssm-slide-actions {
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.hssm-slide-actions .hssm-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.hssm-analytics-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hssm-site-title {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.hssm-site-subtitle {
|
|
font-size: 0.8em;
|
|
margin-left: 36px;
|
|
}
|
|
|
|
.hssm-nav-btn {
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hssm-nav-tabs a {
|
|
padding: 12px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.hssm-btn {
|
|
padding: 10px 15px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hssm-btn-large {
|
|
padding: 14px 20px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Utility Classes
|
|
========================================== */
|
|
|
|
.hssm-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.hssm-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.hssm-text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.hssm-mb-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.hssm-mt-20 {
|
|
margin-top: 20px !important;
|
|
}
|
|
|
|
.hssm-p-20 {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
/* Slides List Styles */
|
|
.hssm-slides-table {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-table-header {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr 120px 180px 150px 140px;
|
|
gap: 15px;
|
|
padding: 20px 25px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
font-weight: 600;
|
|
color: #275191;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hssm-table-body {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.hssm-slide-row {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr 120px 180px 150px 140px;
|
|
gap: 15px;
|
|
padding: 20px 25px;
|
|
border-bottom: 1px solid #f1f3f4;
|
|
align-items: center;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.hssm-slide-row:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.hssm-slide-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.hssm-slide-thumbnail {
|
|
width: 60px;
|
|
height: 40px;
|
|
background-color: #f1f3f4;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.hssm-slide-title {
|
|
font-weight: 600;
|
|
color: #212529;
|
|
margin-bottom: 4px;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hssm-slide-subtitle {
|
|
color: #6c757d;
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hssm-status-badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.hssm-status-published {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.hssm-status-draft {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.hssm-status-scheduled {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.hssm-status-private {
|
|
background: #f3e2f3;
|
|
color: #6f2c91;
|
|
}
|
|
|
|
.hssm-status-pending {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.hssm-schedule-info, .hssm-sites-info {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.hssm-slide-actions {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hssm-slide-actions .hssm-btn {
|
|
padding: 6px 8px;
|
|
min-width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hssm-slide-actions .dashicons {
|
|
font-size: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.hssm-btn-success {
|
|
background-color: #28a745;
|
|
border-color: #28a745;
|
|
color: #fff;
|
|
}
|
|
|
|
.hssm-btn-success:hover {
|
|
background-color: #218838;
|
|
border-color: #1e7e34;
|
|
}
|
|
|
|
/* Empty State */
|
|
.hssm-empty-state {
|
|
text-align: center;
|
|
padding: 60px 30px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.hssm-empty-icon {
|
|
font-size: 48px;
|
|
color: #dee2e6;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hssm-empty-state h3 {
|
|
color: #275191;
|
|
margin-bottom: 10px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hssm-empty-state p {
|
|
margin-bottom: 25px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 1200px) {
|
|
.hssm-table-header,
|
|
.hssm-slide-row {
|
|
grid-template-columns: 80px 1fr 100px 140px 120px 120px;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hssm-table-header,
|
|
.hssm-slide-row {
|
|
grid-template-columns: 60px 1fr 80px 100px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hssm-col-dates,
|
|
.hssm-col-sites {
|
|
display: none;
|
|
}
|
|
|
|
.hssm-slide-actions {
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Edit Mode Styles
|
|
========================================== */
|
|
|
|
.hssm-slide-form[data-editing-slide-id] {
|
|
border: 2px solid #ffffff;
|
|
background: linear-gradient(135deg, #f8fcff 0%, #e3f2fd 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.hssm-slide-form[data-editing-slide-id]::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(45deg, #ffffff, #0073aa);
|
|
border-radius: 10px;
|
|
z-index: -1;
|
|
animation: editPulse 2s infinite;
|
|
}
|
|
|
|
@keyframes editPulse {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.hssm-edit-badge {
|
|
background: #ffffff;
|
|
color: #ff0000;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-left: 10px;
|
|
animation: badgePulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes badgePulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
.hssm-cancel-edit {
|
|
background: #d63638;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.hssm-cancel-edit:hover {
|
|
background: #b32d2e;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.hssm-update-slide {
|
|
background: #ffffff !important;
|
|
border-color: #ffffff !important;
|
|
}
|
|
|
|
.hssm-update-slide:hover {
|
|
background: #005a87 !important;
|
|
border-color: #005a87 !important;
|
|
}
|
|
|
|
.hssm-cancel-edit-btn {
|
|
background: #6c757d !important;
|
|
border-color: #6c757d !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.hssm-cancel-edit-btn:hover {
|
|
background: #545b62 !important;
|
|
border-color: #545b62 !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
Hide All Text Option Styles
|
|
========================================== */
|
|
|
|
.hssm-hide-text-option {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 12px 15px;
|
|
display: block !important;
|
|
margin: 10px 0;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hssm-hide-text-option:hover {
|
|
background: #e9ecef;
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.hssm-hide-text-option input[type="checkbox"] {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.hssm-hide-text-option input[type="checkbox"]:checked + * {
|
|
font-weight: 500;
|
|
color: #275191;
|
|
}
|
|
|
|
.hssm-hide-text-option small {
|
|
font-style: italic;
|
|
color: #6c757d;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
Field Validation Errors with Speech Bubble
|
|
========================================== */
|
|
|
|
.hssm-field-error {
|
|
background-color: #f44336;
|
|
color: #fff;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
margin-top: 4px;
|
|
position: relative;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hssm-field-error::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 20px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 6px solid #f44336;
|
|
}
|
|
|
|
.hssm-field-has-error .hssm-input,
|
|
.hssm-field-has-error .hssm-textarea,
|
|
.hssm-field-has-error .hssm-select {
|
|
border-color: #f44336;
|
|
box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1);
|
|
}
|
|
|
|
.hssm-field-has-error.hssm-checkboxes-compact {
|
|
border: 1px solid #f44336;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
background-color: rgba(244, 67, 54, 0.05);
|
|
}
|
|
|
|
/* ==========================================
|
|
Datepicker Highlights
|
|
========================================== */
|
|
|
|
.hssm-datepicker-start a {
|
|
background: #d4edda !important;
|
|
color: #155724 !important;
|
|
border: 1px solid #c3e6cb !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.hssm-datepicker-end a {
|
|
background: #f8d7da !important;
|
|
color: #721c24 !important;
|
|
border: 1px solid #f5c6cb !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
/* Overlap handling */
|
|
.hssm-datepicker-start.hssm-datepicker-end a {
|
|
background: linear-gradient(135deg, #d4edda 50%, #f8d7da 50%) !important;
|
|
color: #333 !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
Datepicker Custom Theme (Modern Flat)
|
|
========================================== */
|
|
#ui-datepicker-div {
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
.ui-datepicker-header {
|
|
background: transparent;
|
|
border: none;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
color: #333;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-datepicker-prev, .ui-datepicker-next {
|
|
cursor: pointer;
|
|
background: #f1f3f4;
|
|
border-radius: 4px;
|
|
border: none;
|
|
top: 10px;
|
|
}
|
|
|
|
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
|
|
background: #e9ecef;
|
|
border: none;
|
|
}
|
|
|
|
.ui-datepicker-prev span, .ui-datepicker-next span {
|
|
margin-top: -8px; /* Center icon */
|
|
}
|
|
|
|
.ui-datepicker-calendar th {
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.ui-datepicker-calendar td {
|
|
padding: 2px;
|
|
}
|
|
|
|
.ui-datepicker-calendar td a,
|
|
.ui-datepicker-calendar td span {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
background: #fff;
|
|
}
|
|
|
|
.ui-datepicker-calendar td a:hover {
|
|
background: #f8f9fa;
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
/* Current Day Highlight */
|
|
.ui-datepicker-today a {
|
|
background: #f0f7ff;
|
|
color: #0073aa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Selected Date Highlight */
|
|
.ui-datepicker-current-day a {
|
|
background: #0073aa !important;
|
|
color: #fff !important;
|
|
border-color: #0073aa !important;
|
|
}
|
|
|
|
/* Custom Highlighting overrides */
|
|
.hssm-datepicker-start a {
|
|
background-color: #d4edda !important; /* Light green */
|
|
color: #155724 !important;
|
|
border-color: #c3e6cb !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hssm-datepicker-end a {
|
|
background-color: #f8d7da !important; /* Light red */
|
|
color: #721c24 !important;
|
|
border-color: #f5c6cb !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Overlap handling override */
|
|
.hssm-datepicker-start.hssm-datepicker-end a {
|
|
background: linear-gradient(135deg, #d4edda 50%, #f8d7da 50%) !important;
|
|
} |