mirror of
https://github.com/billz/raspap-webgui.git
synced 2023-10-10 13:37:24 +02:00
Added @media query to optimize display on small devices
This commit is contained in:
parent
7f384e9ff1
commit
5ba9122aaa
@ -10,8 +10,15 @@ body {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-color: #c61931;
|
||||
/* Small devices (portrait phones, up to 576px) */
|
||||
@media (max-width: 576px) {
|
||||
.container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
||||
.card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
|
||||
.row { margin-left: 0rem; margin-right: 0rem; }
|
||||
.col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
|
||||
.form-group.col-md-6 { margin-left: -0.5rem; }
|
||||
.js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
|
||||
h4.mt-3 { margin-left: 0.5rem; }
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@ -34,7 +41,6 @@ body {
|
||||
border-color: #d8224c;
|
||||
background-color: #d8224c;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@ -118,11 +124,11 @@ i.fa.fa-bars:hover{
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.service-status-running {
|
||||
.service-status-up {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.service-status-stopped {
|
||||
.service-status-down {
|
||||
color: red;
|
||||
animation: flash 1s linear infinite;
|
||||
}
|
||||
|
@ -38,7 +38,7 @@ h5.card-title {
|
||||
|
||||
.card-header .col {
|
||||
color: #212529;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
.card-header [class^="fa"] {
|
||||
@ -79,6 +79,17 @@ ul.nav-tabs, .nav-tabs .nav-link {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Small devices (portrait phones, up to 576px) */
|
||||
@media (max-width: 576px) {
|
||||
.container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
||||
.card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
|
||||
.row { margin-left: 0rem; margin-right: 0rem; }
|
||||
.col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
|
||||
.form-group.col-md-6 { margin-left: -0.5rem; }
|
||||
.js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
|
||||
h4.mt-3 { margin-left: 0.5rem; }
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: #f6f6ef;
|
||||
}
|
||||
@ -130,15 +141,15 @@ ul.nav-tabs, .nav-tabs .nav-link {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
i.fas.fa-circle.service-status-running {
|
||||
i.fas.fa-circle.service-status-up {
|
||||
color: green;
|
||||
}
|
||||
|
||||
i.fas.fa-circle.service-status-stopped {
|
||||
i.fas.fa-circle.service-status-down {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.service-status-stopped {
|
||||
.service-status-down {
|
||||
animation: flash 1s linear infinite;
|
||||
}
|
||||
@keyframes flash {
|
||||
|
@ -29,6 +29,17 @@ h5.card-title {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* Small devices (portait phones, up to 576px) */
|
||||
@media (max-width: 576px) {
|
||||
.container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
||||
.card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
|
||||
.row { margin-left: 0rem; margin-right: 0rem; }
|
||||
.col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
|
||||
.form-group.col-md-6 { margin-left: -0.5rem; }
|
||||
.js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
|
||||
h4.mt-3 { margin-left: 0.5rem; }
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background-color: #000;
|
||||
}
|
||||
@ -113,7 +124,6 @@ a:focus, a:hover {
|
||||
|
||||
.col {
|
||||
color: #000;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card, .card-body {
|
||||
@ -341,12 +351,17 @@ tspan, rect {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.service-status-running {
|
||||
color: green;
|
||||
span.text.service-status {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.service-status-stopped {
|
||||
color: red;
|
||||
i.fas.fa-circle.service-status-up {
|
||||
color: #2ee600;
|
||||
}
|
||||
|
||||
i.fas.fa-circle.service-status-down {
|
||||
color: #2ee600;
|
||||
animation: flash 1s linear infinite;
|
||||
}
|
||||
@keyframes flash {
|
||||
|
Loading…
Reference in New Issue
Block a user