diff options
Diffstat (limited to 'cockpit.css')
| -rw-r--r-- | cockpit.css | 228 |
1 files changed, 114 insertions, 114 deletions
diff --git a/cockpit.css b/cockpit.css index 5e020a6..61c4a06 100644 --- a/cockpit.css +++ b/cockpit.css @@ -1,141 +1,141 @@ #student-selection-container { - margin: 0.2rem; + margin: 0.2rem; } #student-selection-search-container { - position: relative; + 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; + 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; + 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; + color: #333; } #student-selection:focus { - border-color: #0077ff; + 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; + --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); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } #student-selection-list { - list-style: none; + list-style: none; } #student-selection-list li { - padding: 0.75rem 1rem; - border-bottom: 1px solid #eee; - cursor: pointer; - transition: background 0.2s; + padding: 0.75rem 1rem; + border-bottom: 1px solid #eee; + cursor: pointer; + transition: background 0.2s; } #student-selection-list li:hover { - background: #f0f8ff; + background: #f0f8ff; } #student-selection-list li.active { - background: #0077ff; - color: white; + background: #0077ff; + color: white; } #student-selection-list li > u.student-selection-list-highlight { - font-weight: bold; + font-weight: bold; } #student-selection-noresults { - color: red; - text-align: center; - margin-top: 1rem; + color: red; + text-align: center; + margin-top: 1rem; } .student-info-banner { - display: flex; + display: flex; } #student-info-icons { - width: 20%; - position: relative; + width: 20%; + position: relative; } #student-info-icon { - margin: 0.2rem; - clip-path: circle(); - width: 100%; + 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; + 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; + flex: 50%; + margin: 0.2rem; } #student-info-name { - font-size: 1.2rem; + font-size: 1.2rem; } #student-info-tag { - border-radius: 5pt; - background: gray; - font-size: 0.8rem; - padding: 3pt; - display: none; - width: min-content; + 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; + margin: 0.2rem; + flex: 0 1 20%; + flex-direction: column; } #student-observation { @@ -144,82 +144,82 @@ } .student-info-mid-element { - padding: 5pt; - border: black solid 0.2pt; - border-radius: 5pt; - margin: 0.2rem; - text-align: center; - hyphens: auto; - flex: 1; + 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; + display: block; + font-size: 2rem; + margin-bottom: 5px; } #student-info-green { - color: green; + color: green; } #student-info-orange { - color: orange; + color: orange; } #student-info-red { - color: red; + color: red; } #student-info-level { - font-size: 1.2rem; - display: block; + font-size: 1.2rem; + display: block; } #student-info-point-reason-container { - margin: 0.2rem; + 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; + 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; + 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%; + flex: 70%; } #student-info-bonus-container { - flex: 30%; + flex: 30%; } .student-info-bottom-element { - padding: 5pt; - border: black solid 0.2pt; - border-radius: 5pt; - margin: 0.2rem; - height: 5rem; + padding: 5pt; + border: black solid 0.2pt; + border-radius: 5pt; + margin: 0.2rem; + height: 5rem; } #student-info-bonus-amount { - font-size: 2rem; + font-size: 2rem; } .graduation-dropdown > summary { |