/*#region - Page Setup and base Definitions ********************************************************/
:root {
/* Manual Overide for required device settings values 0 -> 2 & 9(overides automatic detection methods)
0 = Automatic detection
1 = PC with large screen available (touch is detected automatically)
2 = Mobile or Tablet where space is at a premium (touch is detected automatically) but still show top menu
9 = Sets the state to be the same as running on a mobile
*/
--device-style: 0;
font-size: 100%;
}
body {
background-color: rgba(var(--theme-backcolor));
color: rgba(var(--theme-color));
height: 100%;
overflow-y: hidden;
font-family: var(--theme-fontfamily);
font-size: calc(var(--standard-font-size)*1vmin);
margin: 0px;
line-height: normal;
}
.followmousepointer {
position: fixed;
transition: transform 0s;
text-align: center;
pointer-events: none;
font-size: small;
color: rgb(252, 126, 23);
border: 1px solid rgb(252, 249, 249);
border-radius: 5.0px;
}
q {
quotes: "‘" "’";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
a:link {
color: rgba(var(--link-color));
border: var(--link-border);
background-color: rgba(var(--link-backcolor));
border-radius: var(--link-rounding);
padding: var(--link-padding);
text-decoration: none;
}
a:visited {
color: rgba(var(--link-color));
}
a:hover,
a:active {
text-decoration: none;
}
/*select {
margin: 0;
padding: 0;
box-sizing: border-box;
}*/
option {
line-height: 12px;
font-size: 12px;
margin: 0;
padding: 0;
}
* {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
/*#endregion */
/*#region - Site-Builder in-line Text styles *******************************************************/
/* Header*/
hs-0,
hs-1,
hs-2,
hs-3,
hs-4,
hs-5 {
display: contents;
/*this removes any 'box' like properties and effectively adds CRLF to any text*/
color: rgba(var(--headers-color));
}
hs-0 {
font-size: calc(var(--title-font-size)*1.5vmin);
margin-bottom: 1.0vh;
}
hs-1 {
font-size: calc(var(--title-font-size)*1vmin);
margin-bottom: 1.0vh;
}
hs-2 {
font-size: calc(var(--title-font-size)*0.75vmin);
margin-bottom: 0.8vh;
}
hs-3 {
font-size: calc(var(--title-font-size)*0.6vmin);
margin-bottom: 0.6vh;
}
hs-4 {
font-size: calc(var(--title-font-size)*0.5vmin);
margin-bottom: 0.5vh;
}
hs-5 {
font-size: calc(var(--title-font-size)*0.3vmin);
margin-bottom: 0.2vh;
color: rgba(var(--headers-color));
}
em-1,
em-2,
em-3,
em-4,
em-5 {
display: contents;
font-style: italic;
font-weight: 500;
color: rgba(var(--embolden-color));
}
em-1 {
font-size: calc(var(--title-font-size)*1vmin);
margin-bottom: 1.0vh;
}
em-2 {
font-size: calc(var(--title-font-size)*0.75vmin);
margin-bottom: 0.8vh;
}
em-3 {
font-size: calc(var(--title-font-size)*0.6vmin);
margin-bottom: 0.6vh;
}
em-4 {
font-size: calc(var(--title-font-size)*0.5vmin);
margin-bottom: 0.5vh;
}
em-5 {
font-size: calc(var(--title-font-size)*0.3vmin);
margin-bottom: 0.2vh;
}
/*#endregion */
/*#region - Icons - Main Menu **********************************************************************/
.mainmenuitem {
/* class for the individual menu items*/
vertical-align: middle;
text-align: center;
margin-right: 2vw;
margin-left: 2vw;
}
.menuitemsize {
/*size of each item must be larger on a mobile*/
height: calc(var(--icon-height)*1vmin);
}
/*#endregion *********************************/
/*#region - Article - Grid Definitions *************************************************************/
/* Outer container grid for common controls with a veriable inner container grid for Landscape of Portrait */
.cssgrid_container {
position: relative;
display: grid;
overflow: hidden;
width: calc(var(--grid-width)*1vw);
height: calc(var(--grid-height)*1vh);
top: 0px;
/*columns are fixed, as its just for the controls, inner_grid takes all columns*/
grid-template-columns: 30% 45% 25%;
border: 0px solid rgba(252, 249, 249, 0.7)
}
.inner_grid {
grid-area: inner_grid;
display: grid;
position: relative;
overflow: hidden;
width: 100%;
}
.cssgrid {
position: relative;
display: grid;
overflow: hidden;
grid-template-columns: var(--container-column-size);
grid-template-rows: var(--container-row-size);
grid-template-areas:
"head head"
"panelleft panelright"
"foot foot";
border: 0px solid rgb(252, 249, 249)
}
.cssgrid_mobile {
position: relative;
display: grid;
overflow: hidden;
grid-template-columns: var(--container-column-size);
grid-template-rows: var(--container-row-size);
grid-template-areas:
"head"
"panelright"
"foot";
border: 0px solid rgb(252, 249, 249)
}
/*#endregion */
/*#region - Article - Grid Areas and Styles ********************************************************/
.head {
grid-area: head;
display: grid;
grid-template-columns: var(--head-grid-column-size);
grid-auto-rows: var(--head-grid-row-size);
overflow-y: auto;
overflow-x: hidden;
border: var(--border-width) dotted rgb(61, 61, 247);
}
.controlsleft {
grid-area: controlsleft;
background-color: rgba(var(--theme-backcolor));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: top;
justify-content: start;
z-index: 9;
}
.controlscenter {
grid-area: controlscenter;
background-color: rgba(var(--theme-backcolor));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: top;
justify-content: center;
z-index: 9;
}
.controlsright {
grid-area: controlsright;
background-color: rgba(var(--theme-backcolor));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: top;
justify-content: end;
z-index: 9;
}
.panelleft {
grid-area: panelleft;
display: grid;
grid-template-columns: var(--left-grid-column-size);
grid-template-rows: var(--left-grid-row-size);
justify-content: center;
overflow-y: scroll;
overflow-x: hidden;
border: var(--border-width) solid rgb(219, 150, 13);
}
.panelright {
grid-area: panelright;
display: grid;
grid-template-columns: var(--right-grid-column-size);
grid-template-rows: var(--right-grid-row-size);
justify-content: center;
overflow-y: scroll;
overflow-x: hidden;
border: var(--border-width) solid rgb(219, 150, 13);
}
.foot {
grid-area: foot;
display: grid;
grid-template-columns: var(--foot-grid-column-size);
grid-auto-rows: var(--foot-grid-row-size);
white-space: nowrap;
overflow-y: auto;
overflow-x: hidden;
border: var(--border-width) dotted rgb(61, 61, 247);
}
.subcell {
position: relative;
display: flex;
align-items: center;
overflow-y: scroll;
overflow-x: hidden;
border: 0px solid rgb(84, 86, 84);
z-index: 1;
}
.touchcell {
position: relative;
display: flex;
overflow: hidden;
max-height: 100%;
border: 0px solid rgb(84, 86, 84);
z-index: 1;
}
.image {
position: absolute;
overflow: hidden;
max-width: 100%;
max-height: 100%;
z-index: -1;
border: 0px solid rgb(252, 249, 249)
}
/* NOTE: text does not have to be 'flex' and this gets rid of a load of styling
issues, including Firefox not allowing
to separate lines and in-line
styles such as now appear to work without the strange effects! */
.text {
display: block;
overflow-y: auto;
overflow-x: hidden;
}
/*#endregion */
/*#region - Editing - Grids and Base Overlay *******************************************************/
/* grid for control panel buttons and overgrid when editing a cell in any section*/
.outeroverlaymain {
display: grid;
position: absolute;
grid-template-columns: auto;
grid-template-rows: 90% auto;
grid-template-areas:
"overlaygrid"
"controlpanel";
/* to allow the same outeroverlay for all parts, the width and height are supplied as a percentage*/
width: var(--edit-overlay-width-percent);
height: var(--edit-overlay-height-percent);
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
z-index: 8;
}
.floatingcontrols {
position: absolute;
height: 4.5vmin;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
background-color: rgba(var(--overlay-backgrounds));
border: 1px solid rgb(93, 92, 91);
border-radius: 5px;
padding: 2px;
z-index: 8;
}
.floatingcontrols_mobile {
height: 9.5vmin !important;
font-size: 3.5vmin;
padding: 1px !important;
}
.overlay_mobile {
height: 20.0vmin !important;
font-size: 4.0vmin;
padding: 5px !important;
}
/* Data input fields for editing grid */
.overlaygrid {
grid-area: overlaygrid;
position: absolute;
top: 0;
left: 0;
display: grid;
overflow: auto;
width: 99%;
height: 99%;
/* first column takes 20% of width, second 80% */
grid-template-columns: 50% 50%;
/* Textedit takes 60% of height (after the label) the rest divided equally */
grid-template-rows: 6% 55% auto;
grid-template-areas:
"cellcolrow cellcolrow"
"texteditor texteditor"
"topic_cell_left topic_cell_right"
"topic_cell topic_cell"
"topic_image_left topic_image_right"
"topic_image topic_image"
"topic_text_left topic_text_right"
"topic_text topic_text";
overflow-x: hidden;
border: 0px dashed rgb(68, 0, 255);
/*all edit overlay fields have the same font size */
font-size: 1.5vmin;
/*z-index: 9;*/
}
/* displays cell information*/
.cellcolrow {
grid-area: cellcolrow;
position: relative;
}
/* display / edit the article text */
.texteditor {
grid-area: texteditor;
position: relative;
resize: vertical;
overflow: hidden;
font-size: 2.0vmin;
}
.fullpagetextedit {
position: absolute;
resize: vertical;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 2.0vmin;
z-index: 9;
}
/*#endregion */
/*#region - Editing - General Styles ***************************************************************/
.editstyle {
border: 1px solid rgb(252, 23, 23);
background: rgba(0, 0, 0, 0.5);
}
/* arrow pointing back at field being edited*/
.pointtoedit {
position: absolute;
width: calc(var(--arrow-size)*1vmin);
height: calc(var(--arrow-size)*1vmin);
cursor: pointer;
border: 0px solid white;
z-index: 9;
}
/* for the buttons in all editor style overlay grids */
.controlpanel {
grid-area: controlpanel;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
z-index: 1;
}
.formpanel {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding-top: 2vw;
}
/*used whereever buttons are required */
.buttonpanel {
display: flex;
list-style-type: none;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0px;
cursor: pointer;
z-index: 8;
}
.buttonpaneltext {
display: flex;
list-style-type: none;
flex-direction: row;
flex-wrap: nowrap;
align-items: left;
background-color: rgb(32, 32, 32);
color: rgb(115, 135, 155);
font-size: 1.7vmin;
gap: 10px;
margin: 0;
padding: 0;
pointer-events: none;
}
.standout {
color: rgb(209, 215, 21);
}
label {
position: relative;
color: rgb(252, 126, 23);
}
select {
position: relative;
color: rgb(190, 188, 188);
background-color: rgb(32, 32, 32);
border: none;
padding: 0;
margin: 0;
box-sizing: border-box;
/* Adjust the padding */
font-size: 1.6vmin;
/* need to specify again for selects - cant find reason*/
font-family: var(--theme-fontfamily);
}
select option {
font-size: 1.6vmin;
/* Adjust the font size */
padding: 0px;
/* Adjust the padding */
}
.selectdiv {
position: relative;
color: rgb(190, 188, 188);
background-color: rgb(48, 47, 47);
border: none;
padding: 3px;
border-radius: 2px;
margin-top: 7px;
margin-left: 3px;
box-sizing: border-box;
/* Adjust the padding */
font-size: 1.6vmin;
cursor: pointer;
/* need to specify again for selects - cant find reason*/
font-family: var(--theme-fontfamily);
}
form textarea {
position: relative;
}
textarea {
position: absolute;
/* default font family for a textarea is NOT propotional */
font-family: Arial, Helvetica, sans-serif;
/* not sure if we want this */
text-align: left;
padding: .2em;
width: auto;
height: auto;
max-width: 100%;
cursor: text;
resize: both;
background-color: rgb(var(--focus-backcolour));
color: rgb(246, 246, 246);
outline: none;
}
input:read-only {
color: rgb(115, 135, 155);
background-color: rgb(32, 32, 32);
font-size: 1.2vmin;
border: none;
}
input {
background-color: rgb(var(--focus-backcolour));
color: rgb(190, 188, 188);
margin-left: 0.5vw;
margin-top: 0.5vw;
padding-left: 0.5vw;
height: var(--input-fontsize);
font-size: var(--input-fontsize);
border: 1px solid #b6927a;
border-radius: 0.2vw;
}
.li {
/*class for the individual menu items/buttons*/
font-size: 2.0vmin;
text-align: center;
height: 2.5vmin;
width: 10.0vmin;
cursor: pointer;
color: black;
background-color: rgb(241, 241, 241);
padding-top: 4px;
border: 2px solid;
border-radius: 1.5vmin;
}
li:active {
border-color: rgba(252, 126, 23, 1)
}
.wider {
width: 12vmin;
}
.medium_mobile {
font-size: 3.5vmin;
width: 22vmin !important;
padding-top: 5px;
height: 5.0vmin;
border-radius: 3.5vmin;
}
.smaller {
width: 3vmin;
}
.smaller_mobile {
font-size: 5.0vmin;
width: 6.0vmin;
padding-top: 0px;
height: 6.0vmin;
border-radius: 3.5vmin;
}
.showbuttons {
font-size: 2.0vmin;
text-align: center;
height: 3.0vmin;
width: 20vmin;
padding-top: 3px;
cursor: pointer;
color: black;
background-color: rgb(241, 241, 241);
}
.showdatabutton {
width: 14vmin;
cursor: default;
}
/*#endregion */
/*#region - Editing - Attributes for Images ********************************************************/
.topic_image_left {
grid-area: topic_image_left;
position: relative;
align-self: center;
justify-self: center;
}
.topic_image_right {
grid-area: topic_image_right;
position: relative;
align-self: center;
justify-self: center;
}
/* note - topic_image should really refer to topic_cell, but not changing code at this stage */
.topic_image {
grid-area: topic_image;
display: grid;
/* 8 columns (heading & input x4) */
grid-template-columns: 10% 15% 10% 15% 10% 15% 10% 15%;
/* just a single row */
grid-template-rows: 100%;
grid-template-areas:
"h_img_cat i_img_cat h_img_name i_img_name h_img_pos i_img_pos h_cell_style i_cell_style";
border: 1px solid rgb(81, 81, 81);
}
.h_img_cat {
grid-area: h_img_cat;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_img_cat {
grid-area: i_img_cat;
position: relative;
}
.h_img_name {
grid-area: h_img_name;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_img_name {
grid-area: i_img_name;
position: relative;
}
.h_img_pos {
grid-area: h_img_pos;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_img_pos {
grid-area: i_img_pos;
position: relative;
}
.h_cell_style {
grid-area: h_cell_style;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_cell_style {
grid-area: i_cell_style;
position: relative;
}
/*#endregion */
/*#region - Editing - Attributes for Text **********************************************************/
.topic_text_left {
grid-area: topic_text_left;
position: relative;
align-self: center;
justify-self: center;
}
.topic_text_right {
grid-area: topic_text_right;
position: relative;
align-self: center;
justify-self: center;
}
.topic_text {
grid-area: topic_text;
display: grid;
/* 8 columns (heading & input x4) */
grid-template-columns: 12% 13% 12% 13% 10% 15% 10% 15%;
/* just a single row */
grid-template-rows: 100%;
grid-template-areas:
"h_ta_hor i_ta_hor h_ta_ver i_ta_ver h_effect i_effect h_text_style i_text_style";
border: 1px solid rgb(81, 81, 81);
}
.h_ta_hor {
grid-area: h_ta_hor;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_ta_hor {
grid-area: i_ta_hor;
position: relative;
}
.h_ta_ver {
grid-area: h_ta_ver;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_ta_ver {
grid-area: i_ta_ver;
position: relative;
}
.h_effect {
grid-area: h_effect;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_effect {
grid-area: i_effect;
position: relative;
}
.h_text_style {
grid-area: h_text_style;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_text_style {
grid-area: i_text_style;
position: relative;
}
/*#endregion*/
/*#region - Editing - Attributes for Cell **********************************************************/
.topic_cell_left {
grid-area: topic_cell_left;
position: relative;
align-self: center;
justify-self: center;
}
.topic_cell_right {
grid-area: topic_cell_right;
position: relative;
align-self: center;
justify-self: center;
}
.topic_cell {
grid-area: topic_cell;
display: grid;
/* 8 columns (heading & input x4) */
grid-template-columns: 17% 8% 17% 8% 10% 15% 10% 15%;
/* just a single row */
grid-template-rows: 100%;
grid-template-areas:
"h_col_span i_col_span h_row_span i_row_span h_cell_content i_cell_content h_design i_design";
border: 1px solid rgb(81, 81, 81);
}
.h_col_span {
grid-area: h_col_span;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_col_span {
grid-area: i_col_span;
position: relative;
}
.h_row_span {
grid-area: h_row_span;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_row_span {
grid-area: i_row_span;
position: relative;
}
.h_design {
grid-area: h_design;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_design {
grid-area: i_design;
position: relative;
font-size: small;
}
.h_cell_content {
grid-area: h_cell_content;
position: relative;
align-self: center;
justify-self: left;
padding-left: 1.0vw;
}
.i_cell_content {
grid-area: i_cell_content;
position: relative;
}
/*#endregion*/
/*#region - Editing - Page Layout ******************************************************************/
/* grid for control panel buttons and textarea when editing the overall page layout*/
div#outeroverlaypage {
display: grid;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
width: calc(var(--page-overlay-width)*1vmin);
height: calc(var(--page-overlay-height)*1vmin);
grid-template-columns: 20% 80%;
grid-template-rows: 90% 10%;
grid-template-areas:
"overlaypage overlaypage"
"controlpanel controlpanel";
background-color: rgba(var(--theme-backcolor));
border: 2px dashed rgb(252, 126, 23);
/*apears that index needs to be 8 or over to work */
z-index: 8;
font-size: 2.0vmin;
}
/* for the body when editing the header within outeroverlaypage*/
.overlaypage {
grid-area: overlaypage;
display: grid;
/* NOTE: this is the DEFAULT layout which is used to define the REQUIRED layout */
grid-template-columns: 50% 50%;
grid-template-rows: 20% 68% 12%;
grid-template-areas:
"layout_head layout_head"
"layout_left layout_right"
"layout_foot layout_foot";
overflow: hidden;
z-index: 9;
}
.format {
grid-area: format;
display: flex;
align-self: center;
justify-self: center;
}
.layout_head {
grid-area: layout_head;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-bottom: 2px dotted rgb(128, 126, 126);
}
.layout_left {
grid-area: layout_left;
display: flex;
flex-direction: column;
/*NOTE: align and justify switch*/
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-right: 2px dotted rgb(128, 126, 126);
}
.layout_right {
grid-area: layout_right;
display: flex;
flex-direction: column;
/*NOTE: align and justify switch*/
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-left: 2px dotted rgb(128, 126, 126);
}
.layout_foot {
grid-area: layout_foot;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-top: 2px dotted rgb(128, 126, 126);
}
.multi_div_container {
display: flex;
gap: 50px;
/* Optional: Adds space between the divs */
}
/*#endregion */
/*#region - Directory/Excel Viewer/Selector Grid **************************************************/
/*outer container to hold buttons and file viewer*/
.directoryviewer {
display: grid;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
grid-template-rows: 65% 25% 10%;
grid-template-areas:
"filesgrid"
"textblock"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
z-index: 9;
}
.filesgrid {
grid-area: filesgrid;
overflow-y: scroll;
overflow-x: hidden;
grid-gap: 1vmin;
cursor: pointer;
z-index: 9;
}
.excelviewer {
display: grid;
/*grid-template columns supplied by code*/
grid-template-rows: repeat(auto);
grid-template-areas:
"cellheaders"
"cellsgrid";
background-color: rgba(var(--overlay-backgrounds));
z-index: 9;
}
.cellheaders {
grid-area: cellheaders;
cursor: pointer;
z-index: 9;
}
.cellsgrid {
grid-area: cellsgrid;
cursor: pointer;
z-index: 9;
}
.textblock {
grid-area: textblock;
position: relative;
z-index: 9;
font-size: 2.0vmin;
}
.exceleditor {
display: grid;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
grid-template-rows: 85% 15%;
grid-template-areas:
"canvasdatagrid"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
z-index: 9;
}
.canvasdatagrid {
grid-area: canvasdatagrid;
cursor: pointer;
z-index: 9;
}
/*#endregion */
/*#region - Index Item Viewer Grid ********************************************************/
/*outer grid with arrows and central section for indexgrid
added directly to the host index cell*/
.indexcontainer {
display: grid;
position: relative;
overflow: hidden;
/*height set by code*/
grid-template-rows: 100%;
grid-template-areas:
"leftpointer indexgrid rightpointer";
cursor: pointer;
border: 0px dashed rgb(252, 126, 23);
z-index: 1;
}
/*center section of above container*/
.indexgrid {
grid-area: indexgrid;
display: grid;
overflow-y: hidden;
overflow-x: auto;
/*height set by code
grid-template columns supplied by code
only a single row so full area used*/
grid-template-rows: 100%;
grid-gap: 3px;
/*align the grid to the center of the cell vertically*/
align-self: center;
/*alignment of the grid to the center of the cell horizontally (justify-self) is controlled by code*/
cursor: pointer;
border: 0px dashed rgb(252, 126, 23);
z-index: 2;
}
.leftpointer {
grid-area: leftpointer;
display: flex;
/*width and height determined in code*/
align-self: center;
justify-self: left;
border: 0px dashed rgb(252, 126, 23);
z-index: 2;
}
.rightpointer {
grid-area: rightpointer;
display: flex;
/*width and height determined in code*/
align-self: center;
justify-self: right;
border: 0px dashed rgb(252, 126, 23);
z-index: 2;
}
/*#endregion */
/*#region - Photo Viewer/Selector Grid ************************************************************/
/*outer container to hold buttons and image/style viewer */
.groupimagesviewer {
display: grid;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 100%;
grid-template-rows: 90% 10%;
grid-template-areas:
"groupimagesgrid"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
/*apears that index needs to be 8 or over to work */
z-index: 9;
}
/*show available images in a group*/
.groupimagesgrid {
grid-area: groupimagesgrid;
display: grid;
overflow-y: auto;
overflow-x: hidden;
grid-gap: 1vmin;
grid-template-columns: 50% 50%;
/*supplied as list of percentage */
grid-auto-rows: 50% 50%;
/*supplied as list of percentage */
cursor: pointer;
/*apears that index needs to be 8 or over to work */
z-index: 9;
}
/*image grid image item*/
.griditem {
/*border: 1px solid #ddd;*/
text-align: center;
background-size: contain;
background-repeat: no-repeat;
z-index: 9;
}
/*#endregion */
/*#region - Effects Viewer/Selector Grid ***********************************************************/
.groupeffectsviewer {
display: grid;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 100%;
grid-template-rows: 88% 12%;
grid-template-areas:
"groupeffectsgrid"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
/*apears that index needs to be 8 or over to work */
z-index: 9;
}
.groupeffectsgrid {
grid-area: groupeffectsgrid;
display: grid;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 14% 14% 14% 14% 14% 14% 12% 4%;
grid-template-rows: 12% 10% 12% 10% 12% 10% 34%;
/* Note: delay and duration can use same class as move, rotation can be a spin degrees or final angle in degrees */
grid-template-areas:
"h_delay h_duration h_initialopacity h_finalopacity h_initialscale h_finalscale h_rotation ."
"t_delay t_duration t_initialopacity t_finalopacity t_initialscale t_finalscale t_rotation ."
". . h_initialgroup h_initialimage h_finalgroup h_finalimage h_eposition ."
". . t_initialgroup t_initialimage t_finalgroup t_finalimage t_eposition ."
". . h_initfinalwait h_slidein h_finalstyle . . ."
". . t_initfinalwait t_slidein t_finalstyle . . ."
"t_all t_all t_all t_all t_all t_all t_all t_all";
cursor: pointer;
/*appears that index needs to be 8 or over to work */
z-index: 9;
}
.t_initfinalwait {
grid-area: t_initfinalwait;
}
.t_initialopacity {
grid-area: t_initialopacity;
}
.t_finalopacity {
grid-area: t_finalopacity;
}
.t_eposition {
grid-area: t_eposition;
}
.t_initialscale {
grid-area: t_initialscale;
}
.t_finalscale {
grid-area: t_finalscale;
}
.t_initialgroup {
grid-area: t_initialgroup;
}
.t_initialimage {
grid-area: t_initialimage;
font-size: smaller;
}
.t_finalgroup {
grid-area: t_finalgroup;
}
.t_finalimage {
grid-area: t_finalimage;
font-size: smaller;
}
.t_finalstyle {
grid-area: t_finalstyle;
}
.t_slidein {
grid-area: t_slidein;
}
.t_endrow {
grid-area: t_endrow;
}
.t_rotation {
grid-area: t_rotation;
}
.h_initfinalwait {
grid-area: h_initfinalwait;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_initialopacity {
grid-area: h_initialopacity;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_finalopacity {
grid-area: h_finalopacity;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_eposition {
grid-area: h_eposition;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_initialscale {
grid-area: h_initialscale;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_finalscale {
grid-area: h_finalscale;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_finalscale {
grid-area: h_finalscale;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_initialimage {
grid-area: h_initialimage;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_initialgroup {
grid-area: h_initialgroup;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_finalgroup {
grid-area: h_finalgroup;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_finalimage {
grid-area: h_finalimage;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_finalstyle {
grid-area: h_finalstyle;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_slidein {
grid-area: h_slidein;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_rotation {
grid-area: h_rotation;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
/*#endregion */
/*#region - Moves Viewer/Selector Grid *************************************************************/
.groupmovesviewer {
display: grid;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 100%;
grid-template-rows: 88% 12%;
grid-template-areas:
"groupmovesgrid"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
/*apears that index needs to be 8 or over to work */
z-index: 9;
}
.groupmovesgrid {
grid-area: groupmovesgrid;
display: grid;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
/*supplied as list of percentage */
grid-template-rows: 20% 12% 68%;
/*supplied as list of percentage */
grid-template-areas:
"h_delay h_duration h_targetrow_1 h_targetcol_1 h_targetrow_2 h_targetcol_2 h_endrow h_endcol h_targetangle h_returnangle"
"t_delay t_duration t_targetrow_1 t_targetcol_1 t_targetrow_2 t_targetcol_2 t_endrow t_endcol t_targetangle t_returnangle"
"t_all t_all t_all t_all t_all t_all t_all t_all t_all t_all";
cursor: pointer;
/*appears that index needs to be 8 or over to work */
z-index: 9;
}
.t_delay {
grid-area: t_delay;
}
.t_duration {
grid-area: t_duration;
}
.t_targetrow_1 {
grid-area: t_targetrow_1;
}
.t_targetcol_1 {
grid-area: t_targetcol_1;
}
.t_targetrow_2 {
grid-area: t_targetrow_2;
}
.t_targetcol_2 {
grid-area: t_targetcol_2;
}
.t_endrow {
grid-area: t_endrow;
}
.t_endcol {
grid-area: t_endcol;
}
.t_targetangle {
grid-area: t_targetangle;
}
.t_returnangle {
grid-area: t_returnangle;
}
.h_delay {
grid-area: h_delay;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_duration {
grid-area: h_duration;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_targetrow_1 {
grid-area: h_targetrow_1;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_targetcol_1 {
grid-area: h_targetcol_1;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_targetrow_2 {
grid-area: h_targetrow_2;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_targetcol_2 {
grid-area: h_targetcol_2;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_endrow {
grid-area: h_endrow;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_endcol {
grid-area: h_endcol;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_targetangle {
grid-area: h_targetangle;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_returnangle {
grid-area: h_returnangle;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
/*#endregion */
/*#region - Styles Viewer/Selector Grid ***********************************************************/
.groupstylesviewer {
display: grid;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 100%;
grid-template-rows: 88% 12%;
grid-template-areas:
"groupstylesgrid"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
/*apears that index needs to be 8 or over to work */
z-index: 9;
}
.groupstylesgrid {
grid-area: groupstylesgrid;
display: grid;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
/*supplied as list of percentage */
grid-template-rows: 20% 12% 68%;
/*supplied as list of percentage */
grid-template-areas:
"h_width h_height h_backcolor h_textcolor h_padding h_rounding h_bordersize h_bordercolor h_font h_fontsize h_opacity"
"t_width t_height t_backcolor t_textcolor t_padding t_rounding t_bordersize t_bordercolor t_font t_fontsize t_opacity"
"t_all t_all t_all t_all t_all t_all t_all t_all t_all t_all t_all";
cursor: pointer;
/*appears that index needs to be 8 or over to work */
z-index: 9;
}
.t_width {
grid-area: t_width;
}
.t_height {
grid-area: t_height;
}
.t_backcolor {
grid-area: t_backcolor;
}
.t_textcolor {
grid-area: t_textcolor;
}
.t_padding {
grid-area: t_padding;
}
.t_rounding {
grid-area: t_rounding;
}
.t_bordersize {
grid-area: t_bordersize;
}
.t_bordercolor {
grid-area: t_bordercolor;
}
.t_font {
grid-area: t_font;
}
.t_fontsize {
grid-area: t_fontsize;
}
.t_opacity {
grid-area: t_opacity;
}
.h_width {
grid-area: h_width;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_height {
grid-area: h_height;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_backcolor {
grid-area: h_backcolor;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_textcolor {
grid-area: h_textcolor;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_padding {
grid-area: h_padding;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_rounding {
grid-area: h_rounding;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_bordersize {
grid-area: h_bordersize;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_bordercolor {
grid-area: h_bordercolor;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_font {
grid-area: h_font;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_fontsize {
grid-area: h_fontsize;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_opacity {
grid-area: h_opacity;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.t_all {
grid-area: t_all;
display: flex;
font-size: 2.0vmin;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
}
/*#endregion */
/*#region - External Data Import Viewer/Selector Grid *********************************************/
.extractionsviewer {
display: grid;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 100%;
grid-template-rows: 88% 12%;
grid-template-areas:
"extractionsgrid"
"controlpanel";
background-color: rgba(var(--overlay-backgrounds));
border: 1px dashed rgb(252, 126, 23);
/*apears that index needs to be 8 or over to work */
z-index: 9;
}
.extractionsgrid {
grid-area: extractionsgrid;
display: grid;
overflow-y: auto;
overflow-x: hidden;
grid-template-columns: 19% 24% 19% 19% 19%;
/*supplied as list of percentage */
grid-template-rows: 20% 20% 60%;
/*supplied as list of percentage */
grid-template-areas:
"h_primarydirectory h_primarytype h_position h_fillcolor h_backopacity"
"t_primarydirectory t_primarytype t_position t_fillcolor t_backopacity"
"t_all t_all t_all t_all t_all";
cursor: pointer;
/*appears that index needs to be 8 or over to work */
z-index: 9;
}
.t_primarydirectory {
grid-area: t_primarydirectory;
}
.t_primarytype {
grid-area: t_primarytype;
}
.t_backopacity {
grid-area: t_backopacity;
}
.t_position {
grid-area: t_position;
}
.t_fillcolor {
grid-area: t_fillcolor;
}
.h_primarydirectory {
grid-area: h_primarydirectory;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_primarytype {
grid-area: h_primarytype;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_backopacity {
grid-area: h_backopacity;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_position {
grid-area: h_position;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
.h_fillcolor {
grid-area: h_fillcolor;
font-size: 1.5vmin;
color: rgb(209, 215, 21);
padding: 1vmin;
}
/*#endregion */
/*#region - Cell Themes - *************************************************************************/
/*generated by server*/
/*#endregion */
/*#region - Content Themes - **********************************************************************/
/*generated by server*/
/*#endregion */
/*#region - Section Themes - ***********************************************************************/
.blue_bricks {
background-color: rgb(114, 198, 250);
border: 2px solid rgb(251, 252, 250);
border-radius: 0.5vw;
margin: 0.5vw;
}
.green_bricks {
color: rgb(32, 154, 46);
background-color: rgb(204, 241, 190);
border-radius: 0.5vw;
margin: 0.5vw;
}
.red_bricks {
color: rgb(247, 251, 247);
background-color: rgb(165, 9, 9);
border-radius: 0.5vw;
margin: 0.5vw;
}
.black_bricks {
color: rgb(247, 251, 247);
background-color: rgb(9, 0, 0);
border-radius: 0.5vw;
margin: 0vw;
}
/*#endregion */
/*#region - Backcolor Themes - *********************************************************************/
.back_none {
background: rgba(0, 0, 0, 0);
}
.back_red {
background-color: rgb(226, 19, 19);
}
.back_pink {
background-color: rgb(250, 144, 231);
}
.back_beige {
background-color: rgb(228, 201, 168);
}
.back_royal {
background-color: rgb(18, 38, 165);
}
.back_navy {
background-color: rgb(12, 5, 80);
}
.back_purple {
background-color: rgb(158, 6, 158);
}
.back_mustard {
background-color: rgb(253, 195, 0);
}
.back_maroon {
background-color: rgb(109, 7, 36);
}
.back_white {
background-color: rgba(255, 255, 255, 1.0);
}
.back_black {
background-color: rgba(7, 7, 7, 1.0);
}
.back_cream {
background-color: rgb(230, 218, 207);
}
.back_yellow {
background-color: rgb(241, 225, 86);
}
.back_blue {
background-color: rgb(114, 198, 250);
}
.back_lightblue {
background-color: rgb(212, 231, 237);
}
.back_grey {
background-color: rgb(89, 89, 91);
}
.back_green {
background-color: rgb(60, 176, 67);
}
.back_emerald {
background-color: rgb(21, 71, 52);
}
.back_lightgreen {
background-color: rgb(112, 255, 230);
}
/*#endregion */
/*#region - Textcolor Themes - *********************************************************************/
.text_red {
color: rgb(226, 19, 19);
}
.text_pink {
color: rgb(250, 144, 231);
}
.text_beige {
color: rgb(228, 201, 168);
}
.text_royal {
color: rgb(18, 38, 165);
}
.text_purple {
color: rgb(158, 6, 158);
}
.text_white {
color: rgb(249, 248, 248);
}
.text_cream {
color: rgb(230, 218, 207);
}
.text_black {
color: rgb(7, 7, 7);
}
.text_yellow {
color: rgb(241, 225, 86);
}
.text_blue {
color: rgb(114, 198, 250);
}
.text_lightblue {
color: rgb(212, 231, 237);
}
.text_grey {
color: rgb(89, 89, 91);
}
.text_green {
color: rgb(60, 176, 67);
}
.text_lightgreen {
color: rgb(112, 255, 230);
}
.text_orange {
color: rgb(252, 126, 23);
}
/*#endregion */
/*#region - Textalignhorizontal Themes - ***********************************************************/
/*generated by server*/
/*#endregion */
/*#region - Textalignvertical Themes - *************************************************************/
/*generated by server*/
/*#endregion */
/*#region - Padding Themes - ***********************************************************************/
.pad_0 {
padding: 0vmin;
}
.pad_alittle {
padding: 0.5vmin;
}
.pad_1 {
padding: 1vmin;
}
.pad_1LR {
padding-left: 1vmin;
padding-right: 1vmin;
}
.pad_2 {
padding: 2vmin;
}
.pad_2LR {
padding-left: 2vmin;
padding-right: 2vmin;
}
.pad_3 {
padding: 3vmin;
}
.pad_3LR {
padding-left: 3vmin;
padding-right: 3vmin;
}
.pad_4 {
padding: 4vmin;
}
.pad_4LR {
padding-left: 4vmin;
padding-right: 4vmin;
}
.pad_6 {
padding: 6vmin;
}
.pad_6LR {
padding-left: 6vmin;
padding-right: 6vmin;
}
.pad_8 {
padding: 8vmin;
}
.pad_8LR {
padding-left: 8vmin;
padding-right: 8vmin;
}
.pad_10 {
padding: 10vmin;
}
.pad_10LR {
padding-left: 10vmin;
padding-right: 10vmin;
}
/*#endregion */
/*#region - Rounding Themes - **********************************************************************/
.round_0 {
border-radius: 0.0vmin;
}
.round_1 {
border-radius: 1.0vmin;
}
.round_2 {
border-radius: 2.0vmin;
}
.round_4 {
border-radius: 4.0vmin;
}
.round_6 {
border-radius: 6.0vmin;
}
.round_8 {
border-radius: 8.0vmin;
}
.round_10 {
border-radius: 10.0vmin;
}
.round_20 {
border-radius: 20.0vmin;
}
.round_oval {
border-radius: 50%;
}
.round_arch {
border-radius: 50%;
}
.round_circle {
border-radius: 50%;
}
/*#endregion */
/*#region - Bordersize Themes - ********************************************************************/
.px_0 {
border-width: 0px;
}
.px_1 {
border-width: 1px;
}
.px_2 {
border-width: 2px;
}
.px_3 {
border-width: 3px;
}
.px_4 {
border-width: 4px;
}
.px_5 {
border-width: 5px;
}
.px_10 {
border-width: 10px;
}
.px_15 {
border-width: 15px;
}
.px_20 {
border-width: 20px;
}
.px_50 {
border-width: 50px;
}
/*#endregion */
/*#region - Bordercolor Themes - *******************************************************************/
.border_red {
border-color: rgb(226, 19, 19);
}
.border_pink {
border-color: rgb(250, 144, 231);
}
.border_beige {
border-color: rgb(228, 201, 168);
}
.border_royal {
border-color: rgb(18, 38, 165);
}
.border_purple {
border-color: rgb(158, 6, 158);
}
.border_white {
border-color: rgb(249, 248, 248);
}
.border_cream {
border-color: rgb(230, 218, 207);
}
.border_black {
border-color: rgb(7, 7, 7);
}
.border_yellow {
border-color: rgb(241, 225, 86);
}
.border_blue {
border-color: rgb(114, 198, 250);
}
.border_grey {
border-color: rgb(89, 89, 91);
}
.border_lightblue {
border-color: rgb(212, 231, 237);
}
.border_green {
border-color: rgb(60, 176, 67);
}
.border_lightgreen {
border-color: rgb(112, 255, 230);
}
.border_orange {
color: rgba(252, 126, 23, 1);
}
/*#endregion */
/*#region - Font Themes - **************************************************************************/
.font_times {
font-family: 'Times New Roman', Times, serif;
}
.font_lucida {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.font_courier {
font-family: 'Courier New', Courier, monospace;
}
.font_aerial {
font-family: Arial, Helvetica, sans-serif;
}
.font_verdana {
font-family: Verdana, Geneva, Tahoma, sans-serif;
;
}
.font_cursive {
font-family: 'Comic Neue', cursive;
}
.font_impact {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.font_franklin_medium {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.font_handwriting {
font-family: 'Tangerine', cursive;
}
.font_veryclear {
font-family: 'Gabarito', sans-serif;
}
/*#endregion */
/*#region - Fontsize Themes - **********************************************************************/
/*generated by server*/
/*#endregion */
/*#region - Texteffect Themes - ********************************************************************/
/*JS controlled effects generated by server*/
/*#endregion */
/*#region - Opacity Themes - ***********************************************************************/
/*generated by server*/
/*#endregion */
/*#region - Other Styles (may be used in forms - dont delete)**************************************/
.warncolour {
/* Class defining the colour used for any warnings */
color: rgb(252, 126, 23);
font-size: 1.5vmin;
font-weight: bold;
}
.goodcolour {
/* Class defining the colour used for any success messages */
color: rgb(16, 177, 16);
font-size: 1.5vmin;
font-weight: bold;
}
.badcolour {
color: red;
font-size: 1.5vmin;
font-weight: bold;
}
.data {
color: rgb(243, 248, 243);
font-size: 2.0vmin;
}
.rowprompt {
text-align: right;
vertical-align: top;
color: rgb(252, 126, 23);
padding: 0.5vw;
}
.dialogbox {
display: block;
position: absolute;
top: 12vh;
/*fixed from top of page*/
height: auto;
font-size: var(--dialogbox-fontsize);
cursor: default;
background-color: rgba(var(--theme-backcolor));
border: 1px solid rgb(131, 129, 129);
border-radius: 0.5vw;
visibility: visible;
z-index: 10;
}
.messagebox {
display: block;
position: absolute;
height: auto;
width: auto;
cursor: default;
text-align: center;
background-color: rgba(226, 238, 243, 0.5);
color: rgba(0, 50, 50);
font-size: 3.5vmin;
border: 1px solid rgb(53, 52, 52);
border-radius: 0.5vw;
visibility: visible;
pointer-events: none;
}
.waitmessage {
display: block;
position: absolute;
height: auto;
width: auto;
cursor: default;
text-align: center;
background-color: rgba(141, 139, 7, 0.5);
color: rgba(0, 50, 50);
font-size: 1.5vmin;
border: 1px solid rgb(53, 52, 52);
border-radius: 0.5vw;
visibility: visible;
pointer-events: none;
}
.dialogheader {
margin: 1.0vw;
padding: 1.0v;
color: rgb(219, 216, 213);
text-align: left;
border: 0px solid rgb(126, 124, 124);
border-radius: 0.3vw;
}
.dialogfooter {
/* this determines the dialog width*/
margin: 5%;
color: rgb(219, 216, 213);
width: 80%;
padding: 1.0vw;
text-align: left;
font-size: 1.5vh;
border: 1px dashed rgb(131, 129, 129);
border-radius: 0.3vw;
}
.fade-in {
animation: fadein var(--fade-in-wait) var(--fade-in-duration) ease-in forwards;
}
.fade-out {
animation: fadeout var(--fade-out-wait) var(--fade-out-duration) ease-out forwards;
}
.fade-out-fast {
animation: fadeout 2s 0s ease-out forwards;
}
@keyframes fadein {
0% {
opacity: 0.1;
}
25% {
opacity: 0.2;
}
50% {
opacity: 0.6;
}
75% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes jiggle {
0% {
transform: translatey(0);
transform: translatex(0);
background-color: rgb(114, 198, 250);
color: rgb(241, 225, 86);
}
10% {
transform: rotate(10deg);
}
40% {
transform: rotate(10deg);
}
60% {
transform: rotate(-10deg);
}
70% {
transform: rotate(-10deg);
}
100% {
background-color: rgba(var(--theme-backcolor));
color: var(--theme-color);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(--spin-rotation-angle);
}
}
/*following used when a very narrow scrollbar is required*/
.scrollbar_width_narrow::-webkit-scrollbar {
width: 6px;
border-radius: 6px;
}
.scrollbar_thumb_narrow::-webkit-scrollbar-thumb {
background: rgba(250, 252, 254, 0.7);
border-radius: 4px;
}
.scrollbar_track_narrow::-webkit-scrollbar-track {
width: 6px;
background: #828181;
border-radius: 6px;
}
/*following used when scrollbar does not need to be visible but we mouse wheel available*/
.scrollbar_width::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.scrollbar_thumb::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
}
.scrollbar_track::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 6px;
}
.scrollbar_width_limit::-webkit-scrollbar {
width: 1px;
height: 1px;
}
/*#endregion */
/*#region - Tool Tips - ****************************************************************************/
.menutip {
position: relative;
display: flex;
}
/* Menutip text */
.menutip .menutiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
padding: 10px 0;
border-radius: 5px;
/* Position the tooltip text */
position: absolute;
z-index: 9;
top: 110%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1.0s;
}
/* Menutip arrow */
.menutip .menutiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.menutip:hover .menutiptext {
visibility: visible;
opacity: 1;
font-size: 0.75vw;
}
.menutip .buttonhelp {
visibility: visible;
opacity: 1;
}
/* For the image tools bar*/
.tooltip {
position: relative;
display: flex;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 9;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.5s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: white transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/*#endregion */
/*#region - Slider - ****************************************************************************/
.smooth {
-moz-transition: all 500ms ease-in;
-webkit-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
.slide {
-moz-transition: all 1200ms ease-in-out;
-webkit-transition: all 1200ms ease-in-out;
transition: all 1200ms ease-in-out;
}
.flick {
-moz-transition: all 100ms ease-in-out;
-webkit-transition: all 100ms ease-in-out;
transition: all 250ms ease-out;
}
.touchgallery {
list-style: none;
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
left: 0;
position: relative;
z-index: 1;
}
/*#endregion */
/*#region - SiteTemplate - ***********************************************************************/
.highlight-area {
position: absolute;
border: 2px solid transparent;
border-radius: 10px;
transition: border-color 1.0s, background-color 1.0s;
}
.highlight-area-mobile {
position: absolute;
border: 2px solid rgb(108, 102, 102);
transition: border-color 1.0s, background-color 1.0s;
}
.highlight-area:hover {
border-color: rgb(60, 176, 67);
background-color: rgba(112, 255, 230, 0.4);
cursor: pointer;
}
/*#endregion*/
/*#region - inputBox as select styling - *****************************************************/
.select-list {
list-style-type: none;
overflow-y: auto;
overflow-x: hidden;
cursor: pointer;
display: none;
animation: fadein 0.5s;
}
.select-list li:hover {
background-color: #0b5b68;
color: #fff;
}
.select-list:focus {
color: inherit;
outline: none;
}
/*#endregion */