diff options
Diffstat (limited to 'cockpit.css')
| -rw-r--r-- | cockpit.css | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/cockpit.css b/cockpit.css new file mode 100644 index 0000000..5e020a6 --- /dev/null +++ b/cockpit.css @@ -0,0 +1,232 @@ +#student-selection-container { + margin: 0.2rem; +} + +#student-selection-search-container { + position: relative; +} + +#student-selection { + box-sizing: border-box; + width: 100%; + padding: 0.75rem 2.5rem 0.75rem 1rem; + margin-bottom: 1.5rem; + border: 1px solid #ddd; + border-radius: 5pt; + font-size: 1.5rem; +} + +#student-selection-clear { + position: absolute; + right: 0.75rem; + transform: translateY(-175%); + border: none; + background: transparent; + font-size: 1.875rem; + cursor: pointer; + color: #888; +} + +#student-selection-clear:hover { + color: #333; +} + +#student-selection:focus { + border-color: #0077ff; +} + +#student-selection-loader { + --size: 0.5px; + width: calc(48 * var(--size)); + height: calc(48 * var(--size)); + border: calc(5 * var(--size)) solid black; + border-bottom-color: transparent; + border-radius: 50%; + display: inline; + position: absolute; + top: 20px; + right: 0.75rem; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +#student-selection-list { + list-style: none; +} + +#student-selection-list li { + padding: 0.75rem 1rem; + border-bottom: 1px solid #eee; + cursor: pointer; + transition: background 0.2s; +} + +#student-selection-list li:hover { + background: #f0f8ff; +} + +#student-selection-list li.active { + background: #0077ff; + color: white; +} + +#student-selection-list li > u.student-selection-list-highlight { + font-weight: bold; +} + +#student-selection-noresults { + color: red; + text-align: center; + margin-top: 1rem; +} + +.student-info-banner { + display: flex; +} + +#student-info-icons { + width: 20%; + position: relative; +} + +#student-info-icon { + margin: 0.2rem; + clip-path: circle(); + width: 100%; +} + +#student-level-icon { + width: 30%; + position: absolute; + top: 70%; + left: 70%; + border: solid 1px; + border-radius: 50%; + background: white; +} + +#student-info-name-container { + flex: 50%; + margin: 0.2rem; +} + +#student-info-name { + font-size: 1.2rem; +} + +#student-info-tag { + border-radius: 5pt; + background: gray; + font-size: 0.8rem; + padding: 3pt; + display: none; + width: min-content; +} + +#student-info-coach-container { + margin: 0.2rem; + flex: 0 1 20%; + flex-direction: column; +} + +#student-observation { + margin-left: 2rem; + margin-bottom: 1rem; +} + +.student-info-mid-element { + padding: 5pt; + border: black solid 0.2pt; + border-radius: 5pt; + margin: 0.2rem; + text-align: center; + hyphens: auto; + flex: 1; +} + +.student-info-points { + display: block; + font-size: 2rem; + margin-bottom: 5px; +} + +#student-info-green { + color: green; +} + +#student-info-orange { + color: orange; +} + +#student-info-red { + color: red; +} + +#student-info-level { + font-size: 1.2rem; + display: block; +} + +#student-info-point-reason-container { + margin: 0.2rem; +} + +#student-info-point-reason { + box-sizing: border-box; + padding: 10px; + width: 100%; + font-size: 0.8rem; + letter-spacing: 1px; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #cccccc; +} + +#student-info-point-reason-submit { + position: absolute; + right: 0.75rem; + transform: translateY(-175%); + border: none; + background: transparent; + font-size: 1.875rem; + cursor: pointer; + color: #888; +} + +#student-info-stickers-container { + flex: 70%; +} + +#student-info-bonus-container { + flex: 30%; +} + +.student-info-bottom-element { + padding: 5pt; + border: black solid 0.2pt; + border-radius: 5pt; + margin: 0.2rem; + height: 5rem; +} + +#student-info-bonus-amount { + font-size: 2rem; +} + +.graduation-dropdown > summary { + background: lightgray; + border: black solid 0.2pt; + border-radius: 10px; + padding: 0.25rem; + margin-top: 1rem; + margin-bottom: 1rem; +} |