104 lines
1.8 KiB
CSS
104 lines
1.8 KiB
CSS
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
font-family: "Times New Roman", Times, serif;
|
|
}
|
|
|
|
:root {
|
|
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
--accent-color: #3d5afe;
|
|
--secondary-color: #ffac2e;
|
|
--text-color: 34, 34, 34;
|
|
--foreground-color: 252, 253, 255;
|
|
--background-color: 241, 243, 248;
|
|
--danger-color: rgb(255, 75, 75);
|
|
--green: #1cad59;
|
|
--yellow: rgb(220, 165, 0);
|
|
color: rgba(var(--text-color), 1);
|
|
background-color: rgba(var(--background-color), 1);
|
|
}
|
|
|
|
body[data-theme=dark] {
|
|
--accent-color: #92a2ff;
|
|
--secondary-color: #d60739;
|
|
--text-color: 200, 200, 200;
|
|
--foreground-color: 27, 28, 29;
|
|
--background-color: 21, 22, 22;
|
|
--danger-color: rgb(255, 106, 106);
|
|
--green: #00e676;
|
|
--yellow: rgb(255, 213, 5);
|
|
}
|
|
body[data-theme=dark] ::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
}
|
|
|
|
button {
|
|
padding: 1rem;
|
|
font-size: inherit;
|
|
background-color: var(--accent-color);
|
|
border: none;
|
|
border-radius: 0.3rem;
|
|
color: white;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=date] {
|
|
padding: 1rem 0.8rem;
|
|
font-size: inherit;
|
|
background-color: rgba(var(--text-color), 0.06);
|
|
border: none;
|
|
border-radius: 0.3rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#details {
|
|
align-content: flex-start;
|
|
padding: 1.5rem;
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
#details * {
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
#cert_sec {
|
|
padding: 1.5rem;
|
|
font-family: "intern";
|
|
}
|
|
|
|
#issued_cert_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.cert-card {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
background-color: rgba(var(--text-color), 0.06);
|
|
border-radius: 0.5rem;
|
|
}
|
|
.cert-card h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
.cert-card > * {
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
#main {
|
|
display: grid;
|
|
}
|
|
} |