diff --git a/aether_app_native.code-workspace b/aether_app_native.code-workspace new file mode 100644 index 0000000..876a149 --- /dev/null +++ b/aether_app_native.code-workspace @@ -0,0 +1,8 @@ +{ + "folders": [ + { + "path": "." + } + ], + "settings": {} +} \ No newline at end of file diff --git a/app/css/aether_modules_core.css b/app/css/aether_modules_core.css new file mode 100644 index 0000000..479b8ad --- /dev/null +++ b/app/css/aether_modules_core.css @@ -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; +} diff --git a/app/css/aether_modules_other.css b/app/css/aether_modules_other.css new file mode 100644 index 0000000..5e4c775 --- /dev/null +++ b/app/css/aether_modules_other.css @@ -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)); +} + diff --git a/app/css/aether_system.css b/app/css/aether_system.css new file mode 100644 index 0000000..c14bc2a --- /dev/null +++ b/app/css/aether_system.css @@ -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 *** */ diff --git a/app/css/aether_utilities.css b/app/css/aether_utilities.css new file mode 100644 index 0000000..0937b60 --- /dev/null +++ b/app/css/aether_utilities.css @@ -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;*/ +} diff --git a/app/css/aether_variables.css b/app/css/aether_variables.css new file mode 100644 index 0000000..aa5ce37 --- /dev/null +++ b/app/css/aether_variables.css @@ -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) + */ diff --git a/app/css/base_style_event_launcher.css b/app/css/base_style_event_launcher.css new file mode 100644 index 0000000..3ae1b93 --- /dev/null +++ b/app/css/base_style_event_launcher.css @@ -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; + } +} diff --git a/app/css/base_style_grid_event_launcher.css b/app/css/base_style_grid_event_launcher.css new file mode 100644 index 0000000..7a9b7d7 --- /dev/null +++ b/app/css/base_style_grid_event_launcher.css @@ -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; } diff --git a/app/css/event_launcher.css b/app/css/event_launcher.css new file mode 100644 index 0000000..7f88596 --- /dev/null +++ b/app/css/event_launcher.css @@ -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; +} diff --git a/app/css/native_app.css b/app/css/native_app.css index 9e8f9b8..a5874ab 100644 --- a/app/css/native_app.css +++ b/app/css/native_app.css @@ -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; +} diff --git a/app/css/starter-template.css b/app/css/starter-template.css deleted file mode 100644 index 7268ad6..0000000 --- a/app/css/starter-template.css +++ /dev/null @@ -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; -} -*/ diff --git a/app/css/style.css b/app/css/style.css deleted file mode 100644 index 166c0dc..0000000 --- a/app/css/style.css +++ /dev/null @@ -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; -} - - diff --git a/app/index 2019-12-22.html.bak b/app/index 2019-12-22.html.bak deleted file mode 100644 index 4a2b712..0000000 --- a/app/index 2019-12-22.html.bak +++ /dev/null @@ -1,180 +0,0 @@ - - -
- - - -