_variables.scss
| 1 | $logo-color: var(--latepoint-admin-brand-primary, #1d7bff); |
| 2 | $brand-primary: var(--latepoint-admin-brand-primary, #1d7bff); |
| 3 | $brand-softer: var(--latepoint-admin-brand-primary, #219ff8); |
| 4 | |
| 5 | // White Label brand-color tokens. The CSS custom properties are pre-computed in PHP and |
| 6 | // emitted only when an admin sets a custom brand color; each fallback is the value for the |
| 7 | // default #1d7bff, so default installs render identically without the override. |
| 8 | $brand-primary-lighten-10: var(--latepoint-admin-brand-primary-lighten-10, #3488ff); |
| 9 | $brand-primary-lighten-12: var(--latepoint-admin-brand-primary-lighten-12, #398bff); |
| 10 | $brand-primary-lighten-15: var(--latepoint-admin-brand-primary-lighten-15, #3f8fff); |
| 11 | $brand-primary-lighten-20: var(--latepoint-admin-brand-primary-lighten-20, #4a95ff); |
| 12 | $brand-primary-lighten-30: var(--latepoint-admin-brand-primary-lighten-30, #61a3ff); |
| 13 | $brand-primary-lighten-40: var(--latepoint-admin-brand-primary-lighten-40, #77b0ff); |
| 14 | $brand-primary-darken-10: var(--latepoint-admin-brand-primary-darken-10, #1a6fe6); |
| 15 | $brand-primary-darken-15: var(--latepoint-admin-brand-primary-darken-15, #1969d9); |
| 16 | $brand-primary-alpha-05: var(--latepoint-admin-brand-primary-alpha-05, rgba(29,123,255,0.05)); |
| 17 | $brand-primary-alpha-10: var(--latepoint-admin-brand-primary-alpha-10, rgba(29,123,255,0.1)); |
| 18 | $brand-primary-alpha-15: var(--latepoint-admin-brand-primary-alpha-15, rgba(29,123,255,0.15)); |
| 19 | $brand-primary-alpha-30: var(--latepoint-admin-brand-primary-alpha-30, rgba(29,123,255,0.3)); |
| 20 | $brand-primary-alpha-40: var(--latepoint-admin-brand-primary-alpha-40, rgba(29,123,255,0.4)); |
| 21 | $brand-primary-alpha-50: var(--latepoint-admin-brand-primary-alpha-50, rgba(29,123,255,0.5)); |
| 22 | $brand-primary-alpha-60: var(--latepoint-admin-brand-primary-alpha-60, rgba(29,123,255,0.6)); |
| 23 | $brand-primary-alpha-70: var(--latepoint-admin-brand-primary-alpha-70, rgba(29,123,255,0.7)); |
| 24 | $brand-primary-alpha-80: var(--latepoint-admin-brand-primary-alpha-80, rgba(29,123,255,0.8)); |
| 25 | $brand-dark: #2D303A; |
| 26 | $body-bg: #fff; |
| 27 | $faded-bg: #f3f3f3; |
| 28 | $sidebar-bg: #fff; |
| 29 | $element-bg: #F5F6FA; |
| 30 | $color-faded: #788291; |
| 31 | $border-color-strong: #d2d4d7; |
| 32 | $border-color-main: #dcdad7; |
| 33 | $border-color-sub: #f2f3f3; |
| 34 | // FONTS & TYPOGRAPHY |
| 35 | |
| 36 | $body-font-family: "latepoint", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; |
| 37 | $headings-font-family: "latepoint", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; |
| 38 | $mono-font-family: "latepoint-mono", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; |
| 39 | |
| 40 | $images-path: '/wp-content/plugins/latepoint/public/images'; |
| 41 | $fonts-path: '/wp-content/plugins/latepoint/public/fonts'; |
| 42 | |
| 43 | // -- Sizes |
| 44 | |
| 45 | $font-size-menu-base: 17px; |
| 46 | $headings-font-size: 26px; |
| 47 | |
| 48 | // $body-color: #2D303A; |
| 49 | $body-color: #41444b; |
| 50 | $body-color-dark: #2e3036; |
| 51 | $body-color-light: #b0b0b0; |
| 52 | |
| 53 | |
| 54 | $headings-font-weight-normal: 400; |
| 55 | $headings-font-weight-bold: 400; |
| 56 | |
| 57 | $mono-font-weight-normal: 400; |
| 58 | $mono-font-weight-bold: 400; |
| 59 | $headings-color: #1f222b; |
| 60 | |
| 61 | $link-color: $brand-primary; |
| 62 | $link-color-lighten-30: $brand-primary-lighten-30; |
| 63 | $link-color-darken-15: $brand-primary-darken-15; |
| 64 | // Accents that track the brand colour but stay a shade darker than the primary buttons. |
| 65 | $calendar-day-booking-bg: var(--latepoint-admin-brand-primary-darken-15, #1449ff); |
| 66 | $menu-active-icon-color: var(--latepoint-admin-brand-primary-darken-10, #0981d6); |
| 67 | $letter-spacing: normal; |
| 68 | $content-padding: 30px; |
| 69 | |
| 70 | // CALENDAR |
| 71 | $period_height: 20px; |
| 72 | |
| 73 | // SIDE PANEL |
| 74 | $side-panel-width: 420px; |
| 75 | $side-panel-offset: 0px; |
| 76 | $side-panel-border-radius: 0px; |
| 77 | $side-panel-padding-y: 20px; |
| 78 | $side-panel-padding-x: 30px; |
| 79 | $top-bar-bg: #fff; |
| 80 | $top-bar-height: 58px; |
| 81 | |
| 82 | // SIDE MENU |
| 83 | $side-menu-width: 210px; |
| 84 | |
| 85 | // -- Light |
| 86 | $side-menu-text-color: $headings-color; |
| 87 | $side-menu-link-color: #3a424b; |
| 88 | $side-menu-icon-color: $brand-primary; |
| 89 | $side-menu-bg: $body-bg; |
| 90 | $side-menu-item-hover-bg: #edeff1; |
| 91 | $side-menu-active-item-bg: #edeff1; |
| 92 | |
| 93 | // -- Dark |
| 94 | $side-menu-dark-link-color: #9398b7; |
| 95 | $side-menu-dark-icon-color: var(--latepoint-admin-brand-primary, #3a58dc); |
| 96 | $side-menu-dark-bg: #040a27; |
| 97 | $top-bar-mobile-height: 54px; |
| 98 | $floating-sub-menu-dark-bg: $brand-primary; |
| 99 | // GLOBALS |
| 100 | |
| 101 | $widget-padding: 30px; |
| 102 | |
| 103 | $calendar-year-color: #eee; |
| 104 | |
| 105 | // -- Shadows |
| 106 | $box-shadow: 0 5px 15px -5px rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6); |
| 107 | $box-shadow-hover: 0 15px 30px 0 rgba(108, 120, 143, 0.2), 0 1px 3px 0 rgba(170, 179, 197, 0.9); |
| 108 | $box-shadow-main: 0 1px 2px rgba(0,0,0,0.2); |
| 109 | |
| 110 | // -- Border Radius |
| 111 | $border-radius-xs: 8px; |
| 112 | $border-radius-sm: 12px; |
| 113 | $border-radius: 15px; |
| 114 | $border-radius-lg: 20px; |
| 115 | |
| 116 | $border-radius-btn: 15px; |
| 117 | $border-radius-btn-lg: 20px; |
| 118 | $border-radius-btn-sm: 12px; |
| 119 | |
| 120 | $lightbox-border-radius: 20px; |
| 121 | |
| 122 | $border-color-lightest: #EEF0F1; |
| 123 | $border-color-light: #ddd; |
| 124 | |
| 125 | |
| 126 | // TABLES |
| 127 | $table-row-highlight-bg: #f3f4f7; |
| 128 | $table-row-highlight-border: $border-color-main; |
| 129 | $table-heading-border-color: $border-color-main; |
| 130 | |
| 131 | // TOOLTIPS |
| 132 | $tooltip-border-radius: $border-radius-sm; |
| 133 | |
| 134 | // FORMS |
| 135 | |
| 136 | $form-controls-border-color: #cecfd8; |
| 137 | $form-controls-background-color: #f1f3f7; |
| 138 | $form-controls-border-radius: $border-radius; |
| 139 | $form-controls-color: #32373c; |
| 140 | $form-controls-label-color: #444756; |
| 141 | $form-controls-select-height: auto; |
| 142 | $form-controls-select-height-small: auto; |
| 143 | $form-controls-placeholder-color: #a4a6a9; |
| 144 | $form-controls-font-weight: $body-font-weight-normal; |
| 145 | |
| 146 | $form-controls-padding-x: 6px; |
| 147 | $form-controls-padding-y: 7px; |
| 148 | |
| 149 | $form-controls-border-color-error: #b55959; |
| 150 | $form-controls-color-error: #872727; |
| 151 | $form-controls-background-error: #b55959; |
| 152 | $form-controls-label-color-error: #bf6666; |
| 153 | |
| 154 | // BUTTONS |
| 155 | $button-shadow-size: 0px 1px 2px 0px; |
| 156 | $button-font-size: 15px; |
| 157 | |
| 158 | // primary |
| 159 | $button-primary-bg-color: var(--latepoint-admin-brand-primary, #1e7bff); |
| 160 | $button-primary-border-color: var(--latepoint-admin-brand-primary, #1e7bff); |
| 161 | $button-primary-shadow-color: transparent; |
| 162 | $button-primary-text-color: #fff; |
| 163 | $button-primary-outline-text-color: var(--latepoint-admin-brand-primary, #1e7bff); |
| 164 | $button-primary-hover-bg-color: $brand-primary-lighten-12; |
| 165 | $button-primary-hover-border-color: $brand-primary-lighten-12; |
| 166 | |
| 167 | // danger |
| 168 | $button-danger-bg-color: #ef6b6b; |
| 169 | $button-danger-border-color: #ef6b6b; |
| 170 | $button-danger-shadow-color: transparent; |
| 171 | $button-danger-text-color: #fff; |
| 172 | $button-danger-outline-color: #de5959; |
| 173 | $button-danger-hover-bg-color: #FB7F7F; |
| 174 | $button-danger-hover-border-color: #FB7F7F; |
| 175 | |
| 176 | // success |
| 177 | $button-success-bg-color: #2ebd6f; |
| 178 | $button-success-border-color: #2ebd6f; |
| 179 | $button-success-shadow-color: transparent; |
| 180 | $button-success-text-color: #fff; |
| 181 | $button-success-outline-color: #1ea55b; |
| 182 | $button-success-hover-bg-color: #42d083; |
| 183 | $button-success-hover-border-color: #42d083; |
| 184 | |
| 185 | // warning |
| 186 | $button-warning-bg-color: #e2c99b; |
| 187 | $button-warning-border-color: #e2c99b; |
| 188 | $button-warning-shadow-color: transparent; |
| 189 | $button-warning-text-color: #534220; |
| 190 | $button-warning-outline-color: #534220; |
| 191 | $button-warning-hover-bg-color: #fde1ac; |
| 192 | $button-warning-hover-border-color: #fde1ac; |
| 193 | |
| 194 | // secondary |
| 195 | $button-secondary-bg-color: #f3f4f7; |
| 196 | $button-secondary-border-color: #e9eaed; |
| 197 | $button-secondary-shadow-color: transparent; |
| 198 | $button-secondary-text-color: #252C39; |
| 199 | $button-secondary-outline-color: #b6bac9; |
| 200 | $button-secondary-hover-bg-color: #dcdee4; |
| 201 | $button-secondary-hover-border-color: #dcdee4; |
| 202 | |
| 203 | // white |
| 204 | $button-white-bg-color: #fff; |
| 205 | $button-white-border-color: #e9ebf0; |
| 206 | $button-white-shadow-color: rgba(0,0,0,0.1); |
| 207 | $button-white-text-color: $body-color; |
| 208 | $button-white-outline-color: #fff; |
| 209 | $button-white-hover-bg-color: #eee; |
| 210 | $button-white-hover-border-color: #fff; |
| 211 | |
| 212 | // booking form preview |
| 213 | $calendar-day-box-bg: #eefdec; |
| 214 | $calendar-timeline-off-bg: #e6e9ef; |
| 215 | $timeblock-available-bg: #8fe286; |
| 216 | $timeblock-tick-height: 24px; |
| 217 | |
| 218 | |
| 219 | // order form |
| 220 | $order-item-padding: 15px; |