879 lines
23 KiB
CSS
879 lines
23 KiB
CSS
html {
|
|
/* Parent Layout */
|
|
/* Box Model */
|
|
/* Positioning */
|
|
/*height: 100%;*/
|
|
/* Display */
|
|
}
|
|
|
|
body {
|
|
/* Parent Layout */
|
|
/* Box Model */
|
|
/* Positioning */
|
|
margin-bottom: 2.25rem; /* full height */
|
|
/* margin: 0; */
|
|
/* padding: 0; */
|
|
/* Display */
|
|
}
|
|
|
|
nav {
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** Layout *** System Menu (root menu) *** */
|
|
|
|
|
|
/* *** END *** Layout *** System Menu (root menu) *** */
|
|
|
|
|
|
|
|
|
|
/* Aether System Styles */
|
|
/* Most of this should not be overridden by the client unless using something like an iframe for specific content. */
|
|
|
|
|
|
/* *** BEGIN *** System *** General *** */
|
|
/* *** END *** System *** General *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** System Menu (root menu) *** */
|
|
.system_menu {
|
|
z-index: 1040; /* Bootstrap's modal background is also z-index: 1040 */
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50%;
|
|
|
|
/*height: .1rem;*/
|
|
height: 2.68rem;
|
|
/*height: 6.12rem;*/
|
|
width: 100vw;
|
|
max-width: 1440px; /*100vw*/
|
|
|
|
transform: translateX(-50%);
|
|
|
|
margin: 0 0;
|
|
margin-bottom: .1rem;
|
|
|
|
padding-top: .03rem;
|
|
padding-left: .03rem;
|
|
padding-right: .03rem;
|
|
padding-bottom: .03rem;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
/*background: linear-gradient(to right, rgba(220,220,220,.9) 25%, rgba(128,128,128,.8) 50%, rgba(220,220,220,.9) 75%);*/
|
|
|
|
border: solid thick transparent;
|
|
|
|
border-top: none;
|
|
border-left: solid thick hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest));
|
|
border-bottom: none;
|
|
border-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
/* NOTE: transition when no longer hovering */
|
|
transition-property: height;
|
|
transition-delay: 4s;
|
|
transition-duration: .1s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
.system_menu:hover {
|
|
z-index: 1051; /* Bootstrap's modal background is z-index: 1040 */
|
|
|
|
border-left: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest).1) 0%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 3%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 97%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.1) 100%);
|
|
|
|
|
|
height: 5.33rem;
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: height;
|
|
transition-delay: 1.5s;
|
|
transition-duration: .15s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
.system_menu_clicked {
|
|
z-index: 1051; /* Bootstrap's modal background is z-index: 1040 */
|
|
|
|
border-left: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest).1) 0%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 3%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 97%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.1) 100%);
|
|
|
|
|
|
height: 5.33rem;
|
|
|
|
/* 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;
|
|
|
|
text-shadow: 0 0 .25rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1), 0 0 .75rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1), 0 0 1rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1);
|
|
|
|
color: black;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 100%);*/
|
|
}
|
|
.system_menu_begin:hover {
|
|
}
|
|
|
|
.system_menu_center {
|
|
/*border: solid thin blue;*/
|
|
align-self: flex-end;
|
|
flex: auto;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-mid),.1) 25%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-mid),.8) 50%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-mid),.9) 75%);*/
|
|
}
|
|
|
|
.system_menu_end {
|
|
/*border: solid thin red;*/
|
|
align-self: flex-end;
|
|
|
|
display: flex;
|
|
/*align-content: center;*/
|
|
align-items: center;
|
|
/*justify-content: center;*/
|
|
|
|
height: 100%;
|
|
padding: 0 .25rem;
|
|
|
|
text-shadow: 0 0 .25rem white, 0 0 .75rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1), 0 0 1rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1);
|
|
|
|
color: black;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.6) 20%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.6) 80%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);*/
|
|
}
|
|
.system_menu_end:hover {
|
|
}
|
|
|
|
.system_menu_hidden {
|
|
border-bottom: none;
|
|
align-self: flex-end;
|
|
flex: auto;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin: 0;
|
|
padding: .1rem .75rem;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);*/
|
|
}
|
|
.system_menu_hidden:hover {
|
|
/*border-bottom: solid thin gray;*/
|
|
}
|
|
|
|
.system_menu_visible {
|
|
border-bottom: none;
|
|
/*border-bottom: solid thin gray;*/
|
|
align-self: flex-end;
|
|
flex: auto;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin: 0;
|
|
padding: .1rem .75rem;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);*/
|
|
}
|
|
.system_menu_visible:hover {
|
|
/*border-bottom: solid thin gray;*/
|
|
}
|
|
|
|
.system_menu_name {
|
|
/*border: dashed thin blue;*/
|
|
/*flex: auto;*/
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-begin;
|
|
align-items: center;
|
|
|
|
margin: 0;
|
|
padding: 0rem .5rem;
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);
|
|
}
|
|
|
|
.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;
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);
|
|
}
|
|
.system_menu_information:hover {
|
|
/*background-color: gray;*/
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 100%);*/
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.97) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.97) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.0) 100%);
|
|
|
|
}
|
|
|
|
|
|
.system_menu_float {
|
|
z-index: 1040;
|
|
position: fixed;
|
|
top: 2.75rem;
|
|
right: .1rem;
|
|
|
|
background-color: rgba(220,175,175,.8);
|
|
|
|
padding: .1rem .5rem;
|
|
|
|
/*position: fixed; top: 0; right: 0; */
|
|
}
|
|
|
|
/* Set style based on the user's permissions */
|
|
.system_menu.user_super {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_manager {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-orange),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_administrator {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-yellow),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_verified {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-yellow),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_authenticated {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-cyan),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu .user_status_options {
|
|
font-size: .8rem;
|
|
line-height: 1rem;
|
|
}
|
|
/* *** END *** System *** System Menu (root menu) *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** User Login *** */
|
|
.user_login .account__name--container {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.user_login .account__none--container {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
color: darkred;
|
|
}
|
|
|
|
.user_login .show_password, .user_change_password .show_password {
|
|
font-size: 1.1rem;
|
|
line-height: 3.0rem;
|
|
color: darkred;
|
|
cursor: zoom-in; /*progress*/
|
|
}
|
|
|
|
.user_login .show_password:hover, .user_change_password .show_password:hover {
|
|
font-size: 1.3rem;
|
|
}
|
|
/* *** END *** System *** User Login *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** System Footer *** */
|
|
/* system_footer or system_footer or system_status is the global (root) footer or status bar */
|
|
.system_footer {
|
|
position: fixed;
|
|
/*width: 100vw;*/
|
|
bottom: 0;
|
|
|
|
margin: 0 0;
|
|
padding: 0 .5rem;
|
|
|
|
color: gray;
|
|
background: #eee;
|
|
}
|
|
|
|
.system_footer .footer_left {
|
|
float: left;
|
|
}
|
|
.system_footer .footer_right {
|
|
float: right;
|
|
}
|
|
/* *** END *** System *** System Footer *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** Debug *** */
|
|
.view_debug {
|
|
cursor: help;
|
|
}
|
|
|
|
.hidden_debug {
|
|
display: none;
|
|
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
right: 0;
|
|
background: pink;
|
|
border: dashed thin pink;
|
|
margin: .25rem .25rem .25rem;
|
|
padding: .25rem;
|
|
opacity: .5;
|
|
|
|
font-size: .7rem;
|
|
|
|
overflow-y: scroll;
|
|
|
|
max-height: 96.75vh;
|
|
|
|
z-index: 1050; /* Bootstrap 4 sticky-top class has a z-index of 1020 */
|
|
}
|
|
|
|
.hidden_debug:hover {
|
|
z-index: 1051;
|
|
border: solid thin pink;
|
|
opacity: .95;
|
|
}
|
|
/* *** END *** System *** Debug *** */
|
|
|
|
|
|
/* BEGIN: Global System Classes */
|
|
|
|
|
|
/* BEGIN: Main section of the page layout */
|
|
|
|
.site_header {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
margin-bottom: .25rem;
|
|
|
|
max-height: 15rem; /* Just in case something is added that is very high. */
|
|
|
|
width: 95%;
|
|
max-width: 1400px;
|
|
}
|
|
|
|
.site_header img {
|
|
max-width: 100%;
|
|
max-height: 8rem; /* Just in case something is added that is very high. */
|
|
/*border: solid thin #aaa;*/
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
/* primary_menu is generally the site_menu */
|
|
.primary_menu {
|
|
z-index: 1040; /* Bootstrap's modal background is also z-index: 1040 */
|
|
/*padding-top: 2rem;*/
|
|
|
|
width: 95%;
|
|
max-width: 1400px; /* 2048px or 2560px is 2K */
|
|
margin-bottom: .25rem;
|
|
|
|
padding-right: 1.75rem;
|
|
padding-left: 1.75rem;
|
|
|
|
background-image: linear-gradient(to right, rgba(255,255,255,.7) 0%, rgba(255,255,255,.95) 3%, rgba(255,255,255,.95) 97%, rgba(255,255,255,.7) 100%);
|
|
}
|
|
.primary_menu:hover {
|
|
z-index: 1041; /* Bootstrap's modal background is also z-index: 1040 */
|
|
}
|
|
|
|
|
|
.flash_messages {
|
|
width: 95%;
|
|
max-width: 1400px; /* 2048px or 2560px is 2K */
|
|
margin-bottom: .25rem;
|
|
|
|
padding-top: .25rem;
|
|
padding-right: 1.75rem;
|
|
padding-bottom: .25rem;
|
|
padding-left: 1.75rem;
|
|
|
|
background-image: linear-gradient(to right, #ffff80 0%, #ffffe1 2%, #ffffe1 98%, #ffff80 100%);
|
|
/*border: solid thin #ffff80;*/
|
|
}
|
|
|
|
.flash_messages ul {
|
|
margin: .25rem .25rem .25rem .25rem;
|
|
padding: .25rem .25rem .25rem .25rem;
|
|
}
|
|
|
|
.flash_messages li {
|
|
list-style-type: circle;
|
|
}
|
|
|
|
.flash_messages li.info {
|
|
/*background-color: green;*/
|
|
}
|
|
|
|
.flash_messages .flashes {
|
|
}
|
|
|
|
.flash_messages.show_dev .debug {
|
|
}
|
|
|
|
/* BEGIN: main_template_content section of the page layout */
|
|
|
|
.main_template_container {
|
|
/*border: dashed medium darkred;
|
|
* background-color: red;*/
|
|
|
|
position: relative;
|
|
/*display: flex;*/
|
|
align-items: stretch;
|
|
|
|
height: auto;
|
|
min-height: 60vh;
|
|
width: 95%;
|
|
max-width: 1400px; /* 2048px or 2560px is 2K */
|
|
|
|
margin: .5rem auto;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* secondary_menu is generally the page_menu or object_type_menu */
|
|
.secondary_menu {
|
|
/*border: dashed medium darkgreen;
|
|
* background-color: green;*/
|
|
|
|
/*position: relative;*/
|
|
|
|
margin-top: .25rem;
|
|
margin-right: 0rem;
|
|
margin-bottom: .25rem;
|
|
margin-left: 0rem;
|
|
|
|
padding-top: .25rem;
|
|
padding-right: 1.75rem;
|
|
padding-bottom: .25rem;
|
|
padding-left: 1.75rem;
|
|
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
|
|
background-image: linear-gradient(to right, rgba(255,255,255,.7) 0%, rgba(255,255,255,.95) 3%, rgba(255,255,255,.95) 97%, rgba(255,255,255,.7) 100%);
|
|
}
|
|
|
|
.secondary_menu>.btn-toolbar>.btn-group {
|
|
margin-left: .1em;
|
|
margin-right: .1em;
|
|
}
|
|
|
|
.secondary_menu>.btn-toolbar>.btn-group>.btn {
|
|
margin-left: .05em;
|
|
margin-right: .05em;
|
|
/*
|
|
* border-left: solid thin #aaa;
|
|
* border-right: solid thin #aaa;*/
|
|
}
|
|
|
|
|
|
.main_template_content {
|
|
/*border: dashed medium darkgreen;
|
|
* background-color: green;*/
|
|
|
|
position: relative;
|
|
/*display: flex;
|
|
* align-items: stretch;*/
|
|
|
|
margin-top: .25rem;
|
|
margin-right: 0rem; /* Keep 0 to avoid horizontal scroll */
|
|
margin-bottom: .25rem;
|
|
margin-left: 0rem; /* Keep 0 to avoid horizontal scroll */
|
|
padding-top: .5rem;
|
|
padding-right: 1.75rem;
|
|
padding-bottom: .5rem;
|
|
padding-left: 1.75rem;
|
|
|
|
height: 100%;
|
|
min-height: 50vh;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
|
|
/*background: white;*/
|
|
/*background-image: linear-gradient(to right, #eee 0%, #fff 2%, #fff 98%, #eee 100%);*/
|
|
background-image: linear-gradient(to right, rgba(255,255,255,.7) 0%, rgba(255,255,255,.95) 3%, rgba(255,255,255,.95) 97%, rgba(255,255,255,.7) 100%);
|
|
}
|
|
|
|
/* END: main_template_content section of the page layout */
|
|
|
|
|
|
/* END: Global System Classes */
|
|
|
|
|
|
/*X-Small devices (portrait phones, less than 576px)*/
|
|
/*No media query for `xs` since this is the default in Bootstrap*/
|
|
|
|
/*x-Small devices (portrait phones, less than 576px)*/
|
|
@media (max-width: 575px) {
|
|
.viewport_width {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
background-color: blue;
|
|
color: white;
|
|
}
|
|
.viewport_width::after {
|
|
content: 'xs';
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
header.site_header, nav.primary_menu.site_menu, section.flash_messages, div.main_template_container {
|
|
width: 100%;
|
|
}
|
|
|
|
.main_template_container {
|
|
width: 100%;
|
|
margin: 0rem auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.main_template_content {
|
|
margin-top: .05rem;
|
|
margin-right: 0rem; /* Keep 0 to avoid horizontal scroll */
|
|
margin-bottom: .05rem;
|
|
margin-left: 0rem; /* Keep 0 to avoid horizontal scroll */
|
|
padding-top: .0rem;
|
|
padding-right: .05rem;
|
|
padding-bottom: .0rem;
|
|
padding-left: .05rem;
|
|
}
|
|
|
|
footer.system_footer {
|
|
font-size: .8em;
|
|
}
|
|
}
|
|
|
|
/*Small devices (landscape phones, 576px and up)*/
|
|
@media (min-width: 576px) {
|
|
.viewport_width {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
background-color: green;
|
|
color: black;
|
|
}
|
|
.viewport_width::after {
|
|
content: 'sm';
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
header.site_header, nav.primary_menu.site_menu, section.flash_messages, div.main_template_container {
|
|
width: 97%;
|
|
}
|
|
|
|
.main_template_container {
|
|
width: 97%;
|
|
margin: .25rem auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.main_template_content {
|
|
margin-top: .1rem;
|
|
margin-right: 0rem;
|
|
margin-bottom: .1rem;
|
|
margin-left: 0rem;
|
|
padding-top: .25rem;
|
|
padding-right: 1.00rem;
|
|
padding-bottom: .25rem;
|
|
padding-left: 1.00rem;
|
|
}
|
|
|
|
|
|
footer.system_footer {
|
|
font-size: .85em;
|
|
}
|
|
}
|
|
|
|
/*Medium devices (tablets, 768px and up)*/
|
|
@media (min-width: 768px) {
|
|
.viewport_width {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
background-color: yellow;
|
|
color: black;
|
|
}
|
|
.viewport_width::after {
|
|
content: 'md';
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
footer.system_footer {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
/*Large devices (desktops, 992px and up)*/
|
|
@media (min-width: 992px) {
|
|
.viewport_width {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
background-color: orange;
|
|
color: black;
|
|
}
|
|
.viewport_width::after {
|
|
content: 'lg';
|
|
padding-left: .5rem;
|
|
}
|
|
}
|
|
|
|
/*X-Large devices (large desktops, 1200px and up)*/
|
|
@media (min-width: 1200px) {
|
|
.viewport_width {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
.viewport_width::after {
|
|
content: 'xl';
|
|
padding-left: .5rem;
|
|
}
|
|
}
|
|
|
|
/*XX-Large devices (larger desktops, 1400px and up)*/
|
|
@media (min-width: 1400px) {
|
|
.viewport_width {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
.viewport_width::after {
|
|
content: 'xxl';
|
|
padding-left: .5rem;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
@page {
|
|
size: Letter; /*Legal*/
|
|
margin: .5in !important; /* top and bottom margin is set to .41 because of Google Chrome */
|
|
padding: 0in;
|
|
}
|
|
|
|
body {
|
|
background-color: white !important;
|
|
background-image: none !important;
|
|
color: black !important;
|
|
|
|
margin: .25in !important;
|
|
padding: .1in !important;
|
|
|
|
border: solid thin #eeeeee;
|
|
}
|
|
|
|
.system_menu {
|
|
display: none;
|
|
}
|
|
|
|
.system_menu_float {
|
|
display: none;
|
|
}
|
|
|
|
.site_header {
|
|
display: none;
|
|
}
|
|
|
|
.site_menu {
|
|
display: none;
|
|
}
|
|
|
|
.flash_messages {
|
|
display: none;
|
|
}
|
|
|
|
.main_template_container {
|
|
/*border: dashed thin red;*/
|
|
|
|
background-color: white !important;
|
|
background-image: none !important;
|
|
color: black !important;
|
|
|
|
margin: .01in !important;
|
|
padding: .0in !important;
|
|
|
|
min-width: 0 !important;
|
|
/*width: 0 !important;*/
|
|
max-width: 100% !important;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.secondary_menu {
|
|
display: none;
|
|
}
|
|
|
|
.main_template_content {
|
|
/*border: dotted thin red;*/
|
|
|
|
background-color: white !important;
|
|
background-image: none !important;
|
|
color: black !important;
|
|
|
|
margin: .01in !important;
|
|
padding: .01in !important;
|
|
|
|
min-width: 0 !important;
|
|
/*width: 0 !important;*/
|
|
max-width: 100% !important;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.system_footer {
|
|
display: none;
|
|
}
|
|
|
|
.hidden_debug {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.page_help {
|
|
float: right;
|
|
}
|
|
|
|
.page_links {
|
|
float: right;
|
|
}
|