src/styles/main.css
:root {
/* --toastTime: 5000ms; */
--easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--background-color: #dce0e0;
}
*,
*::before,
*::after {
font-family: 'Nunito', 'Quicksand', 'Roboto', -apple-system, system, system-ui,
sans-serif;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
body {
font-family: 'Nunito', 'Quicksand', 'Roboto', -apple-system, system, system-ui,
sans-serif;
margin: 0;
color: #444;
background-color: var(--background-color);
text-align: center;
}
p {
margin: 0.5em auto 0.5em;
}
button {
border: none;
outline: none;
background-color: transparent;
font-size: 1em;
margin: 0;
padding: 0;
cursor: pointer;
user-select: none;
transition: transform 150ms var(--easing-bounce);
appearance: none;
-webkit-appearance: none;
}
button:hover,
[type='submit']:hover {
transform: scale(1.15);
}
button:active,
[type='submit']:active {
transform: scale(0.85);
outline: none;
}
button:focus:not(:active),
[type='submit']:focus:not(:active) {
transform: scale(1.1);
outline: none;
}
[type='submit'] {
appearance: none;
-webkit-appearance: none;
border: none;
outline: none;
font-size: 1em;
margin: 0;
cursor: pointer;
user-select: none;
transition: transform 150ms var(--easing-bounce);
}
::selection {
background-color: #f0ff7a;
}
svg {
fill: currentColor;
}
em {
font-style: normal;
position: relative;
}
em::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -4px;
right: -4px;
background-color: #1b9f64;
opacity: 0.333;
/* z-index: -1; */
border-radius: 2px;
font-style: normal;
}
/* label{
cursor: pointer;
} */
#top-bar {
position: fixed;
top: 0;
left: 0;
background-color: #1b9f64;
color: #fff;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.6);
height: 3em;
user-select: none;
z-index: 5;
}
#top-bar img {
height: 1.5em;
}
#top-bar button {
height: 3em;
padding: 0.75em;
}
#profile-topbar {
border-radius: 50%;
height: 1.75em;
}
#top-bar > h1 {
margin: 0;
font-weight: normal;
font-size: 1.75em;
}
.screen {
margin-top: 3em;
}
.dashboard {
padding: 0.5em;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 70em;
margin: 0 auto;
}
.focus-animation-loop {
animation: rubberBand 2.5s infinite;
}
@keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
12% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
16% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
20% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
26% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
30% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
40% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.subject-card {
position: relative;
box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4);
background-color: #fff;
margin: 0.5em;
border-radius: 0.3em;
padding: 1em;
max-width: 25em;
flex-basis: 17.5em;
flex-grow: 1;
text-align: center;
user-select: none;
transition: box-shadow 200ms ease-out, transform 300ms ease-out;
/* height: 9em; */
cursor: pointer;
animation: fadeIn 500ms ease-out;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
line-height: 1;
}
.subject-card:hover {
box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.4);
}
.subject-card-remove {
opacity: 0;
transform: scale(0.5) translate(2.25em, 2.25em) rotate(45deg);
position: absolute;
top: -1.25em;
left: -1.25em;
height: 2.5em;
width: 2.5em;
border-radius: 50%;
background-color: #6a7fdb;
box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.4);
color: #fff;
transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.subject-card-remove > img {
height: 1.25em;
margin-bottom: -0.25em;
}
.subject-card-remove:hover {
transition: transform 100ms cubic-bezier(0.215, 0.61, 0.355, 1) !important;
transform: scale(1.2) !important;
animation: tada 1.15s;
}
.subject-card-remove:focus {
transform: scale(1.1);
}
.subject-card-remove:active {
transition: transform 100ms cubic-bezier(0.215, 0.61, 0.355, 1) !important;
transform: scale(0.8) !important;
}
.subject-card:hover .subject-card-remove {
opacity: 1;
transform: scale(1);
}
.subject-card-info {
position: absolute;
top: 0.75em;
right: 0.75em;
height: 1em;
width: 1em;
border-radius: 50%;
opacity: 0.25;
/* background-color: #fff;
box-shadow: 0 0 0.5em 0.25em rgba(255, 255, 255, 1); */
transition: transform 275ms cubic-bezier(0.18, 0.89, 0.46, 1.79),
opacity 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.subject-card-info > img {
height: 100%;
}
.subject-card-info:hover {
transform: scale(1.2) rotate(22.5deg);
opacity: 0.5;
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -6deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, 6deg);
}
40%,
60%,
80% {
transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -6deg);
}
to {
transform: scale3d(1.2, 1.2, 1.2);
}
}
.subject-card > h2 {
margin: 0 0.25em;
font-size: 2.5em;
font-weight: normal;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
.subject-card > p {
font-weight: bold;
font-size: 3em;
margin: 0;
display: inline-block;
vertical-align: middle;
}
.collapsed-sc {
height: 9em;
}
.expanded-sc {
height: auto;
}
.subject-bar {
display: flex;
justify-content: space-between;
border-radius: 0.5em;
background-color: #ddd;
color: #666;
margin-top: 1em;
line-height: 1;
}
.subject-bar > div {
flex-grow: 1;
width: 0;
/* Not sure about the width */
border-right: solid medium #fff;
overflow: hidden;
text-align: center;
padding: 0.5em 0;
cursor: pointer;
transition: background-color 200ms ease-out, color 200ms ease-out;
}
.subject-bar :last-child {
border-right: none;
border-radius: 0 0.5em 0.5em 0;
}
.subject-bar :first-child {
border-radius: 0.5em 0 0 0.5em;
}
.subject-bar > div > div {
margin-top: 0.5em;
font-weight: bold;
}
.scolN,
.scolN2 {
background-color: #eee !important;
color: #333 !important;
}
.scol1 {
background-color: #4584ad;
color: white;
}
.scol2 {
background-color: #9464a8;
color: white;
}
.scol3 {
background-color: #65a580;
color: white;
}
.scol4 {
background-color: #c9aa67;
color: white;
}
.scol5 {
background-color: #cf5155;
color: white;
}
.scol6 {
background-color: #e29a28;
color: white;
}
.scol7 {
background-color: #444;
color: white;
}
.scol8 {
background-color: #33aab9;
color: white;
}
.scol0 {
background: conic-gradient(#14ffe9, #ffeb3d, #ff00e0, #14ffe9);
color: white;
}
.subject-action-bar {
border-top: solid thin #ccc;
margin-top: 1em;
display: flex;
justify-content: space-between;
}
.subject-action-bar img {
height: 2em;
padding: 1em;
margin-bottom: -1em;
}
.hidden {
transform: scaleY(0);
}
.grades-input {
transition: all 200ms ease-out;
transform-origin: center top;
text-align: left;
}
.grades-input > div {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.grades-input > div > div {
display: flex;
align-items: center;
flex-grow: 1;
flex-basis: 6em;
margin: 0.25em 0;
}
.grades-input h3 {
margin: 1em 0 0;
display: inline-block;
}
.grades-input > span {
display: inline-block;
font-size: 0.75em;
color: #888;
font-weight: bold;
}
.grades-input span {
margin: 0 0.5em;
}
input[type='text']::placeholder,
input[type='number']::placeholder {
color: #666;
opacity: 1;
}
input[type='text'],
input[type='number'] {
font-size: 1em;
border: none;
border-radius: 0.5em;
padding: 0.5em 0;
height: 2em;
line-height: 1;
width: 3em;
text-align: center;
vertical-align: middle;
border: solid;
border-width: 0;
outline: none;
transition: border 300ms ease-out, background-color 200ms ease-out,
color 200ms ease-out;
appearance: none;
-webkit-appearance: none;
}
input[type='text']:invalid,
input[type='number']:invalid {
border: solid 0.2em#cf5155;
}
input[type='text']:focus:not(:invalid),
input[type='number']:focus:not(:invalid) {
border: solid 0.2em #444;
}
.grades-input input {
flex-grow: 1;
}
.evaluation-select {
border-top: solid thin #bbb;
justify-content: center !important;
align-items: center;
margin-top: 1em;
padding-top: 1em;
}
.evaluation-select span {
margin-right: 0.5em;
}
/* .blur-bottom{
position: relative;
}
.blur-bottom::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1em;
background: linear-gradient(to bottom, transparent, #fff);
opacity: 0.9;
z-index: 1;
border-radius: 0 0 1em 1em;
} */
.subjects-search-results {
list-style: none;
margin: 0;
padding: 0;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
border-radius: 1em;
position: relative;
}
.subjects-search-results:not(:empty) {
margin-bottom: 3rem;
}
.subjects-search-results:not(:empty)::after {
content: '';
background: url(../media/search-by-algolia-light-background.svg) no-repeat
center;
width: 100%;
height: 2rem;
margin: 0 auto;
display: block;
position: absolute;
top: calc(100% + 0.5rem);
opacity: 0.75;
background-size: 8rem;
}
.searchResult {
display: flex;
align-items: center;
border-bottom: solid 1px #ddd;
margin: 0;
}
.searchResult:last-child {
border-bottom: none;
}
.searchResultCheck {
margin: 1em;
height: 1.5em;
width: 1.5em;
background-color: #eee;
border-radius: 100%;
box-sizing: content-box;
border: solid 4px #aaa;
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: border-color 200ms linear;
}
.searchResult input:checked ~ .searchResultCheck {
border-color: #209d64;
}
.searchResult input:disabled ~ .searchResultCheck {
border-color: #aaa;
}
.searchResult input:disabled ~ .searchResultCheck::after {
border-color: #aaa;
border-right: solid 4px #aaa;
border-bottom: solid 4px #aaa;
}
.searchResult:active input:disabled ~ .searchResultCheck::after {
transform: rotate(130deg) scale(0.75);
opacity: 0.5;
}
.searchResultCheck::after {
content: '';
position: absolute;
top: 3px;
left: 7px;
height: 16px;
width: 10px;
border-right: solid 4px #209d64;
border-bottom: solid 4px #209d64;
transform: rotate(90deg) scale(2);
opacity: 0;
transition: transform 200ms var(--easing-bounce),
opacity 200ms var(--easing-bounce);
}
.subjects-search-results input:checked ~ .searchResultCheck::after {
transform: rotate(40deg) scale(1);
opacity: 1;
}
.searchResultTitle {
flex-grow: 1;
padding: 0.5em 0;
}
.searchResultAction:hover {
transform: scale(1.2) rotate(15deg);
opacity: 0.5;
}
.searchResultAction {
padding: 1em;
height: 1.5em;
width: 1.5em;
box-sizing: content-box;
cursor: pointer;
flex-shrink: 0;
opacity: 0.25;
transition: transform 200ms var(--easing-bounce),
opacity 200ms var(--easing-bounce);
}
.searchResultAction > img {
width: 100%;
height: 100%;
}
/* .searchResultRow1{
} */
.searchResultRow2 {
font-size: 0.8em;
}
/* OLD */
/* #subjects-search-results{
list-style-type: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
max-width: 100%;
}
#subjects-search-results li{
padding: 0.5em 0;
margin: 0.5em 0;
}
#subjects-search-results label:hover{
text-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.4), 0 0 0 0.075em currentColor;
box-shadow: inset 0 0.1em 1.25em rgba(0, 0, 0, 0.4), 0 0 transparent;
}
#subjects-search-results label{
padding: 0.5em 1.5em;
text-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.4);
border-radius: 2em;
line-height: 1;
cursor: pointer;
background-color: #eee;
box-shadow: inset 0 0.1em 0.75em rgba(0, 0, 0, 0.3), 0 0 transparent;
color: #444;
transition: all 150ms ;
}
#subjects-search-results input:checked ~ label{
background-color: #4b9ee2;
box-shadow: 0 0 transparent, 0 0.15em 0.9em rgba(0, 0, 0, 0.4) !important;
color: white;
}
#subjects-search-results input{
margin: 0.75em 0.5em 0.75em 1em;
display: none;
} */
#subject-start-creator,
.popup-content-action {
background-color: #666;
padding: 0.66em 1em;
line-height: 1;
border-radius: 0.4em;
box-shadow: 0 0.1em 0.667em rgba(0, 0, 0, 0.4);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
text-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.4);
color: #fff;
margin-top: 0.5em;
}
#subjects-search-create-div {
margin-top: 2em;
}
#subjects-search-none {
text-align: center;
line-height: 1;
padding: 1.5em 0;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
border-radius: 1em;
}
.popup-content input[type='search'] {
border: none;
outline: none;
background-color: #eee;
border-radius: 0.3em;
padding: 0.6em 1em 0.4em;
font-size: 1em;
line-height: 1;
display: block;
width: 100%;
box-shadow: inset 0 0.125em 1em -0.25em rgba(0, 0, 0, 0.5);
}
.btn-green {
background-color: #1b9f64 !important;
}
.btn-red {
background-color: #cf5155 !important;
}
/* .add-popup > div > div{
display: flex;
justify-content: space-between;
padding: 0;
}
.add-popup > div > div > span{
padding: 0 0.25em;
} */
.popup-round-img-top {
width: 8em;
margin: -40% auto 0.5em;
border-radius: 100%;
box-shadow: 0 0.15em 1.5em rgba(0, 0, 0, 0.5);
}
.user-popup .popup-main-button {
position: absolute;
}
.user-popup {
margin: 4em 0.5em 0.5em;
padding-bottom: 2.5em;
border-radius: 0.3em;
background-color: #fefefe;
box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4);
min-height: auto;
overflow: visible;
width: auto;
}
.user-popup > button {
bottom: -1.5em !important;
}
#tutorial {
padding: 0 2em;
}
#tutorial ul {
list-style-type: none;
padding-left: 0;
margin-top: 0;
}
#tutorial li {
margin: 0.125em 0;
}
#tutorial h3 {
margin: 0.5em 0 0;
}
#tutorial a {
color: #c15100;
text-shadow: 0 0.1em 0 var(--background-color),
-0.0707em 0.0707em 0 var(--background-color),
0.0707em 0.0707em 0 var(--background-color),
0.1em 0 0 var(--background-color), -0.1em 0 0 var(--background-color),
-0.0382em 0.0924em 0 var(--background-color),
0.0382em 0.0924em 0 var(--background-color),
-0.0923em 0.0383em 0 var(--background-color),
0.0923em 0.0383em 0 var(--background-color);
text-decoration: none;
position: relative;
z-index: 1;
}
#tutorial a::before {
content: '';
bottom: 0.15em;
left: -0.1em;
right: -0.1em;
height: 0.2em;
background-color: currentColor;
position: absolute;
border-radius: 10px;
z-index: -1;
}
#toast {
text-align: center;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
user-select: none;
animation: goUp 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
fadeOut 5s 2.5s cubic-bezier(1, 0, 1, 1), opaque 2.5s;
z-index: 99;
}
#toast > div {
border: solid 0.3em #222222;
border-bottom: none;
margin: 0 0.5em;
border-radius: 0.5em 0.5em 0 0;
padding: 0.75em 1em;
z-index: 5;
background-color: #303030;
box-shadow: 0 0.15em 1.25em rgba(0, 0, 0, 0.7);
color: #fff;
}
#toast p {
margin: 0.25em 0.5em;
text-align: center;
display: inline-block;
}
#toast button::after {
content: '';
background-color: #e5f139;
height: 0.1em;
width: 90%;
position: absolute;
bottom: 0;
border-radius: 0.1em;
left: 5%;
}
#toast button {
position: relative;
color: #e5f139 !important;
margin: 0.25em 0.5em;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
display: inline-block;
}
@keyframes goUp {
from {
transform: translateY(100%);
}
to {
transform: none;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes opaque {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes rotateIn {
from {
transform-origin: center;
transform: rotate(60deg);
opacity: 0;
}
to {
transform-origin: center;
transform: rotate(0deg);
opacity: 1;
}
}
/* ----------------- Congratulations -------------------*/
#congratulations-gift:hover {
transform: scale(1.15);
}
#congratulations-button {
cursor: pointer;
text-align: center;
position: relative;
}
#congratulations-gift {
margin: -2em auto;
transform-origin: 50% 66.666%;
transition: transform 200ms var(--easing-bounce);
}
#congratulations {
--video-aspect-ratio: calc(16 / 9);
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: calc(100vw / var(--video-aspect-ratio));
max-height: 50vh;
max-width: calc(50vh * var(--video-aspect-ratio));
margin: 0 auto;
}
/* .rainbow-bg{
background: linear-gradient(0deg,
#ff0000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff,
#ff0000
);
background-size: 100% 100px;
background-repeat: repeat;
animation: rainbow-bg-animation 1s linear infinite;
}
@keyframes rainbow-bg-animation {
0%{background-position-y: 0}
100%{background-position-y: -100px}
} */
/* OLD Congratulations
#congratulations > img{
max-width: calc(100% - 2em);
max-height: 33.33vh;
border-radius: 2em;
margin: 1em;
box-shadow: 0 0.4em 2em rgba(0, 0, 0, 0.6), 0 0em 0.5em rgba(0, 0, 0, 0.7);
transition: transform 150ms var(--easing-bounce);
animation: rotateIn 2s ease-out;
}
#congratulations > img:hover{
transform: scale(1.075);
}
*/
#dashboard-loader {
margin: 1em 0;
cursor: progress;
}
#dashboard-loader p {
margin: 0;
}
.loader {
display: none;
}
.loader-dots {
display: inline-block;
position: relative;
width: 64px;
height: 16px;
}
.loader p {
text-align: center;
}
.loader-dots div {
position: absolute;
top: 3px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #666;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader-dots div:nth-child(1) {
left: 6px;
animation: loader-dot1 0.6s infinite;
}
.loader-dots div:nth-child(2) {
left: 6px;
animation: loader-dot2 0.6s infinite;
}
.loader-dots div:nth-child(3) {
left: 26px;
animation: loader-dot2 0.6s infinite;
}
.loader-dots div:nth-child(4) {
left: 45px;
animation: loader-dot3 0.6s infinite;
}
@keyframes loader-dot1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes loader-dot3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes loader-dot2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}
}
/* -------------------- Edit Subject Popup ------------------ */
.edit-popup input:not([type='submit']):not([type='radio']):not([type='check']) {
width: 100%;
display: block;
background-color: #ddd;
}
/* ------ Basic information ------- */
.edit-popup > div > h2:first-child {
margin-top: 0;
}
.edit-popup-info {
line-height: 1;
display: flex;
flex-wrap: wrap;
margin: -0.5em;
}
.edit-popup-info span > span {
white-space: nowrap;
margin: 0 0.5em;
}
.edit-popup-info > * {
margin: 1em 0.5em;
flex: 1;
}
.edit-popup-info > div > label {
padding: 0 0 0.5em;
display: block;
white-space: nowrap;
}
.edit-fullName {
flex: 5 !important;
}
/* ------ Color ------- */
.color-bar {
display: flex;
justify-content: space-between;
margin: 1em 0;
}
.color-bar > * {
height: 2.5em;
max-width: 2.5em;
flex: 1;
border-radius: 0.5em;
cursor: pointer;
color: white;
flex-wrap: wrap;
}
.color-bar > *:hover .edit-color-checkmark::after {
opacity: 0.5 !important;
}
.color-bar input:checked + .edit-color-checkmark::after {
opacity: 1 !important;
}
.color-bar input:not(:checked) + .edit-color-checkmark::after {
opacity: 0;
}
.edit-color-checkmark {
position: relative;
}
.edit-color-checkmark::after {
content: '';
position: absolute;
left: 0em;
height: 1.75em;
width: 1.25em;
transform: translateX(-50%) rotate(45deg) scale(0.75);
border: solid white;
border-width: 0 0.5em 0.5em 0;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease-out;
}
.edit-color-checkmark-random::after {
content: '?';
font-family: 'Arial Black', Gadget, sans-serif;
transform: none;
border: none;
font-size: 2em;
font-weight: bolder;
top: 0.1em;
left: -0.65em;
line-height: 1;
}
.color-bar input {
display: none;
}
/* --------- Evaluation ---------- */
.edit-popup-grid {
display: grid;
grid-template:
min-content
/ 1fr 3fr min-content 2px;
grid-gap: 0.5em;
grid-auto-columns: 2fr;
grid-auto-rows: min-content;
align-items: end;
overflow: auto;
scroll-behavior: smooth;
padding-bottom: 0.25rem;
}
.edit-popup-grid input {
width: 100%;
}
.edit-popup-grid > * {
transition: opacity 200ms ease-out;
}
.edit-weight {
position: relative;
}
.edit-weight::after {
content: '%';
position: absolute;
top: calc(50% - 0.5em);
bottom: calc(50% - 0.5em);
right: 0.25em;
line-height: 1;
font-size: 1em;
pointer-events: none;
}
.edit-weight input {
padding-right: 1em;
min-width: 3em;
}
.grid-separator-evaluation {
background-color: #bbb;
grid-column: 4;
grid-row: 2 / -1;
border-radius: 10px;
height: 100%;
}
.edit-new-exam,
.edit-new-evaluation {
opacity: 0.3333;
border: none !important;
}
.divider {
height: 1px;
background-color: #aaa;
border-radius: 1px;
margin: 0.5em 0;
}
/* .edit-add{
border-radius: 0.5em;
line-height: 1;
letter-spacing: 0.15em;
text-transform: uppercase;
background: #dedede;
white-space: nowrap;
}
.edit-add-exam{
grid-row: -1;
grid-column: 1/4;
height: 2em;
padding: 0.5em 0;
padding-left: 0.15em;
}
.edit-add-evaluation{
grid-row: 2/-1;
grid-column: -2;
padding: 0 0.5em 0 0.45em;
padding-top: 0.15em;
} */
.edit-popup input[type='number'] {
-moz-appearance: textfield;
}
.edit-popup input::-webkit-outer-spin-button,
.edit-popup input::-webkit-inner-spin-button {
appearance: none;
-webkit-appearance: none;
}
.edit-conditions {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 0.5em;
}
.edit-conditions-label {
padding: 0.3em 0;
text-align: right;
}
.edit-conditions-input:placeholder-shown {
opacity: 0.3333;
}
/* ----------------- Popup -------------------*/
.popup {
width: 100vw;
min-height: 100vh;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.popup-content {
z-index: 2;
position: relative;
width: 100%;
max-width: 25em;
margin: 0.5em;
margin-top: 2.5em;
padding: 1.5em 1.5em 2.5em;
border-radius: 0.3em;
background-color: #fefefe;
box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4);
min-height: auto;
overflow: visible;
max-height: calc(100vh - 6em);
}
.top-bar-popup::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4em;
z-index: -1;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0)
);
box-shadow: none;
border-radius: none;
}
.top-bar-popup {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
width: 100%;
height: 100%;
top: 0;
left: 0;
box-shadow: none;
z-index: 0;
color: #fff;
padding: 0.2em;
text-align: center;
user-select: none;
font-weight: normal;
font-size: 1.75em;
}
.top-bar-popup img {
cursor: pointer;
height: 1.25em;
position: absolute;
left: 0.25em;
}
.popup-main-button {
position: absolute;
bottom: -1.5em;
display: block;
padding: 1em 1.35em 1em 1.5em;
font-weight: bold;
background-color: #1b9f64;
box-shadow: 0 0.15em 1.25em rgba(0, 0, 0, 0.7);
text-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.4);
color: white;
line-height: 1;
letter-spacing: 0.15em;
text-transform: uppercase;
border-radius: 10em;
z-index: 5;
right: 2em;
border: none;
}
.popup-content > div,
.popup-content > form {
scroll-behavior: smooth;
overflow-y: auto;
overflow-x: visible;
max-height: calc(100vh - 6em);
padding: 1.5em;
margin: -1.5em;
}
.edit-popup {
max-width: 40em;
}
.add-popup {
max-width: 30em;
}
@media (max-width: 600px) {
.popup:not(.popup-small) {
position: absolute;
}
.popup:not(.popup-small) .popup-content {
overflow: auto;
scroll-behavior: smooth;
padding: 4em 1.5em 6em;
min-height: 100vh;
max-height: none;
margin: 0;
border-radius: 0;
}
.popup:not(.popup-small) .popup-content > div {
max-height: none;
margin: 0;
padding: 0;
overflow: visible;
}
.popup:not(.popup-small) .top-bar-popup {
position: fixed;
background-color: #1b9f64;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
height: 1.75em;
z-index: 3;
}
.popup:not(.popup-small) .top-bar-popup::before {
display: none;
}
.popup:not(.popup-small) .popup-main-button {
position: fixed;
bottom: 1.5em;
}
.edit-popup {
max-width: none;
}
.add-popup {
max-width: none;
}
}
.popup h2 {
margin: 0.75em 0 0.25em;
line-height: 1;
}
.popup h2:first-child {
margin-top: 0;
}
.popup h3 {
margin: 1em 0 0.5em;
line-height: 1;
text-align: left;
}
.popup p {
text-align: left;
}
.popup li {
text-align: left;
}
.add-popup {
text-align: center;
}
.searchGroupDesc {
margin: 0.5em 0;
display: block;
color: #777;
font-size: 0.9em;
}
.add-popup p {
margin: 0.5em 0 0;
display: block;
color: #777;
font-size: 0.9em;
text-align: center;
}
/* ----------------- Frozen Layer -------------------*/
.frozen-layer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(5px);
color: #333;
z-index: 100;
transition: opacity 1s ease-out;
cursor: loading;
}
.frozen-layer__message {
font-size: 3em;
font-weight: bold;
}
/* .frozen-layer__spinner{
} */
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
/* ----------------- Ad -------------------*/
/* .ad {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 1rem;
z-index: -11;
text-align: center;
opacity: 0;
pointer-events: none;
user-select: none;
animation: ad 61s;
line-height: 1;
}
.ad__text {
color: #888;
font-size: 0.7rem;
display: block;
margin-bottom: 0.2rem;
}
.ad__text--bottom {
margin-top: 0.02rem;
margin-bottom: 0;
}
.screen {
animation: ad-margin 61s;
background: var(--background-color);
position: relative;
}
.screen::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1rem;
z-index: -10;
background: linear-gradient(to bottom, var(--background-color), transparent);
} */
/* Hide in small screens */
/* @media (max-height: 500px){
.ad { display: none !important; animation: none; }
.screen { margin-bottom: 0 !important; animation: none; }
}
@keyframes ad {
0% { opacity: 1; pointer-events: all; user-select: auto; }
98.36% { opacity: 1; pointer-events: all; user-select: auto; }
100% { opacity: 0; pointer-events: all; user-select: auto; }
}
@keyframes ad-margin {
0% { margin-bottom: calc(60px + 4rem); }
98.36% { margin-bottom: calc(60px + 4rem); }
100% { margin-bottom: 0; }
} */
/* ----------------- Next section -------------------*/