| 1 |
/* ====================================== |
| 2 |
POWERPRESS STYLING VARIABLES |
| 3 |
====================================== |
| 4 |
|
| 5 |
Load this file BEFORE admin.css and settings.css. |
| 6 |
|
| 7 |
TABLE OF CONTENTS |
| 8 |
----------------- |
| 9 |
1. COLORS - PRIMARY |
| 10 |
2. COLORS - SEMANTIC |
| 11 |
3. COLORS - STATS WIDGET |
| 12 |
4. COLORS - NEUTRAL |
| 13 |
5. COLORS - BORDERS & BLUES |
| 14 |
6. COLORS - WP ADMIN |
| 15 |
7. TYPOGRAPHY |
| 16 |
8. SPACING |
| 17 |
9. BORDERS |
| 18 |
10. SHADOWS |
| 19 |
11. TRANSITIONS |
| 20 |
12. SKELETON |
| 21 |
13. UTILITY CLASSES |
| 22 |
|
| 23 |
====================================== */ |
| 24 |
|
| 25 |
:root { |
| 26 |
|
| 27 |
/* ===================== |
| 28 |
1. COLORS - PRIMARY |
| 29 |
===================== */ |
| 30 |
|
| 31 |
--pp-color-primary: #0B43A4; |
| 32 |
--pp-color-primary-hover: #093785; |
| 33 |
--pp-color-primary-light: #e2e8f0; |
| 34 |
--pp-color-primary-soft: #6B9AE8; |
| 35 |
--pp-color-primary-muted: #8FB3ED; |
| 36 |
--pp-color-primary-dark: #093785; |
| 37 |
--pp-color-secondary: #1976d2; |
| 38 |
--pp-color-accent: #1a6deb; |
| 39 |
--pp-color-accent-soft: #b39ddb; |
| 40 |
--pp-color-accent-light: #faf7fc; |
| 41 |
|
| 42 |
/* ====================== |
| 43 |
2. COLORS - SEMANTIC |
| 44 |
====================== */ |
| 45 |
|
| 46 |
--pp-color-success: #66BB6A; |
| 47 |
--pp-color-warning: #FFA726; |
| 48 |
--pp-color-danger: #EF5350; |
| 49 |
--pp-color-info: #42A5F5; |
| 50 |
--pp-color-highlight: #AB47BC; |
| 51 |
|
| 52 |
/* ========================== |
| 53 |
3. COLORS - STATS WIDGET |
| 54 |
========================== */ |
| 55 |
|
| 56 |
--pp-stats-today: var(--pp-color-highlight); |
| 57 |
--pp-stats-average: var(--pp-color-info); |
| 58 |
--pp-stats-total: var(--pp-color-success); |
| 59 |
|
| 60 |
/* ===================== |
| 61 |
4. COLORS - NEUTRAL |
| 62 |
===================== */ |
| 63 |
|
| 64 |
--pp-color-white: #ffffff; |
| 65 |
--pp-color-gray-50: #f8f9fa; |
| 66 |
--pp-color-gray-100: #f0f0f1; |
| 67 |
--pp-color-gray-200: #eee; |
| 68 |
--pp-color-gray-300: #ddd; |
| 69 |
--pp-color-gray-400: #ccc; |
| 70 |
--pp-color-gray-500: #999; |
| 71 |
--pp-color-gray-600: #666; |
| 72 |
--pp-color-gray-700: #555; |
| 73 |
--pp-color-gray-800: #333; |
| 74 |
--pp-color-gray-900: #1d2327; |
| 75 |
|
| 76 |
/* ============================ |
| 77 |
5. COLORS - BORDERS & BLUES |
| 78 |
============================ */ |
| 79 |
|
| 80 |
--pp-border-light: #EFF0F5; |
| 81 |
--pp-color-blue-100: #f8faff; |
| 82 |
--pp-color-blue-200: #e0edff; |
| 83 |
--pp-color-blue-300: #d0e3ff; |
| 84 |
|
| 85 |
/* ====================== |
| 86 |
6. COLORS - WP ADMIN |
| 87 |
====================== */ |
| 88 |
|
| 89 |
--pp-wp-border: #c3c4c7; |
| 90 |
--pp-wp-border-hover: #8c8f94; |
| 91 |
--pp-wp-bg-hover: #e0e0e1; |
| 92 |
--pp-wp-link: #0073aa; |
| 93 |
--pp-color-navy: #003366; |
| 94 |
|
| 95 |
/* ================ |
| 96 |
7. TYPOGRAPHY |
| 97 |
================ */ |
| 98 |
|
| 99 |
--pp-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
| 100 |
--pp-font-size-xs: 11px; |
| 101 |
--pp-font-size-sm: 12px; |
| 102 |
--pp-font-size-base: 14px; |
| 103 |
--pp-font-size-md: 16px; |
| 104 |
--pp-font-size-lg: 18px; |
| 105 |
--pp-font-size-xl: 20px; |
| 106 |
--pp-font-size-2xl: 24px; |
| 107 |
|
| 108 |
/* ============= |
| 109 |
8. SPACING |
| 110 |
============= */ |
| 111 |
|
| 112 |
--pp-spacing-xs: 4px; |
| 113 |
--pp-spacing-sm: 8px; |
| 114 |
--pp-spacing-md: 12px; |
| 115 |
--pp-spacing-lg: 16px; |
| 116 |
--pp-spacing-xl: 24px; |
| 117 |
--pp-spacing-2xl: 32px; |
| 118 |
|
| 119 |
/* ============= |
| 120 |
9. BORDERS |
| 121 |
============= */ |
| 122 |
|
| 123 |
--pp-border-radius: 4px; |
| 124 |
--pp-border-radius-md: 8px; |
| 125 |
--pp-border-radius-lg: 12px; |
| 126 |
--pp-border-radius-pill: 20px; |
| 127 |
--pp-border-color: var(--pp-color-gray-300); |
| 128 |
--pp-border: 1px solid var(--pp-border-color); |
| 129 |
|
| 130 |
/* ============= |
| 131 |
10. SHADOWS |
| 132 |
============= */ |
| 133 |
|
| 134 |
--pp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); |
| 135 |
--pp-shadow-md: 0 1px 3px rgba(0,0,0,0.1); |
| 136 |
--pp-shadow-lg: 0 4px 6px rgba(0,0,0,0.1); |
| 137 |
|
| 138 |
/* ================== |
| 139 |
11. TRANSITIONS |
| 140 |
================== */ |
| 141 |
|
| 142 |
--pp-transition-fast: 0.15s ease-in-out; |
| 143 |
--pp-transition: 0.3s ease-in-out; |
| 144 |
|
| 145 |
/* =============== |
| 146 |
12. SKELETON |
| 147 |
=============== */ |
| 148 |
|
| 149 |
--pp-skeleton-light: #f0f0f0; |
| 150 |
--pp-skeleton-mid: #e0e0e0; |
| 151 |
|
| 152 |
} |
| 153 |
|
| 154 |
|
| 155 |
/* ====================== |
| 156 |
13. UTILITY CLASSES |
| 157 |
====================== */ |
| 158 |
|
| 159 |
/* |
| 160 |
* Standard Bootstrap-style utilities. |
| 161 |
* Note: d-flex, d-none, flex-wrap, justify-content-*, align-items-* |
| 162 |
* are provided by bootstrap-grid.css - don't duplicate here. |
| 163 |
*/ |
| 164 |
|
| 165 |
/* custom flex shortcuts (keep pp- prefix for compound utilities) */ |
| 166 |
.pp-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; } |
| 167 |
.pp-flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; } |
| 168 |
.pp-flex-col { flex-direction: column !important; } |
| 169 |
.pp-flex-1 { flex: 1 !important; } |
| 170 |
.gap-sm { gap: var(--pp-spacing-sm) !important; } |
| 171 |
.gap-md { gap: var(--pp-spacing-md) !important; } |
| 172 |
.gap-lg { gap: var(--pp-spacing-lg) !important; } |
| 173 |
.h-100 { height: 100% !important; } |
| 174 |
.h-auto { height: auto !important; } |
| 175 |
.w-100 { width: 100% !important; } |
| 176 |
.w-auto { width: auto !important; } |
| 177 |
.mt-auto { margin-top: auto !important; } |
| 178 |
|
| 179 |
/* text */ |
| 180 |
.text-center { text-align: center !important; } |
| 181 |
.text-left { text-align: left !important; } |
| 182 |
.text-right { text-align: right !important; } |
| 183 |
.pp-text-primary { color: var(--pp-color-primary) !important; } |
| 184 |
.pp-text-muted { color: var(--pp-color-gray-600) !important; } |
| 185 |
|
| 186 |
/* vertical align */ |
| 187 |
.align-top { vertical-align: top !important; } |
| 188 |
|
| 189 |
/* margin - using rem values for Bootstrap compatibility */ |
| 190 |
.m-0 { margin: 0 !important; } |
| 191 |
.mt-2 { margin-top: 0.5rem !important; } |
| 192 |
.mt-3 { margin-top: 1rem !important; } |
| 193 |
.mt-4 { margin-top: 1.5rem !important; } |
| 194 |
.mr-2 { margin-right: 0.5rem !important; } |
| 195 |
.mr-4 { margin-right: 1.5rem !important; } |
| 196 |
.mb-2 { margin-bottom: 0.5rem !important; } |
| 197 |
.mb-3 { margin-bottom: 1rem !important; } |
| 198 |
.mb-4 { margin-bottom: 1.5rem !important; } |
| 199 |
.mb-5 { margin-bottom: 3rem !important; } |
| 200 |
.ml-0 { margin-left: 0 !important; } |
| 201 |
.mr-0 { margin-right: 0 !important; } |
| 202 |
|
| 203 |
/* padding */ |
| 204 |
.p-0 { padding: 0 !important; } |
| 205 |
.p-2 { padding: 0.5rem !important; } |
| 206 |
.p-3 { padding: 1rem !important; } |
| 207 |
.p-4 { padding: 1.5rem !important; } |
| 208 |
|
| 209 |
.pl-0 { padding-left: 0 !important; } |
| 210 |
.pl-2 { padding-left: 0.5rem !important; } |
| 211 |
.pl-3 { padding-left: 1rem !important; } |
| 212 |
.pl-4 { padding-left: 1.5rem !important; } |
| 213 |
|
| 214 |
.pr-0 { padding-right: 0 !important; } |
| 215 |
.pr-2 { padding-right: 0.5rem !important; } |
| 216 |
.pr-3 { padding-right: 1rem !important; } |
| 217 |
.pr-4 { padding-right: 1.5rem !important; } |
| 218 |
|
