improve the styles in middle screen size.

This commit is contained in:
Ben
2025-03-04 23:31:21 +08:00
parent d136f8ac91
commit 5e2092c6d4
5 changed files with 87 additions and 81 deletions

View File

@ -30,7 +30,6 @@
.breadcrumbs {
background-color: #e6e6e6;
border-bottom: 1px solid #d6d5d5;
}
.top-row {
@ -120,12 +119,7 @@
.app-logo .navbar-brand {
color: white;
}
@media (max-width: 767.98px) {
.main .top-row {
display: none;
}
@media (max-width: 991.98px) {
.app-search {
border-radius: 6px;
}
@ -141,7 +135,7 @@
.app-search:active, .app-search:hover {
display: block;
position: fixed;
position: absolute;
color: #fff;
top: 0;
min-height: 60px;
@ -149,6 +143,7 @@
left: 0;
z-index: 999;
border-radius: 0;
background-color: #e6e6e6;
}
.app-search:active .app-form-inline, .app-search:hover .app-form-inline {
@ -169,6 +164,11 @@
padding-bottom: 6px;
}
}
@media (max-width: 767.98px) {
.main .top-row {
display: none;
}
}
@media (min-width: 768px) {
app {
@ -257,6 +257,7 @@
width: 100%;
left: 0;
z-index: 4;
border-bottom: 1px solid #d6d5d5;
}
.sidebar {

View File

@ -99,7 +99,49 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
color: #ffffff;
z-index: 1000;
}
@media (max-width: 991.98px) {
.app-search {
border-radius: 6px;
}
.app-search input{
display: none !important;
}
.app-search input + button {
position: initial;
padding-top: 7px;
padding-bottom: 7px;
}
.app-search:active, .app-search:hover {
display: block;
position: fixed;
top: 0;
min-height: 96px;
width: 100%;
left: 0;
z-index: 999;
border-radius: 0;
}
.app-search:active .app-form-inline, .app-search:hover .app-form-inline {
margin: 10px auto;
position: relative;
display: block;
max-width: 80%;
}
.app-search:active .app-form-inline input, .app-search:hover .app-form-inline input {
width: 100%;
display: block !important;
}
.app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button {
position: absolute;
color: rgb(42, 159, 214);
padding-top: 6px;
padding-bottom: 6px;
}
}
@media (max-width: 767.98px) {
.app-menu {
@ -130,45 +172,7 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
position: relative;
top: 60px;
}
.app-search {
border-radius: 6px;
}
.app-search input{
display: none !important;
}
.app-search input + button {
position: initial;
padding-top: 7px;
padding-bottom: 7px;
}
.app-search:active, .app-search:hover {
display: block;
position: fixed;
top: 0;
.app-search:active, .app-search:hover{
min-height: 60px;
width: 100%;
left: 0;
z-index: 999;
border-radius: 0;
}
.app-search:active .app-form-inline, .app-search:hover .app-form-inline {
margin: 10px auto;
position: relative;
display: block;
max-width: 80%;
}
.app-search:active .app-form-inline input, .app-search:hover .app-form-inline input {
width: 100%;
display: block !important;
}
.app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button {
position: absolute;
color: rgb(42, 159, 214);
padding-top: 6px;
padding-bottom: 6px;
}
}