@font-face { font-family: "matrix-font"; src: url("../font/matrix-font.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; src: url("../font/montserrat-400.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; src: url("../font/montserrat-500.woff2") format("woff2"); font-weight: 500; } @font-face { font-family: "Montserrat"; src: url("../font/montserrat-600.woff2") format("woff2"); font-weight: 600; } @font-face { font-family: "Roboto Mono"; src: url("../font/roboto-mono-400.woff2") format("woff2"); } :root { --font-family: "Montserrat"; --font-family-mono: "Roboto Mono"; --font-size-body: 95%; --global-hue: 222; --global-sat: 1; --global-lit: 1; --font-hue: 0; --font-sat: 0; --font-lit: 1; --menu-bg-accent: hsl( var(--global-hue) calc(20% * var(--global-sat)) calc(28% * var(--global-lit)) ); --menu-bg-accent2: hsl( var(--global-hue) calc(20% * var(--global-sat)) calc(24% * var(--global-lit)) ); --breakdown-bg-accent: hsl( var(--global-hue) calc(21% * var(--global-sat)) calc(13% * var(--global-lit)) ); --btn-bg-accent: hsl( var(--global-hue) calc(20% * var(--global-sat)) calc(22% * var(--global-lit)) ); --btn-hover-accent: hsl( var(--global-hue) calc(13% * var(--global-sat)) calc(33% * var(--global-lit)) ); --btn-active-accent: hsl( var(--global-hue) calc(13% * var(--global-sat)) calc(39% * var(--global-lit)) ); --body-bg-accent: hsl( var(--global-hue) calc(22% * var(--global-sat)) calc(16% * var(--global-lit)) ); --query-bg-accent: hsl( var(--global-hue) calc(20% * var(--global-sat)) calc(19% * var(--global-lit)) ); --hist-header-gradient: hsl( var(--global-hue) calc(13% * var(--global-sat)) calc(10% * var(--global-lit)) ); --table-row-odd: hsl( var(--global-hue) calc(14% * var(--global-sat)) calc(14% * var(--global-lit)) ); --table-row-even: hsl( var(--global-hue) calc(12% * var(--global-sat)) calc(16% * var(--global-lit)) ); --input-bg-accent: hsl( var(--global-hue) calc(13% * var(--global-sat)) calc(13% * var(--global-lit)) ); --highlight-date: hsla( var(--global-hue) calc(30% * var(--global-sat)) calc(85% * var(--global-lit)) / 0.15 ); --drag-highlight: hsla( var(--global-hue) calc(80% * var(--global-sat)) calc(70% * var(--font-lit)) / 0.2 ); --drag-highlight-border: hsl( var(--global-hue) calc(80% * var(--global-sat)) calc(70% * var(--font-lit)) ); --placeholder-color: hsl( var(--global-hue) calc(20% * var(--global-sat)) calc(45% * var(--font-lit)) ); --checkmark-accent: hsl( var(--global-hue) calc(75% * var(--global-sat)) calc(85% * var(--font-lit)) ); --font-white-1: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(92% * var(--font-lit)) ); --font-white-2: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(82% * var(--font-lit)) ); --font-white-3: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(63% * var(--font-lit)) ); --font-white-4: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(30% * var(--font-lit)) ); --border-accent: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(41% * var(--font-lit)) ); --separator-accent: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(50% * var(--font-lit)) ); --separator-accent2: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(30% * var(--font-lit)) ); --border-dark-accent: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(23% * var(--font-lit)) ); --focus-outline: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(75% * var(--font-lit)) ); --break-val-accent: hsl( var(--font-hue) calc(100% * var(--font-sat)) calc(41% * var(--font-lit)) ); } html, body { /* full height for */ height: 100%; min-height: 100%; padding: 0; margin: 0; } body { /* disable Chromium's Text Autosizer (mobile text inflation algorithm) */ -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; font-size: var(--font-size-body); } /* Text Selection */ /* ########################################## */ ::selection { color: rgb(23, 23, 23); background: rgb(158, 158, 158); } ::-moz-selection { color: rgb(23, 23, 23); background: rgb(158, 158, 158); } ::placeholder { /* input placeholder */ color: var(--placeholder-color); opacity: 1; } a { text-decoration: none; } a:link { color: var(--font-white-2); border-bottom: 1px solid var(--font-white-2); } a:visited { color: var(--font-white-3); border-bottom: 1px solid var(--font-white-3); } a:hover { color: var(--font-white-1); border-bottom: 1px solid var(--font-white-1); } a:active { color: var(--font-white-2); } /* Scrollbar Style */ /* ########################################## */ #calcMain { overflow: overlay; /* prevent page scroll in Query Table */ height: 100%; } #calcMain #calcLogo { padding-top: 15px; } #calcMain #mainLogo a:link { text-decoration: none; border-bottom: 0px; } #calcMain #mainLogo a:visited { text-decoration: none; border-bottom: 0px; } #calcMain #mainLogo a:hover { text-decoration: none; border-bottom: 0px; } #calcMain #mainLogo a:active { text-decoration: none; border-bottom: 0px; } @media (max-width: 911px) { /* mobile */ #calcMain #mainLogo { display: none; } #calcMain #calcLogo { padding-top: 15px; } } #loader { /* fade in on page load*/ z-index: 101; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--body-bg-accent); } body { overflow: overlay; } ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); /*border-radius: 20px;*/ } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.2); } /* ########################################## */ body { font-family: var(--font-family), "Arial", sans-serif; color: var(--font-white-2); background-color: var(--body-bg-accent); } .gematroLogo { display: flex; justify-content: center; /*padding-bottom: 0.4em;*/ } .gematroLogo svg { height: 10px !important; width: auto !important; } .gematroLogo svg path { fill: var(--font-white-2) !important; } .splitInterface { text-align: center; /* maintain centering when modal is open */ } @media (min-width: 911px) { /* desktop — modal overlays instead of pushing content */ .splitInterface { overflow: auto; height: 100%; } } .colorControlsBG { position: relative; background-color: var(--menu-bg-accent); width: -webkit-fit-content; width: -moz-fit-content; padding: 0.5em 0em 0.75em 1em; margin: 0.5em 0em 0.5em 0em; border: 1px solid var(--border-dark-accent); } .colLabelSmall, .colLabelSmallEnc { font-size: 80%; font-weight: 500; text-align: right; padding: 0em 0.1em 0em 0.4em; } .colLabelSmallEnc { text-align: left; } .colLabel { font-size: 90%; font-weight: 500; color: var(--focus-outline); text-align: center; padding-right: 0.4em; } #enabledCiphTable { width: 100%; padding: 1em 0em 0em 0em; display: flex; justify-content: center; } #inputArea { padding: 0.5em 0em 0em 0em; display: inline-flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #HistoryTableArea { padding-bottom: 0.1em; } #calcOptionsPanel { padding: 0.6em 0em 0em 0em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ciphToggleContainer { display: inline-block; padding: 0.5em 0.5em 0.2em 0.5em; border-spacing: 0em; text-align: left; } .colSlider, .colSlider2 { width: 55px; font-size: 80%; color: var(--font-white-1); border: 2px solid var(--border-accent); box-sizing: border-box; font-family: var(--font-family-mono), monospace; line-height: 1.1em; background-color: var(--btn-bg-accent); } .colSlider2 { width: 65px; } @media (max-width: 911px) { /* mobile */ .colSlider2 { width: 40px; } } .cipherColValueBox { width: 85px; font-size: 80%; color: var(--font-white-1); border: 2px solid var(--border-accent); font-family: var(--font-family-mono), monospace; line-height: 1.1em; background-color: var(--btn-bg-accent); } .globColCtrlTable { padding-right: 1.25em; } .phraseGemContainer { display: inline-block; border: 1px solid var(--border-dark-accent); border-spacing: 0px; text-align: center; font-weight: 500; line-height: 1em; } .phraseGemContainer tr:nth-child(odd) { background-color: var(--table-row-odd); } .phraseGemContainer tr:nth-child(even) { background-color: var(--table-row-even); } .phraseGemValueOdd, .phraseGemValueEven { font-size: 180%; text-align: center; min-width: 80px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-weight: 600; padding: 0em 0.1em 0em 0.1em; } .phraseGemCiphName { padding: 0.2em 0.5em; max-width: 115px; /* 110px */ height: 32px; cursor: pointer; } .phraseGemCiphNameBlank { padding: 0.2em 0.5em; max-width: 115px; /* 110px */ height: 32px; } #canv { margin: 0; padding: 0; position: fixed; touch-action: none; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; /* behind all elements */ } .ciphCheckbox { } .ciphCheckboxLabel { font-size: 85%; font-weight: 500; padding: 0em 0.6em 0em 0em; white-space: nowrap; } .ciphCheckboxLabel2 { font-size: 100%; font-weight: 500; padding: 0em 0em 0em 0.1em; white-space: nowrap; } .dragOver { border: 1px solid var(--drag-highlight-border) !important; background-color: var(--drag-highlight) !important; } /* Word Breakdown, Cipher Table, Word Count */ /* ########################################## */ #ChartSpot { /*min-height: 189px;*/ /* fix content shift */ display: flex; /* vertically center */ justify-content: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; /*padding: 0.4em;*/ border: 1px solid var(--border-dark-accent); /*margin-top: 1em;*/ /*margin-bottom: 0.5em;*/ } @media (max-width: 911px) { /* mobile */ #ChartSpot { padding: 0em 0.8em !important; } #ChartSpotScroll { width: 90vw; overflow: auto; } } .ChartSpotScrollStop { width: unset !important; overflow: unset !important; } #BreakdownSpot { padding-bottom: 0.5em; } #BreakdownDetails { padding: 1em 1.5em 1em 1.5em; width: -webkit-fit-content; width: -moz-fit-content; } #SimpleBreak { max-width: 800px; margin: auto; padding-bottom: 1em; text-align: center; } #BreakSumLong { margin: auto; padding: 0.5em 0em; text-align: center; } .SimpleBreakChart { max-width: 800px; } .SimpleBreakChartLong { max-width: 720px; padding: 0.75em 1em 0.35em 1em; text-align: center; } #BreakTableContainer { padding: 0.4em 0.4em 0.4em 0.8em; border: 1px solid var(--border-dark-accent); width: -webkit-fit-content; width: -moz-fit-content; } .BreakRTL { padding: 0.4em 0.8em 0.4em 0.4em !important; } .BreakChar { font-size: 115%; font-weight: 500; padding-right: 2px; padding-left: 2px; font-family: var(--font-family-mono), "Arial", sans-serif; } .breakCipher { font-size: 115%; font-weight: 500; display: inline-block; } .breakSum, .breakSumDark { font-size: 125%; color: var(--font-white-1); font-weight: 600; } .breakSumDark { color: var(--font-white-2); } .breakPhrase { font-size: 125%; color: var(--font-white-2); font-weight: 500; } .breakPhraseChart { font-size: 120%; font-weight: 500; color: var(--font-white-2); } .breakPhraseChartCiphName { font-size: 115%; font-weight: 500; display: inline-block; } .BreakPhraseSum { font-weight: 500; font-size: 175%; padding-left: 10px; padding-right: 10px; } .BreakTable, .BreakTableRow { text-align: center; border-spacing: 0px; margin: auto; width: -webkit-fit-content; width: -moz-fit-content; } .BreakTable td, .BreakTableRow td { min-width: 14px; } .BreakTableRow { padding: 0em 0.75em; } .BreakVal, .BreakValDark { color: var(--focus-outline); font-weight: 600; font-size: 74%; padding-right: 3px; padding-left: 3px; } .BreakValDark { color: var(--break-val-accent); } .BreakWordSum { font-size: 115%; padding-right: 5px; padding-left: 5px; font-weight: 500; } #ChartTable { border-spacing: 0px; } #ChartTable td { text-align: center; border: none; padding: 0.1em 0.25em 0.2em 0.25em; min-width: 22px; } @media (max-width: 911px) { /* mobile */ #ChartTable td { padding: 0.1em 0.15em 0.2em 0.15em; } } /* ----- Bordered style for Cipher Table ---- */ .borderCipherTable { border-right: 1px solid var(--border-accent) !important; border-top: 1px solid var(--border-accent) !important; } .borderCipherTable td { border-left: 1px solid var(--border-accent) !important; border-bottom: 1px solid var(--border-accent) !important; padding-right: 5px !important; padding-left: 5px !important; padding-top: 1px !important; padding-bottom: 2px !important; } .borderClassGemCard { border: 1px solid var(--border-accent) !important; } .ChartChar { font-size: 140%; } .ChartVal { font-size: 120%; } @media (max-width: 911px) { /* mobile */ .ChartVal { font-size: 110%; } } .CipherEnd, .CipherEndRTL { font-size: 90%; padding-top: 2px; padding-bottom: 2px; font-weight: 500; padding-right: 0.5em; } .CipherEndRTL { padding-right: 0em; padding-left: 0.5em; } .LetterCounts { color: var(--font-white-2); font-size: 90%; font-weight: 500; text-align: center; padding-bottom: 1em; } .ChartChar, .ChartVal, #spaceChartBtn, #capsNameChartBtn, #backspaceChartBtn { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Buttons, Text Boxes, Controls */ /* ########################################## */ #btn-clear-active-filter { position: relative; color: var(--font-white-1); font-weight: 500; margin-left: 0.25em; font-family: var(--font-family), "Arial", sans-serif; padding: 0.2em 0.55em 0.2em 0.55em; border: 1px solid var(--border-accent); background-color: var(--menu-bg-accent2); font-size: 100%; outline: none; } #btn-clear-active-filter:hover { background-color: var(--btn-hover-accent); } #btn-clear-active-filter:active { background-color: var(--btn-active-accent); } #highlightBox { background-color: var(--input-bg-accent); color: var(--font-white-1); font-weight: 500; border: 1px solid var(--border-accent); font-family: var(--font-family), "Arial", sans-serif; margin-left: 0.25em; font-size: 125%; } #phraseBox { background-color: var(--input-bg-accent); color: var(--font-white-1); font-weight: 500; border: 1px solid var(--border-accent); font-family: var(--font-family), "Arial", sans-serif; font-size: 125%; } @media (max-width: 911px) { /* mobile */ #inputArea { max-width: 480px; } #phraseBox { width: 300px; } #highlightBox, #clearFilterButton { display: none !important; /* hide filter input on mobile — gains space */ } } @media (min-width: 911px) { /* desktop */ #inputArea { max-width: none; } #phraseBox { width: 500px; } #highlightBox { width: 120px; max-width: 120px; } #highlightBox::placeholder { font-size: 75%; } } #phraseBox:focus, #highlightBox:focus { outline: none !important; border: 1px solid var(--focus-outline); } /* History Table */ /* ########################################## */ .HistoryTable tr, .HistoryTable td { border-bottom: 1px solid var(--border-dark-accent); border-left: 1px solid var(--border-dark-accent); } .cH { /* cipher header bar, history table */ background: -webkit-linear-gradient( 0deg, var(--hist-header-gradient), transparent ); /*20,23,27*/ background: -moz-linear-gradient( 0deg, var(--hist-header-gradient), transparent ); background: -o-linear-gradient( 0deg, var(--hist-header-gradient), transparent ); background: linear-gradient(0deg, var(--hist-header-gradient), transparent); } .HistoryTable { text-align: center; border-spacing: 0px; border-top: 1px solid var(--border-dark-accent); border-right: 1px solid var(--border-dark-accent); margin: 0.5em 1em 2.4em 1em; } .HistoryTable tr:nth-child(odd) { background-color: var(--table-row-odd); } .HistoryTable tr:nth-child(even) { background-color: var(--table-row-even); } #QueryTable { table-layout: fixed; width: 100%; word-break: break-all; margin: auto; float: right; border-top: none; } .hC { /* history table header, cipher name cell */ min-width: 80px; max-width: 80px; font-size: 85%; padding: 5px 3px 5px 3px; text-align: center; font-weight: 500; word-break: break-word; /* affects table performance */ } .hCV, .hCVQ { /* vertical history table header, cipher name cell */ font-size: 85%; height: 180px; text-align: center; vertical-align: bottom; font-weight: 500; } .hCVQ { /* vertical query table header, cipher name cell */ width: 55px; } .hCV2 { transform: rotate(-90deg); transform-origin: left; white-space: nowrap; display: inline-block; width: 20px; margin-left: 1.6em; } .hP { /* history phrase */ text-align: right; padding: 0em 0.5em 0em 0.5em; font-size: 110%; } @media (min-width: 911px) { /* desktop */ .hP { /* single line history phrase */ white-space: nowrap; /* affects table performance */ } } .hPQ { /* history phrase - query table*/ text-align: right; padding: 0em 0.5em 0em 0.5em; font-size: 110%; max-width: 150px; /* desktop: keep modal narrow */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 911px) { .hPQ { max-width: 300px; /* mobile: full-width overlay has room */ } } .mP, .mPQ { /* history table - top left cell */ font-weight: 500; font-size: 125%; } .mPQ { /* query table - top left cell */ /*width: 300px;*/ height: 150px; } .gV, .gVQ { /* gematria value in history/query table */ font-size: 125%; font-weight: 500; cursor: pointer; } .gV { padding: 0em 0.2em; } .pCHT { /* phrase comment - history table */ font-size: 75%; font-weight: 500; /*color: hsl(0 0% 30% / 1);*/ color: var(--font-white-4); padding-right: 0.35em; } /* -------------- Highlighting -------------- */ .highlightCipherTable { background: rgba(192, 192, 192, 0.15); } .hideValue { display: none !important; } @keyframes blink { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .highlightValueBlink { animation: blink 500ms linear infinite; z-index: 99; } .selectedPhrase { background-color: hsla(var(--global-hue) 15% 50% / 0.2); } /* Options Menu */ /* ########################################## */ .intBtn { /* Big Buttons */ display: inline-block; color: var(--font-white-1); color: var(--font-white-2); padding: 0.4em 0.75em; border: 1px solid var(--border-accent); width: 100%; font-size: 100%; font-weight: 500; font-family: var(--font-family), "Arial", sans-serif; outline: none; background-color: var(--btn-bg-accent); /*background-color: transparent;*/ } .intBtn2, .ciphEditBtn { /* Cipher Categories */ display: inline-block; color: var(--font-white-1); color: var(--font-white-2); padding: 0.2em 0.75em; margin: 0.1em 0em; border: 1px solid var(--border-accent); width: 100%; font-size: 100%; font-weight: 500; font-family: var(--font-family), "Arial", sans-serif; outline: none; background-color: var(--btn-bg-accent); /*background-color: transparent;*/ } .ciphEditBtn { width: auto; margin: 0.75em 0.5em 0em 0.5em; } .intBtn3, .intBtnResetDate, #queryDBbtn, #enterPhraseBtn { /* Empty, Default, All */ display: inline-block; color: var(--font-white-1); color: var(--font-white-2); padding: 0.2em 0.75em; margin: 0em 0.1em 0.5em 0.1em; border: 1px solid var(--border-accent); width: 85px; font-size: 100%; font-weight: 500; font-family: var(--font-family), "Arial", sans-serif; outline: none; background-color: var(--btn-bg-accent); /*background-color: transparent;*/ } @media (max-width: 911px) { /* mobile */ #queryDBbtn { min-width: 30px !important; width: 30px !important; } } .closeMenuBtn { position: absolute; right: -29px; top: -5px; width: 30px; height: 30px; border: none; outline: none; padding: none; font-size: 150%; font-weight: 600; font-family: var(--font-family), "Arial", sans-serif; color: var(--border-accent); background-color: transparent; cursor: pointer; } @media (max-width: 911px) { /* mobile */ .closeMenuBtn { right: 0px !important; top: 0px !important; } } .intBtnResetDate { font-size: 80%; width: auto; margin: 0em; padding: 0.3em 0.6em 0.3em 0.6em; } #queryDBbtn { background-color: var(--input-bg-accent); padding: 0em; margin: 0em 0.3em; width: 75px; } #enterPhraseBtn, #autoMatchBtn { background-color: var(--input-bg-accent); padding: 0em; margin: 0em 0em 0em 0.3em; min-width: 30px; max-width: 30px; color: var(--border-accent); } #autoMatchBtn.matchOff { opacity: 0.35; } #calcNotification { position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 40px; background: var(--menu-bg-accent); border: 1px solid var(--border-dark-accent); padding: 1em 1.5em; font-size: 125%; font-weight: 500; border-radius: 15px; text-align: center; z-index: 1000; } .intBtn:hover, .intBtn2:hover, .ciphEditBtn:hover, .intBtn3:hover, .intBtnResetDate:hover, #queryDBbtn:hover, #enterPhraseBtn:hover, #autoMatchBtn:hover, .queryPageBtn:hover { background-color: var(--btn-hover-accent); } .intBtn:active, .intBtn2:active, .ciphEditBtn:active, .intBtn3:active, .intBtnResetDate:active, #queryDBbtn:active, #enterPhraseBtn:active, #autoMatchBtn:active, .queryPageBtn:active { background-color: var(--btn-active-accent); } .dropbtn { background-color: transparent; color: var(--font-white-1); color: var(--font-white-2); padding: 0.4em 1.1em; border: none; font-family: var(--font-family), "Arial", sans-serif; font-size: 100%; font-weight: 500; outline: none; } .optionElementTable { border-spacing: 0; text-align: center; margin: 1em; border: 1px solid var(--border-accent); border-bottom: none; text-align: center; color: var(--font-white-2); background-color: var(--btn-bg-accent); font-weight: 500; width: 87%; } .optionElementTable td { border-bottom: 1px solid var(--border-accent); padding: 0.3em; } .enterAsWordsLimit { text-align: right; border: 1px solid var(--border-accent); background-color: var(--btn-bg-accent); color: var(--font-white-2); font-weight: 500; width: 100%; box-sizing: border-box; border-top: none; padding-bottom: 0.1em; } .dbOptionsBox { margin: auto; border: 1px solid var(--border-accent); text-align: right; color: var(--font-white-2); background-color: var(--btn-bg-accent); font-weight: 500; width: 200px; box-sizing: border-box; border-top: none; padding-bottom: 0.1em; } .optionTableLabel { font-size: 80%; } #phrLimitBox, #dbPageItemsBox, #dbScrollItemsBox, #iScaleBox { width: 50px; border: none; color: var(--font-white-2); font-family: var(--font-family), "Arial", sans-serif; font-size: 85%; outline: none; background-color: transparent; text-align: center; font-weight: 500; } .optionElement { margin: 0.3em 1em; white-space: nowrap; /* text on one line */ } .optionElementLabel { margin: 0em 0.4em 0em 0.3em; color: var(--font-white-2); font-weight: 500; } .dropdown { position: relative; display: inline-block; } .dropdown-content, .dropdown-content-opt { display: none; position: absolute; left: -10px; z-index: 200; /* above other elements */ padding: 1em; text-align: left; background-color: var(--menu-bg-accent2); border: 1px solid var(--border-dark-accent); /* --body-bg-accent */ /*border-top: none;*/ } @media (max-width: 911px) { /* mobile */ .dropdown { position: unset !important; } .dropdown-content, .dropdown-content-opt { left: 50% !important; transform: translateX(-50%); } .dropdown-about { transform: none !important; } } .dropdown-content-opt { padding: 0.5em; } .dropdown:hover .dropdown-content, .dropdown:hover .dropdown-content-opt { display: block; } .dropdown:hover .dropbtn { background-color: var(--btn-active-accent); } /* Print Image Preview */ /* ########################################## */ .printImageContainer { background-color: var(--menu-bg-accent2); color: var(--font-white-2); background-color: black; border: 1px solid var(--border-dark-accent); font-family: var(--font-family), "Arial", sans-serif; font-size: 100%; position: absolute; top: 15%; left: 15%; height: 77%; width: 70%; overflow: auto; z-index: 1000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 911px) { /* mobile */ .printImageContainer { top: 50% !important; left: 50% !important; transform: translateX(-50%) translateY(-50%); width: 90% !important; height: 80% !important; } } #downImgBtn, .refreshImgBtn { font-size: 125%; font-weight: 500; color: var(--font-white-2); background-color: var(--menu-bg-accent2); text-decoration: none; padding: 0.35em 1em; border: none; outline: none; border-radius: 20px; margin: 1.35em 0.3em 0em 0.3em; } #imgData { padding: 1.5em 2em; } .prevBtnArea { display: inline-block; } .imgDataArea { display: grid; place-items: center; } #downImgBtn:hover, .refreshImgBtn:hover { background-color: var(--btn-hover-accent); } #downImgBtn:active, .refreshImgBtn:active { background-color: var(--btn-active-accent); } /* Number Properties */ /* ########################################## */ .numProp { cursor: pointer; } .numPropTooltip { max-width: 350px; width: max-content; margin: 1em; padding: 0.75em 1em 1em 1em; background-color: var(--menu-bg-accent); position: absolute; z-index: 101; font-family: var(--font-family), "Arial", sans-serif; border: 1px solid var(--border-dark-accent); } .numPropTable { text-align: center; } .numPropLabel { color: var(--font-white-1); font-size: 115%; font-weight: 500; } .numValLabel { color: var(--font-white-2); font-size: 180%; font-weight: 600; padding: 0em; } .numPropCenter { text-align: center; } .numPropSeparator { background-color: var(--separator-accent); border: none; height: 2px; } .numPropBaseLabel { font-size: 90%; text-align: left; margin-left: 0.4em; } .numPropBaseValue { font-size: 110%; font-family: var(--font-family-mono), sans-serif; } .numTicXeno { /*font-size: 85%;*/ /*font-family: var(--font-family-mono), sans-serif;*/ font-size: 100%; font-family: var(--font-family), "Arial", sans-serif; font-weight: 500; } .numPropValPad { margin-right: 0.4em; margin-left: 0.4em; } .npSmall { font-size: 70%; font-weight: 500; color: var(--separator-accent); } .npLine { line-height: 0.9em; } /* Edit Ciphers Menu */ /* ########################################## */ .editCiphersContainer { position: relative; margin: 0.5em 0em 0.5em 0em; padding: 1em; background: var(--menu-bg-accent); width: -webkit-fit-content; width: -moz-fit-content; border: 1px solid var(--border-dark-accent); } .custCipherMainTable { margin: 0.5em 0em 0.5em 0em; /*width: 570px;*/ } .custCipherTable { /*margin: 0em 0em 0.75em 0em;*/ } #custCipherNameInput, #custCipherCatInput { background: var(--btn-bg-accent); font-size: 125%; color: var(--font-white-2); font-family: var(--font-family), "Arial", sans-serif; font-weight: 500; text-align: center; width: 100%; box-sizing: border-box; border: 1px solid var(--border-dark-accent); } #custCipherAlphabet, #custCipherGlobVals { background: var(--btn-bg-accent); font-size: 125%; color: var(--font-white-2); font-family: var(--font-family), "Arial", sans-serif; font-weight: 500; width: 500px; text-align: center; resize: none; width: 100%; box-sizing: border-box; border: 1px solid var(--border-dark-accent); } #custCipherGlobVals { font-size: 100%; height: 40px; } #custCipherAlphabet:focus, #custCipherGlobVals:focus, #custCipherNameInput:focus, #custCipherCatInput:focus { outline: none; border: 1px solid var(--border-dark-accent); } .custCharInd:focus, .custCharIndValue:focus { outline: none; border: none; } #diacrChkbox, #caseSensChkbox { display: inline-flex; padding: 0em 1em 0.75em 1em; } .custCharIndTable { width: 40px; border-spacing: 0px; border: none; } .custCharIndLabel { text-align: center; background: var(--btn-bg-accent); height: 38px; box-sizing: border-box; border: 1px solid var(--border-dark-accent); } .custCharInd { width: 40px; text-align: center; font-weight: 500; font-size: 150%; font-family: var(--font-family), "Arial", sans-serif; border: none; background: transparent; color: var(--font-white-2); } .custCharIndValue { width: 40px; text-align: center; font-weight: 500; font-size: 100%; padding: 0.2em 0.2em 0.2em 0.2em; font-family: var(--font-family), "Arial", sans-serif; border: none; background: transparent; color: var(--font-white-2); } @media (max-width: 911px) { /* mobile */ .custCharInd, .custCharIndValue { width: 30px !important; } } /* Date Calculator */ /* ########################################## */ .dateCalcContainer { position: relative; margin: 0.5em 0em 0.5em 0em; padding: 1em; background: var(--menu-bg-accent); width: -webkit-fit-content; width: -moz-fit-content; display: flex; height: 340px; border: 1px solid var(--border-dark-accent); } @media (max-width: 911px) { /* mobile */ .dateCalcContainer { display: block; height: unset !important; } } .dateCalcTable, .dateCalcTable2 { text-align: center; } .dateCalcTable { margin: auto; } .dateCalcTable2 { line-height: 0.8em; padding: 1em 1em 0.9em 1em; background: var(--btn-bg-accent); } .elemBorderScr { border: 1px solid var(--border-dark-accent); } .dateCalcBg { min-width: 370px; margin: 0em 0em 0em 0.9em; background: var(--btn-bg-accent); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-dark-accent); box-sizing: border-box; } @media (max-width: 911px) { /* mobile */ .dateCalcBg { margin: 1em 0em 0em 0em !important; height: 350px; } } .dateInputLabel { font-weight: 500; font-size: 80%; color: var(--focus-outline); } .dateNthLabel, .dateOffsetLabel { color: var(--separator-accent); font-size: 68%; } .dateOffsetLabel { font-weight: 500; } .dateDescription { box-sizing: border-box; width: 100%; background: var(--btn-bg-accent); color: var(--font-white-2); outline: none; border: none; text-align: center; font-family: var(--font-family), "Arial", sans-serif; font-weight: 600; font-size: 80%; padding: 0em; line-height: normal !important; } .dateFullTable2 { font-weight: 600; font-size: 128%; color: var(--font-white-2); } .dateInput, .dateInputYear, .offsetDateInput, #queryPosInput { text-align: center; width: 60px; font-size: 150%; color: var(--font-white-1); border: 2px solid var(--border-accent); box-sizing: border-box; font-family: var(--font-family), "Arial", sans-serif; font-weight: 500; line-height: 1.1em; background-color: var(--btn-bg-accent); } .offsetDateInput { font-size: 80%; font-weight: 600; color: var(--focus-outline); padding: 0.2em 0em; } .dateInputYear { width: 110px; } .dateDetailsText { } #d1full, #d2full { font-weight: 600; } .endDateLabel { font-size: 85%; margin: 0em 0.4em 0em 0.3em; color: var(--font-white-2); font-weight: 500; } .weekDayLabel { font-weight: 400; font-size: 108%; color: var(--font-white-3); } .durVal { font-weight: 600; color: var(--font-white-2); } .dOfYear { font-weight: 600; color: var(--font-white-3); } #dateDurValues { line-height: 1.1em; color: var(--font-white-3); } .dateDurLine { font-size: 80%; font-weight: 500; } .highlightDurLine { background: var(--highlight-date); padding: 0em 0.5em; } /* Query Table */ /* ########################################## */ #queryArea { width: 30%; position: absolute; /* border-right: 1px solid var(--border-accent); */ top: 80px; /* fallback, overridden dynamically by queryDatabase() */ left: 5px; overflow: auto; max-height: 92%; border: 1px solid var(--border-accent); background-color: var(--menu-bg-accent); resize: horizontal; z-index: 100; } @media (max-width: 911px) { /* mobile — center the modal */ #queryArea { left: 2.5% !important; width: 95% !important; max-width: 480px; } #queryArea.minimizeQuery { transform: translate(calc(-100% + 30px), 0) !important; min-height: 60px; } } .queryPageBtn { font-size: 100%; color: var(--font-white-2); background-color: var(--btn-bg-accent); border: 1px solid var(--border-dark-accent); padding: 0em 0.35em; } #queryMinBtn { position: absolute; width: 24px; left: calc(100% - 24px); height: 24px; text-align: center; box-sizing: border-box; color: var(--border-accent); background: var(--hist-header-gradient); border: 1px solid var(--border-accent); border-bottom: 2px solid var(--border-accent); cursor: pointer; user-select: none; } #queryMinBtn:hover { background-color: var(--btn-bg-accent); } #queryCloseBtn { position: absolute; width: 24px; left: 0; height: 24px; text-align: center; box-sizing: border-box; color: var(--border-accent); background: var(--hist-header-gradient); border: 1px solid var(--border-accent); border-bottom: 2px solid var(--border-accent); cursor: pointer; user-select: none; font-size: 120%; line-height: 20px; } #queryCloseBtn:hover { background-color: var(--btn-bg-accent); } #queryCloseBtn:active { background-color: var(--btn-hover-accent); } #queryMinBtn:active { background-color: var(--btn-hover-accent); } .queryTextResult { padding: 1em; line-height: 2em; } .qSlider { -webkit-appearance: none; width: calc(100% - 48px); /* 24px close btn left + 24px minimize btn right */ height: 24px; background: var(--hist-header-gradient); outline: none; margin: 0 0 0 24px; /* push right of close button */ border: 1px solid var(--border-accent); border-bottom: 2px solid var(--border-accent); display: block; box-sizing: border-box; } .qSlider:hover { opacity: 1; } .qSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 24px; background: var(--border-dark-accent); cursor: pointer; } .qSlider::-moz-range-thumb { width: 12px; height: 24px; background: var(--border-accent); cursor: pointer; } #queryPosInput { width: 95px; font-size: 100%; /* background: transparent; */ /* border: none; */ outline: none; color: var(--font-white-2); caret-color: transparent !important; background-color: var(--body-bg-accent); border: 1px solid var(--border-dark-accent); border-left: none; border-right: none; } #queryPosInput:focus { border: 1px solid var(--focus-outline); } #querySearchInput { text-align: center; width: 100%; font-family: var(--font-family), "Arial", sans-serif; font-size: 125%; font-weight: 500; line-height: 1.1em; color: var(--font-white-2); background-color: var(--body-bg-accent); box-sizing: border-box; border: 1px solid var(--border-dark-accent); border-top: none; outline: none; padding: 0.3em 0em; } .minimizeQuery { resize: none !important; transition: 0.2s; transform: translate(calc(-100% + 30px), 0); /* slide left, leave 30px visible */ } @media (max-width: 911px) { /* mobile */ .minimizeQuery { transform: translate(calc(-100% + 30px), 0) !important; /* same: leave 30px tab visible */ min-height: 60px; /* larger tap target when minimized */ } } .minimizeLabel { position: absolute; margin: 0.3em 1em 0.15em 0.15em; right: 24px; user-select: none; pointer-events: none; font-size: 75%; font-weight: 600; color: var(--border-accent); } /* Quick Start Guide */ /* ########################################## */ #darkOverlay { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } .quickGuide { background-color: var(--menu-bg-accent2); color: var(--font-white-2); font-family: var(--font-family), "Arial", sans-serif; font-size: 100%; padding: 1em 2em 1em 2em; position: absolute; top: 10%; left: 30%; height: 80%; width: 40%; overflow: auto; z-index: 1000; border: 1px solid var(--border-dark-accent); } @media (max-width: 911px) { /* mobile */ .quickGuide { top: 50% !important; left: 50% !important; transform: translateX(-50%) translateY(-50%); width: 80% !important; height: 80% !important; } } .qgBold, .qgBold2 { font-size: 100%; font-weight: 500; color: var(--font-white-1); } .qgBold2 { font-size: 150%; } .qgMedium { font-size: 125%; } .qgNote { font-style: italic; font-size: 85%; color: var(--separator-accent); } .qgLink { font-size: 100%; color: var(--font-white-1); } .noScroll { overflow: hidden; } .qgBold, .qgBold2, .qgBoldCoin { font-size: 100%; font-weight: 500; color: var(--font-white-1); } .qgBold2 { font-size: 150%; } /* About */ /* ########################################## */ .contactInfo { background-color: var(--menu-bg-accent2); color: var(--font-white-2); font-family: var(--font-family), "Arial", sans-serif; font-size: 100%; text-align: center; padding: 1em 2em 1em 2em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 560px; width: 480px; overflow: auto; z-index: 1000; border: 1px solid var(--border-dark-accent); } @media (max-width: 911px) { /* mobile */ .contactInfo { width: 400px !important; height: 80% !important; max-height: 560px !important; } } .qgBoldCoin { font-size: 150%; margin: 1em 0em 0.3em 0em; } .qgAddr { font-family: var(--font-family-mono), monospace; color: var(--font-white-1); } .qrImg { margin: 1em 0em 2.5em 0em; } /* Custom Checkbox */ /* ########################################## */ .chkLabel { display: block; position: relative; padding-left: 28px; cursor: pointer; } /* hide default checkbox */ input[type="checkbox"] { visibility: hidden; } /* custom checkbox */ .custChkBox { position: absolute; top: 50%; transform: translate(0, -50%); left: 0; height: 16px; width: 16px; background-color: var(--btn-bg-accent); border: 1px solid var(--border-accent); } .chkLabel:hover input ~ .custChkBox { background-color: var(--btn-hover-accent); } .chkLabel input:active ~ .custChkBox { background-color: var(--btn-active-accent); } .chkLabel:hover input:checked ~ .custChkBox { background-color: var(--btn-hover-accent); } .chkLabel input:checked ~ .custChkBox { background-color: var(--btn-bg-accent); /*background-color: var(--btn-hover-accent);*/ } /* show checkmark in checkbox when checked*/ .custChkBox:after { content: ""; position: absolute; display: none; } .chkLabel input:checked ~ .custChkBox:after { display: block; } .chkLabel input[type="checkbox"]:disabled ~ .custChkBox, .colSlider:disabled, #queryDBbtn:disabled { background-color: var(--btn-hover-accent); } /* checkmark style */ .chkLabel .custChkBox:after { left: 4px; bottom: 4px; width: 0px; height: 0px; border: solid 4px var(--checkmark-accent); }