charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix css for serverdetails

Browse Source
This commit is contained in:
AntoninoP 2024-08-10 11:08:01 +02:00
parent acd7165a1f
commit 27ec3b79ec
1 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/ServerDetails/ServerDetails.module.scss
View File

@ -16,8 +16,8 @@
background-color: var(--card-bg-color);
width: 100%;
max-width: 60rem;
border-radius: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
@ -28,23 +28,46 @@
}
.formGroup label {
font-weight: bold;
margin-bottom: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.4rem;
color: var(--label-color);
}
.formGroup input,
.formGroup select {
width: 100%;
padding: 1.2rem;
height: 4rem;
height: auto;
background-color: var(--input-bg-color);
border: 1px solid var(--input-border-color);
border-radius: 0.5rem;
border-radius: 0.75rem;
color: var(--text-color);
font-size: 1.2rem;
line-height: 1.4rem;
line-height: 1.5rem;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.formGroup input:focus,
.formGroup select:focus {
border-color: var(--focus-border-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
outline: none;
}
/* Chrome- styles */
@supports (-webkit-appearance: none) {
.formGroup select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23ddd" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 1.2rem center;
background-size: 1rem;
padding-right: 3rem;
}
}
.saveButton,
@ -52,9 +75,9 @@
padding: 1.2rem 2.5rem;
color: var(--button-text-color);
border: none;
border-radius: 0.5rem;
border-radius: 0.75rem;
cursor: pointer;
transition: background-color 0.3s;
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 1.2rem;
margin-top: 1rem;
}
@ -68,18 +91,29 @@
margin-left: 1rem;
}
.saveButton:hover,
.quitButton:hover {
transform: translateY(-3px);
}
.saveButton:active,
.quitButton:active {
transform: translateY(0);
}
.saveButton:hover {
background-color: var(--button-bg-hover-color);
}
.error {
color: red;
color: var(--error-color);
font-size: 1.2rem;
}
.details h1 {
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--header-color);
}
@media (max-width: 768px) {
@ -90,15 +124,15 @@
.formGroup input,
.formGroup select {
height: 3rem;
font-size: 1rem;
height: auto;
font-size: 1.1rem;
padding: 1rem;
}
.saveButton,
.quitButton {
padding: 1rem 2rem;
font-size: 1rem;
font-size: 1.1rem;
}
.details h1 {
@ -106,11 +140,3 @@
margin-bottom: 2rem;
}
}
.formGroup input[type="number"],
.formGroup input[type="text"],
.formGroup select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}