kamp/FTMS-Rower
1
0
Fork 0
Code Issues Pull Requests Activity

Dateien nach "css" hochladen

Browse Source
This commit is contained in:
Manuel Kamper 2024-10-31 23:36:00 +01:00
parent 78760c9edf
commit 2bacace72f
1 changed files with 122 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
css/main.css
View File

@ -1,34 +1,123 @@
.name { * {
font-size: 20pt; box-sizing: border-box;
justify-self: start; margin: 0;
} padding: 0;
}
.unit {
font-size: 25pt; body {
justify-self: end; font-family: Arial, sans-serif;
} line-height: 1.6;
color: #333;
.value { background-color: #e6eeff;
font-size: 50pt; }
justify-self: center;
grid-column: 1 / -1; h1, h2 {
} font-weight: bold;
color: #333;
}
.cards {
display: grid; button {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 10px 20px;
grid-auto-rows: auto; border: none;
grid-gap: 1rem; border-radius: 5px;
} cursor: pointer;
background-color: #4CAF50;
.card { color: #fff;
display: grid; }
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto; button:hover {
grid-gap: 1rem; background-color: #3e8e41;
}
border: 2px solid #e7e7e7;
border-radius: 4px; footer {
padding: .5rem; position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #b3cbff;
text-align: center;
padding: 10px;
color: #333;
font-size: 12px;
}
footer a {
color: #333;
text-decoration: none;
cursor: pointer;
}
footer a:hover {
text-decoration: underline;
}
/* Responsive Styles */
@media (max-width: 768px) {
/* For mobile devices */
video {
width: 90%;
height: auto;
}
#bleConnectionButton {
width: 100%;
padding: 10px 20px;
}
}
@media (min-width: 992px) {
/* For tablets and desktop devices */
video {
width: 80%;
height: auto;
}
#bleConnectionButton {
width: 100%;
padding: 10px 20px;
}
}
.name {
font-size: 20pt;
justify-self: start;
}
.unit {
font-size: 25pt;
justify-self: end;
}
.value {
font-size: 50pt;
justify-self: center;
grid-column: 1 / -1;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: auto;
grid-gap: 1rem;
}
.card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
grid-gap: 1rem;
border: 2px solid #e7e7e7;
border-radius: 6px;
padding: .5rem;
}
.training {
display: none;
}
.video-js.vjs-has-started .vjs-tech {
pointer-events: none;
} }