/*-------------------------------------------- Symcalia v3.0 - Reservations Block 1: Symcalia container Block 2: calendar table Block 3: events & tasks Block 4: event management Block 5: calendar management Block 6: menu functions Block 7: symcalia popup Block 8: date selector Block X: Extra CSS Block Y: Dark mode Block Z: Responsive --------------------------------------------*/ /*-------------------------------------------- Block 1: Symcalia container --------------------------------------------*/ #calbody { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 2000; color: #333; background-color: #fefefe; overflow: auto; } #calbody svg, #calbody svg path { fill: #f90; width: 36px; height: 36px; } #calbody svg:hover, #calbody svg:hover path { fill: #fd6400; } /* Calprod code */ #calbody input[type="button"].cancel { background: #999; border: solid 1px #eee; } #calbody input[type="button"].cancel:hover { background: #aaa; } #calbody .submit { text-align: right; float: right; } /*-------------------------------------------- Block 2: calendar table --------------------------------------------*/ #calcont { height: 100%; margin: 0; padding: 0; } #calcont h1 { color: #f80; margin: 0; padding: 10px 0 10px 10px; font-size: 1.4em; } .caltable { height: calc(100% - 48px); width: 100%; margin: 0; padding: 0; border-spacing: 1px; border-collapse: separate; background-color: #e0e0e0; font-size: 0.8em; } .caltable td { width: 14%; padding: 0; background-color: #fff; vertical-align: top; } /* Caltable head */ .caltable > thead { background-color: #c0c0c0; text-align: center; } .caltable > thead td { height: 20px; background-color: #d0d0d0; color: #333; text-overflow: hidden; } /* Caltable body */ .caltable > tbody td { min-height: 20px; } /* Calprod: by default not selectable */ .caltable > tbody td span { display: block; background: #f0f0f0; padding: 2px 4px; } .caltable > tbody td.preday { box-shadow: -1px 0px 0 #fff; cursor: auto; } .caltable > tbody td.postday { box-shadow: 1px 1px 0 #fff; cursor: auto; } .caltable.day tr > td { width: 98%; } .caltable.week tr > td:first-child, .caltable.day tr > td:first-child { width: 0; vertical-align: middle; text-align: center; padding: 0 3px 0 2px; } /* Today */ .caltable.month > tbody td.today { box-shadow: 0px 0px 0px 1px #f90; } .caltable.month > tbody td.today span, .caltable.week > thead td.today, .caltable.day > thead td.today { color: #222; background-color: #f90; font-weight: bold; } /* Calprod code */ .selectable { cursor: pointer; } .caltable > tbody td.disabled { background-color: #f6f6f6; cursor: auto; } .caltable > tbody td.selected { background-color: #7dfc79; } .caltable > tbody td.clicked { background-color: #61f95c; } /*-------------------------------------------- Block 3: events & tasks --------------------------------------------*/ #events { position: absolute; top: 0; left; 0; z-index: 2001; } /* Head and Tail of an event */ #events > div > div { position: absolute; padding: 1px 2px; height: 22px; border-radius: 4px; transition: top 0.6s ease-in, left 0.6s ease-in, width 0.6s ease-in; overflow: hidden; } #events > div > div > span { font-size: 0.9em; line-height: 22px; } #events > div > div > span:first-child { font-size: 0.8em; margin: 6px 5px 0 0; } #events .morediv { position: absolute; padding: 2px; white-space: nowrap; font-weight: bold; color: #666; } #events .morediv:hover { color: #f90; } /* Tasks */ #tasks { height: 100%; margin: 0; padding: 20px; overflow: auto; } #tasks > h1 { width: 100%; font-size: 1.2em; color: #666; border-color: #eee; } #tasks > h1:not(:first-child) { margin-top: 20px; padding-top: 10px; border-width: 1px 0 0 0; border-style: solid; } #tasks > div { cursor: pointer; } #tasks > div > span { line-height: 30px; } #tasks > div > span:nth-child(1) { border-width: 0 0 3px 0; border-style: solid; margin-right: 12px; } /*-------------------------------------------- Block 4: event management Block 5: calendar management --------------------------------------------*/ #eventform, #calendarform { margin: 0; padding: 0; } #eventform > div, #calendarform > div { display: flex; align-items: center; } #eventform label, #calendarform label { width: 120px; } .dtfield { border: none; margin: 0; padding: 0; } .dtfield input[type="button"] { display: inline-block; width: 100px; min-width: auto; margin-right: 10px; } .dtfield input[type="text"] { width: 24px; font-size: 1em; padding: 0; margin: 0; text-align: center; border: none; } .dtfield input[name$="_y"] { width: 48px; } #sympop #event_name, #sympop #calendar_id { width: 180px; flex-grow: 1 } #eventform > div:last-child, #calendarform > div:last-child { margin-top: 10px; justify-content: right; } #eventform > div:last-child input, #calendarform > div:last-child input { margin-left: 10px; } /* Moving div */ div.divhide { display: none; transition: none; } div.divmove { transition: none; } /*-------------------------------------------- Block 6: menu functions --------------------------------------------*/ #menu { position: absolute; left: 30px; top: 60px; border-radius: 3px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); background-color: #fff; color: #666; font-weight: bold; z-index: 2002; transition: background-color 0.4s ease-in, max-width 0.6s ease-in; } /* Menu head */ #menuhead { display: flex; padding: 6px 2px; border-width: 0 0 1px 0; border-style: solid; border-color: #eee; cursor: move; } #menuhead svg { margin: 0 4px; cursor: pointer; transition: opacity 0.6s ease-in; } #menutitle { line-height: 36px; margin: 0 8px; font-size: 1.2em; transition: opacity 0.6s ease-in; } #menucontent { width: 100%; max-height: 0; transition: max-height 0.6s ease-in; overflow: hidden; background-color: inherit; } #menucontent ul { margin: 0; padding: 0; list-style: none; } #menucontent ul li { height: 50px; display: flex; align-items: center; border-width: 0 0 1px 0; border-style: solid; border-color: #eee; cursor: pointer; } #menucontent ul li:hover { background-color: #eee; } #menucontent svg { width: 32px; height: 32px; margin: 0 12px 0 8px; } #menucontent svg, #menucontent svg path { fill: #999; } #menucontent li.green svg, #menucontent li.green svg path { fill: #32cd32; } #languages li { padding-left: 10px; } #languages li:last-child { border: none; } #menucontent form { text-align: center; margin: 12px 0; } #calendars li { display: flex; } #calendars li > span { padding-left: 10px; flex-grow: 1; } #calendars label { margin-right: 4px } /* CSS for calendar product */ #menu { position: sticky; width: 100%; top: 0; left: 0; border: none; border-radius: 0; box-shadow: none !important; } #menuhead { border: none; cursor: auto; } #menutitle { flex-grow: 2; } #menucontent { position: absolute; max-width: 200px; z-index: 2002; border: none !important; } /*-------------------------------------------- Block 7: symcalia popup --------------------------------------------*/ #sympop { position: fixed; left: 200px; top: 200px; background: #fff; border-radius: 3px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); z-index: 2003; } #sympop-title { text-align: right; cursor: move; } #sympop-title svg { width: 26px; height: 26px; cursor: pointer; margin: 6px 6px 0 0; } #sympop-content { margin: 0 10px; overflow: auto; } #sympop .spacer { height: 10px; } #sympop .ewloader { padding-top: 70px; } #sympop .success { text-align: center; margin: 0; } #sympop .success svg { width: 140px; height: 190px; margin: 0; } #sympop .success svg, #sympop .success svg path, #sympop .success svg:hover, #sympop .success svg:hover path { fill: #5fc331; } /* Calprod code */ #sympop h1 { font-size: 1.2em; margin: 0 0 30px 0; padding: 0; } #sympop td { margin: 0; padding: 0; } #sympop strong { padding-bottom: 6px; } #sympop input[type="button"] { margin: 30px 0 10px 0; min-width: 140px; } #sympop input[type="button"]:first-child{ margin-right: 8px; } /*-------------------------------------------- Block 8: date selector --------------------------------------------*/ /* ds container */ #ds { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; background: #fff; text-align: center; z-index: 2004; } /* ds column */ #ds > div { display: flex; flex-direction: column; flex-grow: 1; min-height: 30px; width: 200px; overflow-y: auto; } /* ds cell */ #ds > div > div { flex-grow: 1; max-width: auto; min-height: 60px; padding: 0 12px; border-width: 0 0 1px 1px; border-style: solid; border-color: #eee; cursor: pointer; display: flex; align-items: center; background: #fff; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #fcfcfc 80%, #fcfcfc 100%); font-size: 1.4em; } #ds > div > div > span { flex-grow: 1; } #ds > div > div:hover, #ds > div:nth-child(3) td:hover { background: #eee; background: linear-gradient(to bottom, #eee 0%, #ddd 100%); } /* Active year, day, .. */ #ds > div > div.active, #ds > div:nth-child(3) td.active { color: #fff; background: #f90; background: linear-gradient(to bottom,#f90 0%, #f60 100%); } /* Day column */ #ds > div:nth-child(3) { display: block; min-width: 340px; flex-grow: 5; } #ds > div:nth-child(3) > table { width: 100%; height: 40%; margin: 0; padding: 0; border-spacing: 1px; border-collapse: separate; background-color: #eee; } /* Days of week in day column */ #ds > div:nth-child(3) > table > thead td { background-color: #eee; } #ds > div:nth-child(3) td { width: 14%; line-height: 40px; cursor: pointer; background-color: #fff; } #ds > div:nth-child(3) td.prepost { color: #ccc; } #ds #dsdatetime { display: block; margin: 20px 0; white-space: nowrap; font-size: 1.2em; } #ds input[type="button"] { margin: 10px; min-width: 140px; min-height: 40px; padding: 0 20px; } /* Hours, minutes */ #ds > div:nth-child(4) > div, #ds > div:nth-child(5) > div { min-width: 30px; } /* Dateselector form */ #ds > div:nth-child(6) { display: none; } #dsform { width: 100%; margin-bottom: 20px; } /*-------------------------------------------- Block Z: Responsive --------------------------------------------*/ @media all and (max-width: 800px) { .caltable { height: calc(100% - 48px); } #menu { position: sticky; width: 100%; top: 0; left: 0; border: none; border-radius: 0; box-shadow: none !important; } #menuhead { border: none; cursor: auto; } #menutitle { flex-grow: 2; } #menucontent { position: absolute; z-index: 2002;border: none !important; } #sympop { position: fixed; left: 0; top: 0; width: 100%; } #ds { height: auto; min-height: 100%; flex-direction: column; overflow-y: auto; } #ds > div { flex-direction: row; width: 100%; flex-grow: 0; } #ds > div > div { font-size: 1.0em; } #ds > div:nth-child(3) { flex-grow: 0; } #ds > div:nth-child(6) { display: flex; } } /*-------------------------------- Print -------------------------------*/ @media print { #menu { display: none; } }