easyappointments/assets/css/backend.css

877 lines
16 KiB
CSS

/* ----------------------------------------------------------------------------
* Easy!Appointments - Open Source Web Scheduler
*
* @package EasyAppointments
* @author A.Tselegidis <alextselegidis@gmail.com>
* @copyright Copyright (c) 2013 - 2020, Alex Tselegidis
* @license http://opensource.org/licenses/GPL-3.0 - GPLv3
* @link http://easyappointments.org
* @since v1.0.0
* ---------------------------------------------------------------------------- */
/**
* BACKEND CSS FILE FOR EASY!APPOINTMENTS
*/
root {
display: block;
}
/* BACKEND GENERAL ELEMENTS
-------------------------------------------------------------------- */
#header {
background-color: #39c678;
border-bottom: 4px solid #c0f1d6;
box-shadow: none;
border-radius: 0;
margin-bottom: 15px;
}
#header #header-logo {
padding: 6px;
}
#header #header-logo img {
float: left;
width: 50px;
height: 50px;
margin-right: 10px;
}
#header #header-logo span {
float: left;
font-size: 16px;
color: white;
margin-top: 14px;
font-weight: lighter;
}
#header .navbar-header .navbar-toggle .icon-bar {
background: white;
}
#header #header-menu .menu-item {
cursor: pointer;
min-width: 130px;
color: #FFF;
text-align: center;
text-decoration: none;
font-size: 14px;
transition: background-color 0.2s;
}
#header #header-menu .menu-item:focus {
background-color: inherit;
outline: none;
}
#header #header-menu .menu-item:hover:not(.active) {
background-color: #2A8F57;
}
#header #header-menu .active {
color: #C5FFD6;
background: #29A067;
}
#footer {
background-color: #F7F7F7;
border-top: 1px solid #DDD;
font-size: 11px;
overflow: auto;
}
#footer #footer-content {
padding: 10px 15px;
display: inline-block;
float: left;
line-height: 2;
}
#footer #footer-user-display-name {
display: inline-block;
float: right;
text-align: right;
padding: 10px 15px;
font-weight: bold;
}
#notification {
margin: 15px;
}
#notification strong {
margin-right: 15px;
}
#notification .alert button {
margin-right: 15px;
}
#notification .alert {
margin-bottom: 0;
background-color: #f5e8a8;
color: #9E9980;
box-shadow: 1px 1px 1px #a0a0a0;
padding: 15px;
position: fixed;
z-index: 200;
right: 15px;
bottom: 15px;
min-width: 300px;
max-width: 750px;
}
#notification .close {
color: #9E9980;
font-size: 25px;
line-height: 0.8;
margin-right: 0 !important;
}
#loading {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999999;
background: rgba(255, 255, 255, 0.75);
}
#loading img {
margin: auto;
display: block;
max-width: 100%;
}
.modal-message {
margin-bottom: 10px;
}
body .modal .modal-title {
color: white;
}
body .modal-header {
padding: 12px 15px;
background: #39c678;
border-bottom: 4px solid #c0f1d6;
}
body .modal-header h3 {
color: #FFF;
font-size: 20px;
font-weight: lighter;
}
body .modal-header .close {
margin-top: 2px;
color: #12482a;
}
body .modal-content {
border: none;
}
/* Full screen modal */
body .modal.full-screen .modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body .modal.full-screen .modal-content {
height: 100%;
border: none;
box-shadow: none;
overflow-y: auto;
}
body .modal.full-screen .wrapper {
min-height: 100%;
margin-bottom: -67px; /* modal-footer height */
}
body .modal.full-screen .modal-footer {
background-color: #f5f5f5;
width: 100%;
height: 67px;
}
body .modal.full-screen .modal-push {
height: 67px;
}
body .jspDrag {
background: #D3D3D3;
}
body .jspTrack {
background: #EBEBEB;
}
body legend {
color: #666;
}
/* BACKEND COMPONENTS
-------------------------------------------------------------------- */
.backend-page .filter-records {
max-width: 350px;
margin-bottom: 20px;
}
.backend-page .filter-records form .input-group-addon {
padding-top: 0;
padding-right: 0;
border-top: none;
}
.backend-page .filter-records form .key {
margin-right: 15px;
float: left;
}
.backend-page .filter-records .results {
overflow-y: auto;
max-height: 650px;
outline: none;
}
.backend-page .filter-records .results .entry {
padding: 10px 7px;
}
.backend-page .filter-records .results .entry:hover:not(.selected) {
background-color: #F3F3F3;
cursor: pointer;
}
.backend-page .filter-records .results .entry.selected {
background-color: #F4F4F4;
border-right: 5px solid #39c678;
}
.backend-page .filter-records .results hr {
margin: 5px 0;
}
.record-details {
max-width: 800px;
margin-bottom: 20px;
}
.record-details input:read-only,
.record-details select:disabled,
.record-details textarea:read-only {
opacity: 0.85;
box-shadow: none;
}
/* BACKEND CALENDAR PAGE
-------------------------------------------------------------------- */
#calendar-page #calendar-toolbar {
border-bottom: 1px solid #D6D6D6;
border-radius: 3px;
background: #3A3A3A;
padding: 5px;
margin-bottom: 15px;
overflow: auto;
color: white;
}
#calendar-page #calendar-filter .form-group {
margin: 5px 0;
}
#calendar-page #calendar-filter label {
float: left;
display: inline-block;
margin: 0 10px 0 0;
margin-right: 7px;
margin-bottom: 0;
font-size: 18px;
font-weight: lighter;
}
#calendar-page #calendar-filter select {
background-color: #FFF;
padding: 0 10px;
background-position-x: 95%;
min-width: 240px;
}
#calendar-page #calendar-filter select:disabled {
background: white;
cursor: auto;
}
#calendar-page #calendar-actions {
text-align: right;
}
#calendar-page #calendar-actions > .btn {
margin: 5px 0;
}
#calendar-page #calendar {
margin-bottom: 15px;
}
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
}
#calendar-page #calendar .fc-unavailable {
background-image: url('../img/unavailable.jpg');
font-size: 14px;
border-radius: 0;
font-weight: bold;
color: #333;
text-shadow: 0px 1px 0px #E6E6E6;
opacity: 0.7;
}
#calendar-page #calendar .fc-event-title small {
font-weight: normal;
font-size: 12px;
}
#calendar-page #calendar .fc-time {
font-size: 10px;
}
#calendar-page #calendar .fc-break {
background-image: url('../img/break.jpg');
}
#calendar-page #calendar .fc-custom {
background-image: url('../img/custom.jpg');
}
#calendar-page .fc-header {
margin-bottom: 10px;
}
#calendar .fc-time-grid-event.fc-short .fc-title {
font-size: .7em;
}
#calendar .fc-header-title h2 {
font-size: 16px;
margin: 0px;
line-height: 26px;
}
#calendar .fc-header .fc-button {
margin-bottom: 8px;
background-image: none !important;
}
#calendar .fc-agenda-allday .fc-day-content {
min-height: 19px;
}
#calendar .fc-agenda-divider-inner {
height: 3px;
}
#calendar table thead .fc-first {
background: #F5F5F5;
}
#calendar table thead .fc-first th {
vertical-align: middle;
padding: 2px 0;
color: #555;
}
#calendar .fc-event {
border: 1px solid #4790CA;
background-color: #4790CA;
}
#existing-customers-list {
height: 110px;
overflow-y: auto;
margin-bottom: 8px;
font-size: 12px;
line-height: 22px;
}
#existing-customers-list div {
display: inline-block;
width: 250px;
margin: 0 7px 7px 0;
padding: 5px;
border-radius: 3px;
}
#existing-customers-list div:hover {
background: #3DD481;
font-weight: bold;
color: #FFF;
cursor: pointer;
}
#filter-existing-customers {
display: inline-block;
height: 14px;
min-height: 24px;
font-size: 12px;
}
#appointment-notes,
#customer-notes {
height: 37px; /* Align with location field */
}
body .form-horizontal .control-label {
width: 135px;
}
body .form-horizontal .controls {
margin-left: 158px;
}
#calendar .calendar-header {
padding-bottom: 15px;
}
#calendar .calendar-header input {
width: 120px;
}
#calendar .calendar-header .btn,
#calendar .calendar-header input {
margin: 10px 10px 10px 0;
}
#calendar .calendar-view {
overflow-x: auto;
}
#calendar .calendar-view > div {
width: 100%;
min-width: 1000%;
overflow: auto;
}
#calendar .calendar-view .date-column {
overflow: auto;
float: left;
margin-right: 20px;
}
#calendar .calendar-view .date-column .provider-column .not-working {
width: 115px;
border-radius: 3px;
padding: 10px;
text-align: center;
background: #eaeaea url('../img/unavailable.jpg');
opacity: 0.7;
}
#calendar .calendar-view .date-column .provider-column {
overflow: auto;
float: left;
margin-right: 10px;
width: 500px;
}
#calendar .calendar-view .date-column .provider-column table thead {
background-color: #FFF;
}
#calendar .calendar-view .date-column .provider-column .event {
font-size: 10px;
border-radius: 3px;
padding: 2px 3px;
cursor: pointer;
margin: 1px 25px 1px 1px;
}
#calendar .calendar-view .date-column .provider-column .event.appointment {
background: #4790CA;
color: #fff;
}
#calendar .calendar-view .date-column .provider-column .event.unavailability {
background: #409482;
color: #fff;
}
/* BACKEND CUSTOMERS PAGE
-------------------------------------------------------------------- */
#customers-page #customer-appointments {
height: 370px;
max-width: 330px;
width: 100%;
margin-bottom: 20px;
overflow-y: auto;
outline: none;
}
#customers-page #customer-appointments .appointment-row {
padding: 7px;
border-bottom: 1px solid #E2E2E2;
border-right: none;
}
#customers-page #customer-appointments .appointment-row:last-child {
border-bottom: none;
}
#customers-page #customer-appointments .appointment-row:hover:not(.selected) {
background-color: #F3F3F3;
cursor: pointer;
}
#customers-page #customer-appointments .appointment-row.selected {
background-color: #E2E2E2;
}
#customers-page #appointment-details {
max-width: 330px;
margin-bottom: 20px;
}
#customers-page #appointment-details div {
padding: 10px;
background: #F8F8F8;
}
/* BACKEND SERVICES PAGE
-------------------------------------------------------------------- */
#services-page h2 {
color: #525252;
}
#services-page .nav {
background-color: #F4F4F4;
margin-bottom: 15px;
}
#services-page .nav li {
cursor: pointer;
}
#services-page .record-details .ui-state-disabled {
opacity: 1;
}
#services-page #service-duration {
margin: 0px;
}
#services-page .record-details h3 a {
font-size: 24px;
margin-left: 10px;
}
/* BACKEND USERS PAGE
-------------------------------------------------------------------- */
#users-page h2 {
color: #525252;
}
#users-page .nav {
background-color: #F4F4F4;
margin-bottom: 15px;
}
#users-page .nav li {
cursor: pointer;
}
#users-page #secretary-notifications.active,
#users-page #provider-notifications.active,
#users-page #admin-notifications.active {
background: #B6DCFF;
box-shadow: none;
}
#users-page #secretary-providers,
#users-page #provider-services {
max-width: 315px;
width: 100%;
height: 387px;
overflow-y: auto;
margin-bottom: 20px;
}
#users-page #providers .switch-view {
overflow: auto;
margin-bottom: 5px;
}
#users-page #providers .switch-view div {
display: inline-block;
padding: 6px 13px;
color: #333;
float: left;
margin-right: 3px;
cursor: pointer;
min-width: 100px;
text-align: center;
}
#users-page #providers .switch-view div:hover:not(.current) {
background: #F5F5F5;
}
#users-page #providers .switch-view strong {
display: inline-block;
float: left;
margin: 3px 20px;
font-size: 17px;
}
#users-page #providers .switch-view .current {
color: #FFF;
background: #39c678;
}
#users-page #providers .details-view,
#users-page #providers .working-plan-view {
clear: both;
overflow: auto;
}
#users-page #providers .working-plan-view .work-start,
#users-page #providers .working-plan-view .work-end {
max-width: 88px;
}
#users-page .btn-toolbar {
margin-top: 0;
margin-bottom: 15px;
}
#users-page #providers .form-message {
clear: both;
}
#users-page #providers .breaks .btn {
margin-right: 5px;
padding: 4px 7px;
}
#users-page #providers .extra-periods .btn {
margin-right: 5px;
padding: 4px 7px;
}
@-moz-document url-prefix() {
.breaks .break-day select {
height: 36px;
}
.extra-periods .extra-day select {
height: 36px;
}
}
#users-page .working-plan .checkbox,
#users-page .working-plan input[type="text"],
#users-page .working-plan button {
margin: 2px 0;
}
#users-page .working-plan td input[type="text"] {
width: 55px;
}
#users-page .editable form,
#users-page .editable select,
#users-page .editable input {
margin: 0px;
}
#users-page #providers .record-details h3 a {
font-size: 24px;
margin-left: 10px;
}
#users-page #providers .record-details #provider-services .checkbox a {
margin-left: 5px;
}
/* BACKEND SETTINGS PAGE
-------------------------------------------------------------------- */
#settings-page h2 {
color: #525252;
}
#settings-page .nav {
background-color: #F4F4F4;
margin-bottom: 15px;
}
#settings-page .nav li {
cursor: pointer;
}
#business-logic .working-plan .checkbox,
#business-logic .working-plan input[type="text"],
#business-logic .working-plan button {
margin: 2px 0;
}
#business-logic .working-plan td input[type="text"] {
max-width: 88px;
}
#business-logic .working-plan .work-start,
#business-logic .working-plan .work-end {
max-width: 88px;
}
#business-logic .working-plan label.checkbox {
margin-top: 5px;
margin-bottom: 0;
}
#business-logic .breaks .btn {
margin-right: 5px;
padding: 4px 7px;
}
#business-logic .breaks input {
margin-bottom: 0;
}
#business-logic .breaks .editable form {
margin: 0;
}
#business-logic .breaks .editable select,
#business-logic .breaks .editable input {
margin: 0;
cursor: pointer;
}
#business-logic #book-advance-timeout {
width: 100px;
}
#settings-page #user-notifications,
#settings-page #customer-notifications,
#settings-page #display-any-provider,
#settings-page #require-phone-number,
#settings-page #require-captcha {
outline: none;
}
#settings-page #user-notifications.active,
#settings-page #customer-notifications.active,
#settings-page #display-any-provider.active,
#settings-page #require-phone-number.active,
#settings-page #require-captcha.active {
background: #B6DCFF;
}
#settings-page #general fieldset .wrapper {
max-width: 1024px;
}
#settings-page .working-plan-wrapper {
max-width: 600px;
}
#settings-page .breaks-wrapper {
max-width: 500px;
}
#settings-page .personal-info-wrapper {
max-width: 400px;
margin-bottom: 20px;
}
#settings-page .miscellaneous-wrapper {
max-width: 400px;
margin-bottom: 20px;
}
#settings-page #about {
max-width: 720px;
}
#settings-page #about .current-version {
padding: 15px;
background: #F4F4F4;
font-size: 12px;
color: #444;
}
#settings-page #update-ea {
margin-left: 12px;
}
@media (max-width: 1200px) {
#header #header-menu .menu-item {
min-width: 100px;
}
#calendar-page #calendar-actions {
text-align: left;
}
}
@media (max-width: 860px) {
#header #header-menu .menu-item {
min-width: 85px;
}
#footer #footer-user-display-name {
text-align: left;
}
#calendar-page #calendar-filter label {
margin-bottom: 5px;
}
}
@media (max-width: 468px) {
#calendar-page .fc-header td {
display: block;
width: 70vw;
float: left;
margin: 10px auto;
text-align: left;
}
#calendar-page #calendar-actions .btn {
width: 100%;
margin: 5px 0;
}
.ui-dialog {
margin: 0 12px;
}
#calendar-page #calendar-filter select {
min-width: auto;
}
#users-page #providers .switch-view {
margin: 20px 0;
width: 100%;
}
#users-page #providers .switch-view strong {
display: block;
width: 100%;
text-align: center;
margin: 16px 0;
}
#users-page #providers .switch-view div {
width: 48%;
}
}