add: mid-screen-style

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 */

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"}

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;
+}
+}