phc/problemi
6
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tasti per modificare lo stato di una soluzione e dettagli estetici

Browse Source
This commit is contained in:
aziis98
2022-11-18 02:32:28 +01:00
parent 9dd5a259ae
commit ea3b7aeecf
7 changed files with 183 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/styles/main.scss
+112 -13
View File
@@ -35,7 +35,7 @@ textarea {
padding: 1rem;
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
border-radius: 0.25rem;
background: #ffffff;
}
@@ -52,13 +52,13 @@ input[type='text'] {
padding: 0.5rem;
box-shadow: -2px 4px 4px 0 #00000020;
box-shadow: -2px 4px 4px 0 #00000010;
border-radius: 0.25rem;
background: #ffffff;
font-family: 'Lato';
font-weight: 400;
font-size: 18px;
font-size: 16px;
color: #555;
}
@@ -74,7 +74,7 @@ input[type='text'] {
color: #555;
border: 1px solid #c8c8c8;
padding: 0 0.5rem;
padding: 0;
margin: 0;
box-shadow: -2px 2px 16px 0 #00000010;
@@ -94,7 +94,9 @@ input[type='text'] {
appearance: none;
padding: 0.5rem 0;
transform: translate(0, -0.0625rem);
padding: 0.35rem 0 0.35rem 0.35rem;
margin: 0;
border: none;
outline: none;
@@ -105,6 +107,16 @@ input[type='text'] {
font-size: 16px;
color: #555;
}
.material-symbols-outlined {
display: grid;
place-content: center;
width: 1.75rem;
height: 1.75rem;
transform: translate(0, 0.0625rem);
}
}
button {
@@ -130,6 +142,34 @@ button {
box-shadow: -2px 2px 20px 0 #00000010;
background: linear-gradient(180deg, #fff, #ededed 20%, #e8e8e8 90%, #c0c0c0);
}
&.compact {
padding: 0.35rem;
font-size: 15px;
}
&:disabled {
cursor: default;
opacity: 0.6;
filter: grayscale(1);
&:hover {
border: 1px solid #c8c8c8;
box-shadow: -2px 2px 16px 0 #00000010;
background: linear-gradient(180deg, #f0f0f0, #e8e8e8 20%, #e0e0e0 90%, #cdcdcd);
}
}
&.icon {
padding: 0.25rem;
display: grid;
place-content: center;
.material-symbols-outlined {
font-size: 20px;
}
}
}
.link,
@@ -234,6 +274,14 @@ main {
.subtitle {
font-size: 22px;
}
.fill-main {
display: flex;
gap: 0.5rem;
width: 100%;
max-width: 80ch;
}
}
main.page-home {
@@ -270,7 +318,14 @@ main.page-problem {
// Components
//
details {
width: 100%;
max-width: 80ch;
}
.solution-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
@@ -305,7 +360,7 @@ header {
align-items: center;
.nav-item {
font-size: 24px;
font-size: 20px;
font-weight: 300;
a.active {
@@ -325,12 +380,12 @@ header {
max-width: 80ch;
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
border-radius: 0.5rem;
background: #ffffff;
display: grid;
grid-template-rows: auto 1fr auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
.problem-header {
@@ -356,16 +411,26 @@ header {
.solution {
padding: 1rem;
width: 100%;
max-width: 80ch;
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
border-radius: 0.5rem;
background: #ffffff;
display: grid;
grid-template-rows: auto 1fr;
display: flex;
flex-direction: column;
gap: 0.5rem;
&.correct {
// background: hsl(120, 100%, 90%);
box-shadow: 0 0 12px 2px #00990030, 0 0 1px 1px #00330030;
}
&.wrong {
// background: hsl(0, 100%, 90%);
box-shadow: 0 0 12px 2px #99000030, 0 0 1px 1px #33000030;
}
.solution-header {
display: grid;
grid-template-columns: auto;
@@ -377,6 +442,40 @@ header {
.solution-content {
@extend .text-body;
}
.solution-footer {
display: flex;
justify-content: end;
font-size: 16px;
.label {
font-weight: 400;
}
.row {
display: flex;
gap: 0.5rem;
align-items: center;
}
.pending {
color: #1653a3;
font-style: italic;
}
.correct {
color: green;
// font-weight: 400;
}
.wrong {
color: darkred;
// font-weight: 400;
}
.status-label {
text-align: right;
}
}
}
.form {
@@ -450,7 +549,7 @@ header {
padding: 1rem;
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
border-radius: 0.25rem;
background: #ffffff;
}