styles.css (3.4 KB)

  1 :root {
  2 	--text-color: #f8f8f2;
  3 	--editor-bg: #16181b;
  4 	scrollbar-color: grey var(--editor-bg);
  5 }
  6 
  7 * {
  8 	margin: 0;
  9 	padding: 0;
 10 	box-sizing: border-box;
 11 }
 12 
 13 html, body {
 14 	overscroll-behavior: none;
 15 	background-color: var(--editor-bg);
 16 }
 17 
 18 html {
 19 	height: 100%;
 20 }
 21 
 22 body {
 23 	font-family: monospace;
 24 	background: var(--editor-bg);
 25 	color: var(--text-color);
 26 	height: 100%;
 27 	display: flex;
 28 	overflow: hidden;
 29 }
 30 
 31 .editor-pane {
 32 	width: 50%;
 33 	height: 100%;
 34 	position: relative;
 35 	transition: opacity 0.1s ease-out; /* Added transition for smoother opacity hack */
 36 }
 37 
 38 .preview-pane {
 39 	width: 50%;
 40 	height: 100%;
 41 	position: relative;
 42 }
 43 
 44 .preview-pane.fullscreen {
 45 	position: fixed;
 46 	top: 0;
 47 	left: 0;
 48 	width: 100vw;
 49 	height: 100vh;
 50 	z-index: 9999;
 51 	background: white;
 52 }
 53 
 54 /* Hide editor when preview is fullscreen */
 55 .editor-pane.hidden {
 56 	display: none;
 57 }
 58 
 59 #editor {
 60 	width: 100%;
 61 	height: 100%;
 62 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 63 	font-size: 21px;
 64 }
 65 
 66 /* CodeMirror styling */
 67 .cm-editor {
 68 	width: 100%;
 69 	height: 100%;
 70 	background: var(--editor-bg);
 71 	color: var(--text-color);
 72 }
 73 
 74 .cm-placeholder {
 75 	color: #666;
 76 	opacity: 0.6;
 77 }
 78 
 79 .cm-content {
 80 	padding: 15px;
 81 	font-size: 21px;
 82 	line-height: 1.6;
 83 }
 84 
 85 .cm-gutters {
 86 	font-size: 21px;
 87 	line-height: 1.6;
 88 	user-select: none;
 89 }
 90 
 91 .cm-lineNumbers .cm-gutterElement {
 92 	line-height: 1.6;
 93 	font-size: 21px;
 94 }
 95 
 96 .ΝΌ1 .cm-lineNumbers .cm-gutterElement {
 97 	padding-right: 0;
 98 	padding-left: 8px;
 99 }
100 
101 .cm-focused {
102 	outline: none;
103 }
104 
105 /* Force tab size to 2 spaces - override theme defaults */
106 .cm-editor .cm-content,
107 .cm-editor .cm-line,
108 .cm-editor {
109 	tab-size: 2 !important;
110 	-moz-tab-size: 2 !important;
111 }
112 
113 /* Disable overscroll on all CodeMirror elements */
114 .cm-editor, .cm-content, .cm-scroller, .cm-scrollElement {
115 	overscroll-behavior: none !important;
116 }
117 
118 /* Simplify search panel - hide all buttons, labels, and replace input */
119 .cm-search button {
120 	display: none !important;
121 }
122 
123 .cm-search {
124 	background-color: #16181b;
125 }
126 
127 .cm-search label {
128 	display: none !important;
129 }
130 
131 .cm-search input[name="replace"] {
132 	display: none !important;
133 }
134 
135 /* Style search input to match editor text size */
136 .cm-search input[name="search"] {
137 	font-size: 21px !important;
138 	width: 100% !important;
139 	border-radius: 50px !important;
140 	padding-left: 0.8em !important;
141 	padding-right: 0.8em !important;
142 	padding-bottom: 7px !important;
143 }
144 
145 .cm-panels-bottom {
146 	border-radius: 0px !important;
147 	border-top: none !important;
148 }
149 
150 #preview {
151 	width: 100%;
152 	height: 100%;
153 	border: none;
154 	background: white;
155 	overflow: auto;
156 }
157 
158 /* Vertical layout for narrow screens (height > width) */
159 @media (max-aspect-ratio: 1/1) {
160 	body {
161 		flex-direction: column;
162 	}
163 
164 	.editor-pane {
165 		width: 100%;
166 		height: 50%;
167 		order: 2;
168 	}
169 
170 	.preview-pane {
171 		width: 100%;
172 		height: 50%;
173 		order: 1;
174 		padding-top: env(safe-area-inset-top);
175 	}
176 }
177 
178 /* Mobile: fullscreen editor when keyboard is open */
179 @media (pointer: coarse), (pointer: none) {
180 	body.mobile-keyboard-open .preview-pane {
181 		display: none;
182 	}
183 
184 	body.mobile-keyboard-open .editor-pane {
185 		position: fixed;
186 		top: calc(var(--visual-viewport-offset-top, 0px));
187 		left: 0;
188 		width: 100%;
189 		height: var(--visual-viewport-height, 100%);
190 		max-height: var(--visual-viewport-height, 100%);
191 		order: 1;
192 		overscroll-behavior: none;
193 		overflow: hidden;
194 	}
195 
196 	body.mobile-keyboard-open .editor-pane #editor,
197 	body.mobile-keyboard-open .editor-pane .cm-editor {
198 		height: 100% !important;
199 		max-height: 100% !important;
200 	}
201 }