Skip to content

Commit bb3c723

Browse files
gcclinuxgcclinux
committed
webapp missing themes.
1 parent e82efb8 commit bb3c723

File tree

7 files changed

+815
-1
lines changed

7 files changed

+815
-1
lines changed

‎public/themes/black-white.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
:root {
2+
/* MAIN APPLICATION BACKGROUND */
3+
--bg-root: #000000;
4+
5+
/* FILE BUTTON */
6+
--btn-help-bg: #ffffff;
7+
--btn-help-text: #000000;
8+
--btn-help-border: #000000;
9+
10+
/* TOP BUTTON ROW */
11+
--btn-menu-gradient-start: #ffffff;
12+
--btn-menu-gradient-end: #e0e0e0;
13+
--btn-menu-hover-gradient-start: #cccccc;
14+
--btn-menu-hover-gradient-end: #ffffff;
15+
--color-text-button: #000000;
16+
--btn-menu-border: 2px solid #ffffff;
17+
18+
/* LOWER BUTTON ROW */
19+
--btn-mermaid-gradient-start: #ffffff;
20+
--btn-mermaid-gradient-end: #cccccc;
21+
--btn-mermaid-hover-gradient-start: #cccccc;
22+
--btn-mermaid-hover-gradient-end: #ffffff;
23+
24+
/* EDITOR PANEL */
25+
--bg-editor: #000000;
26+
--color-text-editor: #ffffff;
27+
--border-primary: #ffffff;
28+
29+
/* PREVIEW PANEL */
30+
--bg-preview: #ffffff;
31+
--bg-code-block: #f0f0f0;
32+
--color-text-code: #000000;
33+
--bg-table-header: #e0e0e0;
34+
--border-dark: #ffffff;
35+
36+
/* DROPDOWN MENUS */
37+
--bg-dropdown: #1a1a1a;
38+
--bg-dropdown-hover: #333333;
39+
--color-text-dropdown: #ffffff;
40+
--color-text-light: #cccccc;
41+
--border-secondary: #ffffff;
42+
--separator-gradient-start: rgba(255, 255, 255, 0.1);
43+
--separator-gradient-end: rgba(255, 255, 255, 0.3);
44+
45+
/* MODALS */
46+
--bg-modal: #000000;
47+
--bg-modal-overlay: rgba(0, 0, 0, 0.9);
48+
--color-text-primary: #ffffff;
49+
--color-text-muted: #cccccc;
50+
--color-text-muted-dark: #aaaaaa;
51+
--bg-card: rgba(255, 255, 255, 0.05);
52+
--border-card: rgba(255, 255, 255, 0.3);
53+
--border-card-light: rgba(255, 255, 255, 0.2);
54+
--btn-primary-modal: #ffffff;
55+
--btn-primary-modal-text: #000000;
56+
--btn-cancel: #666666;
57+
--btn-submit: #ffffff;
58+
59+
/* INPUT FIELDS */
60+
--bg-input: #1a1a1a;
61+
--border-input: #ffffff;
62+
--btn-primary: #ffffff;
63+
64+
/* CONTEXT MENU */
65+
--context-menu-bg: #ffffff;
66+
--context-menu-border: #000000;
67+
--context-menu-hover: #e0e0e0;
68+
--context-menu-shadow: rgba(0, 0, 0, 0.5);
69+
70+
/* SHADOWS & EFFECTS */
71+
--shadow-sm: rgba(255, 255, 255, 0.2);
72+
--shadow-md: rgba(255, 255, 255, 0.3);
73+
--shadow-lg: rgba(255, 255, 255, 0.4);
74+
--shadow-xl: rgba(255, 255, 255, 0.5);
75+
76+
/* LINKS & FOCUS */
77+
--link-color: #ffffff;
78+
--link-hover: #cccccc;
79+
--link-hover-light: #aaaaaa;
80+
--focus-ring: #ffffff;
81+
--focus-border: #ffffff;
82+
83+
/* LEGACY/MISC */
84+
--color-primary: #000000;
85+
--color-primary-light: #1a1a1a;
86+
--color-primary-dark: #000000;
87+
--color-primary-darker: #000000;
88+
--color-primary-border: #ffffff;
89+
--color-text-secondary: rgba(255, 255, 255, 1);
90+
--color-text-dark: #000000;
91+
--btn-standard: #ffffff;
92+
--btn-standard-hover: #cccccc;
93+
--btn-auto: #ffffff;
94+
--btn-html: #e0e0e0;
95+
--btn-format: #cccccc;
96+
--shadow-mermaid: rgba(255, 255, 255, 0.4);
97+
}
98+
99+
.textarea-horizontal-full,
100+
.textarea-parallel,
101+
.textarea-horizontal {
102+
border: 3px solid var(--border-primary) !important;
103+
}
104+
105+
.preview-horizontal-full,
106+
.preview-parallel,
107+
.preview-horizontal {
108+
border: 3px solid var(--border-dark) !important;
109+
}

