Skip to content

Commit fc7e726

Browse files
SeigerSeiger
committed
[FIX] Redesign to Tailwind.
1 parent aae2bb3 commit fc7e726

24 files changed

+1182
-236
lines changed

‎composer.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@
4949
]
5050
},
5151
"scripts": {
52-
"post-autoload-dump": []
52+
"post-autoload-dump": [],
53+
"post-install-cmd": [
54+
"@php core/artisan smultisite:publish"
55+
],
56+
"post-update-cmd": [
57+
"@php core/artisan smultisite:publish"
58+
]
5359
}
5460
}

‎css/tailwind.config.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Tailwind configuration for sSeo package.
3+
* Extends the global manager config and adds package‑specific paths/tokens.
4+
*/
5+
const path = require('path');
6+
7+
/**
8+
* We climb to the root of the project regardless of whether
9+
* the package is in /packages or /core/vendor.
10+
*
11+
* __dirname → .../core/vendor/seiger/sseo/css
12+
* root → .../ (root Evolution CMS)
13+
*/
14+
const root = path.resolve(__dirname, '../../../../..');
15+
const blade = glob => path.join(__dirname, '../views', glob).replace(/\\/g, '/');
16+
17+
// Path to global design tokens (manager/media/style/common/tailwind.config.js)
18+
let base = {};
19+
try {
20+
base = require(path.join(
21+
root,
22+
'manager/media/style/common/tailwind.config.js'
23+
));
24+
} catch (e) {
25+
console.warn('⚠ Global Tailwind config not found, using local only.');
26+
}
27+
28+
module.exports = {
29+
...(base.content || []),
30+
31+
content: [
32+
...((base?.content) || []),
33+
blade('**/*.blade.php'),
34+
blade('partials/**/*.blade.php'),
35+
],
36+
37+
theme: {
38+
extend: {
39+
...(base?.theme?.extend || {}),
40+
},
41+
},
42+
43+
corePlugins: {
44+
...(base?.corePlugins || {}),
45+
display: true,
46+
},
47+
};

