General clean up, updates, and prep for new version of launcher using Svelte.
This commit is contained in:
Scott Idem
114
app/css/aether_modules_core.css
Normal file
114
app/css/aether_modules_core.css
Normal file
@@ -0,0 +1,114 @@
|
||||
/* Aether Modules: Core */
|
||||
|
||||
.mod__order_cart .obj__order_cart_line.purp__li_item.prop__message .purp__label {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.mod__order_cart .obj__order_cart_line.purp__li_item.prop__message .purp__value {
|
||||
font-size: smaller;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mod__order .obj__order_line.purp__li_item.prop__message .purp__label {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.mod__order .obj__order_line.purp__li_item.prop__message .purp__value {
|
||||
font-size: smaller;
|
||||
font-style: italic;
|
||||
}
|
||||
/* *** END *** System Objects *** All Objects *** */
|
||||
|
||||
|
||||
|
||||
/* Svelte QR code element */
|
||||
.qr_scanner {
|
||||
/* outline: solid thin pink; */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* flex-wrap: wrap; */
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: center; /* center */
|
||||
align-content: stretch;
|
||||
|
||||
/* flex-grow: 1;
|
||||
* flex-shrink: 1;
|
||||
* flex-basis: 50%; */
|
||||
|
||||
/* min-width: 100%;
|
||||
* width: 100%;
|
||||
* max-width: 100%; */
|
||||
}
|
||||
|
||||
.qr_reader {
|
||||
min-width: 400px;
|
||||
/* width: 100%; */
|
||||
max-width: 100%;
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
|
||||
.qr_scanner .not_scanning {
|
||||
/*background: gray;*/
|
||||
}
|
||||
|
||||
.qr_scanner .scanning {
|
||||
background: lightgreen;
|
||||
}
|
||||
|
||||
.container.qr_scan_result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* flex-wrap: wrap; */
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
img.qr_code {
|
||||
outline: solid thin orange;
|
||||
width: 1.50in;
|
||||
}
|
||||
|
||||
img.qr_code:hover {
|
||||
outline: solid thin green;
|
||||
width: 2.50in;
|
||||
}
|
||||
|
||||
img.qr_code:focus {
|
||||
outline: solid thin red;
|
||||
width: 2.50in;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.qr_reader {
|
||||
min-width: 95vw;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.qr_reader {
|
||||
min-width: 90vw;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
img.qr_code {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Svelte QR code scanner test page */
|
||||
.qr_scanner_main .options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center; /* center */
|
||||
align-content: stretch;
|
||||
}
|
||||
150
app/css/aether_modules_other.css
Normal file
150
app/css/aether_modules_other.css
Normal file
@@ -0,0 +1,150 @@
|
||||
/* Aether Modules: Other */
|
||||
|
||||
/* *** BEGIN *** System Modules *** Event *** */
|
||||
/* *** BEGIN *** System Modules *** Event: Meeting *** */
|
||||
/* Event: Meeting */
|
||||
.meeting_view {
|
||||
background: pink;
|
||||
border: dashed thin deeppink;
|
||||
height: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meeting_view:hover {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.meetings_overview {
|
||||
font-size: smaller;
|
||||
}
|
||||
/* *** END *** System Modules *** Event: Meeting *** */
|
||||
|
||||
/* *** BEGIN *** Other Modules *** Event: Badge search *** */
|
||||
.event_badge_main .event_badge_options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.event_badge.search_and_results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* flex-wrap: wrap; */
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
/* max-width: 100vw; */
|
||||
}
|
||||
|
||||
.event_badge .search_options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: stretch; /* space-evenly stretch */
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.event_badge .search_results {
|
||||
|
||||
}
|
||||
|
||||
.event_badge .qr_scanner_form {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 45%;
|
||||
}
|
||||
.event_badge .search_form {
|
||||
/*outline: solid thin red;*/
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 45%;
|
||||
}
|
||||
|
||||
.event_badge .search_form legend {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event_badge .search_fields {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
/* *** END *** Other Modules *** Event: Badge search *** */
|
||||
|
||||
/* *** BEGIN *** Other Modules *** Event: Badge view *** */
|
||||
.event_badge_wrapper {
|
||||
/* outline: solid thin pink; */
|
||||
}
|
||||
|
||||
.event_badge_options {
|
||||
/*position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
margin: 3rem;*/
|
||||
}
|
||||
/* *** END *** Other Modules *** Event: Badge view *** */
|
||||
|
||||
/* x-Small devices (portrait phones, less than 576px) */
|
||||
@media (max-width: 575px) {
|
||||
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, less than 768px) */
|
||||
@media (max-width: 767px) {
|
||||
.event_badge .search_results {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
/* *** END *** System Modules *** Event *** */
|
||||
|
||||
|
||||
|
||||
/* Aether System Objects Styles */
|
||||
|
||||
/* *** BEGIN *** System Objects *** All Objects *** */
|
||||
.mod__event_registration .purp__obj_li header {
|
||||
border-bottom: solid medium hsl(var(--hue-default),var(--saturation-least),var(--lum-light));
|
||||
}
|
||||
|
||||
.mod__event_registration .purp__view.obj__product {
|
||||
margin: 1rem 0rem;
|
||||
padding: 1rem 0rem;
|
||||
/*border-top: solid thin hsl(var(--hue-default),var(--saturation-least),var(--lum-darkest));*/
|
||||
border-bottom: solid thin hsl(var(--hue-default),var(--saturation-least),var(--lum-light));
|
||||
}
|
||||
|
||||
|
||||
.mod__fundraising .purp__obj_li header {
|
||||
border-bottom: solid medium hsl(var(--hue-default),var(--saturation-least),var(--lum-light));
|
||||
}
|
||||
|
||||
.mod__fundraising .purp__view.obj__product {
|
||||
margin: 1rem 0rem;
|
||||
padding: 1rem 0rem;
|
||||
/*border-top: solid thin hsl(var(--hue-default),var(--saturation-least),var(--lum-darkest));*/
|
||||
border-bottom: solid thin hsl(var(--hue-default),var(--saturation-least),var(--lum-light));
|
||||
}
|
||||
|
||||
.mod__membership .purp__obj_li header {
|
||||
border-bottom: solid medium hsl(var(--hue-default),var(--saturation-least),var(--lum-light));
|
||||
}
|
||||
|
||||
.mod__membership .purp__view.obj__product {
|
||||
margin: 1rem 0rem;
|
||||
padding: 1rem 0rem;
|
||||
/*border-top: solid thin hsl(var(--hue-default),var(--saturation-least),var(--lum-darkest));*/
|
||||
border-bottom: solid thin hsl(var(--hue-default),var(--saturation-least),var(--lum-light));
|
||||
}
|
||||
|
||||
309
app/css/aether_system.css
Normal file
309
app/css/aether_system.css
Normal file
@@ -0,0 +1,309 @@
|
||||
/* System: Anything that is related to core system functions and should not be changed per client or per user. */
|
||||
|
||||
/* *** BEGIN *** System *** General *** */
|
||||
html {
|
||||
/* Parent Layout */
|
||||
/* Box Model */
|
||||
/* Positioning */
|
||||
/* Display */
|
||||
}
|
||||
|
||||
body {
|
||||
/* Parent Layout */
|
||||
/* Box Model */
|
||||
/* Positioning */
|
||||
/* Display */
|
||||
/* Center and scale the image nicely */
|
||||
background-color: steelblue;
|
||||
background-image: url('/static/images/site_background.webp'); /* "/static/images/site_background.webp" */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
nav {
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-d5);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--color-d2);
|
||||
}
|
||||
|
||||
label {
|
||||
color: #824240; /*#880000*/ /* Dark red for labels */
|
||||
color: var(--info-color-darkest);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
/*border: solid thin #eee;*/
|
||||
/*border-top: solid thin #eee;*/
|
||||
/*border-bottom: solid thin #eee;*/
|
||||
}
|
||||
|
||||
input:required, select:required {
|
||||
/*background-color: red;*/
|
||||
background-color: var(--danger-color-lighter);
|
||||
border-color: var(--danger-color-mid);
|
||||
/*border-bottom: dashed medium;
|
||||
* border-bottom: dashed thin;*/
|
||||
}
|
||||
|
||||
input:required:valid {
|
||||
/*color: red;*/
|
||||
/*border: solid thin green;*/
|
||||
}
|
||||
|
||||
input:required:invalid {
|
||||
/*color: red;*/
|
||||
/*border: solid thin red;*/
|
||||
}
|
||||
/* *** END *** System *** General *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Global *** Font Family, Size, and Weight *** */
|
||||
pre, code, kbd, samp, var {
|
||||
font-family: 'Roboto Mono', 'Noto Sans Mono', 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500; /* 700 looks too heavy */
|
||||
}
|
||||
|
||||
.h1, h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.h2, h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.h3, h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
/* *** END *** Global *** Set Font Family *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Global *** Permission Checks and Roles *** */
|
||||
section.administrator_check {
|
||||
/*color: var(--warning-fg-color);*/
|
||||
/*background-color: var(--warning-bg-color);*/
|
||||
/*background-image: linear-gradient(to right, rgba(207,179,60,.5) 0%, rgba(207,179,60,.25) 5%, rgba(207,179,60,.25) 95%, rgba(207,179,60,.5) 100%);*/
|
||||
border-color: var(--warning-border-color);
|
||||
box-shadow: 0rem 0rem .5rem 0rem var(--warning-bg-color);
|
||||
}
|
||||
|
||||
section.manager_check {
|
||||
border-color: var(--danger-border-color);
|
||||
box-shadow: 0rem 0rem .5rem 0rem var(--danger-bg-color);
|
||||
}
|
||||
/* *** END *** Global *** Permission Checks and Roles *** */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar {
|
||||
/*color: var(--default-fg-color);
|
||||
* background-color: var(--default-bg-color);
|
||||
* border-color: var(--default-border-color);*/
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
/*color: var(--default-fg-color);
|
||||
* background-color: none;*/
|
||||
/*background-color: var(--default-bg-color);
|
||||
* border-color: var(--default-border-color);*/
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: var(--default-fg-color);
|
||||
/*background-color: var(--default-bg-color);
|
||||
* border-color: var(--default-border-color);*/
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
/*color: var(--default-fg-color);*/
|
||||
/*background-color: var(--default-bg-color);
|
||||
* border-color: var(--default-border-color);*/
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
color: var(--default-fg-color);
|
||||
background-color: var(--default-bg-color);
|
||||
border-color: var(--default-border-color);
|
||||
}
|
||||
|
||||
|
||||
/* *** BEGIN *** Global *** Group List Menu *** */
|
||||
/* Works together with toggle_group_list_item({element_id:'the_id_to_show', class_name:'name_of_group'}) */
|
||||
.group_list_item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group_list_item_show {
|
||||
}
|
||||
|
||||
.group_list_menu {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
float: right;
|
||||
|
||||
width: 15rem;
|
||||
|
||||
background-color: hsla(0, 0%, 100%, .8);
|
||||
|
||||
z-index: 99;
|
||||
border: solid thin hsla(0, 0%, 75%, .8);
|
||||
|
||||
padding: .5rem 0rem;
|
||||
}
|
||||
|
||||
.group_list_menu ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.group_list_menu button {
|
||||
margin: .1rem 0;
|
||||
padding: .1rem;
|
||||
|
||||
border: solid thin hsla(0, 0%, 75%, .2);
|
||||
background-color: unset;
|
||||
width: 100%;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
/* border-radius: .4rem; */
|
||||
}
|
||||
|
||||
.group_list_menu button:hover {
|
||||
border: solid thin hsla(0, 0%, 60%, 1);
|
||||
background-color: hsla(0, 0%, 75%, 1);
|
||||
}
|
||||
/* *** END *** Global *** Group List Menu *** */
|
||||
|
||||
|
||||
|
||||
|
||||
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
|
||||
opacity: .85;
|
||||
transform: scale(.85) translateY(-.5rem) translateX(.15rem);
|
||||
}
|
||||
|
||||
/* .btn-link /*, .page-link, .page-item, .paginate_button, .active, .page-item.active*/ { */
|
||||
color: var(--link-fg-color);
|
||||
background-color: var(--link-bg-color);
|
||||
}
|
||||
|
||||
|
||||
/* This is for the datatables. */
|
||||
.page-item.active .page-link {
|
||||
color: var(--link-fg-color);
|
||||
background-color: var(--link-bg-color);
|
||||
}
|
||||
|
||||
/* *** END *** Global *** Navigation, Links, and Buttons *** */
|
||||
|
||||
|
||||
|
||||
.page_help {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.page_links {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
.results_message {
|
||||
font-size: 1.6em;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.results_table td {
|
||||
background-color: lightyellow;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.obj {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.obj_edit_abs {
|
||||
/*border: solid thin pink;*/
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
right: 0rem;
|
||||
margin: .1rem .8rem;
|
||||
padding: .2rem;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.obj_edit_abs:hover {
|
||||
border: solid thin gray;
|
||||
border-radius: .25em;
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
right: 0;
|
||||
margin: .1rem .8rem;
|
||||
padding: .2rem;
|
||||
background: rgba(255,255,255,.8);
|
||||
color: orange;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.obj_edit_abs:hover::after {
|
||||
content: "edit";
|
||||
}
|
||||
|
||||
|
||||
#edit_object_field_value {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border: solid thin black;
|
||||
margin: .25rem;
|
||||
padding: .5rem;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* *** BEGIN *** Global *** Svelte specific that needs to be merged in *** */
|
||||
.svelte_target section.obj {
|
||||
margin: 1rem 0rem;
|
||||
padding: .5rem .5rem;
|
||||
/* border: solid thin hsla(0,0%,90%,1); */
|
||||
}
|
||||
|
||||
.svelte_target .input_container {
|
||||
margin: .25rem 0rem;
|
||||
}
|
||||
|
||||
.svelte_target label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.svelte_target .label_select_value {
|
||||
font-size: smaller;
|
||||
color: hsla(0,0%,50%,1);
|
||||
}
|
||||
|
||||
.svelte_target .obj_type_main {
|
||||
border: solid thin hsla(0,0%,90%,1);
|
||||
}
|
||||
/* *** BEGIN *** Global *** Svelte specific that needs to be merged in *** */
|
||||
778
app/css/aether_utilities.css
Normal file
778
app/css/aether_utilities.css
Normal file
@@ -0,0 +1,778 @@
|
||||
/* Aether Utility Styles */
|
||||
|
||||
/* *** BEGIN *** Utility *** Hide or Visually Elements *** */
|
||||
.d_none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visually_hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.visually_hidden:not(:focus):not(:active) {
|
||||
/* ... */
|
||||
}
|
||||
/* *** END *** Utility *** Hide Elements *** */
|
||||
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fs_smaller, .fs-smaller {
|
||||
font-size: smaller;
|
||||
}
|
||||
.fs_larger, .fs-larger {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.debug {
|
||||
background: pink;
|
||||
border: dashed thin deeppink;
|
||||
height: 1.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.debug:hover {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background: pink;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--warning-color-lighter);
|
||||
background-color: var(--warning-color-dark);
|
||||
border-color: var(--warning-color-darker);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--danger-color-lighter);
|
||||
background-color: var(--danger-color-dark);
|
||||
border-color: var(--danger-color-darker);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger-color-lighter);
|
||||
background-color: var(--danger-color-dark);
|
||||
border-color: var(--danger-color-darker);
|
||||
}
|
||||
|
||||
.strike {
|
||||
color: var(--danger-color-lighter);
|
||||
background-color: var(--danger-color-dark);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.attention_glow {
|
||||
text-shadow: 0 0 .25rem rgba(100,0,0,1), 0 0 1rem rgba(200,0,0,1), 0 0 2rem rgba(255,0,0,1);
|
||||
}
|
||||
|
||||
.attention_glow_pulse {
|
||||
animation-name: text_glowing_blue;
|
||||
animation-duration: 3.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
|
||||
@keyframes text_glowing_red {
|
||||
from {
|
||||
text-shadow: 0 0 .25rem transparent, 0 0 1rem transparent, 0 0 2rem transparent;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 .25rem hsla(var(--hue-red), var(--saturation-most), var(--lum-mid),1), 0 0 1rem rgba(200,0,0,1), 0 0 2rem rgba(255,0,0,1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text_glowing_blue {
|
||||
from {
|
||||
text-shadow: 0 0 .25rem transparent, 0 0 1rem transparent, 0 0 2rem transparent;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 .25rem hsla(var(--hue-blue), var(--saturation-most), var(--lum-mid),1), 0 0 1.5rem hsla(var(--hue-blue), var(--saturation-most), var(--lum-lighter),1);
|
||||
}
|
||||
}
|
||||
|
||||
/* *** BEGIN *** Utility *** Countdown Timer *** */
|
||||
.countdown_banner {
|
||||
width: 100%;
|
||||
/*background-color: rgb(70, 130, 180);*/ /* SteelBlue #4682B4 rgb(70, 130, 180)*/
|
||||
background-color: rgba(70, 130, 180,.1);
|
||||
/*background-image: rgba(70, 130, 180,.1);*/
|
||||
|
||||
/*text-shadow: 0 0 15px rgba(14, 27, 37,1), 0 0 30px rgba(43, 80, 110,1);*/
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
|
||||
/*animation-name: countdown_animation;
|
||||
* animation-delay: 2s;
|
||||
* animation-duration: 5s;
|
||||
* animation-iteration-count: infinite;
|
||||
* animation-direction: alternate;*/
|
||||
}
|
||||
|
||||
.countdown_number {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@keyframes countdown_animation {
|
||||
from {
|
||||
background-color: rgba(70, 130, 180,.1);
|
||||
/*background: radial-gradient(circle, rgba(218,26,50,.2) 0%, rgba(218,26,50,.2) 50%, rgba(255,255,255,0) 80%);*/
|
||||
}
|
||||
|
||||
to {
|
||||
/*background-color: rgba(218,26,50,.6);*/
|
||||
background: rgba(70, 130, 180,.5);
|
||||
/*background: radial-gradient(circle, rgba(218,26,50,.4) 0%, rgba(218,26,50,.4) 50%, rgba(255,255,255,0) 80%);*/
|
||||
}
|
||||
}
|
||||
/* *** END *** Utility *** Countdown Timer *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Utility *** Forms Related *** */
|
||||
.append_colon::after {
|
||||
content: ':';
|
||||
}
|
||||
|
||||
.input_required::after {
|
||||
/*content: '*';
|
||||
* color: var(--warning-color-darker);*/
|
||||
|
||||
/*position: relative;
|
||||
* top: 5px;
|
||||
* left: 5px;*/
|
||||
}
|
||||
.input_required::before {
|
||||
/*content: '*';
|
||||
* color: var(--warning-color-darker);*/
|
||||
|
||||
/*display: block;
|
||||
* content: 'b*';
|
||||
* background-color: yellow;
|
||||
* color: red;
|
||||
* font-weight: bold;
|
||||
* top: 5px;
|
||||
* left: 5px;*/
|
||||
}
|
||||
|
||||
/* *** END *** Utility *** Forms Related *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Utility *** Tables Related *** */
|
||||
/* *** BEGIN *** Utility *** All Tables *** */
|
||||
thead>tr {
|
||||
background-color: #e6e6e6; /* efefef e6e6e6 d9d9d9 */
|
||||
}
|
||||
/* *** END *** Utility *** All Tables *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Utility *** Table Borders *** */
|
||||
table.table_borders {
|
||||
border: solid thin hsla(0, 0%, 50%, 1);
|
||||
border-collapse: collapse;
|
||||
|
||||
/*max-width: 100%;*/
|
||||
}
|
||||
table.table_borders th, td {
|
||||
border: solid thin hsla(0, 0%, 75%, 1);
|
||||
border-collapse: collapse;
|
||||
/* margin: 0; */
|
||||
|
||||
}
|
||||
/* *** END *** Utility *** Table Borders *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Utility *** Table Alternating Rows (even/odd) *** */
|
||||
table.table_alt_rows tr:nth-child(even) {
|
||||
background-color: hsla(0, 0%, 95%, 1);
|
||||
}
|
||||
table.table_alt_rows tr:nth-child(odd) {
|
||||
background-color: hsla(0, 0%, 85%, 1);
|
||||
}
|
||||
/* *** END *** Utility *** Table Alternating Rows (even/odd) *** */
|
||||
|
||||
|
||||
|
||||
/* *** BEGIN *** Utilities *** Modal Container *** */
|
||||
.modal_container {
|
||||
/* outline: solid thin green; */
|
||||
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
|
||||
margin: 0;
|
||||
padding: 3.5rem 0rem;
|
||||
|
||||
/* object-fit: contain; */
|
||||
/* height: 100vh;
|
||||
* m ax-height: 100vh; */ * *
|
||||
*
|
||||
* height: 100%;
|
||||
* max-height: 100%;
|
||||
* width: 100%;
|
||||
* max-width: 100%;
|
||||
*
|
||||
* /* height: 100vh;
|
||||
* m ax-height: 100vh; * *
|
||||
* width: 100vw;
|
||||
* max-width: 100vw; */
|
||||
|
||||
/* display: flex; */
|
||||
flex-direction: column;
|
||||
/* justify-content: center;
|
||||
* a lign-items: center; * *
|
||||
* align-content: center; */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
z-index: 1041;
|
||||
background-color: hsla(0, 0%, 50%, .9);
|
||||
}
|
||||
|
||||
.modal_content {
|
||||
/* outline: dashed thin pink; */
|
||||
|
||||
/* margin: auto; */
|
||||
padding: 0;
|
||||
|
||||
/* border: solid .2rem hsla(0, 0%, 50%, .9); */
|
||||
border-radius: 1rem;
|
||||
box-shadow: .5rem .5rem 1.5rem .5rem hsla(0, 0%, 0%, 1);
|
||||
|
||||
background: #eee;
|
||||
|
||||
width: 100vw;
|
||||
|
||||
max-width: calc(1024px - 2rem);
|
||||
max-height: calc(100% - 2rem);
|
||||
|
||||
/* text-align: center; */
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.modal_header, .modal_footer {
|
||||
/*outline: solid thin orange;*/
|
||||
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
|
||||
/* width: 100%;
|
||||
* max-width: 100%; */
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.modal_header_begin, .modal_footer_begin {
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.modal_header_end, .modal_footer_end {
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.modal_header {
|
||||
/* outline: solid thin red; */
|
||||
/* border-bottom: solid thin hsla(0, 0%, 50%, .5); */
|
||||
background-image: linear-gradient(to top, hsla(205,78%,80%,.9) 0%, hsla(205,78%,80%,.1) .2rem, hsla(205,78%,80%,.1) 100%);
|
||||
}
|
||||
.modal_body {
|
||||
/* outline: solid thin green; */
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
max-width: 100%;
|
||||
|
||||
margin: .5rem;
|
||||
padding: .5rem .1rem;
|
||||
|
||||
/* display: flex;
|
||||
* f lex-direction: column; */ * *
|
||||
* /* justify-content: ; */
|
||||
/* align-items: stretch; */
|
||||
/* align-content: center; */
|
||||
|
||||
object-fit: contain;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal_footer {
|
||||
/* outline: solid thin orange; */
|
||||
/* border-top: solid thin hsla(0, 0%, 50%, .5); */
|
||||
background-image: linear-gradient(to bottom, hsla(205,78%,80%,.9) 0%, hsla(205,78%,80%,.1) .2rem, hsla(205,78%,80%,.1) 100%);
|
||||
}
|
||||
|
||||
.modal_close {
|
||||
padding: .25rem .5rem;
|
||||
|
||||
font-size: 1.2rem;
|
||||
/* font-weight: lighter; */
|
||||
|
||||
background-color: hsla(0, 0%, 90%, 1);
|
||||
|
||||
border: solid thin hsla(0, 0%, 70%, 1);
|
||||
border-radius: .5rem;
|
||||
box-shadow: .1rem .1rem .2rem .1rem hsla(0, 0%, 0%, 1);
|
||||
|
||||
color: hsla(0, 0%, 30%, 1);
|
||||
}
|
||||
.modal_close:hover {
|
||||
/* font-weight: bold; */
|
||||
background-color: hsla(0, 0%, 80%, 1);
|
||||
|
||||
border: solid thin hsla(0, 0%, 60%, 1);
|
||||
border-radius: .5rem;
|
||||
box-shadow: .1rem .1rem .2rem .1rem hsla(0, 0%, 50%, 1);
|
||||
|
||||
color: hsla(0, 0%, 10%, 1);
|
||||
}
|
||||
|
||||
.modal_title {
|
||||
/*float: left;*/
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
display: inline;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* *** END *** Utilities *** Modal Container *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** Utilities *** Badge *** */
|
||||
.badge {
|
||||
color: var(--default-fg-color);
|
||||
background-color: var(--default-bg-color);
|
||||
border-color: var(--default-border-color);
|
||||
}
|
||||
|
||||
|
||||
/* *** BEGIN *** Utilities *** Bootstrap: Buttons, Background, Foreground *** */
|
||||
|
||||
/* *** BEGIN *** Utility *** Bootstrap Tables Striped *** */
|
||||
.table-striped>tbody>tr:nth-child(odd)>td {
|
||||
/*background-color: white;*/
|
||||
/*color: black;*/
|
||||
}
|
||||
.table-striped>tbody>tr:nth-child(even)>td {
|
||||
/*background-color: #efefef;*/
|
||||
/*color: white;*/
|
||||
}
|
||||
/* *** END *** Utility *** Bootstrap Tables Striped *** */
|
||||
|
||||
/* *** BEGIN *** Utility *** Bootstrap Forms *** */
|
||||
.form-horizontal {
|
||||
background-color: white;
|
||||
/*margin: .5em;*/
|
||||
padding: 1em .5em;
|
||||
}
|
||||
/* *** END *** Utility *** Bootstrap Forms *** */
|
||||
|
||||
a.btn, button.btn {
|
||||
/* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
|
||||
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
|
||||
text-decoration: none;
|
||||
color: initial;
|
||||
color: black;
|
||||
background-color: hsl(0, 0%, 95%, 1);
|
||||
/* background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); */
|
||||
|
||||
border-width: thin;
|
||||
border-style: outset;
|
||||
border-color: hsla(0,0%,50%,1);
|
||||
border-radius: .25em;
|
||||
|
||||
font: inherit;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
line-height: normal;
|
||||
|
||||
margin: .1em;
|
||||
padding: .1em .2em;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: hsl(0, 0%, 85%, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.btn_sm, .btn.btn-sm {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.btn.btn_lg, .btn.btn-lg {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.btn.btn-wrap-text {
|
||||
white-space: normal;
|
||||
word-wrap: normal; /* break-word */
|
||||
max-width: 50em; /* 55rem */
|
||||
}
|
||||
|
||||
|
||||
/* ### default ### */
|
||||
.btn.bg-default {
|
||||
color: var(--default-fg-color);
|
||||
background-color: var(--default-bg-color) !important;
|
||||
border-color: var(--default-border-color);
|
||||
}
|
||||
.btn.btn-default {
|
||||
color: var(--default-fg-color);
|
||||
background-color: var(--default-bg-color);
|
||||
border-color: var(--default-border-color);
|
||||
}
|
||||
.btn.btn-default:hover {
|
||||
color: var(--default-fg-color-highlight);
|
||||
background-color: var(--default-bg-color-highlight);
|
||||
border-color: var(--default-border-color-highlight);
|
||||
}
|
||||
.btn.btn-outline-default {
|
||||
color: var(--default-fg-color);
|
||||
background-color: var(--default-bg-color);
|
||||
border-color: var(--default-border-color);
|
||||
}
|
||||
.btn.btn-outline-default:hover {
|
||||
color: var(--default-fg-color-highlight);
|
||||
background-color: var(--default-bg-color-highlight);
|
||||
border-color: var(--default-border-color-highlight);
|
||||
}
|
||||
|
||||
/* ### light ### */
|
||||
.bg-light {
|
||||
color: var(--default-color-lightest);
|
||||
background-color: var(--default-color-mid) !important;
|
||||
border-color: var(--default-color-dark);
|
||||
}
|
||||
.btn.btn-light {
|
||||
color: var(--default-color-lightest);
|
||||
background-color: var(--default-color-mid);
|
||||
border-color: var(--default-color-dark);
|
||||
}
|
||||
.btn.btn-light:hover {
|
||||
color: var(--default-color-lightest);
|
||||
background-color: var(--default-color-darker);
|
||||
border-color: var(--default-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-light {
|
||||
color: var(--default-color-darkest);
|
||||
background-color: var(--default-color-lighter);
|
||||
border-color: var(--default-color-darker);
|
||||
}
|
||||
.btn.btn-outline-light:hover {
|
||||
color: var(--default-color-lightest);
|
||||
background-color: var(--default-color-darker);
|
||||
border-color: var(--default-color-darkest);
|
||||
}
|
||||
|
||||
/* ### dark ### */
|
||||
.bg-dark {
|
||||
color: var(--default-color-darkest);
|
||||
background-color: var(--default-color-mid) !important;
|
||||
border-color: var(--default-color-light);
|
||||
}
|
||||
.btn.btn-dark {
|
||||
color: var(--default-color-darkest);
|
||||
background-color: var(--default-color-mid);
|
||||
border-color: var(--default-color-light);
|
||||
}
|
||||
.btn.btn-dark:hover {
|
||||
color: var(--default-color-darkest);
|
||||
background-color: var(--default-color-lighter);
|
||||
border-color: var(--default-color-lightest);
|
||||
}
|
||||
.btn.btn-outline-dark {
|
||||
color: var(--default-color-darkest);
|
||||
background-color: var(--default-color-lighter);
|
||||
border-color: var(--default-color-lighter);
|
||||
}
|
||||
.btn.btn-outline-dark:hover {
|
||||
color: var(--default-color-darkest);
|
||||
background-color: var(--default-color-lighter);
|
||||
border-color: var(--default-color-lightest);
|
||||
}
|
||||
|
||||
/* ### primary ### */
|
||||
.btn.bg-primary {
|
||||
color: var(--primary-color-lightest);
|
||||
background-color: var(--primary-color-mid) !important;
|
||||
border-color: var(--primary-color-dark);
|
||||
}
|
||||
.btn.btn-primary {
|
||||
color: var(--primary-color-lightest);
|
||||
background-color: var(--primary-color-mid);
|
||||
border-color: var(--primary-color-dark);
|
||||
}
|
||||
.btn.btn-primary:hover {
|
||||
color: var(--primary-color-lightest);
|
||||
background-color: var(--primary-color-darker);
|
||||
border-color: var(--primary-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-primary {
|
||||
color: var(--primary-color-darkest);
|
||||
background-color: var(--primary-color-lighter);
|
||||
border-color: var(--primary-color-darker);
|
||||
}
|
||||
.btn.btn-outline-primary:hover {
|
||||
color: var(--primary-color-lightest);
|
||||
background-color: var(--primary-color-darker);
|
||||
border-color: var(--primary-color-darkest);
|
||||
}
|
||||
|
||||
/* ### secondary ### */
|
||||
.bg-secondary {
|
||||
color: var(--secondary-color-lightest);
|
||||
background-color: var(--secondary-color-mid) !important;
|
||||
border-color: var(--secondary-color-dark);
|
||||
}
|
||||
.btn.btn-secondary {
|
||||
color: var(--secondary-color-lightest);
|
||||
background-color: var(--secondary-color-mid);
|
||||
border-color: var(--secondary-color-dark);
|
||||
}
|
||||
.btn.btn-secondary:hover {
|
||||
color: var(--secondary-color-lightest);
|
||||
background-color: var(--secondary-color-darker);
|
||||
border-color: var(--secondary-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-secondary {
|
||||
color: var(--secondary-color-darkest);
|
||||
background-color: var(--secondary-color-lighter);
|
||||
border-color: var(--secondary-color-darker);
|
||||
}
|
||||
.btn.btn-outline-secondary:hover {
|
||||
color: var(--secondary-color-lightest);
|
||||
background-color: var(--secondary-color-darker);
|
||||
border-color: var(--secondary-color-darkest);
|
||||
}
|
||||
|
||||
/* ### info ### */
|
||||
.bg-info {
|
||||
color: var(--info-color-lightest);
|
||||
background-color: var(--info-color-mid) !important;
|
||||
border-color: var(--info-color-dark);
|
||||
}
|
||||
.btn.btn-info {
|
||||
color: var(--info-color-lightest);
|
||||
background-color: var(--info-color-mid);
|
||||
border-color: var(--info-color-dark);
|
||||
}
|
||||
.btn.btn-info:hover {
|
||||
color: var(--info-color-lightest);
|
||||
background-color: var(--info-color-darker);
|
||||
border-color: var(--info-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-info {
|
||||
color: var(--info-color-darkest);
|
||||
background-color: var(--info-color-lighter);
|
||||
border-color: var(--info-color-darker);
|
||||
}
|
||||
.btn.btn-outline-info:hover {
|
||||
color: var(--info-color-lightest);
|
||||
background-color: var(--info-color-darker);
|
||||
border-color: var(--info-color-darkest);
|
||||
}
|
||||
|
||||
/* ### success ### */
|
||||
.bg-success {
|
||||
color: var(--success-color-lightest);
|
||||
background-color: var(--success-color-mid) !important;
|
||||
border-color: var(--success-color-dark);
|
||||
}
|
||||
.btn.btn-success {
|
||||
color: var(--success-color-lightest);
|
||||
background-color: var(--success-color-mid);
|
||||
border-color: var(--success-color-dark);
|
||||
}
|
||||
.btn.btn-success:hover {
|
||||
color: var(--success-color-lightest);
|
||||
background-color: var(--success-color-darker);
|
||||
border-color: var(--success-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-success {
|
||||
color: var(--success-color-darkest);
|
||||
background-color: var(--success-color-lighter);
|
||||
border-color: var(--success-color-darker);
|
||||
}
|
||||
.btn.btn-outline-success:hover {
|
||||
color: var(--success-color-lightest);
|
||||
background-color: var(--success-color-darker);
|
||||
border-color: var(--success-color-darkest);
|
||||
}
|
||||
|
||||
/* ### warning ### */
|
||||
.bg-warning {
|
||||
color: var(--warning-color-lightest);
|
||||
background-color: var(--warning-color-mid) !important;
|
||||
border-color: var(--warning-color-dark);
|
||||
}
|
||||
.btn.btn-warning {
|
||||
color: var(--warning-color-lightest);
|
||||
background-color: var(--warning-color-mid);
|
||||
border-color: var(--warning-color-dark);
|
||||
}
|
||||
.btn.btn-warning:hover {
|
||||
color: var(--warning-color-lightest);
|
||||
background-color: var(--warning-color-darker);
|
||||
border-color: var(--warning-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-warning {
|
||||
color: var(--warning-color-darkest);
|
||||
background-color: var(--warning-color-lighter);
|
||||
border-color: var(--warning-color-darker);
|
||||
}
|
||||
.btn.btn-outline-warning:hover {
|
||||
color: var(--warning-color-lightest);
|
||||
background-color: var(--warning-color-darker);
|
||||
border-color: var(--warning-color-darkest);
|
||||
}
|
||||
|
||||
/* ### danger ### */
|
||||
.bg-danger {
|
||||
color: var(--danger-color-lightest);
|
||||
background-color: var(--danger-color-mid) !important;
|
||||
border-color: var(--danger-color-dark);
|
||||
}
|
||||
.btn.btn-danger {
|
||||
color: var(--danger-color-lightest);
|
||||
background-color: var(--danger-color-mid);
|
||||
border-color: var(--danger-color-dark);
|
||||
}
|
||||
.btn.btn-danger:hover {
|
||||
color: var(--danger-color-lightest);
|
||||
background-color: var(--danger-color-darker);
|
||||
border-color: var(--danger-color-darkest);
|
||||
}
|
||||
.btn.btn-outline-danger {
|
||||
color: var(--danger-color-darkest);
|
||||
background-color: var(--danger-color-lighter);
|
||||
border-color: var(--danger-color-darker);
|
||||
}
|
||||
.btn.btn-outline-danger:hover {
|
||||
color: var(--danger-color-lightest);
|
||||
background-color: var(--danger-color-darker);
|
||||
border-color: var(--danger-color-darkest);
|
||||
}
|
||||
|
||||
/* *** BEGIN *** Utility *** Bootstrap Overrides *** */
|
||||
@media (min-width: 992px) {
|
||||
.modal-lg {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.modal-lg {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
/* *** END *** Utility *** Bootstrap Overrides *** */
|
||||
|
||||
|
||||
|
||||
.data_field {
|
||||
border: solid thin #eee;
|
||||
}
|
||||
|
||||
.data_field:hover {
|
||||
border: dashed thin #fbb;
|
||||
}
|
||||
|
||||
|
||||
.list_inline {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.list_inline li {
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
margin-left: .25em;
|
||||
/*margin-right: .25em;*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
.name_prefix {
|
||||
|
||||
}
|
||||
.name_informal {
|
||||
|
||||
}
|
||||
.name_given {
|
||||
|
||||
}
|
||||
.name_middle {
|
||||
|
||||
}
|
||||
.name_family {
|
||||
|
||||
}
|
||||
.name_suffix {
|
||||
|
||||
}
|
||||
|
||||
input.name_prefix {
|
||||
/*width: 3.5em;*/
|
||||
}
|
||||
input.name_informal {
|
||||
/*width: 6em;*/
|
||||
}
|
||||
input.name_given {
|
||||
/*width: 6em;*/
|
||||
}
|
||||
input.name_middle {
|
||||
/*width: 6em;*/
|
||||
}
|
||||
input.name_family {
|
||||
/*width: 6em;*/
|
||||
}
|
||||
input.name_suffix {
|
||||
/*width: 3.5em;*/
|
||||
}
|
||||
446
app/css/aether_variables.css
Normal file
446
app/css/aether_variables.css
Normal file
@@ -0,0 +1,446 @@
|
||||
/* Aether Style Variables */
|
||||
|
||||
:root {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-primary-light: #6c9dc6;
|
||||
--bs-primary: #0a8dac; /*#0d6efd;*/
|
||||
--bs-primary-dark: #325d81;
|
||||
--bs-secondary: #484b6e;
|
||||
--bs-success: #32846e;
|
||||
--bs-info: #46b4b4; /*#0dcaf0;*/
|
||||
--bs-warning: #6f7541;
|
||||
--bs-danger: #7b503b;
|
||||
--bs-lighter: #d0e0ed; /*#f8f9fa;*/
|
||||
--bs-light: #72a1c8; /*#f8f9fa;*/
|
||||
--bs-medium: #335f83; /*#212529;*/
|
||||
--bs-dark: #294d6a; /*#212529;*/
|
||||
--bs-darker: #1f3a4f; /*#212529;*/
|
||||
--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
:root {
|
||||
/*
|
||||
*
|
||||
* Light navy blue
|
||||
* #335f83 or #335f84, rgb(51, 96, 132), hsl(207, 44%, 36%), cmyk(61, 27, 0, 49)
|
||||
*
|
||||
* hsl(210, 50%, 50%), rgb(64, 128, 191), #4080bf
|
||||
*
|
||||
* purple: #8241bf
|
||||
* green: #41BF7C
|
||||
*
|
||||
* red: hsl(0, 50%, 50%), #BF4640 (close "split" complementary 30deg)
|
||||
* orange: hsl(30, 50%, 50%), #BF8040 (linear by hue 30deg)
|
||||
* yellow: hsl(60, 50%, 50%), #BFB940 (close "split" complementary 30deg)
|
||||
* light green: hsl(90, 50%, 50%), #80BF40 (linear by hue 30deg)
|
||||
* dark green: hsl(150, 50%, 50%), #40BF80 (linear by hue 30deg)
|
||||
* teal: hsl(180, 50%, 50%), #40BF80 (linear by hue 30deg)
|
||||
* blue: hsl(210, 50%, 50%), #4080BF
|
||||
* purple: hsl(270, 50%, 50%), #8040BF (linear by hue 30deg)
|
||||
* pink (dark): hsl(330, 50%, 50%), #BF4080 (linear by hue 30deg)
|
||||
*
|
||||
* primary-hue: 210, #4080BF
|
||||
* accent-hue: 264, #7340BF
|
||||
*
|
||||
* #0080FF
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
--saturation-least: 10%;
|
||||
--saturation-less: 20%;
|
||||
--saturation: 50%;
|
||||
--saturation-more: 80%;
|
||||
--saturation-most: 90%;
|
||||
|
||||
--lum-lightest: calc(50% + 50%);
|
||||
--lum-lighter: calc(50% + 40%);
|
||||
--lum-light: calc(50% + 35%);
|
||||
--lum-mid: 50%;
|
||||
--lum: 50%;
|
||||
--lum-dark: calc(50% - 10%);
|
||||
--lum-darker: calc(50% - 20%);
|
||||
--lum-darkest: calc(50% - 30%);
|
||||
|
||||
/*
|
||||
* https://coolors.co/bfbf40-80bf40-40bf40-40bf80-40bfbf-407fbf-4040bf-7f40bf-bf40bf-bf4080
|
||||
*/
|
||||
--hue-red: 0; /* red bf4141 */
|
||||
--hue-orange: calc(0 + 30); /* brown bf8041 */
|
||||
--hue-yellow: calc(0 + 60); /* yellow-green bfbf40 */
|
||||
--hue-light_green: calc(0 + 90); /* green 80bf40 */
|
||||
--hue-green: calc(0 + 120); /* green 40bf40 */
|
||||
--hue-dark_green: calc(0 + 150); /* green-cyan 40bf80 */
|
||||
--hue-teal: calc(0 + 180); /* cyan 40bfbf */
|
||||
--hue-cyan: calc(0 + 180); /* cyan 40bfbf */
|
||||
--hue-blue: calc(0 + 210); /* cyan-blue 407fbf */
|
||||
--hue-indigo: calc(0 + 240); /* blue-magenta 4040bf */
|
||||
--hue-purple: calc(0 + 270); /* blue-magenta 7f40bf */
|
||||
--hue-pink: calc(0 + 300); /* magenta bf40bf */
|
||||
--hue-dark_pink: calc(0 + 330); /* magenta-pink bf4080 */
|
||||
|
||||
--hue: 210;
|
||||
--hue-base: 210;
|
||||
--hue-complementary: calc(var(--hue) - 180);
|
||||
/*--hue-accent: 264;*/
|
||||
|
||||
--hue-default: 210;
|
||||
--hue-primary: 210;
|
||||
--hue-secondary: 210;
|
||||
--hue-info: 180;
|
||||
--hue-success: 120;
|
||||
--hue-warning: 60;
|
||||
--hue-danger: 0;
|
||||
|
||||
--color-l5: hsl(var(--hue), var(--saturation), calc( 50 + 50)%);
|
||||
--color-l4: hsl(var(--hue), var(--saturation), calc( 50 + 40)%);
|
||||
--color-l3: hsl(var(--hue), var(--saturation), calc( 50 + 30)%);
|
||||
--color-l2: hsl(var(--hue), var(--saturation), calc( 50 + 20)%);
|
||||
--color-l1: hsl(var(--hue), var(--saturation), calc( 50 + 10)%);
|
||||
--color-default: hsl(var(--hue), var(--saturation), calc( 50 + 0)%);
|
||||
--color-d1: hsl(var(--hue), var(--saturation), calc( 50 - 10)%);
|
||||
--color-d2: hsl(var(--hue), var(--saturation), calc( 50 - 20)%);
|
||||
--color-d3: hsl(var(--hue), var(--saturation), calc( 50 - 30)%);
|
||||
--color-d4: hsl(var(--hue), var(--saturation), calc( 50 - 40)%);
|
||||
--color-d5: hsl(var(--hue), var(--saturation), calc( 50 - 50)%);
|
||||
|
||||
--default-fg-color-highlight: hsl(var(--hue-default), var(--saturation-most), var(--lum-darker));
|
||||
--default-fg-color: hsl(var(--hue-default), var(--saturation-most), var(--lum-darkest));
|
||||
|
||||
--default-bg-color-highlight: hsl(var(--hue-default), var(--saturation-least), var(--lum-lighter));
|
||||
--default-bg-color: hsl(var(--hue-default), var(--saturation-least), var(--lum-lightest));
|
||||
|
||||
--default-border-color-highlight: hsl(var(--hue-default), var(--saturation-less), var(--lum-darkest));
|
||||
--default-border-color: hsl(var(--hue-default), var(--saturation-less), var(--lum-darker));
|
||||
|
||||
--default-color-lightest: hsl(var(--hue-blue), var(--saturation-least), var(--lum-lightest));
|
||||
--default-color-lighter: hsl(var(--hue-blue), var(--saturation-least), var(--lum-lighter));
|
||||
--default-color-light: hsl(var(--hue-blue), var(--saturation-least), var(--lum-light));
|
||||
--default-color-mid: hsl(var(--hue-blue), var(--saturation-least), var(--lum-mid));
|
||||
--default-color-dark: hsl(var(--hue-blue), var(--saturation-least), var(--lum-dark));
|
||||
--default-color-darker: hsl(var(--hue-blue), var(--saturation-least), var(--lum-darker));
|
||||
--default-color-darkest: hsl(var(--hue-blue), var(--saturation-least), var(--lum-darkest));
|
||||
|
||||
--light-fg-color: #1a3042;
|
||||
--light-bg-color: #d0e0ed; /*#d0e0ed*/
|
||||
--light-border-color: #a1c1da; /*#a1c1da*/
|
||||
|
||||
--medium-fg-color: #f1f6fa;
|
||||
--medium-bg-color: #335f83;
|
||||
--medium-border-color: #294d6a;
|
||||
|
||||
--dark-fg-color: #f1f6fa;
|
||||
--dark-bg-color: #4682b3;
|
||||
--dark-border-color: #335f83;
|
||||
|
||||
--primary-color-lightest: hsl(var(--hue-primary), var(--saturation), var(--lum-lightest));
|
||||
--primary-color-lighter: hsl(var(--hue-primary), var(--saturation), var(--lum-lighter));
|
||||
--primary-color-light: hsl(var(--hue-primary), var(--saturation), var(--lum-light));
|
||||
--primary-color-mid: hsl(var(--hue-primary), var(--saturation), var(--lum-mid));
|
||||
--primary-color-dark: hsl(var(--hue-primary), var(--saturation), var(--lum-dark));
|
||||
--primary-color-darker: hsl(var(--hue-primary), var(--saturation), var(--lum-darker));
|
||||
--primary-color-darkest: hsl(var(--hue-primary), var(--saturation), var(--lum-darkest));
|
||||
|
||||
--secondary-color-lightest: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-lightest));
|
||||
--secondary-color-lighter: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-lighter));
|
||||
--secondary-color-light: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-light));
|
||||
--secondary-color-mid: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-mid));
|
||||
--secondary-color-dark: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-dark));
|
||||
--secondary-color-darker: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-darker));
|
||||
--secondary-color-darkest: hsl(var(--hue-secondary), var(--saturation-least), var(--lum-darkest));
|
||||
|
||||
--info-color-lightest: hsl(var(--hue-info), var(--saturation-less), var(--lum-lightest));
|
||||
--info-color-lighter: hsl(var(--hue-info), var(--saturation-less), var(--lum-lighter));
|
||||
--info-color-light: hsl(var(--hue-info), var(--saturation-less), var(--lum-light));
|
||||
--info-color-mid: hsl(var(--hue-info), var(--saturation-less), var(--lum-mid));
|
||||
--info-color-dark: hsl(var(--hue-info), var(--saturation-less), var(--lum-dark));
|
||||
--info-color-darker: hsl(var(--hue-info), var(--saturation-less), var(--lum-darker));
|
||||
--info-color-darkest: hsl(var(--hue-info), var(--saturation-less), var(--lum-darkest));
|
||||
|
||||
--success-color-lightest: hsl(var(--hue-success), var(--saturation-less), var(--lum-lightest));
|
||||
--success-color-lighter: hsl(var(--hue-success), var(--saturation-less), var(--lum-lighter));
|
||||
--success-color-light: hsl(var(--hue-success), var(--saturation-less), var(--lum-light));
|
||||
--success-color-mid: hsl(var(--hue-success), var(--saturation-less), var(--lum-mid));
|
||||
--success-color-dark: hsl(var(--hue-success), var(--saturation-less), var(--lum-dark));
|
||||
--success-color-darker: hsl(var(--hue-success), var(--saturation-less), var(--lum-darker));
|
||||
--success-color-darkest: hsl(var(--hue-success), var(--saturation-less), var(--lum-darkest));
|
||||
|
||||
--warning-color-lightest: hsl(var(--hue-warning), var(--saturation-less), var(--lum-lightest));
|
||||
--warning-color-lighter: hsl(var(--hue-warning), var(--saturation-less), var(--lum-lighter));
|
||||
--warning-color-light: hsl(var(--hue-warning), var(--saturation-less), var(--lum-light));
|
||||
--warning-color-mid: hsl(var(--hue-warning), var(--saturation-less), var(--lum-mid));
|
||||
--warning-color-dark: hsl(var(--hue-warning), var(--saturation-less), var(--lum-dark));
|
||||
--warning-color-darker: hsl(var(--hue-warning), var(--saturation-less), var(--lum-darker));
|
||||
--warning-color-darkest: hsl(var(--hue-warning), var(--saturation-less), var(--lum-darkest));
|
||||
|
||||
--danger-color-lightest: hsl(var(--hue-danger), var(--saturation-less), var(--lum-lightest));
|
||||
--danger-color-lighter: hsl(var(--hue-danger), var(--saturation-less), var(--lum-lighter));
|
||||
--danger-color-light: hsl(var(--hue-danger), var(--saturation-less), var(--lum-light));
|
||||
--danger-color-mid: hsl(var(--hue-danger), var(--saturation-less), var(--lum-mid));
|
||||
--danger-color-dark: hsl(var(--hue-danger), var(--saturation-less), var(--lum-dark));
|
||||
--danger-color-darker: hsl(var(--hue-danger), var(--saturation-less), var(--lum-darker));
|
||||
--danger-color-darkest: hsl(var(--hue-danger), var(--saturation-less), var(--lum-darkest));
|
||||
|
||||
--link-fg-color: #f1f6fa;
|
||||
--link-bg-color: #5196CF;
|
||||
--link-border-color: #4682b3;
|
||||
|
||||
--btn_trans_in_delay: 0s;
|
||||
--btn_trans_in_duration: .1s;
|
||||
--btn_trans_out_delay: .15s; /*.25s*/
|
||||
--btn_trans_out_duration: .15s;
|
||||
|
||||
--default_fg_lightness: 5%; /* foreground */
|
||||
--default_bg_lightness: 80%; /* background */
|
||||
--default_bd_lightness: 70%; /* border */
|
||||
|
||||
--outline_fg_lightness: calc(var(--default_fg_lightness) + 25%);
|
||||
--outline_bg_lightness: calc(var(--default_bg_lightness) + 15%);
|
||||
--outline_bd_lightness: calc(var(--default_bd_lightness) - 50%);
|
||||
|
||||
--disabled_fg_lightness: calc(var(--default_fg_lightness) + 40%);
|
||||
--disabled_bg_lightness: calc(var(--default_bg_lightness) + 10%);
|
||||
--disabled_bd_lightness: calc(var(--default_bd_lightness) - 10%);
|
||||
|
||||
--hover_fg_lightness: calc(var(--default_fg_lightness) - 5%);
|
||||
--hover_bg_lightness: calc(var(--default_bg_lightness) - 20%);
|
||||
--hover_bd_lightness: calc(var(--default_bd_lightness) - 30%);
|
||||
|
||||
|
||||
--site_menu_btn_color: hsla(0,0%,var(--default_fg_lightness),1);
|
||||
--site_menu_btn_bg_color: hsla(0,0%,var(--default_bg_lightness),1);
|
||||
--site_menu_btn_border_color: hsla(0,0%,var(--default_bd_lightness),1);
|
||||
|
||||
--site_menu_btn_disabled_color: hsla(0,0%,var(--disabled_fg_lightness),1);
|
||||
--site_menu_btn_disabled_bg_color: hsla(0,0%,var(--disabled_bg_lightness),1);
|
||||
--site_menu_btn_disabled_border_color: hsla(0,0%,var(--disabled_bd_lightness),1);
|
||||
|
||||
--site_menu_btn_hover_color: hsla(0,50%,var(--hover_fg_lightness),1);
|
||||
--site_menu_btn_hover_bg_color: hsla(0,0%,var(--hover_bg_lightness),1);
|
||||
--site_menu_btn_hover_border_color: hsla(0,0%,var(--hover_bd_lightness),1);
|
||||
|
||||
--site_footer_color: hsla(0,0%,35%,1);
|
||||
--site_footer_bg_color: hsla(0,0%,100%,1);
|
||||
--site_footer_border_color: hsla(0,0%,80%,1);
|
||||
|
||||
--site_footer_hover_color: hsla(0,0%,5%,1);
|
||||
--site_footer_hover_bg_color: hsla(0,0%,100%,1);
|
||||
--site_footer_hover_border_color: hsla(0,0%,70%,1);
|
||||
|
||||
--system_footer_color: hsla(0,0%,35%,1);
|
||||
--system_footer_bg_color: hsla(0,0%,90%,1);
|
||||
--system_footer_border_color: hsla(0,0%,80%,1);
|
||||
|
||||
--system_footer_hover_color: hsla(0,0%,5%,1);
|
||||
--system_footer_hover_bg_color: hsla(0,0%,80%,1);
|
||||
--system_footer_hover_border_color: hsla(0,0%,70%,1);
|
||||
|
||||
--btn_font_weight_disabled: 300;
|
||||
--btn_font_weight_default: 400;
|
||||
--btn_font_weight_active: 500;
|
||||
--btn_font_weight_primary: 700;
|
||||
|
||||
/* Default Buttons */
|
||||
--default_btn_color: hsla(var(--hue-default),var(--saturation-least),var(--default_fg_lightness),1);
|
||||
--default_btn_bg_color: hsla(var(--hue-default),var(--saturation-least),var(--default_bg_lightness),1);
|
||||
--default_btn_border_color: hsla(var(--hue-default),var(--saturation-least),var(--default_bd_lightness),1);
|
||||
|
||||
--default_btn_outline_color: hsla(var(--hue-default),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--default_btn_outline_bg_color: hsla(var(--hue-default),var(--saturation-less),var(--outline_bg_lightness),1);
|
||||
--default_btn_outline_border_color: hsla(var(--hue-default),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--default_btn_disabled_color: hsla(var(--hue-default),var(--saturation-least),var(--disabled_fg_lightness),1);
|
||||
--default_btn_disabled_bg_color: hsla(var(--hue-default),var(--saturation-least),var(--disabled_bg_lightness),1);
|
||||
--default_btn_disabled_border_color: hsla(var(--hue-default),var(--saturation-least),var(--disabled_bd_lightness),1);
|
||||
|
||||
--default_btn_hover_color: hsla(var(--hue-default),var(--saturation-least),var(--hover_fg_lightness),1);
|
||||
--default_btn_hover_bg_color: hsla(var(--hue-default),var(--saturation-least),var(--hover_bg_lightness),1);
|
||||
--default_btn_hover_border_color: hsla(var(--hue-default),var(--saturation-least),var(--hover_bd_lightness),1);
|
||||
|
||||
/* Primary Buttons */
|
||||
--primary_btn_color: hsla(var(--hue-primary),var(--saturation-less),var(--default_fg_lightness),1);
|
||||
--primary_btn_bg_color: hsla(var(--hue-primary),var(--saturation-less),var(--default_bg_lightness),1);
|
||||
--primary_btn_border_color: hsla(var(--hue-primary),var(--saturation-less),var(--default_bd_lightness),1);
|
||||
|
||||
--primary_btn_outline_color: hsla(var(--hue-primary),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--primary_btn_outline_bg_color: hsla(var(--hue-primary),var(--saturation-less),var(--outline_bg_lightness),1);
|
||||
--primary_btn_outline_border_color: hsla(var(--hue-primary),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--primary_btn_disabled_color: hsla(var(--hue-primary),var(--saturation-less),var(--disabled_fg_lightness),1);
|
||||
--primary_btn_disabled_bg_color: hsla(var(--hue-primary),var(--saturation-less),var(--disabled_bg_lightness),1);
|
||||
--primary_btn_disabled_border_color: hsla(var(--hue-primary),var(--saturation-less),var(--disabled_bd_lightness),1);
|
||||
|
||||
--primary_btn_hover_color: hsla(var(--hue-primary),var(--saturation-less),var(--hover_fg_lightness),1);
|
||||
--primary_btn_hover_bg_color: hsla(var(--hue-primary),var(--saturation-less),var(--hover_bg_lightness),1);
|
||||
--primary_btn_hover_border_color: hsla(var(--hue-primary),var(--saturation-less),var(--hover_bd_lightness),1);
|
||||
|
||||
/* Secondary Buttons */
|
||||
--secondary_btn_color: hsla(var(--hue-secondary),var(--saturation-less),var(--default_fg_lightness),1);
|
||||
--secondary_btn_bg_color: hsla(var(--hue-secondary),var(--saturation-less),var(--default_bg_lightness),1);
|
||||
--secondary_btn_border_color: hsla(var(--hue-secondary),var(--saturation-less),var(--default_bd_lightness),1);
|
||||
|
||||
--secondary_btn_outline_color: hsla(var(--hue-secondary),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--secondary_btn_outline_bg_color: hsla(var(--hue-secondary),var(--saturation-less),var(--outline_bg_lightness),1);
|
||||
--secondary_btn_outline_border_color: hsla(var(--hue-secondary),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--secondary_btn_disabled_color: hsla(var(--hue-secondary),var(--saturation-less),var(--disabled_fg_lightness),1);
|
||||
--secondary_btn_disabled_bg_color: hsla(var(--hue-secondary),var(--saturation-less),var(--disabled_bg_lightness),1);
|
||||
--secondary_btn_disabled_border_color: hsla(var(--hue-secondary),var(--saturation-less),var(--disabled_bd_lightness),1);
|
||||
|
||||
--secondary_btn_hover_color: hsla(var(--hue-secondary),var(--saturation-less),var(--hover_fg_lightness),1);
|
||||
--secondary_btn_hover_bg_color: hsla(var(--hue-secondary),var(--saturation-less),var(--hover_bg_lightness),1);
|
||||
--secondary_btn_hover_border_color: hsla(var(--hue-secondary),var(--saturation-less),var(--hover_bd_lightness),1);
|
||||
|
||||
/* Info Buttons */
|
||||
--info_btn_color: hsla(var(--hue-info),var(--saturation-less),var(--default_fg_lightness),1);
|
||||
--info_btn_bg_color: hsla(var(--hue-info),var(--saturation-less),var(--default_bg_lightness),1);
|
||||
--info_btn_border_color: hsla(var(--hue-info),var(--saturation-less),var(--default_bd_lightness),1);
|
||||
|
||||
--info_btn_outline_color: hsla(var(--hue-info),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--info_btn_outline_bg_color: hsla(var(--hue-info),var(--saturation-less),var(--outline_bg_lightness),1);
|
||||
--info_btn_outline_border_color: hsla(var(--hue-info),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--info_btn_disabled_color: hsla(var(--hue-info),var(--saturation-less),var(--disabled_fg_lightness),1);
|
||||
--info_btn_disabled_bg_color: hsla(var(--hue-info),var(--saturation-less),var(--disabled_bg_lightness),1);
|
||||
--info_btn_disabled_border_color: hsla(var(--hue-info),var(--saturation-less),var(--disabled_bd_lightness),1);
|
||||
|
||||
--info_btn_hover_color: hsla(var(--hue-info),var(--saturation-less),var(--hover_fg_lightness),1);
|
||||
--info_btn_hover_bg_color: hsla(var(--hue-info),var(--saturation-less),var(--hover_bg_lightness),1);
|
||||
--info_btn_hover_border_color: hsla(var(--hue-info),var(--saturation-less),var(--hover_bd_lightness),1);
|
||||
|
||||
/* Success Buttons */
|
||||
--success_btn_color: hsla(var(--hue-success),var(--saturation-less),var(--default_fg_lightness),1);
|
||||
--success_btn_bg_color: hsla(var(--hue-success),var(--saturation-less),var(--default_bg_lightness),1);
|
||||
--success_btn_border_color: hsla(var(--hue-success),var(--saturation-less),var(--default_bd_lightness),1);
|
||||
|
||||
--success_btn_outline_color: hsla(var(--hue-success),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--success_btn_outline_bg_color: hsla(var(--hue-success),var(--saturation-less),var(--outline_bg_lightness),1);
|
||||
--success_btn_outline_border_color: hsla(var(--hue-success),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--success_btn_disabled_color: hsla(var(--hue-success),var(--saturation-less),var(--disabled_fg_lightness),1);
|
||||
--success_btn_disabled_bg_color: hsla(var(--hue-success),var(--saturation-less),var(--disabled_bg_lightness),1);
|
||||
--success_btn_disabled_border_color: hsla(var(--hue-success),var(--saturation-less),var(--disabled_bd_lightness),1);
|
||||
|
||||
--success_btn_hover_color: hsla(var(--hue-success),var(--saturation-less),var(--hover_fg_lightness),1);
|
||||
--success_btn_hover_bg_color: hsla(var(--hue-success),var(--saturation-less),var(--hover_bg_lightness),1);
|
||||
--success_btn_hover_border_color: hsla(var(--hue-success),var(--saturation-less),var(--hover_bd_lightness),1);
|
||||
|
||||
/* Warning Buttons */
|
||||
--warning_btn_color: hsla(var(--hue-warning),var(--saturation-less),var(--default_fg_lightness),1);
|
||||
--warning_btn_bg_color: hsla(var(--hue-warning),var(--saturation-less),var(--default_bg_lightness),1);
|
||||
--warning_btn_border_color: hsla(var(--hue-warning),var(--saturation-less),var(--default_bd_lightness),1);
|
||||
|
||||
--warning_btn_outline_color: hsla(var(--hue-warning),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--warning_btn_outline_bg_color: hsla(var(--hue-warning),var(--saturation-less),var(--outline_bg_lightness),1);
|
||||
--warning_btn_outline_border_color: hsla(var(--hue-warning),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--warning_btn_disabled_color: hsla(var(--hue-warning),var(--saturation-less),var(--disabled_fg_lightness),1);
|
||||
--warning_btn_disabled_bg_color: hsla(var(--hue-warning),var(--saturation-less),var(--disabled_bg_lightness),1);
|
||||
--warning_btn_disabled_border_color: hsla(var(--hue-warning),var(--saturation-less),var(--disabled_bd_lightness),1);
|
||||
|
||||
--warning_btn_hover_color: hsla(var(--hue-warning),var(--saturation-less),var(--hover_fg_lightness),1);
|
||||
--warning_btn_hover_bg_color: hsla(var(--hue-warning),var(--saturation-less),var(--hover_bg_lightness),1);
|
||||
--warning_btn_hover_border_color: hsla(var(--hue-warning),var(--saturation-less),var(--hover_bd_lightness),1);
|
||||
|
||||
/* Danger Buttons */
|
||||
--danger_btn_color: hsla(var(--hue-danger),var(--saturation-less),var(--default_fg_lightness),1);
|
||||
--danger_btn_bg_color: hsla(var(--hue-danger),var(--saturation-more),var(--default_bg_lightness),1);
|
||||
--danger_btn_border_color: hsla(var(--hue-danger),var(--saturation-less),var(--default_bd_lightness),1);
|
||||
|
||||
--danger_btn_outline_color: hsla(var(--hue-danger),var(--saturation-most),var(--outline_fg_lightness),1);
|
||||
--danger_btn_outline_bg_color: hsla(var(--hue-danger),var(--saturation-more),var(--outline_bg_lightness),1);
|
||||
--danger_btn_outline_border_color: hsla(var(--hue-danger),var(--saturation-most),var(--outline_bd_lightness),1);
|
||||
|
||||
--danger_btn_disabled_color: hsla(var(--hue-danger),var(--saturation-less),var(--disabled_fg_lightness),1);
|
||||
--danger_btn_disabled_bg_color: hsla(var(--hue-danger),var(--saturation-less),var(--disabled_bg_lightness),1);
|
||||
--danger_btn_disabled_border_color: hsla(var(--hue-danger),var(--saturation-less),var(--disabled_bd_lightness),1);
|
||||
|
||||
--danger_btn_hover_color: hsla(var(--hue-danger),var(--saturation-less),var(--hover_fg_lightness),1);
|
||||
--danger_btn_hover_bg_color: hsla(var(--hue-danger),var(--saturation-more),var(--hover_bg_lightness),1);
|
||||
--danger_btn_hover_border_color: hsla(var(--hue-danger),var(--saturation-less),var(--hover_bd_lightness),1);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* https://encycolorpedia.com/035096
|
||||
* Medium electric blue / #035096
|
||||
*
|
||||
* https://encycolorpedia.com/32527b
|
||||
* Metallic blue / #32527b
|
||||
*
|
||||
* https://encycolorpedia.com/4682b4
|
||||
* Steelblue / Steel blue / #4682b4
|
||||
*/
|
||||
|
||||
/*
|
||||
* Faux-Metallic Blue #335f83
|
||||
* http://www.2020colours.com/335f83
|
||||
* https://encycolorpedia.com/335f83
|
||||
* https://www.w3schools.com/w3css/w3css_color_generator.asp
|
||||
*
|
||||
* #335f83
|
||||
* rgb(51, 95, 131)
|
||||
* hsl(147, 112%, 91%)
|
||||
* cmyk(61, 27, 0, 49)
|
||||
*
|
||||
* complementary #825633
|
||||
* warning #CFB33C, rgb(207,179,60)
|
||||
* danger #B55F35, rgb(181,95,53)
|
||||
*/
|
||||
.aether__theme--l5 {color:#000 !important; background-color:#f1f6fa !important}
|
||||
.aether__theme--l4 {color:#000 !important; background-color:#d0e0ed !important}
|
||||
.aether__theme--l3 {color:#000 !important; background-color:#a1c1da !important}
|
||||
.aether__theme--l2 {color:#fff !important; background-color:#72a1c8 !important}
|
||||
.aether__theme--l1 {color:#fff !important; background-color:#4682b3 !important}
|
||||
.aether__theme--d1 {color:#fff !important; background-color:#2e5677 !important}
|
||||
.aether__theme--d2 {color:#fff !important; background-color:#294d6a !important}
|
||||
.aether__theme--d3 {color:#fff !important; background-color:#24435d !important}
|
||||
.aether__theme--d4 {color:#fff !important; background-color:#1f3a4f !important}
|
||||
.aether__theme--d5 {color:#fff !important; background-color:#1a3042 !important}
|
||||
|
||||
.aether__theme--light {color:#000 !important; background-color:#f1f6fa !important}
|
||||
.aether__theme--dark {color:#fff !important; background-color:#1a3042 !important}
|
||||
.aether__theme--action {color:#fff !important; background-color:#1a3042 !important}
|
||||
|
||||
.aether__theme {color:#fff !important; background-color:#335f83 !important}
|
||||
.aether__theme--text {color:#335f83 !important}
|
||||
.aether__theme--border {border-color:#335f83 !important}
|
||||
|
||||
.aether__theme--hover:hover {color:#fff !important; background-color:#335f83 !important}
|
||||
.aether__theme--text_hover:hover {color:#335f83 !important}
|
||||
.aether__theme--border_hover:hover {border-color:#335f83 !important}
|
||||
|
||||
/*
|
||||
* success #66be07
|
||||
* info #00beff
|
||||
* danger #660007
|
||||
*
|
||||
* error #660007
|
||||
*
|
||||
* primary 5196CF
|
||||
* secondary 688297
|
||||
*
|
||||
* info 8FB2CF (blue)
|
||||
* success 2C827B (green)
|
||||
*
|
||||
* warning 7F8226 (brown yellow)
|
||||
* danger 824240 (brown orange)
|
||||
*
|
||||
* other 393B82 (purple)
|
||||
*/
|
||||
774
app/css/base_style_event_launcher.css
Normal file
774
app/css/base_style_event_launcher.css
Normal file
@@ -0,0 +1,774 @@
|
||||
body {
|
||||
background-color: steelblue;
|
||||
/* https://app.haikei.app/ */
|
||||
background-image: url('/static/images/site_background.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body>.body_container {
|
||||
}
|
||||
|
||||
/* #System-Nav-Menu { } */
|
||||
#Site-Header { }
|
||||
#Site-Nav-Menu { }
|
||||
#System-Notifications { }
|
||||
#Main-Body {
|
||||
}
|
||||
#Main-Notifications { }
|
||||
#Main-Nav-Menu { }
|
||||
#Main-Content { }
|
||||
#Site-Footer { }
|
||||
/* #System-Footer { } */
|
||||
/* #System-Nav-Menu-Float { } */
|
||||
/* #System-Debug { } */
|
||||
|
||||
|
||||
/* #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 {
|
||||
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-image:
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest)),
|
||||
transparent
|
||||
) 1;
|
||||
|
||||
background-color: hsla(0,0%,100%,.98);
|
||||
}
|
||||
|
||||
#System-Nav-Menu:hover {
|
||||
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-color: hsla(0,0%,80%,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%);
|
||||
|
||||
}
|
||||
|
||||
#System-Nav-Menu img {
|
||||
}
|
||||
#System-Nav-Menu:hover img {
|
||||
}
|
||||
|
||||
.system_menu_clicked {
|
||||
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%);
|
||||
}
|
||||
|
||||
|
||||
.system_menu_begin {
|
||||
/*border: solid thin red;*/
|
||||
|
||||
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;*/
|
||||
|
||||
/*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;*/
|
||||
|
||||
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: solid thin gray;
|
||||
|
||||
/*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 {
|
||||
}
|
||||
|
||||
.system_menu_visible {
|
||||
/*border-bottom: solid thin gray;*/
|
||||
|
||||
/*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 {
|
||||
}
|
||||
|
||||
.system_menu_name {
|
||||
/*border: dashed thin blue;*/
|
||||
|
||||
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 {
|
||||
}
|
||||
|
||||
.system_menu_information {
|
||||
/*border: dashed thin green;*/
|
||||
|
||||
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%);
|
||||
|
||||
}
|
||||
|
||||
/* 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 *** System Menu Floating/Fixed (root menu) *** */
|
||||
#System-Nav-Menu-Float {
|
||||
background-color: rgba(220,175,175,.8);
|
||||
}
|
||||
/* *** END *** System *** System Menu Floating/Fixed (root menu) *** */
|
||||
|
||||
|
||||
#Site-Header {
|
||||
background-color: hsla(0,0%,100%,.98);
|
||||
}
|
||||
|
||||
#Site-Header img {
|
||||
}
|
||||
|
||||
|
||||
/* *** BEGIN *** System *** System Site Nav Menu *** */
|
||||
#Site-Nav-Menu {
|
||||
background-color: hsla(0,0%,100%,.98);
|
||||
border-bottom: solid thin hsla(0,0%,80%,1);
|
||||
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#Site-Nav-Menu ul {
|
||||
}
|
||||
|
||||
#Site-Nav-Menu ul>li {
|
||||
/* background-color: var(--site_menu_btn_bg_color); */
|
||||
/* border: solid thin var(--site_menu_btn_border_color);
|
||||
* border-radius: .25rem; */
|
||||
/* font-weight: var(--btn_font_weight_default); */
|
||||
/* color: var(--site_menu_btn_color); */
|
||||
}
|
||||
|
||||
#Site-Nav-Menu ul>li:hover {
|
||||
/* background-color: var(--site_menu_btn_hover_bg_color); */
|
||||
/* border: solid thin var(--site_menu_btn_hover_border_color); */
|
||||
/* color: var(--site_menu_btn_hover_color); */
|
||||
}
|
||||
|
||||
#Site-Nav-Menu ul>li.nav_disabled {
|
||||
/* background-color: var(--site_menu_btn_disabled_bg_color);
|
||||
* border: solid thin var(--site_menu_btn_disabled_border_color);
|
||||
*
|
||||
* font-weight: var(--btn_font_weight_disabled);
|
||||
* color: var(--site_menu_btn_disabled_color);
|
||||
* text-decoration: line-through; */
|
||||
}
|
||||
#Site-Nav-Menu ul>li.nav_active {
|
||||
/* font-weight: var(--btn_font_weight_active); */
|
||||
}
|
||||
#Site-Nav-Menu ul>li.nav_primary {
|
||||
font-weight: var(--btn_font_weight_primary);
|
||||
/* border-right: solid thin hsla(0,0%,50%,.5); */
|
||||
}
|
||||
|
||||
#Site-Nav-Menu .btn {
|
||||
border-color: hsla(0,0%,90%,.1);
|
||||
background-color: hsla(0,0%,90%,.1);
|
||||
}
|
||||
/* *** END *** System *** System Site Nav Menu *** */
|
||||
|
||||
#System-Notifications {
|
||||
background-color: hsla(0,0%,100%,.98);
|
||||
}
|
||||
|
||||
|
||||
#Main-Body {
|
||||
background-color: hsla(0,0%,100%,.98);
|
||||
}
|
||||
|
||||
#Main-Notifications {
|
||||
/* background-color: hsla(var(--hue-info),var(--saturation-least),var(--lum-lighter),.1); */
|
||||
/* background-color: hsla(0,0%,100%,.98); */
|
||||
}
|
||||
|
||||
|
||||
/* *** BEGIN *** Main *** Main Nav Menu *** */
|
||||
#Main-Nav-Menu {
|
||||
|
||||
}
|
||||
|
||||
#Main-Nav-Menu ul {
|
||||
}
|
||||
|
||||
#Main-Nav-Menu ul>li {
|
||||
}
|
||||
|
||||
#Main-Nav-Menu ul>li:hover {
|
||||
}
|
||||
|
||||
#Main-Nav-Menu ul>li.disabled {
|
||||
background-color: var(--site_menu_btn_disabled_bg_color);
|
||||
border: solid thin var(--site_menu_btn_disabled_border_color);
|
||||
|
||||
font-weight: var(--btn_font_weight_disabled);
|
||||
color: var(--site_menu_btn_disabled_color);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#Main-Nav-Menu ul>li.active {
|
||||
font-weight: var(--btn_font_weight_active);
|
||||
}
|
||||
#Main-Nav-Menu ul>li.primary {
|
||||
font-weight: var(--btn_font_weight_primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#Main-Nav-Menu .m_btn {
|
||||
appearance: button;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background-color: var(--site_menu_btn_bg_color);
|
||||
|
||||
border: solid thin var(--site_menu_btn_border_color);
|
||||
border-radius: .25rem;
|
||||
|
||||
/* line-height: 1rem; */
|
||||
/* font-size: 1rem; */
|
||||
font-weight: var(--btn_font_weight_default);
|
||||
text-align: center;
|
||||
|
||||
color: var(--site_menu_btn_color);
|
||||
|
||||
/* NOTE: transition when hover ends */
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-delay: var(--btn_trans_out_delay); /* short delay */
|
||||
transition-duration: var(--btn_trans_out_duration);
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
#Main-Nav-Menu .m_btn:hover {
|
||||
/* background-color: var(--site_menu_btn_hover_bg_color); */
|
||||
|
||||
/* border: solid thin var(--site_menu_btn_hover_border_color); */
|
||||
|
||||
/* color: var(--site_menu_btn_hover_color); */
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-delay: var(--btn_trans_in_delay); /* no delay */
|
||||
transition-duration: var(--btn_trans_in_duration);
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
/* *** END *** System *** System Main Nav Menu *** */
|
||||
|
||||
#Main-Content {
|
||||
}
|
||||
|
||||
|
||||
/* *** BEGIN *** System *** Site Footer *** */
|
||||
/* site_footer or site_footer or site_status is the global (root) footer or status bar */
|
||||
#Site-Footer {
|
||||
background-color: var(--site_footer_bg_color);
|
||||
|
||||
border-top: solid thin var(--site_footer_border_color);
|
||||
|
||||
color: var(--site_footer_color);
|
||||
}
|
||||
|
||||
#Site-Footer:hover {
|
||||
background-color: var(--site_footer_hover_bg_color);
|
||||
|
||||
border-top: solid thin var(--site_footer_hover_border_color);
|
||||
|
||||
color: var(--site_footer_hover_color);
|
||||
}
|
||||
|
||||
.site_footer .footer_left {
|
||||
}
|
||||
.site_footer .footer_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 {
|
||||
font-size: .8rem;
|
||||
|
||||
background-color: var(--system_footer_bg_color);
|
||||
|
||||
border-top: solid thin var(--system_footer_border_color);
|
||||
|
||||
color: var(--system_footer_color);
|
||||
|
||||
/* NOTE: transition when hover ends */
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-delay: var(--btn_trans_out_delay); /* short delay */
|
||||
transition-duration: var(--btn_trans_out_duration);
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
#System-Footer:hover {
|
||||
background-color: var(--system_footer_hover_bg_color);
|
||||
|
||||
border-top: solid thin var(--system_footer_hover_border_color);
|
||||
|
||||
color: var(--system_footer_hover_color);
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-delay: var(--btn_trans_in_delay); /* no delay */
|
||||
transition-duration: var(--btn_trans_in_duration);
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.system_footer .footer_left {
|
||||
}
|
||||
.system_footer .footer_right {
|
||||
}
|
||||
/* *** END *** System *** System Footer *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** System *** Debug *** */
|
||||
#hidden_system_debug {
|
||||
}
|
||||
|
||||
#System-Debug {
|
||||
/* background-color: rgba(220,175,175,.95); */
|
||||
background-color: rgba(220,175,175,1);
|
||||
|
||||
border: dashed thin pink;
|
||||
|
||||
font-size: .7rem;
|
||||
|
||||
opacity: .75;
|
||||
transition: opacity .95s linear .5s;
|
||||
}
|
||||
|
||||
#System-Debug:hover {
|
||||
border: solid thin pink;
|
||||
|
||||
opacity: .95;
|
||||
|
||||
/* background-color: rgba(220,175,175,1); */
|
||||
}
|
||||
|
||||
.view_system_debug {
|
||||
cursor: help;
|
||||
}
|
||||
/* *** END *** System *** Debug *** */
|
||||
|
||||
|
||||
/* *** BEGIN *** System *** Buttons *** */
|
||||
a.btn {
|
||||
/* font-family: inherit; */
|
||||
/* font-size: inherit; */
|
||||
/* font-style: inherit; */
|
||||
/* font-weight: inherit; */
|
||||
/* line-height: inherit; */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button.btn {
|
||||
/* font-family: inherit; */
|
||||
/* font-size: inherit; */
|
||||
/* font-style: inherit; */
|
||||
/* font-weight: inherit; */
|
||||
/* line-height: inherit; */
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
|
||||
.btn {
|
||||
appearance: button;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
border: solid thin var(--default_btn_border_color);
|
||||
border-radius: .25em;
|
||||
|
||||
margin: .0em;
|
||||
padding: .25em .5em;
|
||||
|
||||
line-height: 1em;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
/*display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;*/
|
||||
|
||||
/* NOTE: transition when hover ends */
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-delay: var(--btn_trans_out_delay); /* short delay */
|
||||
transition-duration: var(--btn_trans_out_duration);
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.btn:hover {
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-delay: var(--btn_trans_in_delay); /* no delay */
|
||||
transition-duration: var(--btn_trans_in_duration);
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.btn_default {
|
||||
color: var(--default_btn_color);
|
||||
background-color: var(--default_btn_bg_color);
|
||||
border: solid thin var(--default_btn_border_color);
|
||||
}
|
||||
.btn_default:hover {
|
||||
color: var(--default_btn_hover_color);
|
||||
background-color: var(--default_btn_hover_bg_color);
|
||||
border: solid thin var(--default_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_default {
|
||||
color: var(--default_btn_outline_color);
|
||||
background-color: var(--default_btn_outline_bg_color);
|
||||
border: solid thin var(--default_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_default:hover {
|
||||
color: var(--default_btn_hover_color);
|
||||
background-color: var(--default_btn_hover_bg_color);
|
||||
border: solid thin var(--default_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_primary {
|
||||
font-weight: var(--btn_font_weight_primary);
|
||||
color: var(--primary_btn_color);
|
||||
background-color: var(--primary_btn_bg_color);
|
||||
border: solid thin var(--primary_btn_border_color);
|
||||
}
|
||||
.btn_primary:hover {
|
||||
color: var(--primary_btn_hover_color);
|
||||
background-color: var(--primary_btn_hover_bg_color);
|
||||
border: solid thin var(--primary_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_primary {
|
||||
font-weight: var(--btn_font_weight_primary);
|
||||
color: var(--primary_btn_outline_color);
|
||||
background-color: var(--primary_btn_outline_bg_color);
|
||||
border: solid thin var(--primary_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_primary:hover {
|
||||
color: var(--primary_btn_hover_color);
|
||||
background-color: var(--primary_btn_hover_bg_color);
|
||||
border: solid thin var(--primary_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_secondary {
|
||||
font-weight: var(--btn_font_weight_default);
|
||||
color: var(--secondary_btn_color);
|
||||
background-color: var(--secondary_btn_bg_color);
|
||||
border: solid thin var(--secondary_btn_border_color);
|
||||
}
|
||||
.btn_secondary:hover {
|
||||
color: var(--secondary_btn_hover_color);
|
||||
background-color: var(--secondary_btn_hover_bg_color);
|
||||
border: solid thin var(--secondary_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_secondary {
|
||||
font-weight: var(--btn_font_weight_default);
|
||||
color: var(--secondary_btn_outline_color);
|
||||
background-color: var(--secondary_btn_outline_bg_color);
|
||||
border: solid thin var(--secondary_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_secondary:hover {
|
||||
color: var(--secondary_btn_hover_color);
|
||||
background-color: var(--secondary_btn_hover_bg_color);
|
||||
border: solid thin var(--secondary_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_info {
|
||||
color: var(--info_btn_color);
|
||||
background-color: var(--info_btn_bg_color);
|
||||
border: solid thin var(--info_btn_border_color);
|
||||
}
|
||||
.btn_info:hover {
|
||||
color: var(--info_btn_hover_color);
|
||||
background-color: var(--info_btn_hover_bg_color);
|
||||
border: solid thin var(--info_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_info {
|
||||
color: var(--info_btn_outline_color);
|
||||
background-color: var(--info_btn_outline_bg_color);
|
||||
border: solid thin var(--info_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_info:hover {
|
||||
color: var(--info_btn_hover_color);
|
||||
background-color: var(--info_btn_hover_bg_color);
|
||||
border: solid thin var(--info_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_success {
|
||||
color: var(--success_btn_color);
|
||||
background-color: var(--success_btn_bg_color);
|
||||
border: solid thin var(--success_btn_border_color);
|
||||
}
|
||||
.btn_success:hover {
|
||||
color: var(--success_btn_hover_color);
|
||||
background-color: var(--success_btn_hover_bg_color);
|
||||
border: solid thin var(--success_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_success {
|
||||
color: var(--success_btn_outline_color);
|
||||
background-color: var(--success_btn_outline_bg_color);
|
||||
border: solid thin var(--success_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_success:hover {
|
||||
color: var(--success_btn_hover_color);
|
||||
background-color: var(--success_btn_hover_bg_color);
|
||||
border: solid thin var(--success_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_warning {
|
||||
color: var(--warning_btn_color);
|
||||
background-color: var(--warning_btn_bg_color);
|
||||
border: solid thin var(--warning_btn_border_color);
|
||||
}
|
||||
.btn_warning:hover {
|
||||
color: var(--warning_btn_hover_color);
|
||||
background-color: var(--warning_btn_hover_bg_color);
|
||||
border: solid thin var(--warning_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_warning {
|
||||
color: var(--warning_btn_outline_color);
|
||||
background-color: var(--warning_btn_outline_bg_color);
|
||||
border: solid thin var(--warning_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_warning:hover {
|
||||
color: var(--warning_btn_hover_color);
|
||||
background-color: var(--warning_btn_hover_bg_color);
|
||||
border: solid thin var(--warning_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_danger {
|
||||
color: var(--danger_btn_color);
|
||||
background-color: var(--danger_btn_bg_color);
|
||||
border: solid thin var(--danger_btn_border_color);
|
||||
}
|
||||
.btn_danger:hover {
|
||||
color: var(--danger_btn_hover_color);
|
||||
background-color: var(--danger_btn_hover_bg_color);
|
||||
border: solid thin var(--danger_btn_hover_border_color);
|
||||
}
|
||||
|
||||
.btn_outline_danger {
|
||||
color: var(--danger_btn_outline_color);
|
||||
background-color: var(--danger_btn_outline_bg_color);
|
||||
border: solid thin var(--danger_btn_outline_border_color);
|
||||
}
|
||||
.btn_outline_danger:hover {
|
||||
color: var(--danger_btn_hover_color);
|
||||
background-color: var(--danger_btn_hover_bg_color);
|
||||
border: solid thin var(--danger_btn_hover_border_color);
|
||||
}
|
||||
|
||||
/* Button Modifiers */
|
||||
.btn.btn_active {
|
||||
}
|
||||
.btn.btn_disabled {
|
||||
/* background-color: var(--site_menu_btn_disabled_bg_color); */
|
||||
/* border: solid thin var(--site_menu_btn_disabled_border_color); */
|
||||
|
||||
font-weight: var(--btn_font_weight_disabled);
|
||||
/* color: var(--site_menu_btn_disabled_color); */
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.btn.btn_sm {
|
||||
line-height: 1em;
|
||||
font-size: .9em;
|
||||
}
|
||||
.btn.btn_md {
|
||||
line-height: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
.btn.btn_lg {
|
||||
line-height: 1em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
ul.btn_list>li {
|
||||
display: block;
|
||||
/* margin: .75rem 0rem; */
|
||||
/* padding: 0; */
|
||||
}
|
||||
ul.btn_list>li:hover {
|
||||
outline: dashed thin pink;
|
||||
}
|
||||
/* *** END *** System *** Buttons *** */
|
||||
|
||||
|
||||
/*x-Small devices (portrait phones, less than 576px)*/
|
||||
@media (max-width: 575px) {
|
||||
.btn {
|
||||
padding: .1em .1em;
|
||||
}
|
||||
}
|
||||
|
||||
/*Small devices (landscape phones, 576px and up)*/
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.btn {
|
||||
padding: .1em .25em;
|
||||
}
|
||||
}
|
||||
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; }
|
||||
259
app/css/event_launcher.css
Normal file
259
app/css/event_launcher.css
Normal file
@@ -0,0 +1,259 @@
|
||||
.event_launcher_file_cont {
|
||||
max-width: 100%;
|
||||
}
|
||||
.event_launcher_file_cont .event_file_meta {
|
||||
color: hsla(0,0%,50%,1);
|
||||
font-size: smaller;
|
||||
}
|
||||
.event_launcher_file_cont .event_file_meta:hover {
|
||||
color: hsla(0,0%,0%,1);
|
||||
}
|
||||
.event_launcher_file_cont .event_file_download {
|
||||
color: hsla(0,0%,50%,1);
|
||||
font-size: smaller;
|
||||
}
|
||||
.event_launcher_file_cont .event_file_download:hover {
|
||||
color: hsla(0,0%,0%,1);
|
||||
}
|
||||
|
||||
.event_launcher_file_cont .download_clicked {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.event_launcher_file_cont .download_clicked>strong {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.event_launcher_message {
|
||||
background: yellow;
|
||||
padding: .5em;
|
||||
}
|
||||
.event_launcher_message>header {
|
||||
margin: .1em;
|
||||
padding: .1em;
|
||||
border-bottom: solid thin gray;
|
||||
}
|
||||
.event_launcher_message h1 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.event_launcher_message>section {
|
||||
font-size: 1.6em;
|
||||
margin: .1em;
|
||||
padding: .1em;
|
||||
}
|
||||
|
||||
|
||||
.event_launcher_main_nav_menu {
|
||||
contain: content;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start; /* flex-start */
|
||||
align-items: center;
|
||||
/*align-content: center;*/
|
||||
|
||||
background-color: hsla(0,0%,100%,.98);
|
||||
font-size: 1.1em;
|
||||
|
||||
padding-right: .1em;
|
||||
|
||||
border-right: solid medium hsla(0,0%,90%,1);
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
contain: content;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu h1,h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center; /* flex-start */
|
||||
/* align-items: center; */
|
||||
/* align-content: center; */
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu ul>li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
/*display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;*/
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu .btn {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
border-radius: .25em;
|
||||
margin: .1em 0em;
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu .event_session_selector_btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: no-wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/*align-content: center;*/
|
||||
}
|
||||
.event_session_selector_btn .event_session_datetime {
|
||||
outline: dashed thin green;
|
||||
transform: rotate(-15deg);
|
||||
|
||||
text-align: center;
|
||||
font-size: .7em;
|
||||
min-width: 5em;
|
||||
|
||||
margin: .1em .2em;
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu .event_launcher_event {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu .event_launcher_location {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.event_launcher_main_nav_menu .event_launcher_options {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.event_launcher_options_fixed {
|
||||
margin: .1em .4em;
|
||||
padding: 0;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 5em;
|
||||
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.event_launcher_main_content header.event_session_about {
|
||||
border-bottom: solid thin hsla(0,0%,50%,1);
|
||||
}
|
||||
.event_launcher_main_content header.event_session_about>h2 {
|
||||
margin: .1em 0;
|
||||
padding: .1em 0;
|
||||
}
|
||||
.event_launcher_main_content .event_session_datetimes {
|
||||
font-size: .8em;
|
||||
}
|
||||
.event_launcher_main_content section.event_session_description {
|
||||
border-bottom: solid thin hsla(0,0%,75%,1);
|
||||
font-size: .8em;
|
||||
}
|
||||
.event_launcher_main_content section.event_session_file_list {
|
||||
border-bottom: solid thin hsla(0,0%,75%,1);
|
||||
}
|
||||
|
||||
.event_launcher_main_content .event_session_file_list li {
|
||||
margin: .5em 0em;
|
||||
}
|
||||
|
||||
.event_launcher_main_content section.event_presentation_list {
|
||||
/* border-top: solid thin hsla(0,0%,75%,1); */
|
||||
}
|
||||
.event_launcher_main_content ul.event_presentation_list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.event_launcher_main_content .event_presentation_list>li {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
.event_launcher_main_content ul.event_presentation_list>li {
|
||||
display: block;
|
||||
}
|
||||
.event_launcher_main_content ul.event_presentation_list>li:hover {
|
||||
outline: dashed thin pink;
|
||||
background-color: hsla(0,0%,95%,1);
|
||||
}
|
||||
|
||||
.event_launcher_main_content ul.event_presentation_list>li>ul>li {
|
||||
margin: .5em 0em;
|
||||
}
|
||||
|
||||
ul.event_presentation_list .btn_list>li {
|
||||
margin: .25em 0em;
|
||||
}
|
||||
|
||||
.event_launcher_main_content .event_presentation_datetime_name {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/*flex-wrap: no-wrap;*/
|
||||
/*justify-content: space-between;*/
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
background-color: hsla(0,0%,90%,1);
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.event_launcher_main_content .event_presentation_datetime_name .event_presentation_datetime {
|
||||
/*align-self: flex-start;*/
|
||||
/*border-right: dashed thin green;*/
|
||||
|
||||
text-align: center;
|
||||
font-size: .7em;
|
||||
min-width: 5em;
|
||||
|
||||
margin: .1em .2em;
|
||||
}
|
||||
|
||||
.event_launcher_main_content .event_presentation_datetime_name .event_presentation_name {
|
||||
border-left: solid thin gray;
|
||||
|
||||
margin: .1em .2em;
|
||||
padding-left: .2em;
|
||||
}
|
||||
@@ -1,104 +1,151 @@
|
||||
body {
|
||||
margin: 0rem;
|
||||
padding: 0rem;
|
||||
/*border: solid thin pink;*/
|
||||
margin-bottom: 1rem; /* This is for the bottom status bar. */
|
||||
margin: 0rem;
|
||||
padding: 0rem;
|
||||
/*border: solid thin pink;*/
|
||||
margin-bottom: 1rem; /* This is for the bottom status bar. */
|
||||
}
|
||||
|
||||
body > .container { /* allow the container directly under body to be 100% wide*/
|
||||
/*max-width: 100%;*/
|
||||
|
||||
margin: .1rem;
|
||||
padding: .1rem;
|
||||
/*border: solid thin pink;*/
|
||||
/*max-width: 100%;*/
|
||||
|
||||
margin: .1rem;
|
||||
padding: .1rem;
|
||||
/*border: solid thin pink;*/
|
||||
}
|
||||
|
||||
body > .container > .row { /* allow the container directly under body to be 100% wide*/
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin: .1rem;
|
||||
padding: .1rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin: .1rem;
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
.app_status_bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0 0;
|
||||
padding: 0 .5rem;
|
||||
background: #eee;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0 0;
|
||||
padding: 0 .5rem;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.app_status_bar:hover {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.app_network_status {
|
||||
|
||||
background: #eee;
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.app_datetime {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app_warning {
|
||||
background: yellow;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.btn_no_case {
|
||||
text-transform: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
.btn-info {
|
||||
background: green;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background: darkgreen;
|
||||
background: darkgreen;
|
||||
}
|
||||
|
||||
|
||||
mynewcolor:#77cccc;
|
||||
|
||||
.btn-info {
|
||||
@include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
|
||||
@include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
@include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
|
||||
@include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
.filename {
|
||||
/*
|
||||
margin-left: .1rem;
|
||||
padding-left: .1rem;
|
||||
*/
|
||||
/*
|
||||
margin-left: .1rem;
|
||||
padding-left: .1rem;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
.menu_session_time {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu_session_code, .detail_session_code {
|
||||
margin-left: .1rem;
|
||||
padding-left: .1rem;
|
||||
font-size: .5em;
|
||||
margin-left: .1rem;
|
||||
padding-left: .1rem;
|
||||
font-size: .5em;
|
||||
}
|
||||
|
||||
.session_detail>h2 {
|
||||
background-color: #F7F7F7;
|
||||
/*border-bottom: solid .1rem black;*/
|
||||
background-color: #F7F7F7;
|
||||
/*border-bottom: solid .1rem black;*/
|
||||
}
|
||||
|
||||
.detail_session_code {
|
||||
margin-left: .1rem;
|
||||
padding-left: .1rem;
|
||||
font-size: .5em;
|
||||
margin-left: .1rem;
|
||||
padding-left: .1rem;
|
||||
font-size: .5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#file_import_drag_area {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
width: 90%;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
#file_import_drag_area:hover {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
#file_import_drag_area:hover:before {
|
||||
/*font-weight: 1000;
|
||||
content: 'Here';*/
|
||||
}
|
||||
|
||||
#file_import_drag_area::before {
|
||||
content: attr(data-value);
|
||||
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 15rem;
|
||||
/*border: 1px solid red;*/
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
/*
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
.starter-template {
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
max-width: 2560px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
*/
|
||||
@@ -1,50 +0,0 @@
|
||||
|
||||
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#file_import_drag_area {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
width: 90%;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
#file_import_drag_area:hover {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
#file_import_drag_area:hover:before {
|
||||
/*font-weight: 1000;
|
||||
content: 'Here';*/
|
||||
}
|
||||
|
||||
#file_import_drag_area::before {
|
||||
content: attr(data-value);
|
||||
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 15rem;
|
||||
/*border: 1px solid red;*/
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user