From 5e81358f47bd77bbf77c7e3af44de3cf2d194251 Mon Sep 17 00:00:00 2001 From: Ryan Prather Date: Sat, 13 Jun 2026 12:10:40 -0400 Subject: [PATCH] add: mid-screen-style --- assets/css/mid-screen-style.css | 162 +++++++++++++++++++++++ assets/css/mid-screen-style.css.map | 1 + assets/css/mid-screen-style.scss | 195 ++++++++++++++++++++++++++++ 3 files changed, 358 insertions(+) create mode 100644 assets/css/mid-screen-style.css create mode 100644 assets/css/mid-screen-style.css.map create mode 100644 assets/css/mid-screen-style.scss diff --git a/assets/css/mid-screen-style.css b/assets/css/mid-screen-style.css new file mode 100644 index 0000000..271b601 --- /dev/null +++ b/assets/css/mid-screen-style.css @@ -0,0 +1,162 @@ +@media screen and (min-width: 1051px) and (max-width: 1500px) { + :root { + --sidebar-width: 20em; + --sidebar-header-width: 15em; + --hidden-sidebar-width: -20em; + --hidden-sidebar-header-width: -15em; + } + .mobile-note-header, #note-list { + display: none; + } + .container #sidebar-link.toggle { + left: 20em; + } + .container { + position: relative; + height: 100vh; + overflow-x: hidden; + display: grid; + grid-template-columns: 60px 35% 0.95fr; + grid-template-rows: 60px 1fr; + gap: 5px 5px; + grid-auto-flow: row; + grid-template-areas: "ref-btn-header ref-header note-header" "ref-btn ref-text notes"; + } + .container #sidebar-header, .container #sidebar { + position: absolute; + left: 0; + z-index: 10000; + transition: left 0.5s ease-in-out; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); + box-sizing: border-box; + } + .container #sidebar-header { + top: 0; + width: calc(var(--sidebar-header-width) + 40px); + height: 60px; + padding: 0 !important; + overflow: visible !important; + } + .container #sidebar { + top: 61px; + width: var(--sidebar-width); + height: calc(100vh - 61px); + padding: 15px; + } + .container #sidebar .inner { + width: 100%; + } + .container #sidebar-header #search { + padding: 19px; + width: 15em !important; + } + .container #sidebar-link.toggle { + left: calc(var(--sidebar-header-width) + 40px); + } + .container.sidebar-collapsed #sidebar { + left: var(--hidden-sidebar-width); + box-shadow: none; + } + .container.sidebar-collapsed #sidebar-header { + left: calc(var(--hidden-sidebar-header-width) - 40px); + box-shadow: none; + } + .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: -webkit-fill-available; + height: -moz-available; + height: stretch; + width: 95.5%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: "Roboto Sans"; + } + .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; + } + input#query { + font-size: 10pt !important; + padding: 0 !important; + } + #old-notes { + padding: 15px !important; + } + #menu { + padding: 15px !important; + } + #sidebar header.major { + margin: 0 15px !important; + } +}/*# sourceMappingURL=mid-screen-style.css.map */ \ No newline at end of file diff --git a/assets/css/mid-screen-style.css.map b/assets/css/mid-screen-style.css.map new file mode 100644 index 0000000..4f029f0 --- /dev/null +++ b/assets/css/mid-screen-style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["mid-screen-style.scss","mid-screen-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,qBAAA;IACA,4BAAA;IACA,6BAAA;IACA,oCAAA;ECCC;EDEF;IACC,aAAA;ECAC;EDGF;IACI,UAAA;ECDF;EDIF;IACC,kBAAA;IACA,aAAA;IACA,kBAAA;IAEA,aAAA;IACA,sCAAA;IACA,4BAAA;IACA,YAAA;IACA,mBAAA;IACA,qFACC;ECJA;EDOD;IACC,kBAAA;IACA,OAAA;IACA,cAAA;IACA,iCAAA;IACA,yCAAA;IAEA,sBAAA;ECNA;EDSD;IACC,MAAA;IACA,+CAAA;IACA,YAAA;IACA,qBAAA;IACA,4BAAA;ECPA;EDUD;IACC,SAAA;IACA,2BAAA;IACA,0BAAA;IACA,aAAA;ECRA;EDUA;IACC,WAAA;ECRD;EDYD;IACC,aAAA;IACA,sBAAA;ECVA;EDaD;IACC,8CAAA;ECXA;EDeA;IACC,iCAAA;IACA,gBAAA;ECbD;EDgBA;IACC,qDAAA;IACA,gBAAA;ECdD;EDkBD;IACC,aAAA;EChBA;EDoBF;IACC,0BAAA;EClBC;EDqBF;IACC,aAAA;IACA,sBAAA;IACA,0BAAA;IACA,4BAAA;IACA,YAAA;IACA,mDAAA;IAEA,gBAAA;ECpBC;EDsBD;IACC,6BAAA;IACA,eAAA;IACA,YAAA;ECpBA;EDuBA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECrBD;EDyBD;IACC,YAAA;IACA,YAAA;ECvBA;EDyBA;IACC,8BAAA;IAAA,sBAAA;IAAA,eAAA;IACA,YAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;ECvBD;ED4BF;IACC,aAAA;IACA,8BAAA;IACA,mBAAA;EC1BC;ED4BD;IACC,SAAA;EC1BA;ED6BD;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;EC3BA;ED+BF;IACC,0BAAA;IACA,qBAAA;EC7BC;EDgCF;IACC,wBAAA;EC9BC;EDiCF;IACC,wBAAA;EC/BC;EDkCF;IACC,yBAAA;EChCC;AACF","file":"mid-screen-style.css"} \ No newline at end of file diff --git a/assets/css/mid-screen-style.scss b/assets/css/mid-screen-style.scss new file mode 100644 index 0000000..01a1502 --- /dev/null +++ b/assets/css/mid-screen-style.scss @@ -0,0 +1,195 @@ +@media screen and (min-width: 1051px) and (max-width: 1500px) { +:root { + --sidebar-width: 20em; + --sidebar-header-width: 15em; + --hidden-sidebar-width: -20em; + --hidden-sidebar-header-width: -15em; +} + +.mobile-note-header, #note-list { + display: none; +} + +.container #sidebar-link.toggle { + left: 20em; +} + +.container { + position: relative; + height: 100vh; + overflow-x: hidden; + + display: grid; + grid-template-columns: 60px 35% 0.95fr; + grid-template-rows: 60px 1fr; + gap: 5px 5px; + grid-auto-flow: row; + grid-template-areas: + "ref-btn-header ref-header note-header" + "ref-btn ref-text notes"; + + #sidebar-header, #sidebar { + position: absolute; + left: 0; + z-index: 10000; + transition: left 0.5s ease-in-out; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); + //display: block; + box-sizing: border-box; + } + + #sidebar-header { + top: 0; + width: calc(var(--sidebar-header-width) + 40px); + height: 60px; + padding: 0 !important; + overflow: visible !important; + } + + #sidebar { + top: 61px; + width: var(--sidebar-width); + height: calc(100vh - 61px); + padding: 15px; + + .inner { + width: 100%; + } + } + + #sidebar-header #search { + padding: 19px; + width: 15em !important; + } + + #sidebar-link.toggle { + left: calc(var(--sidebar-header-width) + 40px); + } + + &.sidebar-collapsed { + #sidebar { + left: var(--hidden-sidebar-width); + box-shadow: none; + } + + #sidebar-header { + left: calc(var(--hidden-sidebar-header-width) - 40px); + box-shadow: none; + } + } + + .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: stretch; + width: 95.5%; + border-radius: 10px; + background-color: transparent; + color: var(--text); + font-family: 'Roboto Sans'; + } + } +} + +.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; + } +} + +input#query { + font-size: 10pt !important; + padding: 0 !important; +} + +#old-notes { + padding: 15px !important; +} + +#menu { + padding: 15px !important; +} + +#sidebar header.major { + margin: 0 15px !important; +} +}