add: lg-screen-style

2026-06-13 12:10:25 -04:00
parent c7a1d6b3b7
commit 48e5c77ef2
3 changed files with 263 additions and 0 deletions
@@ -0,0 +1,141 @@
+@media screen and (min-width: 1501px) {
+.mobile-note-header {
+	display: none;
+}
+
+#note-list {
+	display: none;
+	overflow-y: scroll
+}
+
+#note-table_wrapper {
+	width: 97%;
+}
+
+.container #sidebar-link.toggle {
+    left: 25em;
+}
+
+.container {
+	display: grid;
+	height: 100vh;
+	grid-template-columns: 25em 60px 35% 0.98fr;
+	grid-template-rows: 60px 1fr;
+	gap: 5px 5px;
+	grid-auto-flow: row;
+	grid-template-areas:
+		"sidebar-header ref-btn-header ref-header note-header"
+		"sidebar ref-btn ref-text notes";
+
+	transition: grid-template-columns 0.5s ease-in-out;
+
+	p {
+		margin: 0 0 1em 0;
+	}
+
+	.fields-container {
+		display: none;
+	}
+
+	&.sidebar-collapsed {
+		grid-template-columns: 0px 60px 35% 0.98fr;
+
+		#sidebar-link.toggle {
+			left: 0;
+		}
+	}
+}
+
+.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: 100%;
+
+		textarea {
+			height: stretch;
+			width: stretch;
+			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;
+	}
+}
+}