‎public/themes/dark-high-contrast.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/* ============================================
2+
EASYEDIT DARK HIGH CONTRAST THEME
3+
============================================
4+
Organized by UI component for easy customization
5+
============================================ */
6+
7+
:root {
8+
/* ============================================
9+
MAIN APPLICATION BACKGROUND
10+
============================================ */
11+
--bg-root: #000000;
12+
13+
/* ============================================
14+
FILE BUTTON (Top-left green button)
15+
============================================ */
16+
--btn-help-bg: #00ff00;
17+
--btn-help-text: #000000;
18+
--btn-help-border: #00ff00;
19+
20+
/* ============================================
21+
TOP BUTTON ROW (Toggle Edit, Preview, Undo, etc.)
22+
============================================ */
23+
--btn-menu-gradient-start: #ffffff;
24+
--btn-menu-gradient-end: #cccccc;
25+
--btn-menu-hover-gradient-start: #ffff00;
26+
--btn-menu-hover-gradient-end: #ffff00;
27+
--color-text-button: #000000;
28+
--btn-menu-border: 2px solid #ffff00;
29+
30+
/* ============================================
31+
LOWER BUTTON ROW (Headers, Formatting, Mermaid, etc.)
32+
============================================ */
33+
--btn-mermaid-gradient-start: #00ffff;
34+
--btn-mermaid-gradient-end: #00cccc;
35+
--btn-mermaid-hover-gradient-start: #ffff00;
36+
--btn-mermaid-hover-gradient-end: #ffff00;
37+
38+
/* ============================================
39+
EDITOR PANEL (Left side - where you type)
40+
============================================ */
41+
--bg-editor: #000000;
42+
--color-text-editor: #ffffff;
43+
--border-primary: #ffff00;
44+
45+
/* ============================================
46+
PREVIEW PANEL (Right side - rendered markdown)
47+
============================================ */
48+
--bg-preview: #ffffff;
49+
--bg-code-block: #ffff00;
50+
--color-text-code: #000000;
51+
--bg-table-header: #ffff00;
52+
--border-dark: #ffff00;
53+
54+
/* ============================================
55+
DROPDOWN MENUS
56+
============================================ */
57+
--bg-dropdown: #1a1a1a;
58+
--bg-dropdown-hover: #333333;
59+
--color-text-dropdown: #ffffff;
60+
--color-text-light: #ffff00;
61+
--border-secondary: #ffffff;
62+
--separator-gradient-start: rgba(255, 255, 255, 0.2);
63+
--separator-gradient-end: rgba(255, 255, 255, 0.4);
64+
65+
/* ============================================
66+
MODALS (About, Features, Password, etc.)
67+
============================================ */
68+
--bg-modal: #000000;
69+
--bg-modal-overlay: rgba(0, 0, 0, 0.9);
70+
--color-text-primary: #ffffff;
71+
--color-text-muted: #cccccc;
72+
--color-text-muted-dark: #aaaaaa;
73+
--bg-card: rgba(255, 255, 255, 0.1);
74+
--border-card: rgba(255, 255, 255, 0.5);
75+
--border-card-light: rgba(255, 255, 255, 0.3);
76+
--btn-primary-modal: #00ffff;
77+
--btn-primary-modal-text: #000000;
78+
--btn-cancel: #ff0000;
79+
--btn-submit: #00ff00;
80+
81+
/* ============================================
82+
INPUT FIELDS (Auto-generators, etc.)
83+
============================================ */
84+
--bg-input: #1a1a1a;
85+
--border-input: #ffffff;
86+
--btn-primary: #00ffff;
87+
88+
/* ============================================
89+
CONTEXT MENU (Right-click menu)
90+
============================================ */
91+
--context-menu-bg: #ffffff;
92+
--context-menu-border: #000000;
93+
--context-menu-hover: #ffff00;
94+
--context-menu-shadow: rgba(0, 0, 0, 0.9);
95+
96+
/* ============================================
97+
SHADOWS & EFFECTS
98+
============================================ */
99+
--shadow-sm: rgba(255, 255, 255, 0.3);
100+
--shadow-md: rgba(255, 255, 255, 0.4);
101+
--shadow-lg: rgba(255, 255, 255, 0.5);
102+
--shadow-xl: rgba(255, 255, 255, 0.6);
103+
104+
/* ============================================
105+
LINKS & FOCUS
106+
============================================ */
107+
--link-color: #00ffff;
108+
--link-hover: #ffff00;
109+
--link-hover-light: #ffff00;
110+
--focus-ring: #ffff00;
111+
--focus-border: #ffff00;
112+
113+
/* ============================================
114+
LEGACY/MISC (kept for compatibility)
115+
============================================ */
116+
--color-primary: #000000;
117+
--color-primary-light: #1a1a1a;
118+
--color-primary-dark: #000000;
119+
--color-primary-darker: #000000;
120+
--color-primary-border: #ffffff;
121+
--color-text-secondary: rgba(255, 255, 255, 1);
122+
--color-text-dark: #000000;
123+
--btn-standard: #ffffff;
124+
--btn-standard-hover: #ffff00;
125+
--btn-auto: #ff00ff;
126+
--btn-html: #00ffff;
127+
--btn-format: #00ff00;
128+
--shadow-mermaid: rgba(255, 255, 255, 0.5);
129+
}
130+
131+
/* ============================================
132+
LIGHT MODE OVERRIDES
133+
============================================ */
134+
@media (prefers-color-scheme: light) {
135+
:root {
136+
--color-text-primary: #000000;
137+
--bg-root: #ffffff;
138+
--btn-standard-hover: #ffff00;
139+
--link-hover: #0000ff;
140+
}
141+
}

