.calendar { z-index: 1; position: absolute; background-color: #EEEEEE; border: 2px solid #444444; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); font-weight: normal; color: black; } .calendar .month { padding: 5px; background-color: #444444; text-align: center; font-weight: bold; color: white; } .calendar .month .back, .calendar .month .next { cursor: pointer; } .calendar .month .back:hover, .calendar .month .next:hover { color: yellow; } .calendar .month .back { float: left; } .calendar .month .next { float: right; } .calendar .grid { border-collapse: collapse; } .calendar .grid .day, .calendar .grid .dateCell { width: 20px; height: 20px; line-height: 20px; border: none; text-align: center; } .calendar .grid .dateCell { cursor: pointer; } .calendar .grid .dateCell.out { color: #AAAAAA; } .calendar .grid .dateCell.selected { background-color: #444444; color: white; } .calendar .grid .dateCell.today { border: 1px solid #444444; font-weight: bold; } .calendar .grid .dateCell:hover { background-color: yellow; font-weight: bold; color: black; }
.clock { z-index: 1; position: absolute; width: 150px; height: 150px; background-color: #EEEEEE; border: 2px solid #444444; border-radius: 100%; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); font-weight: normal; color: black; } .clock .title { font-size: 20px; font-weight: bold; } .clock .selected { padding: 5px; background-color: #444444; border-radius: 100%; color: white; font-weight: bold; }
#grid .grid { border-collapse: separate; border-spacing: 0; width: 100%; } #grid .grid td, #grid .grid th { border: 1px solid grey; border-top: 0; border-left: 0; } #grid .grid tr:first-of-type th { font-size: 14px; } #grid .grid tr th:first-of-type { width: 60px; font-size: 10px; } #grid .grid tr:not(:nth-child(6n+2)) th:first-child { color: #DDDDDD; } #grid .grid tr:nth-child(6n+1) > * { border-bottom: 2px solid black; } #grid .grid .box { cursor: cell; position: relative; height: 15px; line-height: 15px; background-color: none; } #grid.spoted .box { cursor: not-allowed; } #grid .grid .box.drag { border-left: 2px dashed red; border-right: 2px dashed red; } #grid .grid .box.drag:first-of-type { border-top: 2px dashed red; } #grid .grid .box.drag:last-of-type { border-bottom: 2px dashed red; } #grid .grid .spot { position: absolute; } #grid .grid .spot .content { cursor: pointer; cursor: hand; cursor: -webkit-grab; cursor: grab; cursor: move; display: block; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background-color: #EDEDED; border: 2px solid black; border-radius: 5px; color: black; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); } #grid .grid .spot.locked .content { cursor: default; cursor: not-allowed; background-image: url('images/tint.png'); } #grid .grid .spot .title { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; background-color: black; border-radius: 5px 5px 0 0; color: white; text-align: center; font-size: 10px; } #grid .grid .spot .description { position: absolute; top: 50%; bottom: 0; left: 0; right: 0; overflow: hidden; text-align: center; font-size: 12px; } #grid .grid .spot .lock { cursor: pointer; position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; background-image: url('images/lock_icon_open.png'); background-repeat: no-repeat; } #grid .grid .spot.locked { z-index: 1; opacity: 0.5; } #grid .grid .spot.locked .lock { background-image: url('images/lock_icon_close.png'); } #grid .grid .spot.dragged { }
.help { position: relative; padding: 10px; background-color: #FFFFCC; border: 2px solid #FFFF88; border-radius: 20px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); width: 200px; font-size: 12px; font-family: Tahoma; font-weight: normal; color: black; } .help li { margin: 5px 0 5px 20px; } .help li:first-of-type { margin-top: 20px; } .help .close { cursor: pointer; position: absolute; right: 20px; } .help .close:hover { color: red; } .items .help { border-top-left-radius: 0; margin-left: 30px; width: 150px; } body > .help:first-of-type { position: absolute; left: 33%; top: 64px; } body > .help:nth-of-type(2) { position: absolute; bottom: 64px; right: 96px; border-bottom-right-radius: 0; }
* { margin: 0; padding: 0; } body { overflow: hidden; font-family: Arial; font-weight: bold; font-size: 12px; } a { cursor: pointer; text-decoration: none; color: inherit; } input, textarea, select { background: none; border: none; box-shadow: none; font-family: Arial; font-weight: bold; font-size: 12px; } input:focus, textarea:focus, select:focus { background-color: white; } input[type=button] { cursor: pointer; } input[type=button]:hover { transform: scale(1.1); } #loading { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: grey; } #loadingBar { position: absolute; top: 50%; left: 50%; width: 10em; transform: translate(-50%, -50%); background-color: black; border: 1px solid black; } #loadingBarText { position: relative; z-index: 2; padding: 0.25em 0.5em; color: white; font-size: 2em; text-align: center; } #loadingBarProgress { position: absolute; top: 0; left: 0; bottom: 0; background-color: blue; } body.loading #loading { cursor: progress; z-index: 10; display: block; opacity: 0.5; } #header { z-index: 2; position: absolute; top: -40px; left: 0; right: 0; height: 30px; background: linear-gradient(black, #222222, black); border-bottom: 2px solid black; line-height: 30px; color: white; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); } #header .title { cursor: default; position: absolute; width: 90px; height: 30px; background-image: url('images/slotit_logo.png'); color: transparent; } #header .subtitle { position: absolute; left: 100px; } #period { position: relative; margin: 3px auto; width: 24px; height: 24px; background-image: url('images/calendar_icon.png'); background-repeat: no-repeat; } #periodStart, #periodStop { cursor: default; cursor: pointer; position: absolute; top: 2px; width: 100px; height: 20px; background-color: #DDDDDD; border-radius: 5px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; line-height: 20px; color: black; } #periodStart { text-align: center; right: 30px; } #periodStop { text-align: center; left: 30px; } #periodStartHour, #periodStopHour { cursor: default; cursor: pointer; position: absolute; top: 2px; line-height: 20px; color: white; } #periodStartHour::after, #periodStopHour::after { content: 'h'; } #periodStartHour { text-align: center; right: 135px; } #periodStopHour { text-align: center; left: 135px; } #user { position: absolute; top: 0; right: 5px; padding-right: 24px; } #user .exit { position: absolute; top: 3px; right: 0; width: 24px; height: 24px; background-image: url('images/door_icon.png'); } #user .exit:hover { filter: drop-shadow(2px 2px 4px yellow); } #pageNav { z-index: 1; position: absolute; top: 32px; left: -350px; bottom: 0; width: 300px; overflow: hidden; background-color: #BBBBBB; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } #page { position: absolute; top: 32px; left: 300px; right: 0; bottom: 0; padding: 10px; overflow-x: hidden; overflow-y: auto; }
.item { position: relative; } .item .itemBox { cursor: pointer; cursor: hand; cursor: -webkit-grab; cursor: grab; background-color: #BBBBBB; } .item.expanded > .itemBox { padding: 10px; background-color: #DDDDDD; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5) inset ; } .item.drag > .itemBox { background-color: #BBBBFF; border: 2px dashed #444488; } .item .header, .item.expanded > .itemBox > .header:hover { background: none; border-bottom: 1px solid #DDDDDD; } .item .header:hover { background-color: #EEEEEE; } .item .sub_items_info { position: absolute; top: 0; right: 0; color: grey; } .item.expanded > .itemBox > .header > .sub_items_info { top: 10px; right: 10px; } .item .title { pointer-events: none; color: #444444; } .item.expanded > .itemBox > .header > .title { pointer-events: auto; color: black; } .item .content { position: relative; display: none; padding: 10px; } .item.expanded > .itemBox > .content { display: block; } .item .del_button { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; background-image: url('images/trash_icon.png'); } .item .del_button:hover { filter: drop-shadow(2px 2px 4px red); } .item .content > label, .item .type > label { display: block; margin: 5px 0 2px 0; color: grey; } .item .type, .item .description, .item .tags, .item .adds { display: block; color: black; } .item .description { width: 100%; border: 1px dashed grey; } .item .tag { cursor: pointer; } .item .tag:hover { text-decoration: line-through; } .item > .sub_items { margin-left: 20px; }
#loginMask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#EEEEEE, #CCCCCC); } #loginMask form { position: absolute; top: 30%; left: 40%; right: 40%; bottom: 50%; text-align: center; } #loginMask form input { display: block; width: 100%; height: 20%; margin-bottom: 5%; background-color: white; border: none; border-radius: 10px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) inset; text-indent: 5%; } #loginMask form input[type=button] { cursor: pointer; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); text-indent: 0; } #loginMask form input[type=button]:hover { box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5); }
#pageNav > .items { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 5px; overflow-x: hidden; overflow-y: auto; } #pageNav > .items .add_button { display: block; position: relative; font-size: 24px; }
#infos { position: fixed; top: 64px; right: 32px; } #toolBox { position: fixed; bottom: 0; right: 32px; } #toolBox .button, #infos > * { cursor: pointer; display: block; margin: 5px auto; padding: 4px; background: linear-gradient(90deg, #CCCCCC, white, #CCCCCC); border: 3px solid black; border-radius: 100%; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); font-size: 14px; text-align: center; } #toolBox .button:hover { background: linear-gradient(90deg, #CCCCCC, #888888, #CCCCCC); } #infos > * { cursor: default; background: radial-gradient(white, #CCCCCC); } #resultsCount { display: none; width: 32px; height: 32px; line-height: 21px; background: radial-gradient(#00CCFF, #0088CC); font-size: 20px; color: white; } #resultsCount .total { display: block; line-height: 11px; vertical-align: sub; font-size: 10px; } #toolBox > * > .button { margin: 0 auto; border-top: none; border-bottom: none; border-radius: 0; border-bottom: 1px solid grey; } #toolBox > * > .button:first-of-type { border-top: 3px solid black; border-radius: 100% 100% 0 0; } #toolBox > * > .button:last-of-type { margin-bottom: 5px; border-bottom: 3px solid black; border-radius: 0 0 100% 100%; } #toolBox .button.rate { width: 16px; height: 16px; } #toolBox .button.side { width: 12px; height: 12px; } #toolBox .button.generate { width: 32px; height: 32px; background-color: #CCFFCC; background-image: url('images/reload_icon.png'); background-repeat: no-repeat; background-position: center center; } #toolBox .button.generate:hover { background-color: #00CC00; } #toolBox .button.clear { width: 16px; height: 16px; background-color: #FFCCCC; background-image: url('images/trash_icon.png'); background-repeat: no-repeat; background-position: center center; } #toolBox .button.clear:hover { background-color: #FF0000; }