upd: styles

update styles to fix a couple bugs
2026-06-21 19:36:03 -04:00
parent 49cbc2de59
commit 3bf4e03ba6
12 changed files with 230 additions and 12 deletions
@@ -0,0 +1,118 @@
+@media screen and (max-width: 1050px) {
+#sidebar {
+	display: none;
+}
+
+.note-header, #note-list, .ref-header, .ref-btn-header, .ref-btn, .fields-container {
+	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: 100%;
+		width: 98vw;
+		margin-left: 1vw;
+
+		& a {
+			color: var(--primary);
+		}
+	}
+}
+
+.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: 98%;
+			border-radius: 10px;
+			background-color: transparent;
+			color: var(--text);
+			font-family: 'Roboto Sans';
+			padding: 0 5px;
+		}
+	}
+}
+
+#sidebar {
+	position: fixed !important;
+}
+
+#refQuery {
+	height: 150px !important;
+}
+}