@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", "Arial", sans-serif; --font-family-mono: "Roboto Mono", monospace; --font-size-body: 95%; --border-pxl: 2px solid; --border-rad: 1em; --global-hue: 222; --global-sat: 2.0; --global-lit: 0.6; --font-hue: 200; --font-sat: 0.5; --font-lit: 0.9; --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(20% * 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(68% * 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))); --btn-border-accent: hsl(var(--font-hue) calc(100% * var(--font-sat)) calc(33% * var(--font-lit))); --btn-border-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(21% * var(--font-lit))); --focus-outline: hsl(var(--font-hue) calc(100% * var(--font-sat)) calc(60% * var(--font-lit))); --break-val-accent: hsl(var(--font-hue) calc(100% * var(--font-sat)) calc(41% * var(--font-lit))); --selected-phr-accent: hsla(var(--global-hue) 15% 55% / 0.2); } html, body { /* full height for */ height: 100%; min-height: 100%; padding: 0; margin: 0; overscroll-behavior: none; /* disable pull to refresh (mobile) */ } 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); } @media (max-width: 911px) { /* mobile */ body { user-select: none; } } /* no arrow controls for number inputs */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input { box-sizing: border-box; } .inputPadding { /* padding for rounded input elements */ padding-left: 0.35em; padding-right: 0.35em; } @-moz-document url-prefix() { /* mode padding for Firefox */ .inputPadding { padding-left: 0.65em; padding-right: 0.65em; } } input, textarea, button, label.intBtn, .intBtnRepo, .optionElementTable, .dropdown-content, .dropdown-content-opt, .enterAsWordsLimit, .quickGuide, .discPanel, .ciphInfoPanel, .contextMenuTooltip, .dateCalcContainer, .colorControlsBG, .editCiphersContainer, .printImageContainer, #BreakTableContainer, #ChartSpot, #imgDataDesc, #calcNotification, #BreakdownDetails, .numPropTooltip, .dateCalcBg, .dateCalcTable2, td.custCharIndLabel, table.dateCalcTable2 tr:last-child > td { border-radius: var(--border-rad); } label { user-select: none; } table.optionElementTable tr:first-child > td:first-child { border-top-left-radius: var(--border-rad); } table.optionElementTable tr:first-child > td:last-child { border-top-right-radius: var(--border-rad); } table.optionElementTable tr:last-child > td:last-child { border-bottom-right-radius: var(--border-rad); } table.optionElementTable tr:last-child > td:first-child { border-bottom-left-radius: var(--border-rad); } .dbOptionsBoxTop { border-top-left-radius: var(--border-rad); border-top-right-radius: var(--border-rad); } .dbOptionsBoxBtm { border-bottom-left-radius: var(--border-rad); border-bottom-right-radius: var(--border-rad); } .borderOptionsBox { border-radius: var(--border-rad); } /* 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%; } #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-resizer { /* textarea resize handle */ display: none; } @media only screen and (min-device-width: 1024px) { ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); border-radius: var(--border-rad); } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); border-radius: var(--border-rad); } ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.15); } } /* ########################################## */ body { font-family: var(--font-family); 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, .gitLogo svg path { fill: var(--font-white-2) !important; } .gitLogo { position: absolute; pointer-events: none; top: 0.4em; left: 2.3em; } .splitInterface {} @media (min-width: 1750px) { /* desktop */ .splitInterface { width: 70%; position: absolute; top: 0; right: 0; 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: var(--border-pxl) 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; } .hrSeparator1em, .hrSeparator2em { background-color: transparent; border: none; height: 0px; margin: 1em 0em; } .hrSeparator1em { margin: 0.5em 0em; } #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; } @media (max-width: 911px) { /* mobile */ #HistoryTableArea { width: 90vw; overflow: auto; margin-bottom: 4em; } } #calcOptionsPanel { padding: 3.4em 0em 0em 0em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 911px) { /* mobile */ #calcOptionsPanel { padding: 0.6em 0em 0em 0em; } } .ciphToggleContainer { display: inline-block; padding: 0.5em 0.5em 0.2em 0.5em; border-spacing: 0em; text-align: left; } .colSlider, .colSlider2 { width: 50px; text-align: center; font-size: 80%; color: var(--font-white-1); border: var(--border-pxl) var(--border-accent); box-sizing: border-box; font-family: var(--font-family-mono); line-height: 1.2em; background-color: var(--btn-bg-accent); } @media (max-width: 911px) { /* mobile */ .colSlider, .colSlider2 { width: 42px; } } .cipherColValueBox { width: 100px; font-size: 80%; color: var(--font-white-1); border: var(--border-pxl) var(--border-accent); font-family: var(--font-family-mono); line-height: 1.2em; background-color: var(--btn-bg-accent); } .colSlider:focus, .colSlider2:focus, .cipherColValueBox:focus { outline: none !important; border: var(--border-pxl) var(--focus-outline); } .globColCtrlTable { padding-right: 1.25em; } .phraseGemContainer { display: inline-block; /* border: var(--border-pxl) var(--border-dark-accent); */ border-spacing: 0px; text-align: center; font-weight: 500; line-height: 1.0em; } .phraseGemContainer tr:nth-child(odd) td { /* Firefox can't combine 'tr' and 'td' styles to properly display element border radius */ background-color: var(--table-row-odd); } .phraseGemContainer tr:nth-child(even) td { background-color: var(--table-row-even); } /* table outline / outer border with corner radius */ .phraseGemContainer tr:first-child td:first-child { border-top-left-radius: var(--border-rad); border-top: var(--border-pxl) var(--border-dark-accent); border-left: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer tr:first-child td:last-child { border-top-right-radius: var(--border-rad); border-top: var(--border-pxl) var(--border-dark-accent); border-right: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer tr:last-child td:last-child { border-bottom-right-radius: var(--border-rad); border-bottom: var(--border-pxl) var(--border-dark-accent); border-right: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer tr:last-child td:first-child { border-bottom-left-radius: var(--border-rad); border-bottom: var(--border-pxl) var(--border-dark-accent); border-left: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer tr:first-child td { border-top: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer tr:last-child td { border-bottom: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer td:first-child { border-left: var(--border-pxl) var(--border-dark-accent); } .phraseGemContainer td:last-child { border-right: var(--border-pxl) var(--border-dark-accent); } .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 */ filter: blur(0.15em); } .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: var(--border-pxl) 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: var(--border-pxl) var(--border-dark-accent); /*margin-top: 1em;*/ /*margin-bottom: 0.5em;*/ } .hideBorder { border: none !important; } @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; } @media (max-width: 911px) { /* mobile */ #BreakSumLong { padding: 0.5em 1em 0.5em 0.5em; } } .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: var(--border-pxl) 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); */ font-family: "Roboto 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; } } .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: 8px; font-family: var(--font-family); border: var(--border-pxl) var(--border-accent); background-color: var(--btn-bg-accent); font-size: 100%; outline: none; height: 29px; min-width: 29px; max-width: 29px; } #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: var(--border-pxl) var(--border-accent); font-family: var(--font-family); margin-left: 8px; font-size: 125%; } #phraseBox { background-color: var(--input-bg-accent); color: var(--font-white-1); font-weight: 500; border: var(--border-pxl) var(--border-accent); font-family: var(--font-family); font-size: 125%; } @media (max-width: 911px) { /* mobile */ #phraseBox { width: 287px; } #highlightBox { width: 100px; } .filterPhraseBox { width: 250px !important; } .filterHighlightBox { width: 63px !important; } } @media (min-width: 911px) { /* desktop */ #phraseBox { width: 620px; } #highlightBox { width: 200px; } .filterPhraseBox { width: 583px !important; } .filterHighlightBox { width: 162px !important; } } #phraseBox:focus, #highlightBox:focus { outline: none !important; border: var(--border-pxl) var(--focus-outline); } #phraseBox:disabled, #highlightBox:disabled { outline: none !important; border: var(--border-pxl) var(--border-dark-accent); } /* History Table */ /* ########################################## */ .HistoryTable tr, .HistoryTable td, #QueryTable tr, #QueryTable td { border-bottom: var(--border-pxl) var(--border-dark-accent); border-left: var(--border-pxl) var(--border-dark-accent); } .HistoryTable, #QueryTable { text-align: center; border-spacing: 0px; /* border-top: var(--border-pxl) var(--border-dark-accent); */ /* border-right: var(--border-pxl) var(--border-dark-accent); */ margin: 0.5em 1em 2.4em 1em; } @media (max-width: 911px) { /* mobile */ .HistoryTable { margin: 0em 0.25em 0em 0em; } } /* Firefox needs only 'td' styles for clean rounded table corners, but then screenshots have transparent borders */ /* Firefox can't combine 'tr' and 'td' styles to properly display element border radius */ /* Use Chrome - 'tr' (not 'td') background-color is needed for proper html2canvas screenshots */ .HistoryTable tr:nth-child(odd), #QueryTable tr:nth-child(odd) { background-color: var(--table-row-odd); } .HistoryTable tr:nth-child(even), #QueryTable tr:nth-child(even) { background-color: var(--table-row-even); } .cH { /* cipher header bar, history table */ background: -webkit-linear-gradient(0deg, var(--hist-header-gradient), var(--table-row-odd)); background: -moz-linear-gradient(0deg, var(--hist-header-gradient), var(--table-row-odd)); background: -o-linear-gradient(0deg, var(--hist-header-gradient), var(--table-row-odd)); background: linear-gradient(0deg, var(--hist-header-gradient), var(--table-row-odd)); } /* table outline / outer border with corner radius */ .HistoryTable tr:first-child td:first-child { border-top-left-radius: var(--border-rad); border-top: var(--border-pxl) var(--border-dark-accent); border-left: var(--border-pxl) var(--border-dark-accent); } .HistoryTable tr:first-child td:last-child { border-top-right-radius: var(--border-rad); border-top: var(--border-pxl) var(--border-dark-accent); border-right: var(--border-pxl) var(--border-dark-accent); } .HistoryTable tr:last-child td:last-child { border-bottom-right-radius: var(--border-rad); border-bottom: var(--border-pxl) var(--border-dark-accent); border-right: var(--border-pxl) var(--border-dark-accent); } .HistoryTable tr:last-child td:first-child { border-bottom-left-radius: var(--border-rad); border-bottom: var(--border-pxl) var(--border-dark-accent); border-left: var(--border-pxl) var(--border-dark-accent); } .HistoryTable tr:first-child td { border-top: var(--border-pxl) var(--border-dark-accent); } .HistoryTable tr:last-child td { border-bottom: var(--border-pxl) var(--border-dark-accent); } .HistoryTable td:first-child { border-left: var(--border-pxl) var(--border-dark-accent); } .HistoryTable td:last-child { border-right: var(--border-pxl) var(--border-dark-accent); } #QueryTable { table-layout: fixed; width: 100%; word-break: break-word; margin: auto; float: right; border-top: none; border-right: none; } #QueryTable td:first-child { border-left: unset; } #QueryTable tr:last-child td { border-bottom: unset; } #QueryTable tr:last-child td:last-child { border-bottom-right-radius: var(--border-rad); } #QueryTable tr:last-child td:first-child { border-bottom-left-radius: var(--border-rad); } .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; height: 32px; word-break: break-word; /* affects table performance */ } .hCV, .hCVQ,.hCVW { /* 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; } .hCVW { /* vertical query table header, wheel ciphers */ width: auto; } .hCV2, .hCVQ2 { /* vertical cipher label for history/query table */ transform: rotate(-90deg); transform-origin: left; white-space: nowrap; display: inline-block; width: 20px; margin-left: 1.6em; } @media (max-width: 911px) { /* mobile */ .hCV { height: 40px !important; } .hCV2 { display: none; /* no vertical cipher labels */ } td.hCV { min-width: 40px; font-size: 110%; vertical-align: middle; } } .hP, .hPQ { /* history phrase */ text-align: right; padding: 0em 0.5em 0em 0.6em; font-size: 110%; font-weight: 500; color: var(--font-white-3); } @media (min-width: 911px) { /* desktop */ .hP { /* single line history phrase */ white-space: nowrap; /* affects table performance */ } } .hPQ { /* history phrase - query table*/ text-align: center; box-sizing: border-box; height: 64px; } @media (max-width: 911px) { /* mobile */ .hPQ { /* history phrase - query table*/ font-size: 100%; } } .mPQ { /* query table - top left cell */ font-weight: 500; font-size: 125%; height: 150px; } .mP { /* history table - top left cell */ color: var(--font-white-3); font-size: 110%; font-weight: 600; width: fit-content; padding: 0em 1em; } .gV, .gW, .gVQ, .gA { /* gematria value in history/query table, .gA - arrow for numerology display */ font-size: 125%; font-weight: 500; cursor: pointer; } .gV, .gW { padding: 0em 0.5em; } .gW { cursor: default; } .nW { /* nowrap for Numerology Mode */ white-space: nowrap; } .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.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 100% { opacity: 0.0; } } .highlightValueBlink { animation: blink 500ms linear infinite; z-index: 99; } .selectedPhrase { /* background-color: var(--selected-phr-accent) */ box-shadow: inset 0 0 0 1000px var(--selected-phr-accent); /* transparent color overlay */ } /* Options Menu */ /* ########################################## */ #ciphHeaderPanel { background-color: var(--btn-bg-accent); border-radius: var(--border-rad); border: var(--border-pxl) var(--btn-border-accent); } .cipherCatDetails { width: 100%; } .ciphInfoLabel { display: block; position: relative; cursor: pointer; font-size: 100%; font-weight: 500; } .ciphSelection { min-width: 200px; max-width: 200px; } .intBtn { /* Big Buttons */ display: inline-block; color: var(--font-white-1); color: var(--font-white-2); padding: 0.4em 1em; border: var(--border-pxl) var(--btn-border-accent); width: 100%; font-size: 100%; font-weight: 500; font-family: var(--font-family); outline: none; background-color: var(--btn-bg-accent); } .intBtn2, .ciphEditBtn { /* Cipher Categories */ display: inline-block; color: var(--font-white-1); color: var(--font-white-2); padding: 0.3em 1em; margin: 0.1em 0em; border: var(--border-pxl) var(--btn-border-accent); width: 100%; font-size: 100%; font-weight: 500; font-family: var(--font-family); outline: none; background-color: var(--btn-bg-accent); } .ciphEditBtn { width: auto; margin: 0.75em 0.5em 0em 0.5em; } .intBtn3, .intBtnResetDate, #queryDBbtn, #enterPhraseBtn { display: inline-block; color: var(--font-white-1); color: var(--font-white-2); padding: 0.2em 1em; margin: 0em 0.1em 0.5em 0.1em; border: var(--border-pxl) var(--border-accent); width: 90px; font-size: 100%; font-weight: 500; font-family: var(--font-family); outline: none; background-color: var(--btn-bg-accent); } .intBtn3 { /* Empty, Default, All */ border: var(--border-pxl) var(--btn-border-accent2); margin: 0.5em 0.25em; } .intBtnRepo { box-sizing: border-box; display: inline-block; text-align: left; color: var(--font-white-1); color: var(--font-white-2); padding: 0.4em 0.75em 0.4em 3.9em; border: var(--border-pxl) var(--btn-border-accent); width: 100%; font-size: 100%; font-weight: 500; font-family: var(--font-family); outline: none; text-decoration: none; background-color: var(--btn-bg-accent); } @media (max-width: 911px) { /* mobile */ #queryDBbtn { min-width: 29px !important; max-width: 29px !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); 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.75em 0.3em 0.75em; } #queryDBbtn { padding: 0em; margin: 0em 8px 0em 0em; width: 29px; } #enterPhraseBtn { background-color: var(--input-bg-accent); padding: 0em; margin: 0em 0em 0em 8px; min-width: 29px; max-width: 29px; color: var(--border-accent); font-weight: 600; } #calcNotification { position: absolute; left:0; right: 0; margin: auto; width: fit-content; max-width: 240px; bottom: 40px; background: var(--menu-bg-accent); border: var(--border-pxl) var(--border-dark-accent); padding: 1em 1.5em; font-size: 125%; font-weight: 500; text-align: center; z-index: 1000; } .openCiphCat, .intBtn:hover, .intBtn2:hover, .ciphEditBtn:hover, .intBtn3:hover, .intBtnResetDate:hover, #queryDBbtn:hover, #enterPhraseBtn:hover, .queryPageBtn:hover { background-color: var(--btn-hover-accent); } .intBtn:active, .intBtn2:active, .ciphEditBtn:active, .intBtn3:active, .intBtnResetDate:active, #queryDBbtn:active, #enterPhraseBtn:active, .queryPageBtn:active { background-color: var(--btn-active-accent) !important; } .intBtnRepo:link { color: var(--font-white-2); border-bottom: var(--border-pxl) var(--btn-border-accent); } .intBtnRepo:visited { color: var(--font-white-2); border-bottom: var(--border-pxl) var(--btn-border-accent); } .intBtnRepo:hover { color: var(--font-white-2); background-color: var(--btn-hover-accent); border-bottom: var(--border-pxl) var(--btn-border-accent); } .intBtnRepo:active{ color: var(--font-white-2); background-color: var(--btn-active-accent); border-bottom: var(--border-pxl) var(--btn-border-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); font-size: 100%; font-weight: 500; outline: none; } .optionElementTable { border-spacing: 0; text-align: center; margin: 1em; border: var(--border-pxl) 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: var(--border-pxl) var(--border-accent); padding: 0.3em; } .enterAsWordsLimit { border: var(--border-pxl) var(--btn-border-accent); text-align: right; color: var(--font-white-2); font-weight: 500; width: 100%; box-sizing: border-box; border-top: none; padding-bottom: 0.1em; } .dbOptionsBoxTop, .dbOptionsBoxBtm, .borderOptionsBox { margin: auto; border: var(--border-pxl) var(--btn-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; padding-bottom: 0.1em; } .dbOptionsBoxBtm { border-top: none; } .optionTableLabel { font-size: 80%; } #phrLimitBox, #dbPageItemsBox, #dbScrollItemsBox, #iScaleBox, #confBorderBox { width: 50px; border: none; color: var(--font-white-2); font-family: var(--font-family); 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; max-width: fit-content; } #menuCiphCatDetailsArea { margin: 0em 0em 0em 1.25em; } .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: var(--border-pxl) var(--border-dark-accent); } @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 { color: var(--font-white-2); background-color: black; border: var(--border-pxl) var(--border-dark-accent); font-family: var(--font-family); font-size: 100%; position: absolute; top: 15%; height: 77%; left: 0; right: 0; width: 70%; margin: auto; overflow: none; z-index: 1000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 911px) { /* mobile */ .printImageContainer { position: absolute; right: 0; left: 0; top: 0; bottom: 0; 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: var(--border-pxl) var(--border-dark-accent); outline: none; margin: 1.5em 0.3em 1.5em 0.3em; } #imgData { padding: 1.5em 2em; } .prevBtnArea { display: inline-block; } .imgDataArea { overflow: auto; 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; } .numSpecial { /* number has special properties */ text-decoration: underline; } .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); border: var(--border-pxl) var(--border-dark-accent); } @media (max-width: 911px) { /* mobile */ .numPropTooltip { top: 0 !important; left: 0 !important; bottom: 0; right: 0; margin: auto; height: fit-content; } } .contextMenuTooltip { min-width: 100px; margin: 1em; padding: 1em; background-color: var(--menu-bg-accent); position: absolute; z-index: 101; font-family: var(--font-family); border: var(--border-pxl) 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); } .numTicXeno { /*font-size: 85%;*/ font-size: 100%; font-family: var(--font-family); 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: var(--border-pxl) var(--border-dark-accent); } .custCipherMainTable { margin: 0.5em 0em 0.5em 0em; } .custCipherTable { } #custCipherNameInput, #custCipherCatInput { background: var(--btn-bg-accent); font-size: 125%; color: var(--font-white-2); font-family: var(--font-family); font-weight: 500; text-align: center; width: 100%; box-sizing: border-box; border: var(--border-pxl) var(--border-dark-accent); } #custCipherAlphabet, #custCipherGlobVals, #custCipherDescInput { background: var(--btn-bg-accent); font-size: 125%; color: var(--font-white-2); font-family: var(--font-family); font-weight: 500; width: 500px; text-align: center; resize: none; width: 100%; box-sizing: border-box; border: var(--border-pxl) var(--border-dark-accent); } #custCipherGlobVals { font-size: 100%; height: 40px; } #custCipherAlphabet:focus, #custCipherGlobVals:focus, #custCipherNameInput:focus, #custCipherCatInput:focus, #custCipherDescInput:focus { outline: none; border: var(--border-pxl) var(--border-dark-accent); } .custCharInd:focus, .custCharIndValue:focus { outline: none; border: none; } #diacrChkbox, #caseSensChkbox, #multiCharChkbox, #wheelCiphChkbox { display: inline-flex; padding: 0em 0.5em 0.25em 0.5em; } .custCharIndTable { width: 40px; border-spacing: 0px; border: none; } .custCharIndLabel { text-align: center; background: var(--btn-bg-accent); height: 38px; box-sizing: border-box; border: var(--border-pxl) var(--border-dark-accent); } .custCharInd { width: 40px; text-align: center; font-weight: 500; font-size: 150%; font-family: var(--font-family); 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); border: none; background: transparent; color: var(--font-white-2); } @media (max-width: 911px) { /* mobile */ .custCharInd { width: 30px !important; padding: unset; } .custCharIndValue { width: 38px !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: var(--border-pxl) 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); } .dateCalcBg { min-width: 370px; margin: 0em 0em 0em 0.9em; background: var(--btn-bg-accent); display: flex; align-items: center; justify-content: center; border: var(--border-pxl) var(--border-dark-accent); box-sizing: border-box; } @media (max-width: 911px) { /* mobile */ .dateCalcBg { margin: 1em 0em 0em 0em !important; height: 330px; } } .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); 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: 55px; font-size: 150%; color: var(--font-white-1); border: var(--border-pxl) var(--border-accent); box-sizing: border-box; font-family: var(--font-family); font-weight: 500; line-height: 1.2em; background-color: var(--btn-bg-accent); } .offsetDateInput { font-size: 80%; font-weight: 600; color: var(--focus-outline); padding: 0.2em 0em; } .dateInputYear { width: 100px; } .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; } .dateInput:focus, .dateInputYear:focus, .offsetDateInput:focus { outline: none !important; border: var(--border-pxl) var(--focus-outline); } /* Query Table */ /* ########################################## */ #queryArea { width: 30%; position: absolute; top: 133px; left: 100px; overflow: auto; max-height: 92%; border: var(--border-pxl) var(--border-accent); border-radius: var(--border-rad); resize: horizontal; } @media (max-width: 911px) { /* mobile */ #queryArea { left: 25px !important; } } .queryPageBtnL, .queryPageBtnR { font-size: 100%; color: var(--font-white-2); background-color: var(--btn-bg-accent); border: var(--border-pxl) var(--border-dark-accent); padding: 0em 0.35em; width: 32px; } .queryPageBtnL { border-top-right-radius: unset; border-bottom-right-radius: unset; } .queryPageBtnR { border-top-left-radius: unset; border-bottom-left-radius: unset; } #queryMinBtn { position: absolute; width: 32px; left: calc(100% - 32px); height: 32px; text-align: center; box-sizing: border-box; color: var(--border-accent); background: var(--input-bg-accent); /* border-right: var(--border-pxl) var(--border-accent); */ /* border-top: var(--border-pxl) var(--border-accent); */ border-bottom: var(--border-pxl) var(--border-accent); border-top-right-radius: var(--border-rad); cursor: pointer; user-select: none; line-height: 30px; } #queryCloseBtn { position: absolute; width: 32px; left: 0px; height: 32px; text-align: center; box-sizing: border-box; color: var(--border-accent); background: var(--input-bg-accent); /* border-left: var(--border-pxl) var(--border-accent); */ /* border-top: var(--border-pxl) var(--border-accent); */ border-bottom: var(--border-pxl) var(--border-accent); border-top-left-radius: var(--border-rad); cursor: pointer; user-select: none; line-height: 30px; } #queryMinBtn:hover, #queryCloseBtn:hover { background-color: var(--btn-bg-accent); } #queryMinBtn:active, #queryCloseBtn:active { background-color: var(--btn-hover-accent); } .queryTextResult { padding: 1em; line-height: 2em; } #queryScrollbar { border-radius: unset; padding: unset; border: var(--border-pxl) var(--border-accent); border-top: unset; } .qSlider { -webkit-appearance: none; width: calc(100% - 64px); height: 32px; background: var(--input-bg-accent); outline: none; margin: 0; margin-left: 32px; border-bottom: var(--border-pxl) 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: 26px; margin: 2px; background: var(--border-accent); cursor: pointer; border-radius: var(--border-rad); } .qSlider::-moz-range-thumb { width: 12px; height: 26px; margin: 2px; background: var(--border-accent); cursor: pointer; border-radius: var(--border-rad); } #queryPosInput { width: 95px; height: 32px; font-size: 100%; outline: none; color: var(--font-white-2); caret-color: transparent !important; background-color: var(--body-bg-accent); border: var(--border-pxl) var(--border-dark-accent); border-left: none; border-right: none; border-radius: unset; } #queryPosInput:focus { border: var(--border-pxl) var(--focus-outline); } #querySearchInput { text-align: center; width: 100%; font-family: var(--font-family); 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: none; border-bottom: var(--border-pxl) var(--border-dark-accent); outline: none; padding: 0.3em 0em; border-radius: unset; } .minimizeQuery { resize: none !important; transition: 0.2s; transform: translate(calc(-87% - 100px), 0); } @media (max-width: 911px) { /* mobile */ .minimizeQuery { transform: translate(calc(-100% + 0px), 0) !important; } } .minimizeLabel { position: absolute; margin: 0.7em 1em 0.15em 0.15em; right: 32px; 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, .discPanel { background-color: var(--menu-bg-accent2); color: var(--font-white-2); font-family: var(--font-family); font-size: 100%; padding: 1em 2em 1em 2em; position: absolute; top: 9%; height: 79%; right: 0; left: 0; max-width: 600px; margin: auto; overflow: auto; z-index: 1000; border: var(--border-pxl) var(--border-dark-accent); } .discPanel { max-width: 450px; max-height: 450px; box-sizing: border-box; right: 0; left: 0; top: 0; bottom: 0; margin: auto; } @media (max-width: 911px) { /* mobile */ .quickGuide, .discPanel { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; height: 80% !important; } .quickGuide { width: 80% !important; } } .quickGuide ul{ padding-inline-start: 1.25em; } .qgBold, .qgBold2 { font-size: 100%; font-weight: 500; color: var(--font-white-1); } .qgBold2 { font-size: 150%; } .qgBold3 { font-size: 100%; font-weight: 500; color: var(--font-white-2); } .qgMedium { font-size: 125%; } .qgNote { font-style: italic; font-size: 85%; color: var(--separator-accent); } .qgVer { font-size: 85%; font-weight: 500; color: var(--separator-accent); } .qgLink{ font-size: 100%; color: var(--font-white-1); } .noScroll { overflow: hidden; } .qgBold, .qgBold2 { font-size: 100%; font-weight: 500; color: var(--font-white-1); } .qgBold2 { font-size: 150%; } /* Cipher Info */ /* ########################################## */ .ciphInfoPanel { 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; height: fit-content; max-height: 80%; min-width: 480px; max-width: 80%; width: fit-content; overflow: auto; z-index: 1000; border: var(--border-pxl) var(--border-dark-accent); position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; box-sizing: border-box; } @media (max-width: 911px) { /* mobile */ .ciphInfoPanel { min-width: unset; max-width: unset; width: 450px !important; box-sizing: border-box; } } .ciphInfoTextArea { margin: 2em auto 2em auto; text-align: left; max-width: 500px; } #imgDataDesc { margin: 1.5em 0em 0em 0em; border: var(--border-pxl) var(--separator-accent); box-sizing: border-box; } @media (max-width: 911px) { /* mobile */ #imgDataDesc { max-width: 100%; } } /* 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; right: 0; height: 16px; width: 16px; background-color: var(--btn-bg-accent); border: var(--border-pxl) var(--btn-border-accent); border-radius: var(--border-rad); } .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); border-radius: var(--border-rad); }