‎css/tailwind.css‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
@import "tailwindcss";
2+
@import "./theme.css";
3+
@config "./tailwind.config.js";
4+
@custom-variant darkness (&:where(.darkness, .darkness *));
5+
6+
@layer base {
7+
html {
8+
font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto);
9+
}
10+
body {
11+
font-size: var(--text-base-size);
12+
line-height: var(--leading-base);
13+
background: var(--bg-color);
14+
color: var(--text-color);
15+
}
16+
h1, h2, h3, h4 {
17+
line-height: var(--leading-head);
18+
color: var(--heading-color);
19+
}
20+
.muted, .text-muted {
21+
color: var(--text-muted);
22+
}
23+
}
24+
25+
@layer components {
26+
.evo-tooltip {display: none;}
27+
.s-document {
28+
@apply flex min-h-screen font-sans;
29+
background-color: var(--bg-color, #f1f5f9);
30+
color: var(--text-color, #1d293d);
31+
transition: var(--theme-transition);
32+
}
33+
.s-tooltip {
34+
@apply max-w-xs bg-white text-sm text-slate-800 p-3 rounded-xl shadow-xl border border-slate-200;
35+
@apply darkness:bg-slate-800 darkness:text-white darkness:border-slate-600;
36+
}
37+
.s-brand {
38+
@apply fixed bottom-3 right-3 z-50 flex items-center gap-2 bg-white/80 backdrop-blur rounded-full shadow-lg
39+
overflow-hidden transition-[width,padding] duration-300 ease-in-out;
40+
width : 2.5rem;
41+
}
42+
.s-brand--open {
43+
@apply pl-3 pr-4;
44+
width : 13rem;
45+
}
46+
.s-brand-logo {@apply w-10 h-10 flex items-center justify-center shrink-0;}
47+
.s-brand-text {@apply text-sm leading-tight text-slate-700 whitespace-nowrap;}
48+
.s-brand-link {@apply text-blue-600 hover:underline;}
49+
50+
/* Aside */
51+
.s-nav {
52+
@apply fixed inset-y-0 z-40 flex flex-col bg-gradient-to-b from-[#0f2645] to-[#113c6E] text-slate-100
53+
transition-all duration-300;
54+
}
55+
.s-nav-header {
56+
@apply flex items-center justify-center h-16 shrink-0 sticky top-0 bg-inherit z-10;
57+
}
58+
.s-nav-menu {
59+
@apply flex-1 overflow-y-auto mt-4 space-y-1 pr-1;
60+
scrollbar-width: thin;
61+
scrollbar-color: rgba(255,255,255,.2) transparent;
62+
}
63+
.s-nav-menu::-webkit-scrollbar {
64+
width: 6px;
65+
}
66+
.s-nav-menu::-webkit-scrollbar-thumb {
67+
background: rgba(255,255,255,.2);
68+
border-radius: 3px;
69+
}
70+
.s-nav-menu-item {
71+
@apply relative flex items-center gap-3 pl-4 pr-2 py-2 text-sm hover:bg-white/10 transition;
72+
}
73+
.s-nav-menu-item--active {
74+
@apply bg-[#0051c7]/50 border-l-[3px] border-[#3b82f6] hover:bg-[#0051c7]/50;
75+
}
76+
.s-pro-badge {
77+
@apply px-2 py-0.5 text-[10px] font-bold leading-none uppercase bg-[var(--brand-color)] text-white rounded-full;
78+
}
79+
.s-pin-btn {
80+
@apply fixed bottom-4 z-50 flex items-center justify-center w-8 h-8 rounded-full hover:bg-white/10
81+
focus:outline-none focus:ring-2 focus:ring-white/40;
82+
}
83+
84+
/* Header */
85+
.s-header {
86+
@apply sticky top-0 h-12 bg-white/80 backdrop-blur flex items-center justify-between gap-3 px-6 shadow z-5;
87+
@apply darkness:bg-black/80;
88+
}
89+
.s-header-title {
90+
@apply text-xl font-semibold text-slate-800;
91+
@apply darkness:text-white;
92+
}
93+
94+
/* Buttons */
95+
.s-btn {
96+
@apply flex items-center justify-center gap-1 px-3 py-1 rounded-lg shadow text-sm font-medium transition-colors
97+
duration-150;
98+
}
99+
.s-btn--primary {
100+
@apply bg-[#3B82F6] text-white hover:bg-[#306ee0];
101+
}
102+
.s-btn--success {
103+
@apply bg-emerald-600 text-white hover:bg-emerald-700;
104+
}
105+
.s-btn--danger {
106+
@apply bg-red-600/90 text-white hover:bg-red-700;
107+
}
108+
109+
/* Inputs */
110+
.s-toggle-slider {
111+
@apply relative w-11 h-6 rounded-full bg-gray-200 transition-colors;
112+
}
113+
.darkness .s-toggle-slider {
114+
@apply bg-slate-700;
115+
}
116+
.s-toggle-slider::after {
117+
content: '';
118+
position: absolute;
119+
top: 2px;
120+
left: 2px;
121+
width: 20px;
122+
height: 20px;
123+
background-color: white;
124+
border: 1px solid #d1d5db;
125+
border-radius: 9999px;
126+
transition: transform 0.3s ease-in-out;
127+
}
128+
.darkness .s-toggle-slider::after {
129+
border-color: #4b5563;
130+
}
131+
input[type="checkbox"].peer:checked + .s-toggle-slider::after {
132+
transform: translateX(100%);
133+
}
134+
input[type="checkbox"].peer:checked + .s-toggle-slider {
135+
@apply bg-green-600;
136+
}
137+
.darkness input[type="checkbox"].peer:checked + .s-toggle-slider {
138+
@apply bg-green-600;
139+
}
140+
input[type="checkbox"].peer:checked + .s-toggle-slider.is-invalid,
141+
.darkness input[type="checkbox"].peer:checked + .s-toggle-slider.is-invalid {
142+
background-color: var(--invalid-color) !important;
143+
}
144+
.is-valid {
145+
border-color: var(--valid-color) !important;
146+
box-shadow: 0 0 0 1px var(--valid-color) !important;
147+
}
148+
.is-invalid {
149+
border-color: var(--invalid-color) !important;
150+
box-shadow: 0 0 0 1px var(--invalid-color) !important;
151+
}
152+
.text-valid {
153+
color: var(--valid-color) !important;
154+
font-weight: 600 !important;
155+
}
156+
.text-invalid {
157+
color: var(--invalid-color) !important;
158+
font-weight: 600 !important;
159+
}
160+
161+
/* Search */
162+
.s-input-search {
163+
@apply w-32 group-hover:w-64 focus:w-64 bg-slate-200 text-sm rounded-lg pl-8 pr-3 py-1 placeholder-slate-500
164+
border border-transparent focus:outline-none focus:border-slate-400 transition-all duration-300;
165+
@apply darkness:bg-slate-700 darkness:placeholder-slate-300 darkness:focus:border-slate-500;
166+
}
167+
168+
/* Widget */
169+
.s-widget {
170+
@apply flex flex-col rounded-2xl shadow bg-gradient-to-br from-white to-slate-50 p-6 border border-slate-200;
171+
@apply darkness:from-[#002e63] darkness:to-[#0051c7] darkness:border-transparent;
172+
}
173+
.s-widget-name {
174+
@apply text-sm font-medium text-slate-600 leading-tight;
175+
@apply darkness:text-white/90;
176+
}
177+
.s-alert {
178+
@apply mx-6 mt-3 mb-0 flex items-start gap-3 rounded-xl p-4 text-sm border;
179+
}
180+
.s-alert--danger {
181+
@apply bg-red-100 text-red-800 border-red-200;
182+
@apply darkness:bg-red-800/20 darkness:text-red-200 darkness:border-red-600/30;
183+
}
184+
.s-alert--icon-danger {
185+
@apply w-5 h-5 mt-0.5 text-red-600 darkness:text-red-300;
186+
@apply darkness:text-red-300;
187+
}
188+
189+
/* Meta Templates */
190+
.s-meta-block-head {
191+
@apply bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden;
192+
@apply darkness:bg-[#122739] darkness:border-slate-700;
193+
}
194+
.s-meta-block-btn {
195+
@apply w-full flex items-center justify-between px-6 py-4 bg-sky-100 hover:bg-sky-200 transition-all
196+
cursor-pointer select-none;
197+
@apply darkness:text-slate-200 darkness:bg-[#132a44] darkness:hover:bg-[#1a2f44];
198+
}
199+
.s-meta-block-content {
200+
@apply bg-white text-slate-700 divide-y divide-slate-100 overflow-hidden transition-[max-height] duration-500 ease-in-out h-fit;
201+
@apply darkness:text-slate-200 darkness:bg-[#122739] darkness:divide-slate-600;
202+
}
203+
.placeholder {
204+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
205+
color: #38bdf8;
206+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
207+
}
208+
209+
/* AlertifyJS */
210+
.alertify .ajs-dialog {
211+
@apply text-slate-800 rounded-xl shadow-xl p-6 border border-slate-200 w-full max-w-lg;
212+
@apply darkness:!bg-[#0f2645] darkness:text-white darkness:border-slate-700;
213+
}
214+
.alertify .ajs-header {
215+
@apply darkness:!bg-[#0f2645];
216+
margin-left: -16px !important;
217+
margin-right: -16px !important;
218+
}
219+
.alertify .ajs-body {
220+
@apply text-sm text-slate-700;
221+
@apply darkness:text-slate-300;
222+
}
223+
.alertify .ajs-body .ajs-content {
224+
padding: 0 !important;
225+
}
226+
.alertify .ajs-footer {
227+
@apply mt-6 flex justify-end gap-3;
228+
@apply darkness:!bg-[#0f2645];
229+
margin-left: -16px !important;
230+
margin-right: -16px !important;
231+
}
232+
.alertify-notifier .ajs-message {
233+
@apply bg-blue-400 text-white text-sm font-medium px-4 py-2 rounded-xl shadow-xl flex items-center justify-center text-center;
234+
max-width: 320px;
235+
min-height: 2.5rem;
236+
z-index: 99999 !important;
237+
animation: fadeInUp 0.3s ease-out;
238+
line-height: 1.4;
239+
}
240+
.alertify-notifier .ajs-message.ajs-error { @apply bg-red-600 darkness:bg-red-700; }
241+
.alertify-notifier .ajs-message.ajs-success { @apply bg-green-600 darkness:bg-green-700; }
242+
.alertify-notifier .ajs-message.ajs-notify { @apply bg-sky-600 darkness:bg-sky-700; }
243+
.alertify-notifier .ajs-message.ajs-warning { @apply bg-yellow-500 text-black darkness:bg-yellow-600; }
244+
@keyframes slideInUp {
245+
from {opacity: 0; transform: translateY(10px);}
246+
to {opacity: 1; transform: translateY(0);}
247+
}
248+
.alertify h3 {
249+
@apply text-lg font-semibold text-slate-800;
250+
@apply darkness:text-slate-100;
251+
}
252+
.alertify .ajs-button {
253+
@apply px-4 py-1.5 rounded-lg text-sm font-medium shadow transition;
254+
}
255+
.alertify .ajs-ok {
256+
@apply bg-blue-600 text-white hover:bg-blue-700;
257+
}
258+
.alertify .ajs-cancel {
259+
@apply bg-slate-200 text-slate-800 hover:bg-slate-300;
260+
@apply darkness:bg-slate-700 darkness:text-white darkness:hover:bg-slate-600;
261+
}
262+
263+
/* CodeMirror */
264+
.CodeMirror {
265+
@apply border border-slate-700 rounded-md w-full overflow-hidden;
266+
}
267+
.CodeMirror-scroll {
268+
@apply overflow-x-auto;
269+
}
270+
.darkness .CodeMirror-gutters {
271+
background-color: #1e232b !important;
272+
}
273+
}

‎css/tailwind.min.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/theme.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
:root {
2+
--bg-color: #f1f5f9;
3+
--text-color: #1d293d;
4+
--text-muted: #5b6b82;
5+
--heading-color: #0f172a;
6+
7+
--surface-color: #ffffff;
8+
--border-color: #e2e6ee;
9+
--focus-ring: 0 0 0 3px rgba(59,130,246,.35);
10+
--brand-color: #0057c7;
11+
--brand-fore: #ffffff;
12+
13+
--valid-color: #22c55e;
14+
--invalid-color: #ef4444;
15+
16+
--theme-transition: background-color .2s ease, color .2s ease, border-color .2s ease;
17+
--font-sans: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
18+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
19+
--text-base-size: 1rem;
20+
--leading-base: 1.55;
21+
--leading-head: 1.25;
22+
}
23+
24+
:root.darkness,
25+
html.darkness,
26+
body.darkness {
27+
--bg-color: #0b1a2f;
28+
--text-color: #e6e8ee;
29+
--text-muted: #aab0bd;
30+
--heading-color: #f1f5f9;
31+
32+
--surface-color: #111318;
33+
--border-color: #2a2f3a;
34+
--focus-ring: 0 0 0 3px rgba(59,130,246,.45);
35+
--brand-color: #0057c7;
36+
--brand-fore: #0b1a2f;
37+
38+
--valid-color: #4ade80;
39+
--invalid-color: #f87171;
40+
}

‎images/logo.svg‎

Lines changed: 10 additions & 0 deletions
Loading

images/seigerit-blue.svg renamed to images/seigerit.svg

File renamed without changes.

0 commit comments

Comments
 (0)