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

feat: ora funge decentemente anche su mobile

Browse Source
This commit is contained in:
aziis98
2023-01-05 15:24:36 +01:00
parent 19541630fc
commit 5ffa1b4cb1
2 changed files with 133 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/styles/main.scss
+88 -66
View File
@@ -348,94 +348,116 @@ main.page-problem {
}
main.page-scores {
.table {
display: grid;
grid-template-columns: auto auto auto;
.scrollable {
display: flex;
overflow: auto;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border: 1px solid #ddd;
border-radius: 0.5rem;
background: #ffffff;
max-width: 100%;
padding: 1rem;
user-select: none;
.icon {
cursor: pointer;
.table {
display: grid;
place-content: center;
}
overflow: hidden;
grid-template-columns: auto auto auto;
position: relative;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
// border: 1px solid #ddd;
border-radius: 0.5rem;
background: #ffffff;
.cell {
padding: 1rem 1rem 1rem 2rem;
user-select: none;
gap: 0.5rem;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
&:nth-child(3n + 1) {
border-left: none;
.icon {
cursor: pointer;
display: grid;
place-content: center;
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
border-top: none;
}
position: relative;
&.header {
font-weight: 400;
font-size: 22px;
.cell {
padding: 1rem 2rem;
background: #f0f0f0;
gap: 0.5rem;
display: flex;
align-items: center;
text-align: center;
justify-content: space-between;
}
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
&:not(.header) {
user-select: text;
&:nth-child(3n + 1) {
text-align: left;
}
&:nth-child(3n + 2),
&:nth-child(3n + 3) {
border-right: 1px solid #ddd;
}
&:nth-last-child(1),
&:nth-last-child(2),
&:nth-last-child(3) {
border-bottom: 1px solid #ddd;
}
&:first-child {
border-top-left-radius: 0.5rem;
}
&:nth-child(3) {
border-top-right-radius: 0.5rem;
}
&:nth-last-child(3) {
border-bottom-left-radius: 0.5rem;
}
&:last-child {
border-bottom-right-radius: 0.5rem;
}
&.header {
font-weight: 400;
font-size: 22px;
padding-right: 1rem;
background: #f0f0f0;
display: flex;
align-items: center;
text-align: center;
justify-content: space-between;
}
&:nth-child(3n + 3) {
&::after {
content: '';
position: absolute;
&:not(.header) {
user-select: text;
left: 0;
right: 0;
height: 3rem;
transform: translate(0, -1rem);
pointer-events: none;
background: transparent;
&:nth-child(3n + 1) {
text-align: left;
}
&:nth-child(3n + 2),
&:nth-child(3n + 3) {
text-align: center;
}
&:hover::after {
background: #00000006;
}
}
&:nth-child(3n + 3) {
&::after {
content: '';
position: absolute;
&:hover {
&:nth-child(3n + 1) + .cell + .cell::after {
background: #00000006;
left: 0;
right: 0;
height: 3rem;
transform: translate(0, -1rem);
pointer-events: none;
background: transparent;
}
&:hover::after {
background: #00000006;
}
}
&:nth-child(3n + 2) + .cell::after {
background: #00000006;
&:hover {
&:nth-child(3n + 1) + .cell + .cell::after {
background: #00000006;
}
&:nth-child(3n + 2) + .cell::after {
background: #00000006;
}
}
}
}