556 lines
11 KiB
CSS
556 lines
11 KiB
CSS
html {
|
|
}
|
|
body {
|
|
/*padding-top: 2.6rem;*/
|
|
/*padding-top: 1rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;*/
|
|
/*padding-bottom: 2rem;*/
|
|
padding-bottom: 0rem;
|
|
padding: .3rem;
|
|
}
|
|
|
|
body>.body_container {
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
/* grid-template-rows: min-content min-content min-content min-content max-content min-content min-content; */
|
|
/*grid-template-rows: min-content min-content min-content max-content min-content;*/
|
|
grid-template-rows: 100%;
|
|
gap: 0px 0px;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
/* "System-Nav-Menu" */
|
|
"Site-Header"
|
|
"Site-Nav-Menu"
|
|
"System-Notifications"
|
|
"Main-Body"
|
|
"Site-Footer";
|
|
/* "System-Footer"; */
|
|
|
|
max-width: 1440px;
|
|
margin: auto;
|
|
/*padding: 2.25rem 0rem 2rem;*/ /* top right/left bottom */
|
|
|
|
/*max-height: 100vh;*/
|
|
}
|
|
|
|
/* #System-Nav-Menu { grid-area: System-Nav-Menu; } */
|
|
#Site-Header { grid-area: Site-Header; }
|
|
#Site-Nav-Menu { grid-area: Site-Nav-Menu; }
|
|
#System-Notifications { grid-area: System-Notifications; }
|
|
#Main-Body {
|
|
display: grid;
|
|
/*grid-template-columns: fit-content(15%) fit-content(85%);*/
|
|
grid-template-columns: 15rem 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
gap: 0px 0px;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
/*"Main-Nav-Menu Main-Notifications"*/
|
|
"Main-Nav-Menu Main-Content";
|
|
grid-area: Main-Body;
|
|
}
|
|
/*#Main-Notifications { grid-area: Main-Notifications; }*/
|
|
#Main-Nav-Menu { grid-area: Main-Nav-Menu; }
|
|
#Main-Content { grid-area: Main-Content; }
|
|
#Site-Footer { grid-area: Site-Footer; }
|
|
/* #System-Footer { grid-area: System-Footer; } */
|
|
/* #System-Nav-Menu-Float { } */
|
|
/* #System-Debug { grid-area: System-Debug; } */
|
|
|
|
|
|
|
|
#System-Nav-Menu {
|
|
z-index: 1040; /* Bootstrap's modal background is also z-index: 1040 */
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
width: 100vw;
|
|
max-width: 1440px;
|
|
|
|
/* margin: auto; */
|
|
padding-top: .03rem;
|
|
padding-left: .03rem;
|
|
padding-right: .03rem;
|
|
padding-bottom: .03rem;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
min-height: 2.25rem;
|
|
max-height: 2.25rem;
|
|
|
|
/* NOTE: transition when no longer hovering */
|
|
transition-property: height, max-height;
|
|
transition-delay: 4s;
|
|
transition-duration: .1s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
#System-Nav-Menu:hover {
|
|
z-index: 1051; /* Bootstrap's modal background is z-index: 1040 */
|
|
|
|
/* height: auto; */
|
|
max-height: 10rem;
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: height, max-height;
|
|
transition-delay: 1.5s;
|
|
transition-duration: .15s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
#System-Nav-Menu img {
|
|
max-height: 2rem;
|
|
}
|
|
#System-Nav-Menu:hover img {
|
|
max-height: 2.5rem;
|
|
}
|
|
|
|
.system_menu_clicked {
|
|
z-index: 1051; /* Bootstrap's modal background is z-index: 1040 */
|
|
|
|
/* height: 5.5rem; */
|
|
max-height: 10rem;
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: height;
|
|
transition-delay: 0s;
|
|
transition-duration: .15s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
|
|
.system_menu_begin {
|
|
/*border: solid thin red;*/
|
|
align-self: flex-end;
|
|
|
|
display: flex;
|
|
/*align-content: center;*/
|
|
align-items: center;
|
|
/*justify-content: center;*/
|
|
|
|
height: 100%;
|
|
padding: 0 .25rem;
|
|
}
|
|
.system_menu_begin:hover {
|
|
}
|
|
|
|
.system_menu_center {
|
|
align-self: flex-end;
|
|
flex: auto;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.system_menu_end {
|
|
align-self: flex-end;
|
|
|
|
display: flex;
|
|
/*align-content: center;*/
|
|
align-items: center;
|
|
/*justify-content: center;*/
|
|
|
|
height: 100%;
|
|
padding: 0 .25rem;
|
|
}
|
|
.system_menu_end:hover {
|
|
}
|
|
|
|
.system_menu_hidden {
|
|
align-self: flex-end;
|
|
flex: auto;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin: 0;
|
|
padding: .1rem .75rem;
|
|
}
|
|
.system_menu_hidden:hover {
|
|
}
|
|
|
|
.system_menu_visible {
|
|
align-self: flex-end;
|
|
flex: auto;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin: 0;
|
|
padding: .1rem .75rem;
|
|
}
|
|
.system_menu_visible:hover {
|
|
}
|
|
|
|
.system_menu_name {
|
|
/*flex: auto;*/
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-begin;
|
|
align-items: center;
|
|
|
|
margin: 0;
|
|
padding: 0rem .5rem;
|
|
}
|
|
|
|
.system_menu_name img {
|
|
max-height: 1rem;
|
|
}
|
|
|
|
.system_menu_information {
|
|
/*border: dashed thin green;*/
|
|
/*flex: auto;*/
|
|
align-self: flex-end;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
margin: 0;
|
|
padding: 0rem .5rem;
|
|
}
|
|
.system_menu_information:hover {
|
|
}
|
|
|
|
/* Set style based on the user's permissions */
|
|
.system_menu.user_super {
|
|
}
|
|
|
|
.system_menu.user_manager {
|
|
}
|
|
|
|
.system_menu.user_administrator {
|
|
}
|
|
|
|
.system_menu.user_verified {
|
|
}
|
|
|
|
.system_menu.user_authenticated {
|
|
}
|
|
|
|
.system_menu .user_status_options {
|
|
}
|
|
/* *** END *** System *** System Menu (root menu) *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** System Menu Floating/Fixed (root menu) *** */
|
|
#System-Nav-Menu-Float {
|
|
z-index: 1040;
|
|
position: fixed;
|
|
top: .1rem;
|
|
right: .1rem;
|
|
|
|
padding: .1rem .5rem;
|
|
}
|
|
/* *** END *** System *** System Menu Floating/Fixed (root menu) *** */
|
|
|
|
|
|
#Site-Header {
|
|
position: relative;
|
|
|
|
max-height: 10vh;
|
|
|
|
margin: 0;
|
|
padding: .25rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* flex-wrap: wrap; */
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
#Site-Header img {
|
|
/* max-height: 4rem; */
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** System *** System Site Nav Menu *** */
|
|
#Site-Nav-Menu {
|
|
position: sticky;
|
|
top: 2.25rem;
|
|
|
|
height: 3.0rem;
|
|
max-height: 3.0rem;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center; /* flex-start */
|
|
align-items: center;
|
|
/* align-content: center; */
|
|
}
|
|
|
|
#Site-Nav-Menu ul {
|
|
width: 100%;
|
|
|
|
list-style-type: none;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center; /* flex-start */
|
|
/* align-items: center; */
|
|
/* align-content: center; */
|
|
}
|
|
|
|
#Site-Nav-Menu ul>li {
|
|
display: flex; /* inline */
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
margin: .1rem .5rem;
|
|
padding: .2rem .4rem;
|
|
}
|
|
|
|
#Site-Nav-Menu ul>li:hover {
|
|
}
|
|
|
|
#Site-Nav-Menu ul>li.nav_disabled {
|
|
}
|
|
#Site-Nav-Menu ul>li.nav_active {
|
|
}
|
|
#Site-Nav-Menu ul>li.nav_primary {
|
|
}
|
|
|
|
#Site-Nav-Menu .btn {
|
|
}
|
|
/* *** END *** System *** System Site Nav Menu *** */
|
|
|
|
#System-Notifications {
|
|
}
|
|
|
|
|
|
#Main-Body {
|
|
contain: content;
|
|
padding: .5rem .1rem;
|
|
|
|
min-height: 90vh;
|
|
|
|
/*max-height: 100%;*/
|
|
}
|
|
|
|
#Main-Notifications {
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** System *** System Site Nav Menu *** */
|
|
#Main-Nav-Menu {
|
|
contain: content;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
/*flex-wrap: wrap;*/
|
|
/*justify-content: flex-start;*/ /* flex-start */
|
|
/*align-items: center;*/
|
|
/*align-content: center;*/
|
|
}
|
|
|
|
#Main-Nav-Menu .m_btn {
|
|
appearance: button;
|
|
|
|
height: auto;
|
|
width: auto;
|
|
|
|
inline-size: auto;
|
|
|
|
margin: .1rem .5rem;
|
|
padding: .2rem .4rem;
|
|
}
|
|
|
|
#Main-Nav-Menu .m_btn:hover {
|
|
}
|
|
/* *** END *** System *** System Main Nav Menu *** */
|
|
|
|
#Main-Content {
|
|
contain: content;
|
|
|
|
/*max-height: 100%;
|
|
min-height: 100vh;
|
|
max-height: 100vh;*/
|
|
|
|
overflow: auto;
|
|
|
|
padding: .75rem;
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** System *** Site Footer *** */
|
|
/* site_footer or site_footer or site_status is the global (root) footer or status bar */
|
|
#Site-Footer {
|
|
max-height: 1.75rem;
|
|
|
|
/* width: 100%;
|
|
max-width: 1440px; */
|
|
|
|
margin: 0 0;
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
#Site-Footer:hover {
|
|
}
|
|
|
|
.site_footer .footer_left {
|
|
float: left;
|
|
}
|
|
.site_footer .footer_right {
|
|
float: right;
|
|
}
|
|
/* *** END *** System *** Site Footer *** */
|
|
|
|
|
|
|
|
/* *** BEGIN *** System *** System Footer *** */
|
|
/* system_footer or system_footer or system_status is the global (root) footer or status bar */
|
|
#System-Footer {
|
|
z-index: 1040; /* Bootstrap's modal background is also z-index: 1040 */
|
|
|
|
max-height: 1.5rem;
|
|
|
|
width: 100%;
|
|
max-width: 1440px;
|
|
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
width: 100vw;
|
|
max-width: 1440px;
|
|
|
|
/* margin: auto; */
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
#System-Footer:hover {
|
|
}
|
|
|
|
.system_footer .footer_left {
|
|
float: left;
|
|
}
|
|
.system_footer .footer_right {
|
|
float: right;
|
|
}
|
|
/* *** END *** System *** System Footer *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** Debug *** */
|
|
#hidden_system_debug {
|
|
display: none;
|
|
}
|
|
|
|
#System-Debug {
|
|
z-index: 1050; /* Bootstrap 4 sticky-top class has a z-index of 1020 */
|
|
position: fixed;
|
|
/* top: 1rem; */
|
|
right: 0rem;
|
|
/* left: 0rem; */
|
|
bottom: 1.5rem;
|
|
|
|
margin: 0rem;
|
|
padding: .1rem;
|
|
|
|
overflow: hidden;
|
|
|
|
height: 100%;
|
|
max-height: 2rem;
|
|
width: 50%;
|
|
max-width: 2rem;
|
|
|
|
/* NOTE: transition when hover ends */
|
|
transition-property: height, max-height, width, max-width;
|
|
transition-delay: 4s; /* short delay */
|
|
transition-duration: .15s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
#System-Debug:hover {
|
|
z-index: 1051;
|
|
|
|
overflow-y: auto;
|
|
|
|
max-height: calc(100vh - 5rem);
|
|
max-width: calc(100vh - 2rem);
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: height, max-height, width, max-width, opacity;
|
|
transition-delay: .5s; /* min delay */
|
|
transition-duration: .15s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
.view_system_debug {
|
|
}
|
|
/* *** END *** System *** Debug *** */
|
|
|
|
|
|
/*x-Small devices (portrait phones, less than 576px)*/
|
|
@media (max-width: 575px) {
|
|
body {
|
|
padding-left: .1rem;
|
|
padding-right: .1rem;
|
|
}
|
|
}
|
|
|
|
/*Small devices (landscape phones, 576px and up)*/
|
|
@media (min-width: 576px) and (max-width: 767px) {
|
|
body {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* #System-Nav-Menu { outline: dashed thin red; } */
|
|
/* #Site-Header { outline: dashed thin red; } */
|
|
/* #Site-Nav-Menu { outline: dashed thin pink; } */
|
|
/* #System-Notifications { outline: dashed thin red; } */
|
|
/*#Main-Body { outline: dotted thin green; }*/
|
|
/*#Main-Notifications { outline: dotted thin blue; }*/
|
|
/*#Main-Nav-Menu { outline: dotted thin blue; }*/
|
|
/*#Main-Content { outline: dotted thin blue; }*/
|
|
/* #Site-Footer { outline: dotted thin blue; } */
|
|
/* #System-Footer { outline: dashed thin red; } */
|
|
/* #System-Debug { outline: dashed thin red; } */
|
|
|
|
#System-Nav-Menu { display: none; }
|
|
#Site-Header { display: none; }
|
|
#Site-Nav-Menu { display: none; }
|
|
#System-Notifications { display: none; }
|
|
/* #Main-Body { display: none; } */
|
|
/* #Main-Notifications { display: none; } */
|
|
/* #Main-Nav-Menu { display: none; } */
|
|
/* #Main-Content { display: none; } */
|
|
#Site-Footer { display: none; }
|
|
#System-Footer { display: none; }
|
|
#System-Debug { display: none; }
|