mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-16 04:52:22 +03:00
506 lines
10 KiB
SCSS
506 lines
10 KiB
SCSS
/* ----------------------------------------------------------------------------
|
|
* Easy!Appointments - Online Appointment Scheduler
|
|
*
|
|
* @package EasyAppointments
|
|
* @author A.Tselegidis <alextselegidis@gmail.com>
|
|
* @copyright Copyright (c) Alex Tselegidis
|
|
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
|
* @link https://easyappointments.org
|
|
* @since v1.5.0
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
@-moz-document url-prefix() {
|
|
body .checkbox input[type='checkbox'] {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
body .ui-widget {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
body .ui-widget-overlay {
|
|
background: #000 50% 50% repeat-x;
|
|
opacity: 0.5;
|
|
filter: Alpha(Opacity=50);
|
|
}
|
|
|
|
body .ui-dialog .ui-dialog-titlebar-close {
|
|
display: none;
|
|
}
|
|
|
|
body .ui-draggable .ui-dialog-titlebar {
|
|
background: #429a82;
|
|
color: #fff;
|
|
font-size: 1.2em;
|
|
font-weight: lighter;
|
|
padding: 12px 10px;
|
|
margin-bottom: 10px;
|
|
border: none;
|
|
border-top-left-radius: 0.25rem;
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
body .ui-dialog {
|
|
padding: 0;
|
|
z-index: 2000;
|
|
border: none !important;
|
|
box-shadow: 0 0 10px #333;
|
|
}
|
|
|
|
body .ui-dialog .ui-dialog-buttonpane {
|
|
padding: 0.3em 1em 0.3em 0.4em;
|
|
border: none;
|
|
}
|
|
|
|
body .ui-button .ui-icon,
|
|
body .ui-button:hover .ui-icon {
|
|
background-image: url('../ext/jquery-ui/images/ui-icons_222222_256x240.png');
|
|
}
|
|
|
|
body .ui-dialog #error-technical {
|
|
max-width: 500px;
|
|
}
|
|
|
|
body .ui-widget.ui-widget-content {
|
|
border: 1px solid #429a82;
|
|
padding: 0;
|
|
}
|
|
|
|
body .ui-dialog-buttons {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
body #ui-datepicker-div {
|
|
margin-top: 5px;
|
|
z-index: 1100 !important;
|
|
}
|
|
|
|
body .ui-datepicker {
|
|
width: auto;
|
|
max-width: 288px;
|
|
}
|
|
|
|
body .ui-datepicker .ui-widget-header {
|
|
border: none;
|
|
background: #429a82;
|
|
border-radius: 0;
|
|
}
|
|
|
|
body .ui-datepicker .ui-widget-header .ui-icon {
|
|
background-image: url('../vendor/jquery-ui-dist/images/ui-icons_ffffff_256x240.png');
|
|
}
|
|
|
|
body .ui-datepicker .ui-datepicker-title {
|
|
color: white;
|
|
padding: 8px 5px;
|
|
}
|
|
|
|
body .ui-datepicker th {
|
|
background: #429a82;
|
|
color: #fff;
|
|
}
|
|
|
|
body .ui-datepicker tbody tr:first-child td {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
body .ui-datepicker td a,
|
|
body .ui-datepicker td span {
|
|
border: none !important;
|
|
background: none !important;
|
|
color: #1a865f !important;
|
|
text-align: center !important;
|
|
width: 32px;
|
|
height: 32px;
|
|
line-height: 2;
|
|
}
|
|
|
|
html body .ui-datepicker td a.ui-state-active {
|
|
color: #fff !important;
|
|
font-weight: bold !important;
|
|
background: #429a82 !important;
|
|
border-radius: 50px;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 1.2;
|
|
margin: 4px;
|
|
}
|
|
|
|
body .ui-datepicker td a.ui-state-highlight {
|
|
background: #80e3ad !important;
|
|
border-radius: 67px;
|
|
color: #fff !important;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 1.2;
|
|
margin: 4px;
|
|
}
|
|
|
|
body .ui-datepicker .ui-datepicker-prev-hover {
|
|
top: 2px !important;
|
|
left: 2px !important;
|
|
background: #80e1ac;
|
|
border-color: #80e1ac;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body .ui-datepicker .ui-datepicker-next-hover {
|
|
top: 2px !important;
|
|
right: 2px !important;
|
|
background: #80e1ac;
|
|
border-color: #80e1ac;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body .ui-datepicker .ui-slider-handle {
|
|
border-radius: 0;
|
|
border-color: #429a82;
|
|
background-color: #429a82;
|
|
}
|
|
|
|
body .ui-priority-primary,
|
|
body .ui-widget-content .ui-priority-primary,
|
|
body .ui-widget-header .ui-priority-primary {
|
|
font-weight: normal;
|
|
}
|
|
|
|
body .ui-widget input,
|
|
.ui-widget select,
|
|
body .ui-widget textarea,
|
|
body .ui-widget button {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
font-size: 1rem;
|
|
}
|
|
|
|
body .ui-datepicker .ui-datepicker-buttonpane button {
|
|
padding: 6px 16px;
|
|
}
|
|
|
|
.breaks tr:hover td {
|
|
background: #ffffc2 !important;
|
|
}
|
|
|
|
.working-plan td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.breaks td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
li.language {
|
|
cursor: pointer;
|
|
}
|
|
|
|
li.language:hover {
|
|
color: #005580;
|
|
}
|
|
|
|
#select-language {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
}
|
|
|
|
#language-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* JQUERY UI DATETIME PICKER ADDON
|
|
------------------------------------------------------------------------- */
|
|
|
|
.ui-timepicker-div .ui-widget-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ui-timepicker-div dl {
|
|
text-align: left;
|
|
}
|
|
|
|
.ui-timepicker-div dl dt {
|
|
float: left;
|
|
clear: left;
|
|
padding: 0 0 0 5px;
|
|
}
|
|
|
|
.ui-timepicker-div dl dd {
|
|
margin: 0 10px 10px 40%;
|
|
}
|
|
|
|
.ui-timepicker-div dl dd.ui_tpicker_time {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ui-timepicker-div dl dd.ui_tpicker_hour,
|
|
.ui-timepicker-div dl dd.ui_tpicker_minute {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.ui-timepicker-div td {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.ui-tpicker-grid-label {
|
|
background: none;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-timepicker-div .ui_tpicker_unit_hide {
|
|
display: none;
|
|
}
|
|
|
|
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
|
|
background: none;
|
|
color: inherit;
|
|
border: none;
|
|
outline: none;
|
|
width: 95%;
|
|
}
|
|
|
|
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
|
|
border-bottom-color: #aaa;
|
|
}
|
|
|
|
.ui-timepicker-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
.ui-timepicker-rtl dl {
|
|
text-align: right;
|
|
padding: 0 5px 0 0;
|
|
}
|
|
|
|
.ui-timepicker-rtl dl dt {
|
|
float: right;
|
|
clear: right;
|
|
}
|
|
|
|
.ui-timepicker-rtl dl dd {
|
|
margin: 0 40% 10px 10px;
|
|
}
|
|
|
|
/* Shortened version style */
|
|
.ui-timepicker-div.ui-timepicker-oneLine {
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dt {
|
|
display: none;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
|
|
display: block;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl {
|
|
text-align: right;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
|
|
display: inline-block;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
|
|
content: ':';
|
|
display: inline-block;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
|
|
content: '.';
|
|
display: inline-block;
|
|
}
|
|
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
|
|
display: none;
|
|
}
|
|
|
|
/* LOADING SPINNER
|
|
------------------------------------------------------------------------- */
|
|
|
|
.is-loading {
|
|
position: relative;
|
|
}
|
|
|
|
.is-loading:before,
|
|
.is-loading:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.animation:after {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: -25px 0 0 -25px;
|
|
|
|
border: 5px solid rgba(0, 0, 0, 0.4);
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.animation:after {
|
|
border-bottom-color: transparent;
|
|
animation: spin 1s infinite linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin-reverse {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
.any-element {
|
|
width: 60px;
|
|
height: 60px;
|
|
position: fixed;
|
|
left: 50vw;
|
|
top: 50vh;
|
|
margin-left: -30px;
|
|
margin-bottom: -30px;
|
|
}
|
|
|
|
#message-box pre,
|
|
#message-box .card {
|
|
max-height: 250px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
body .popover {
|
|
max-width: 430px;
|
|
}
|
|
|
|
body .popover-body strong {
|
|
min-width: 90px;
|
|
display: inline-block;
|
|
}
|
|
|
|
body .popover-body button {
|
|
font-size: 1em;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
height: 2.1em;
|
|
padding: 0 0.6em;
|
|
}
|
|
|
|
body .popover-body a {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.has-error .control-label,
|
|
.has-error label {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.has-error .form-control {
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
body .clearfix {
|
|
clear: both;
|
|
}
|
|
|
|
.flatpickr-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.flatpickr-calendar {
|
|
box-shadow: none;
|
|
|
|
.flatpickr-monthDropdown-months:hover {
|
|
background: rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
|
|
.flatpickr-months {
|
|
padding: 10px 0;
|
|
background: #449a82;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
.flatpickr-current-month {
|
|
padding: 3px;
|
|
}
|
|
|
|
.flatpickr-innerContainer {
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.dayContainer {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.flatpickr-months .flatpickr-month,
|
|
.flatpickr-weekdays,
|
|
.flatpickr-current-month .flatpickr-monthDropdown-months,
|
|
span.flatpickr-weekday {
|
|
background: #429a82;
|
|
color: white;
|
|
}
|
|
|
|
.flatpickr-day.endRange,
|
|
.flatpickr-day.endRange.inRange,
|
|
.flatpickr-day.endRange.nextMonthDay,
|
|
.flatpickr-day.endRange.prevMonthDay,
|
|
.flatpickr-day.endRange:focus,
|
|
.flatpickr-day.endRange:hover,
|
|
.flatpickr-day.selected,
|
|
.flatpickr-day.selected.inRange,
|
|
.flatpickr-day.selected.nextMonthDay,
|
|
.flatpickr-day.selected.prevMonthDay,
|
|
.flatpickr-day.selected:focus,
|
|
.flatpickr-day.selected:hover,
|
|
.flatpickr-day.startRange,
|
|
.flatpickr-day.startRange.inRange,
|
|
.flatpickr-day.startRange.nextMonthDay,
|
|
.flatpickr-day.startRange.prevMonthDay,
|
|
.flatpickr-day.startRange:focus,
|
|
.flatpickr-day.startRange:hover {
|
|
background: #429a82;
|
|
border-color: #429a82;
|
|
color: white;
|
|
}
|
|
|
|
.flatpickr-day.prevMonthDay,
|
|
.flatpickr-day.nextMonthDay {
|
|
height: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|