From 0a5550089215056dcab021954ef30b4a93b9f736 Mon Sep 17 00:00:00 2001 From: Ryan Prather Date: Wed, 13 May 2026 17:19:53 -0400 Subject: [PATCH] add: default stylesheet --- assets/css/styles.css | 620 +++++++++++++++++++++++++++++++++ assets/css/styles.css.map | 1 + assets/css/styles.scss | 699 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 1320 insertions(+) create mode 100644 assets/css/styles.css create mode 100644 assets/css/styles.css.map create mode 100644 assets/css/styles.scss diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..b45d2b4 --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,620 @@ +@import url(fontawesome-all.min.css); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700"); +/* Global style settings */ +@media screen and (max-width: 1050px) { + #sidebar { + display: none; + } + .note-header, #note-list { + display: none; + } + .container { + display: grid; + height: 100vh; + width: 100vw; + grid-template-columns: 1fr; + grid-template-rows: 50px 50% 1fr; + gap: 5px 0; + grid-auto-flow: column; + grid-template-areas: "mobile-note-header" "notes" "ref-text"; + } + .container .ref-text { + height: 99%; + width: 98vw; + margin-left: 1vw; + } + .ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container { + display: none; + } + .mobile-note-header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + .mobile-note-header h2 { + margin: 0 10px; + } + .mobile-note-header button { + margin: 0 10px; + } + .notes { + width: 98vw; + margin-left: 1vw; + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + grid-template-rows: 1fr 50px; + gap: 2px 0; + grid-template-areas: "note-text" "fields-container"; + grid-area: notes; + } + .notes .fields-container { + justify-content: space-between; + flex-wrap: wrap; + width: 99.5%; + } + .notes .fields-container input[type=text], .notes .fields-container select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--border); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + min-width: 50px; + max-width: 200px; + } + .notes .note-text { + height: 100%; + width: 100%; + } + .notes .note-text textarea { + height: 100%; + width: 100%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: "Roboto Sans"; + padding: 0 5px; + } +} +@media screen and (min-width: 1051px) and (max-width: 1079px) { + #sidebar { + display: none; + } + .mobile-note-header, #note-list { + display: none; + } + .container { + display: grid; + height: 100vh; + grid-template-columns: 60px 35% 1fr; + grid-template-rows: 60px 1.8fr; + gap: 5px 5px; + grid-auto-flow: row; + grid-template-areas: "ref-btn-header ref-header note-header" "ref-btn ref-text notes"; + } + .container .fields-container { + display: none; + } + .bottom-row { + height: calc(100vh - 75px); + } + .notes { + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + grid-template-rows: 75px 1fr; + gap: 2px 0px; + grid-template-areas: "fields-container" "note-text"; + grid-area: notes; + } + .notes .fields-container { + justify-content: space-evenly; + flex-wrap: wrap; + width: 99.5%; + } + .notes .fields-container input[type=text], .notes .fields-container select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--dark); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + min-width: 50px; + max-width: 200px; + } + .notes .note-text { + height: 100%; + width: 98.5%; + } + .notes .note-text textarea { + height: 100%; + width: 100%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: "Roboto Sans"; + padding: 0 5px; + } + .note-header, .ref-header { + display: flex; + justify-content: space-between; + align-items: center; + } + .note-header h2, .ref-header h2 { + margin: 0; + } +} +@media screen and (min-width: 1080px) { + .mobile-note-header, #note-list { + display: none; + } + .container { + display: grid; + height: 100vh; + grid-template-columns: 60px 35% 0.995fr; + grid-template-rows: 60px 1.8fr; + gap: 5px 5px; + grid-auto-flow: row; + grid-template-areas: "ref-btn-header ref-header note-header" "ref-btn ref-text notes"; + } + .container .fields-container { + display: none; + } + .bottom-row { + height: calc(100vh - 75px); + } + .notes { + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + grid-template-rows: 75px 1fr; + gap: 2px 0px; + grid-template-areas: "fields-container" "note-text"; + grid-area: notes; + } + .notes .fields-container { + justify-content: space-evenly; + flex-wrap: wrap; + width: 99.5%; + } + .notes .fields-container input[type=text], .notes .fields-container select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--dark); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 2; + min-width: 50px; + max-width: 200px; + } + .notes .note-text { + height: 100%; + width: 98.5%; + } + .notes .note-text textarea { + height: 99%; + width: 100%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: "Roboto Sans"; + padding: 0 5px; + } + .note-header, .ref-header { + display: flex; + justify-content: space-between; + align-items: center; + } + .note-header h2, .ref-header h2 { + margin: 0; + } + .note-header select, .ref-header select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--dark); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 2; + min-width: 50px; + max-width: 200px; + margin-right: 3px; + } +} +#previewBtn.active, +#show-hide-btn.active, +.ref-list button.active, +#open-ref.active, +#mobile-open-ref.active { + background-color: var(--primary) !important; + color: var(--light) !important; +} + +input:focus { + border-color: var(--primary); +} + +#save-check { + display: none; +} + +#ui-datepicker-div { + z-index: 11 !important; +} + +body { + font-family: "Roboto Slab", "Open Sans", sans-serif !important; + background-color: var(--background); + color: var(--text); + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { + color: var(--text); + font-family: "Roboto Slab", serif; + font-weight: 700; + line-height: 1.5; + margin: 0 0 1.5em 0; +} + +h2 { + font-size: 1.5em; + display: inline-block; +} + +.tab button { + display: flex; + justify-content: center; + align-items: center; + height: 80px; + width: 60px; + text-align: center; + font-size: 14px; + margin-bottom: 3px; +} + +button, +.button { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + background-color: transparent; + border-radius: 0.5em; + border: 0; + box-shadow: inset 0 0 0 2px var(--primary); + color: var(--primary) !important; + cursor: pointer; + display: inline-block; + font-family: "Roboto Slab", serif; + font-size: 0.8em; + font-weight: 700; + height: 3em; + letter-spacing: 0.075em; + line-height: 3em; + padding: 0 2em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; +} + +button.button i { + font-size: 1.5em; +} + +.input-warning { + border: solid 2px var(--warning) !important; +} + +.input-error { + border: solid 2px var(--error) !important; +} + +.ref-btn-header { + grid-area: ref-btn-header; +} + +.ref-btn { + grid-area: ref-btn; +} +.ref-btn .ref-list { + display: flex; + flex-direction: column; + align-items: start; + height: 100vh; + padding: 1px; + margin: 1px; + list-style: none; +} + +.ref-text { + grid-area: ref-text; + display: block; + overflow-y: scroll; + border: var(--border) solid 1px; + border-radius: 10px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + z-index: 1; +} +.ref-text h2 { + display: block; +} + +#refQuery { + position: fixed; + background-color: var(--background); + z-index: 999; + width: 400px; + height: 200px; + border: solid 2px var(--border); + border-radius: 10px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + margin: 10px 50px; + padding: 5px; +} + +#chapter-range, #verse-range { + color: var(--text); +} + +.note-header { + grid-area: note-header; +} + +.notes { + z-index: 10; +} + +#notePreview { + display: none; + z-index: 9; +} + +.ref-header { + grid-area: ref-header; +} + +/** drowndown button */ +.dropdown { + position: relative; +} + +.dropdown select { + background-color: var(--background); + color: var(--text); +} +.dropdown select option:hover { + background-color: var(--primary); + color: var(--text); +} + +/* slider switch */ +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 42px; + height: 24px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: 0.5s; +} + +.slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + transition: 0.5s; +} + +input:checked + .slider { + background-color: var(--primary); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--primary); +} + +input:checked + .slider:before { + transform: translateX(18px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 24px; +} + +.slider.round:before { + border-radius: 50%; +} + +#refQuery, #passage-popup, #modal-backdrop, #modal-container { + display: none; +} + +/** + * Sidebar + */ +#sidebar { + transition: margin-left 0.5s ease, box-shadow 0.5s ease; + background-color: var(--background); + font-size: 0.9em; + position: relative; + width: 25em; + border-right: solid 2px var(--border); + flex-grow: 0; + flex-shrink: 0; +} +#sidebar .toggle { + text-decoration: none; + transition: left 0.5s ease; + border: 0; + display: block; + height: 4.5em; + left: 25em; + line-height: 4.5em; + outline: 0; + overflow: hidden; + position: absolute; + text-align: center; + text-indent: -15em; + white-space: nowrap; + top: 0; + width: 6em; + z-index: 10000; +} +#sidebar > .inner { + position: relative; + width: 25em; +} +#sidebar > .inner > * { + border-bottom: solid 2px var(--medium); + margin: 0 0 3.5em 0; +} + +.inner { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + align-content: flex-start; + max-width: 1060px; + margin: 0 auto; +} +.inner > .alt { + background-color: var(--light); + border-bottom: 0; + margin: -2.22em -2.33em 1em -2.22em; + padding: 2.22em; + width: calc(100% - 4.44em); +} + +header.major { + border-bottom: solid 3px var(--border); + display: inline-block; + margin: 0 0 10px 0; + padding: 0 0.75em 0.5em 0; + width: 250px; +} + +#menu ul { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + color: var(--dark); + font-family: "Roboto Slab", serif; + font-weight: 400; + letter-spacing: 0.075em; + list-style: none; + padding: 0; + text-transform: uppercase; +} + +#menu ul li { + border-top: solid 1px var(--medium); + margin: 0.5em 0 0 0; + padding: 0.5em 0 0 0; +} + +#menu ul li:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; +} + +#menu ul a { + border-bottom: 0; + color: inherit; + cursor: pointer; + display: block; + font-size: 0.9em; + padding: 0.625em 0; +} + +#sidebar .toggle::before { + content: "\f0c9"; + font-size: 2rem; + height: inherit; + left: 0; + line-height: inherit; + position: absolute; + text-indent: 0; + top: 0; + width: inherit; + z-index: 99; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + text-transform: none !important; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/assets/css/styles.css.map b/assets/css/styles.css.map new file mode 100644 index 0000000..f52debc --- /dev/null +++ b/assets/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/assets/css/styles.scss b/assets/css/styles.scss new file mode 100644 index 0000000..4316d02 --- /dev/null +++ b/assets/css/styles.scss @@ -0,0 +1,699 @@ +// Set up the global font styles +@import url(fontawesome-all.min.css); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700"); +/* Global style settings */ +@media screen and (max-width: 1050px) { +#sidebar { + display: none; +} + +.note-header, #note-list { + display: none; +} + +.container { + display: grid; + height: 100vh; + width: 100vw; + grid-template-columns: 1fr; + grid-template-rows: 50px 50% 1fr; + gap: 5px 0; + grid-auto-flow: column; + grid-template-areas: + "mobile-note-header" + "notes" + "ref-text"; + + .ref-text { + height: 99%; + width: 98vw; + margin-left: 1vw; + } +} + +.ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container { + display: none; +} + +.mobile-note-header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + h2 { + margin: 0 10px; + } + + button { + margin: 0 10px; + } +} + +.notes { + width: 98vw; + margin-left: 1vw; + + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + grid-template-rows: 1fr 50px; + gap: 2px 0; + grid-template-areas: "note-text" "fields-container"; + + grid-area: notes; + + .fields-container { + justify-content: space-between; + flex-wrap: wrap; + width: 99.5%; + + input[type="text"], select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--border); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + min-width: 50px; + max-width: 200px; + } + } + + .note-text { + height: 100%; + width: 100%; + + textarea { + height: 100%; + width: 100%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: 'Roboto Sans'; + padding: 0 5px; + } + } +} + +} + +@media screen and (min-width: 1051px) and (max-width: 1079px) { +#sidebar { + display: none; +} + +.mobile-note-header, #note-list { + display: none; +} + +.container { + display: grid; + height: 100vh; + grid-template-columns: 60px 35% 1fr; + grid-template-rows: 60px 1.8fr; + gap: 5px 5px; + grid-auto-flow: row; + grid-template-areas: + "ref-btn-header ref-header note-header" + "ref-btn ref-text notes"; + + .fields-container { + display: none; + } +} + +.bottom-row { + height: calc(100vh - 75px); +} + +.notes { + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + grid-template-rows: 75px 1fr; + gap: 2px 0px; + grid-template-areas: "fields-container" "note-text"; + + grid-area: notes; + + .fields-container { + justify-content: space-evenly; + flex-wrap: wrap; + width: 99.5%; + // height: 75px; + + input[type="text"], select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--dark); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + min-width: 50px; + max-width: 200px; + } + } + + .note-text { + height: 100%; + width: 98.5%; + + textarea { + height: 100%; + width: 100%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: 'Roboto Sans'; + padding: 0 5px; + } + } +} + +.note-header, .ref-header { + display: flex; + justify-content: space-between; + align-items: center; + + h2 { + margin: 0; + } +} + +} + +@media screen and (min-width: 1080px) { +#sidebar { + //display: none; +} + +.mobile-note-header, #note-list { + display: none; +} + +.container { + display: grid; + height: 100vh; + grid-template-columns: 60px 35% 0.995fr; + grid-template-rows: 60px 1.8fr; + gap: 5px 5px; + grid-auto-flow: row; + grid-template-areas: + "ref-btn-header ref-header note-header" + "ref-btn ref-text notes"; + + .fields-container { + display: none; + } +} + +.bottom-row { + height: calc(100vh - 75px); +} + +.notes { + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + grid-template-rows: 75px 1fr; + gap: 2px 0px; + grid-template-areas: "fields-container" "note-text"; + + grid-area: notes; + + .fields-container { + justify-content: space-evenly; + flex-wrap: wrap; + width: 99.5%; + // height: 75px; + + input[type="text"], select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--dark); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 2; + min-width: 50px; + max-width: 200px; + } + } + + .note-text { + height: 100%; + width: 98.5%; + + textarea { + height: 99%; + width: 100%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: 'Roboto Sans'; + padding: 0 5px; + } + } +} + +.note-header, .ref-header { + display: flex; + justify-content: space-between; + align-items: center; + + h2 { + margin: 0; + } + + select { + background-color: var(--background); + color: var(--text); + height: 1.5em; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 0.375em; + border: solid 1px var(--dark); + outline: 0; + padding: 0 1em; + text-decoration: none; + font-size: 14pt; + font-weight: 400; + line-height: 1.65; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 2; + min-width: 50px; + max-width: 200px; + margin-right: 3px; + } +} + +} + +#previewBtn.active, +#show-hide-btn.active, +.ref-list button.active, +#open-ref.active, +#mobile-open-ref.active { + background-color: var(--primary) !important; + color: var(--light) !important; +} + +input:focus { + border-color: var(--primary); +} + +#save-check { + display: none; +} + +#ui-datepicker-div { + z-index: 11 !important; +} + +body { + font-family: 'Roboto Slab', 'Open Sans', sans-serif !important; + background-color: var(--background); + color: var(--text); + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { + color: var(--text); + font-family: 'Roboto Slab', serif; + font-weight: 700; + line-height: 1.5; + margin: 0 0 1.5em 0; +} +h2 { + font-size: 1.5em; + display: inline-block; +} + +.tab button { + display: flex; + justify-content: center; + align-items: center; + height: 80px; + width: 60px; + text-align: center; + font-size: 14px; + margin-bottom: 3px; +} + +button, +.button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + background-color: transparent; + border-radius: 0.5em; + border: 0; + box-shadow: inset 0 0 0 2px var(--primary); + color: var(--primary) !important; + cursor: pointer; + display: inline-block; + font-family: "Roboto Slab", serif; + font-size: 0.8em; + font-weight: 700; + height: 3em; + letter-spacing: 0.075em; + line-height: 3em; + padding: 0 2em; + // min-width: 30px; + // max-width: 60px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; +} + +button.button i { + font-size: 1.5em; +} + +.input-warning { + border: solid 2px var(--warning) !important; +} + +.input-error { + border: solid 2px var(--error) !important; +} + +.ref-btn-header { grid-area: ref-btn-header; } + +.ref-btn { + grid-area: ref-btn; + + .ref-list { + display: flex; + flex-direction: column; + align-items: start; + height: 100vh; + padding: 1px; + margin: 1px; + list-style: none; + } +} + +.ref-text { + grid-area: ref-text; + + display: block; + overflow-y: scroll; + // width: 100%; + border: var(--border) solid 1px; + border-radius: 10px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + z-index: 1; + // position: relative; + + h2 { + display: block; + } +} + +#refQuery { + position: fixed; + background-color: var(--background); + z-index: 999; + width: 400px; + height: 200px; + border: solid 2px var(--border); + border-radius: 10px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + margin: 10px 50px; + padding: 5px; +} + +#chapter-range, #verse-range { + color: var(--text); +} + +.note-header { + grid-area: note-header; +} + +.notes { + z-index: 10; +} + +#notePreview { + display: none; + z-index: 9; +} + +.ref-header { + grid-area: ref-header; +} + +/** drowndown button */ +.dropdown { + position: relative; + // height: 20px; +} + +.dropdown select { + background-color: var(--background); + color: var(--text); + + option:hover { + background-color: var(--primary); + color: var(--text); + } +} + +/* slider switch */ +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 42px; + height: 24px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .5s; + transition: .5s; +} + +.slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +input:checked + .slider { + background-color: var(--primary); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--primary); +} + +input:checked + .slider:before { + -webkit-transform: translateX(18px); + -ms-transform: translateX(18px); + transform: translateX(18px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 24px; +} + +.slider.round:before { + border-radius: 50%; +} + +#refQuery, #passage-popup, #modal-backdrop, #modal-container { + display: none; +} + +/** + * Sidebar + */ +#sidebar { + transition: margin-left 0.5s ease, box-shadow 0.5s ease; + background-color: var(--background); + font-size: 0.9em; + position: relative; + width: 25em; + border-right: solid 2px var(--border); + flex-grow: 0; + flex-shrink: 0; + + .toggle { + text-decoration: none; + transition: left 0.5s ease; + border: 0; + display: block; + height: 4.5em; + left: 25em; + line-height: 4.5em; + outline: 0; + overflow: hidden; + position: absolute; + text-align: center; + text-indent: -15em; + white-space: nowrap; + top: 0; + width: 6em; + z-index: 10000; + } + + > .inner { + //padding: 2.22em 2.22em 2.44em 2.22em; + position: relative; + width: 25em; + + > * { + border-bottom: solid 2px var(--medium); + margin: 0 0 3.5em 0; + } + } +} + +.inner { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + align-content: flex-start; + max-width: 1060px; + margin: 0 auto; + + > .alt { + background-color: var(--light); + border-bottom: 0; + margin: -2.22em -2.33em 1.0em -2.22em; + padding: 2.22em; + width: calc(100% - 4.44em); + } +} + +header.major { + border-bottom: solid 3px var(--border); + display: inline-block; + margin: 0 0 10px 0; + padding: 0 0.75em 0.5em 0; + width: 250px; +} + +#menu ul { + user-select: none; + color: var(--dark); + font-family: "Roboto Slab", serif; + font-weight: 400; + letter-spacing: 0.075em; + list-style: none; + padding: 0; + text-transform: uppercase; +} + +#menu ul li { + border-top: solid 1px var(--medium); + margin: 0.5em 0 0 0; + padding: 0.5em 0 0 0; +} + +#menu ul li:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; +} + +#menu ul a { + border-bottom: 0; + color: inherit; + cursor: pointer; + display: block; + font-size: 0.9em; + padding: 0.625em 0; +} + +#sidebar .toggle::before { + content: '\f0c9'; + font-size: 2rem; + height: inherit; + left: 0; + line-height: inherit; + position: absolute; + text-indent: 0; + top: 0; + width: inherit; + z-index: 99; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + text-transform: none !important; +}