‎public/themes/default.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/* ============================================
2+
EASYEDIT DEFAULT THEME
3+
============================================
4+
Organized by UI component for easy customization
5+
============================================ */
6+
7+
:root {
8+
/* ============================================
9+
MAIN APPLICATION BACKGROUND
10+
============================================ */
11+
--bg-root: #242424;
12+
13+
/* ============================================
14+
FILE BUTTON (Top-left green button)
15+
============================================ */
16+
--btn-help-bg: #d9f7d9;
17+
--btn-help-text: #063b09;
18+
--btn-help-border: #063b09;
19+
20+
/* ============================================
21+
TOP BUTTON ROW (Toggle Edit, Preview, Undo, etc.)
22+
============================================ */
23+
--btn-menu-gradient-start: #374151;
24+
--btn-menu-gradient-end: #1f2937;
25+
--btn-menu-hover-gradient-start: #4b5563;
26+
--btn-menu-hover-gradient-end: #374151;
27+
--color-text-button: white;
28+
--btn-menu-border: none;
29+
30+
/* ============================================
31+
LOWER BUTTON ROW (Headers, Formatting, Mermaid, etc.)
32+
============================================ */
33+
--btn-mermaid-gradient-start: #667eea;
34+
--btn-mermaid-gradient-end: #764ba2;
35+
--btn-mermaid-hover-gradient-start: #764ba2;
36+
--btn-mermaid-hover-gradient-end: #667eea;
37+
38+
/* ============================================
39+
EDITOR PANEL (Left side - where you type)
40+
============================================ */
41+
--bg-editor: #000000;
42+
--color-text-editor: white;
43+
--border-primary: #ccc;
44+
45+
/* ============================================
46+
PREVIEW PANEL (Right side - rendered markdown)
47+
============================================ */
48+
--bg-preview: #ffffff;
49+
--bg-code-block: #e3e3e3;
50+
--color-text-code: #000000;
51+
--bg-table-header: #f2f2f2;
52+
--border-dark: #000000;
53+
54+
/* ============================================
55+
DROPDOWN MENUS
56+
============================================ */
57+
--bg-dropdown: #2d2d2d;
58+
--bg-dropdown-hover: #3d3d3d;
59+
--color-text-dropdown: white;
60+
--color-text-light: #cfcfcf;
61+
--border-secondary: #3d3d3d;
62+
--separator-gradient-start: rgba(255, 255, 255, 0.02);
63+
--separator-gradient-end: rgba(255, 255, 255, 0.06);
64+
65+
/* ============================================
66+
MODALS (About, Features, Password, etc.)
67+
============================================ */
68+
--bg-modal: #1e1e1e;
69+
--bg-modal-overlay: rgba(0, 0, 0, 0.5);
70+
--color-text-primary: white;
71+
--color-text-muted: #bdbdbd;
72+
--color-text-muted-dark: #9a9a9a;
73+
--bg-card: rgba(255, 255, 255, 0.02);
74+
--border-card: rgba(255, 255, 255, 0.12);
75+
--border-card-light: rgba(255, 255, 255, 0.08);
76+
--btn-primary-modal: #0b84ff;
77+
--btn-primary-modal-text: #ffffff;
78+
--btn-cancel: #555;
79+
--btn-submit: #007bff;
80+
81+
/* ============================================
82+
INPUT FIELDS (Auto-generators, etc.)
83+
============================================ */
84+
--bg-input: #2d2d2d;
85+
--border-input: #555;
86+
--btn-primary: #0078d4;
87+
88+
/* ============================================
89+
CONTEXT MENU (Right-click menu)
90+
============================================ */
91+
--context-menu-bg: white;
92+
--context-menu-border: #ccc;
93+
--context-menu-hover: #f5f5f5;
94+
--context-menu-shadow: rgba(0, 0, 0, 0.2);
95+
96+
/* ============================================
97+
SHADOWS & EFFECTS
98+
============================================ */
99+
--shadow-sm: rgba(0, 0, 0, 0.1);
100+
--shadow-md: rgba(0, 0, 0, 0.15);
101+
--shadow-lg: rgba(0, 0, 0, 0.2);
102+
--shadow-xl: rgba(0, 0, 0, 0.25);
103+
104+
/* ============================================
105+
LINKS & FOCUS
106+
============================================ */
107+
--link-color: #646cff;
108+
--link-hover: #535bf2;
109+
--link-hover-light: #747bff;
110+
--focus-ring: -webkit-focus-ring-color;
111+
--focus-border: #646cff;
112+
113+
/* ============================================
114+
LEGACY/MISC (kept for compatibility)
115+
============================================ */
116+
--color-primary: #242424;
117+
--color-primary-light: #2d2d2d;
118+
--color-primary-dark: #1e1e1e;
119+
--color-primary-darker: #1a1a1a;
120+
--color-primary-border: #3d3d3d;
121+
--color-text-secondary: rgba(255, 255, 255, 0.87);
122+
--color-text-dark: #000000;
123+
--btn-standard: purple;
124+
--btn-standard-hover: #575757;
125+
--btn-auto: rgb(139, 48, 192);
126+
--btn-html: rgb(136, 116, 248);
127+
--btn-format: rgb(30, 68, 38);
128+
--shadow-mermaid: rgba(6, 182, 212, 0.3);
129+
}
130+
131+
/* ============================================
132+
LIGHT MODE OVERRIDES
133+
============================================ */
134+
@media (prefers-color-scheme: light) {
135+
:root {
136+
--color-text-primary: #213547;
137+
--bg-root: #ffffff;
138+
--btn-standard-hover: #f9f9f9;
139+
--link-hover: #747bff;
140+
}
141+
}

0 commit comments

Comments
 (0)