feat: aggiunte feature per l'admin e cambiamenti stilistici minori
This commit is contained in:
+146
-98
@@ -119,7 +119,15 @@ input[type='text'] {
|
||||
}
|
||||
}
|
||||
|
||||
button, .button {
|
||||
button,
|
||||
.button {
|
||||
// reset link styles
|
||||
text-decoration: none;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
height: 38px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-family: 'Lato';
|
||||
@@ -128,7 +136,7 @@ button, .button {
|
||||
color: #555;
|
||||
|
||||
border: 1px solid #c8c8c8;
|
||||
padding: 0.5rem 2rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
|
||||
box-shadow: -2px 2px 16px 0 #00000010;
|
||||
border-radius: 0.25rem;
|
||||
@@ -170,11 +178,15 @@ button, .button {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.table .cell & {
|
||||
padding: 0.3rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.link,
|
||||
a,
|
||||
a:visited {
|
||||
a:not(.button),
|
||||
a:not(.button):visited {
|
||||
cursor: pointer;
|
||||
|
||||
color: var(--accent);
|
||||
@@ -189,6 +201,11 @@ a:visited {
|
||||
// Typography
|
||||
//
|
||||
|
||||
.mono {
|
||||
font-family: monospace;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -376,16 +393,7 @@ main.page-scores {
|
||||
padding: 1rem;
|
||||
|
||||
.table {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: auto auto auto;
|
||||
|
||||
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
|
||||
// border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
|
||||
user-select: none;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
@@ -393,100 +401,119 @@ main.page-scores {
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.cell {
|
||||
padding: 1rem 2rem;
|
||||
|
||||
gap: 0.5rem;
|
||||
|
||||
border-left: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
&: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;
|
||||
}
|
||||
padding: 1rem 2rem 1rem 1rem;
|
||||
|
||||
&.header {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
|
||||
padding-right: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
|
||||
background: #f0f0f0;
|
||||
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&:not(.header) {
|
||||
user-select: text;
|
||||
|
||||
&:nth-child(3n + 1) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-child(3n + 2),
|
||||
&:nth-child(3n + 3) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3rem;
|
||||
|
||||
transform: translate(0, -1rem);
|
||||
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background: #00000006;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:nth-child(3n + 1) + .cell + .cell::after {
|
||||
background: #00000006;
|
||||
}
|
||||
|
||||
&:nth-child(3n + 2) + .cell::after {
|
||||
background: #00000006;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .table {
|
||||
// display: grid;
|
||||
|
||||
// grid-template-columns: auto auto auto;
|
||||
|
||||
// box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
|
||||
// // border: 1px solid #ddd;
|
||||
// border-radius: 0.5rem;
|
||||
// background: #ffffff;
|
||||
|
||||
// user-select: none;
|
||||
|
||||
// position: relative;
|
||||
|
||||
// .cell {
|
||||
// padding: 1rem 2rem;
|
||||
|
||||
// gap: 0.5rem;
|
||||
|
||||
// border-left: 1px solid #ddd;
|
||||
// border-top: 1px solid #ddd;
|
||||
|
||||
// &: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;
|
||||
// }
|
||||
|
||||
// &:not(.header) {
|
||||
// user-select: text;
|
||||
|
||||
// &:nth-child(3n + 1) {
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
// &:nth-child(3n + 2),
|
||||
// &:nth-child(3n + 3) {
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// &:nth-child(3n + 3) {
|
||||
// &::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// height: 3rem;
|
||||
|
||||
// transform: translate(0, -1rem);
|
||||
|
||||
// pointer-events: none;
|
||||
// background: transparent;
|
||||
// }
|
||||
|
||||
// &:hover::after {
|
||||
// background: #00000006;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// &:nth-child(3n + 1) + .cell + .cell::after {
|
||||
// background: #00000006;
|
||||
// }
|
||||
|
||||
// &:nth-child(3n + 2) + .cell::after {
|
||||
// background: #00000006;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -509,11 +536,17 @@ main.page-scores {
|
||||
overflow: hidden;
|
||||
|
||||
.cell {
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.75rem;
|
||||
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
&.last-col {
|
||||
border-right: none;
|
||||
}
|
||||
@@ -788,16 +821,16 @@ header {
|
||||
|
||||
.form {
|
||||
min-width: 50ch;
|
||||
max-width: 80ch;
|
||||
|
||||
background: #e0e0e0;
|
||||
background: #f0f0f0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
border: 1px solid #c0c0c0;
|
||||
border-radius: 1rem;
|
||||
|
||||
// box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
|
||||
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
padding: 1.5rem 2rem 1rem;
|
||||
gap: 1rem;
|
||||
@@ -864,6 +897,21 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Pages
|
||||
//
|
||||
|
||||
main.page-admin {
|
||||
.users-table {
|
||||
@extend .table;
|
||||
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
|
||||
width: 100%;
|
||||
max-width: 80ch;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile
|
||||
//
|
||||
|
||||
Reference in New Issue
Block a user