General clean up, updates, and prep for new version of launcher using Svelte.
This commit is contained in:
Scott Idem
555
app/css/base_style_grid_event_launcher.css
Normal file
555
app/css/base_style_grid_event_launcher.css
Normal file
@@ -0,0 +1,555 @@
|
||||
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; }
|
||||
Reference in New Issue
Block a user