forked from phc/website
style changes
This commit is contained in:
+90
-1
@@ -75,7 +75,7 @@ Controls - for things like buttons, input, select
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
min-height: 1.75rem;
|
||||
|
||||
/* @include neo-brutalist-card; */
|
||||
border: 3px solid #222;
|
||||
@@ -89,6 +89,95 @@ Controls - for things like buttons, input, select
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
width: calc(1.5rem + 1px);
|
||||
height: calc(1.5rem + 1px);
|
||||
|
||||
background: #fff;
|
||||
border: 3px solid #222;
|
||||
border-radius: 4px;
|
||||
box-shadow: 3px 3px 0 0 #222;
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 64ms linear;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 4px 4px 0 0 #222;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: #1e6733;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: #1e6733;
|
||||
|
||||
clip-path: polygon(10% 55%, 35% 75%, 85% 25%, 90% 35%, 40% 95%, 5% 60%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2b8b47;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #eee;
|
||||
border-color: #888;
|
||||
box-shadow: 3px 3px 0 0 #888;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: 3px 3px 0 0 #888;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: #aaa;
|
||||
|
||||
&::after {
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.star {
|
||||
&:checked::after {
|
||||
background: rgb(255, 197, 49);
|
||||
clip-path: polygon(
|
||||
50% 0%,
|
||||
61% 35%,
|
||||
98% 35%,
|
||||
68% 57%,
|
||||
79% 91%,
|
||||
50% 70%,
|
||||
21% 91%,
|
||||
32% 57%,
|
||||
2% 35%,
|
||||
39% 35%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
||||
@@ -325,6 +325,38 @@ Custom Page Styles
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.grid-center {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.h-flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.v-flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.h-flex,
|
||||
.v-flex {
|
||||
place-self: stretch;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
> .spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
|
||||
+501
-264
@@ -1,10 +1,116 @@
|
||||
@layer page {
|
||||
:root {
|
||||
--media-pesata-accent: #e4c5ff;
|
||||
--media-pesata-bg: hsl(from var(--media-pesata-accent) h s 95%);
|
||||
|
||||
--media-pesata-accent-2: #ffe4c5;
|
||||
--media-pesata-accent-3: #c5ffe4;
|
||||
|
||||
--card-base: var(--media-pesata-accent);
|
||||
}
|
||||
|
||||
main {
|
||||
justify-self: center;
|
||||
background: var(--media-pesata-bg);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 4.5rem 3rem;
|
||||
gap: 4.5rem;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 3rem 1rem;
|
||||
gap: 3rem;
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-pesata-container {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
align-content: start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
|
||||
padding: 0.25rem 1rem;
|
||||
gap: 0.5rem;
|
||||
font-size: 16px;
|
||||
|
||||
border: 2px solid #222;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
|
||||
transition: all 64ms linear;
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 #222;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 #222;
|
||||
}
|
||||
}
|
||||
|
||||
.media-pesata-app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: var(--homepage-whatsphc-bg);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(7, auto);
|
||||
|
||||
align-items: start;
|
||||
gap: 2rem;
|
||||
|
||||
> .wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 0;
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media-pesata-title {
|
||||
@@ -24,70 +130,120 @@
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.student-type-selector h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
/* .radio-group {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 600;
|
||||
transition: all 64ms linear;
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
label:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
label:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
accent-color: #007bff;
|
||||
}
|
||||
} */
|
||||
|
||||
.compound-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border: 3px solid #222;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 600;
|
||||
transition: all 64ms linear;
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
box-shadow: 4px 4px 0 0 #222;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
|
||||
.radio-group label:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 0.5rem;
|
||||
|
||||
.radio-group label:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 3px solid #222;
|
||||
}
|
||||
|
||||
.radio-group input[type='radio'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
accent-color: #007bff;
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: hsl(from var(--media-pesata-accent) h s 75%);
|
||||
color: #f4fef7;
|
||||
|
||||
&:hover {
|
||||
background: hsl(from var(--media-pesata-accent) h s 85%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(from var(--media-pesata-accent) h s 95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Counter CFU */
|
||||
.cfu-counter {
|
||||
background: var(--project-card-bg);
|
||||
background: hsl(from var(--media-pesata-accent-2) h s 75%);
|
||||
border: var(--border-large);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cfu-counter.error {
|
||||
background: #fee;
|
||||
border-color: #dc3545;
|
||||
&.error {
|
||||
background: #ffd8d8;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
}
|
||||
|
||||
.cfu-counter h3 {
|
||||
@@ -119,14 +275,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Layout principale */
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -151,75 +299,97 @@
|
||||
}
|
||||
|
||||
.course-category {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Rimozione del vecchio stile per h3 che causava il rettangolo blu */
|
||||
|
||||
.course-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.course-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 64ms linear;
|
||||
text-align: left;
|
||||
font-family: var(--font-secondary);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
> button {
|
||||
padding: 0.25rem 0.75rem 0.25rem 0.5rem;
|
||||
font-size: 20px;
|
||||
|
||||
.course-button:hover:not(:disabled) {
|
||||
background: var(--homepage-projects-bg);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
place-content: stretch;
|
||||
place-items: stretch;
|
||||
}
|
||||
|
||||
.course-button:active:not(:disabled) {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
.course-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 0.5rem;
|
||||
|
||||
.course-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
padding: 0.25rem;
|
||||
|
||||
.course-button.selected {
|
||||
background: var(--guide-base);
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
border-radius: 0.25rem;
|
||||
overflow-y: auto;
|
||||
max-height: 50vh;
|
||||
|
||||
.course-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--palette-black);
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.course-cfu {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
font-family: var(--font-mono);
|
||||
/* bottom linear gradient for scroll */
|
||||
&::after {
|
||||
content: '';
|
||||
position: sticky;
|
||||
bottom: -0.25rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1rem;
|
||||
margin-top: calc(-1rem - 0.25rem);
|
||||
|
||||
background: linear-gradient(to top, #0004, transparent);
|
||||
}
|
||||
|
||||
.course-button {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
padding: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
justify-content: stretch;
|
||||
justify-items: start;
|
||||
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 64ms linear;
|
||||
text-align: left;
|
||||
font-family: var(--font-secondary);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--homepage-projects-bg);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
> .course-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
color: var(--palette-black);
|
||||
}
|
||||
|
||||
> .course-cfu {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
/* font-family: var(--font-mono); */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Materia personalizzata */
|
||||
.custom-course {
|
||||
margin-top: 2rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 3px solid var(--palette-black);
|
||||
}
|
||||
@@ -252,29 +422,31 @@
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.custom-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
input {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 14px;
|
||||
|
||||
.custom-form input {
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border: 2px solid #222;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
|
||||
background: #fff;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
.custom-form input[type='text'] {
|
||||
flex: 2;
|
||||
min-width: 200px;
|
||||
}
|
||||
.custom-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.custom-form input[type='number'] {
|
||||
flex: 0 0 80px;
|
||||
input[type='text'] {
|
||||
flex: 2;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
flex: 0 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn,
|
||||
@@ -351,122 +523,150 @@
|
||||
.courses-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
/* @media screen and (max-width: 1024px) {
|
||||
gap: 0;
|
||||
|
||||
.course-item {
|
||||
&:first-child:not(:last-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:not(:first-child, :last-child) {
|
||||
border-radius: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
.course-item {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--guide-base);
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
transition: all 64ms linear;
|
||||
}
|
||||
|
||||
.course-item:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.course-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.course-info .course-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
.course-info .course-cfu {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.course-grade {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.course-grade input[type='number'] {
|
||||
width: 90px;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
gap: 0.5rem 1rem;
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
.lode-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
.lode-checkbox.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.lode-checkbox input[type='checkbox'] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: #d63031;
|
||||
color: white;
|
||||
border: 2px solid var(--palette-black);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 64ms linear;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
background: #b71c1c;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
> .course-name {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
|
||||
.remove-btn:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
/* Calcolo e risultati */
|
||||
.calculation-section {
|
||||
background: var(--homepage-principal-bg);
|
||||
border: var(--border-large);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
> .course-cfu {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
/* font-family: var(--font-mono); */
|
||||
}
|
||||
|
||||
> .tall {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.course-grade {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-content: center;
|
||||
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
grid-column: -2 / -1;
|
||||
}
|
||||
|
||||
.lode-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-secondary);
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: #d63031;
|
||||
color: white;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
|
||||
margin-top: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #b71c1c;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
.course-name {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.course-cfu {
|
||||
display: grid;
|
||||
justify-self: center;
|
||||
align-self: start;
|
||||
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.course-grade {
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calculate-button {
|
||||
@@ -482,17 +682,17 @@
|
||||
cursor: pointer;
|
||||
transition: all 64ms linear;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.calculate-button:hover {
|
||||
background: #2b8b47;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
&:hover {
|
||||
background: #2b8b47;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.calculate-button:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
@@ -502,21 +702,25 @@
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.results h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
> h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ordine degli elementi: il massimo voto di laurea al centro */
|
||||
@@ -533,7 +737,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: var(--guide-base);
|
||||
background: hsl(from var(--media-pesata-accent-3) h s 75%);
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-secondary);
|
||||
@@ -542,7 +746,7 @@
|
||||
}
|
||||
|
||||
.result-item.highlight {
|
||||
background: var(--homepage-projects-bg);
|
||||
background: hsl(from var(--media-pesata-accent-2) h s 75%);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -579,11 +783,7 @@
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.media-pesata-app {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* @media (max-width: 768px) {
|
||||
.course-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -629,17 +829,16 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Mantieni il massimo voto centrato anche su mobile */
|
||||
.result-item:nth-child(4) {
|
||||
order: -1;
|
||||
grid-column: 1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
/* Layout ultra-compatto per schermi molto piccoli */
|
||||
@media (max-width: 480px) {
|
||||
/* @media (max-width: 480px) {
|
||||
.course-item {
|
||||
padding: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
@@ -678,7 +877,7 @@
|
||||
height: 26px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
@@ -773,8 +972,31 @@
|
||||
|
||||
/* Calculate button */
|
||||
.calculate-section {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
padding: 2rem 0 1rem;
|
||||
|
||||
button {
|
||||
font-size: 20px;
|
||||
padding: 1rem;
|
||||
|
||||
/* border 3px */
|
||||
border: 3px solid var(--palette-black);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
background: hsl(from var(--media-pesata-accent-2) h s 75%);
|
||||
}
|
||||
}
|
||||
|
||||
.calculate-btn {
|
||||
@@ -855,3 +1077,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utility {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.card {
|
||||
> .h-flex {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
> .spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user