622 lines
8.3 KiB
CSS
622 lines
8.3 KiB
CSS
@font-face
|
|
{
|
|
font-family: montserrat;
|
|
src: url("Montserrat-Regular.ttf") format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face
|
|
{
|
|
font-family: montserrat;
|
|
src: url("Montserrat-Bold.ttf") format('truetype');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
body
|
|
{
|
|
color:#000000;
|
|
background:#bbbbbb4f;
|
|
text-align:center;
|
|
font-family: montserrat;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-bottom: 0px;
|
|
margin-top: 0px;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#header
|
|
{
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
left: 0px;
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
padding-bottom: 20px;
|
|
background-color: #1264b8;
|
|
background-size: 100% 100%;
|
|
background-position: top center;
|
|
overflow: visible;
|
|
z-index: 3;
|
|
box-shadow: 0 0 5px black;
|
|
}
|
|
|
|
h1
|
|
{
|
|
position: relative;
|
|
color:#eeeeee;
|
|
line-height: 35px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-size: 32px;
|
|
position:relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
|
|
h2
|
|
{
|
|
position: relative;
|
|
color: #eeeeee;
|
|
font-size: 14px;
|
|
margin-top:0px;
|
|
line-height: 20px;
|
|
z-index: 3;
|
|
}
|
|
|
|
nav
|
|
{
|
|
position:sticky;
|
|
width: auto;
|
|
margin-top: -29px;
|
|
margin-bottom: 0px;
|
|
background: #1264b8;
|
|
padding: 4px;
|
|
z-index:4;
|
|
top: -1px;
|
|
}
|
|
|
|
nav a
|
|
{
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
margin-left: -1px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #064899;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
background: #2293eb;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media screen and (max-width: 500px)
|
|
{
|
|
nav a
|
|
{
|
|
font-size: 3vw;
|
|
}
|
|
}
|
|
|
|
#localTime, #timerContainer
|
|
{
|
|
position: relative;
|
|
display: inline-block;
|
|
color:#000000;
|
|
width: auto;
|
|
margin-top: 10px;
|
|
height: auto;
|
|
}
|
|
|
|
#timerContainer
|
|
{
|
|
border: 1px solid #797979;
|
|
box-shadow: 0 0 5px #000000;
|
|
padding: 4px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
h3
|
|
{
|
|
font-size: 42px;
|
|
position: relative;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
z-index: 2;
|
|
}
|
|
|
|
h4
|
|
{
|
|
position: relative;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
z-index: 2;
|
|
}
|
|
|
|
h5
|
|
{
|
|
position: relative;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
z-index: 2;
|
|
}
|
|
|
|
time
|
|
{
|
|
}
|
|
|
|
select
|
|
{
|
|
background: #ffffff;
|
|
color: #000000;
|
|
border: #797979 solid 1px;
|
|
}
|
|
|
|
input
|
|
{
|
|
background: #ffffff;
|
|
color: #000000;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#calendarSpacer
|
|
{
|
|
height: 10px;
|
|
}
|
|
|
|
input[type=button]
|
|
{
|
|
background: #2293eb;
|
|
border-style: solid;
|
|
border-width: 0px;
|
|
border-color: #797979;
|
|
color: #ffffff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
input.activeButton, input[type=button]:active, a.activeButton
|
|
{
|
|
background: #12b6b9;
|
|
color: #000000;
|
|
}
|
|
|
|
#searchBox
|
|
{
|
|
position: relative;
|
|
width: 385px;
|
|
left:50%;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
margin-left: -193px;;
|
|
display: grid;
|
|
grid-template-columns: 1fr 35px;
|
|
text-align: left;
|
|
box-shadow: 0 0 5px #000000;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
@media screen and (max-width:480px)
|
|
{
|
|
#searchBox
|
|
{
|
|
width: 80vw;
|
|
left: 10vw;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#tzSearchBox
|
|
{
|
|
display: relative;
|
|
background: rgba(0,0,0,0);
|
|
color: #000000;
|
|
padding: 3px;
|
|
border: none;
|
|
grid-column: 1/2;
|
|
grid-row: 1;
|
|
z-index: 2;
|
|
border: none;
|
|
}
|
|
|
|
#tzSearchButton
|
|
{
|
|
background: #2293eb;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
border: none;
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#tzSearchResults
|
|
{
|
|
position:absolute;
|
|
overflow: auto;
|
|
top: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 50vh;
|
|
border: 1px solid #797979;
|
|
box-shadow: 0 0 5px #000000;
|
|
z-index: 20;
|
|
background: #ffffff;
|
|
display: none;
|
|
}
|
|
|
|
|
|
#bigWrapper
|
|
{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: auto;
|
|
max-width: 100vw;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 5px #000000;
|
|
z-index: 2;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#controls
|
|
{
|
|
position: relative;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
#timerContainer #controls, #timerContainer #timerControls
|
|
{
|
|
position: relative;
|
|
z-index:10;
|
|
}
|
|
|
|
label
|
|
{
|
|
font-size: 10px;
|
|
}
|
|
|
|
input[type=number], select
|
|
{
|
|
border: 1px #797979 solid;
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
#displayWindow, #timerHours, #timerMinutes, #timerSeconds
|
|
{
|
|
border: 1px #797979 solid;
|
|
width: 30px;
|
|
}
|
|
|
|
#tableWrapper
|
|
{
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 155px 1fr;
|
|
grid-template-rows: 24px 1fr 24px;
|
|
grid-gap: 0px;
|
|
}
|
|
|
|
|
|
#tableAndSelectorWrapper
|
|
{
|
|
grid-row:1/4;
|
|
grid-column: 2;
|
|
display: grid;
|
|
grid-template-rows: 24px 1fr 24px;
|
|
grid-template-columns: 1fr;
|
|
padding: 0 0 0 0;
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
|
|
#tableSubWrapper
|
|
{
|
|
grid-row: 2;
|
|
grid-column: 1;
|
|
padding: 0 0 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
#intervalSelectorWrapperA
|
|
{
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
#intervalA, #intervalB
|
|
{
|
|
position: relative;
|
|
width: 100%;
|
|
appearance: none;
|
|
background: #c8c8c8;
|
|
outline: none;
|
|
height:4px;
|
|
left: 0px;
|
|
margin-left: -2px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
#intervalA::-moz-range-thumb, #intervalB::-moz-range-thumb
|
|
{
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 5px #000000;
|
|
cursor: pointer;
|
|
border-radius: 2;
|
|
border: none;
|
|
}
|
|
|
|
#intervalSelectorWrapperB
|
|
{
|
|
grid-row: 3;
|
|
grid-column: 1;
|
|
}
|
|
|
|
|
|
#zoneHeaders
|
|
{
|
|
width: 140px;
|
|
margin-top: 1px;
|
|
grid-row: 2/3;
|
|
grid-column: 1;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
#zoneTable
|
|
{
|
|
display: inline-block;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.day
|
|
{
|
|
font-size: 9px;
|
|
}
|
|
|
|
table
|
|
{
|
|
display: inline-block;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table th
|
|
{
|
|
position: relative;
|
|
margin-top: -1px;
|
|
margin-bottom: 6px;
|
|
border-style: solid;
|
|
border-color: #797979;
|
|
border-width: 1px;
|
|
border-collapse: collapse;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
table td
|
|
{
|
|
border-style: solid;
|
|
border-color: #797979;
|
|
border-width: 1px;
|
|
border-collapse: collapse;
|
|
padding: 4px;
|
|
}
|
|
|
|
#zoneHeaders th
|
|
{
|
|
height: 40px;
|
|
width: 135px;
|
|
display: grid;
|
|
grid-gap: 0px;
|
|
grid-template-rows: 13px 14px 13px;
|
|
grid-templates-columns: 13px 1fr;
|
|
font-size: 12px;
|
|
line-height: 40px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.zoneControlUpWrapper input[type=button], .zoneControlDownWrapper input[type=button], .zoneControlDeleteWrapper input[type=button]
|
|
{
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
right: 4px;
|
|
height: 12px;
|
|
text-align: left;
|
|
font-size: 8px;
|
|
border: none;
|
|
background: rgba(0,0,0,0);
|
|
color: #1264B9;
|
|
|
|
}
|
|
|
|
.zoneControlUpWrapper
|
|
{
|
|
position: relative;
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.zoneControlDownWrapper
|
|
{
|
|
position: relative;
|
|
grid-row: 3;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.zoneControlDeleteWrapper
|
|
{
|
|
position: relative;
|
|
grid-row: 2;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.zoneInfo
|
|
{
|
|
grid-row: 1/2;
|
|
grid-column: 2/3;
|
|
text-align: right;
|
|
height: 27px;
|
|
}
|
|
|
|
.zoneInterval
|
|
{
|
|
grid-row: 3;
|
|
grid-column: 2/3;
|
|
text-align: right;
|
|
height: 13px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
|
|
#zoneTable table tr td
|
|
{
|
|
height: 40px;
|
|
max-height: 40px !important;
|
|
width: 40px !important;
|
|
max-width: 40px;
|
|
font-size: 10px;
|
|
min-width: 40px;
|
|
table-layout: fixed;
|
|
background: #bbdefbd4;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.early
|
|
{
|
|
background: #bbdefb6b !important;
|
|
color: black;
|
|
}
|
|
|
|
.late
|
|
{
|
|
background: #1264b9c9 !important;
|
|
color: white;
|
|
}
|
|
|
|
.working
|
|
{
|
|
background: #bbdefbd4 !important;
|
|
}
|
|
|
|
.weekend
|
|
{
|
|
background: #ff980044 !important;
|
|
color: black;
|
|
}
|
|
|
|
input[type=button]:disabled
|
|
{
|
|
color: #797979;
|
|
}
|
|
|
|
#calendarWrapper
|
|
{
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
#shareControls
|
|
{
|
|
padding-bottom: 4px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
#intervalHilight
|
|
{
|
|
position: absolute;
|
|
height: 100%;
|
|
grid-row: 2/3;
|
|
grid-column: 1;
|
|
border: 2px solid #12b6b9;
|
|
background: rgba(18, 182, 185, 0.3);
|
|
display: none;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
#now
|
|
{
|
|
position: absolute;
|
|
grid-row: 2/3;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: #2293eb;
|
|
display: block;
|
|
margin-top: -2px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
#clipboard
|
|
{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 10px;
|
|
height: 10px;
|
|
display: hidden;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#tzSearchResults input
|
|
{
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
padding: 2px;
|
|
color: #000000;
|
|
background: #ffffff;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
#tzSearchResults input.activeButton
|
|
{
|
|
background: #12b6b9;
|
|
}
|
|
|
|
input.searchResult:focus
|
|
{
|
|
border: 1px dashed #797979;
|
|
}
|
|
|
|
#chime
|
|
{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
display: hidden;
|
|
}
|
|
|
|
|
|
.calendar tr th
|
|
{
|
|
width: 32px !important;
|
|
max-width: 32px !important;
|
|
table-layout: fixed;
|
|
font-size: 11px;
|
|
}
|
|
|
|
#monthSelect
|
|
{
|
|
width: 100px;
|
|
}
|
|
|
|
#yearSelect, #wholeYearSelect
|
|
{
|
|
width: 50px;
|
|
}
|
|
|