Skip to content

Commit 17634d9

Browse files
jcheronjcheron
committed
[skip ci] Update Semantic UI and jQuery versions, restyle theme
Upgraded Fomantic UI to 2.9.4 and jQuery to 3.7.x in configuration and template files. Updated PHP minimum version requirement to 8.1. Overhauled semantic theme CSS for a modern look, including new color variables, gradients, layout, and improved header/footer styling.
1 parent 8c0e8f5 commit 17634d9

5 files changed

Lines changed: 269 additions & 43 deletions

File tree

‎src/devtools/core/themesConfig.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
'composer'=>['zurb/foundation'=>'^6.5']
1212
],
1313
'semantic'=>[
14-
'composer'=>['fomantic/ui'=>'^2.8','frameworks/jquery'=> '~2.1'],
14+
'composer'=>['fomantic/ui'=>'^2.9','frameworks/jquery'=> '~3.7'],
1515
'vendor-copy'=>[
1616
'/vendor/fomantic/ui/dist/semantic.min.css'=>'/public/assets/%theme%/css/semantic.min.css',
1717
'/vendor/fomantic/ui/dist/semantic.min.js'=>'/public/assets/%theme%/js/semantic.min.js',

‎src/devtools/core/toolsConfig.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
"js" => "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
88
],
99
"semantic" => [
10-
"css" => "https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css",
11-
"js" => "https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"
10+
"css" => "https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.css",
11+
"js" => "https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.js"
1212
],
1313
"diff2html" => [
1414
"css" => "https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.12.2/diff2html.min.css"
1515
]
1616
],
1717
"composer" => [
1818
"require" => [
19-
"php" => ">=7.4",
19+
"php" => ">=8.1",
2020
"twig/twig" => "^3.0",
2121
"phpmv/ubiquity" => "^2.5"
2222
],

‎src/devtools/project-files/app/views/themes/semantic/main/vFooter.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% block footer %}
22
{% endblock %}
33
{% block scripts %}
4-
<script nonce="{{nonce}}" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
5-
<script nonce="{{nonce}}" src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
4+
<script nonce="{{nonce}}" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
5+
<script nonce="{{nonce}}" src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.js"></script>
66
{{script_foot | raw }}
77
{% endblock %}
88
</body>

‎src/devtools/project-files/app/views/themes/semantic/main/vHeader.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>ubi-projects semantic-UI</title>
88
{% endblock %}
99
{% block css %}
10-
<link nonce="{{nonce}}" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
10+
<link nonce="{{nonce}}" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.css">
1111
{{css('@activeTheme/css/style.css',{nonce:nonce}) | raw}}
1212
{% endblock %}
1313
</head>

‎src/devtools/project-files/public/themes/semantic/css/style.css‎

Lines changed: 262 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,285 @@
1-
body{
2-
background: #e6e1c5;
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500&display=swap');
2+
3+
:root {
4+
--primary: #4fa0ae;
5+
--primary-dark: rgba(79,160,174,1);
6+
--secondary: #d29d38;
7+
--dark: #1a202c;
8+
--darker: #0f1419;
9+
--light: #f7fafc;
10+
--gradient: linear-gradient(135deg, rgba(79,160,174,1) 0%, rgba(210,157,56,1) 100%);
311
}
4-
.head, header{
5-
background-color: #333333;
12+
13+
body {
14+
font-family: 'Inter', sans-serif;
15+
background: linear-gradient(180deg, #0f1419 0%, #1a202c 100%);
16+
min-height: 100vh;
617
}
718

8-
header::after{
9-
content:' ';
10-
background: rgb(79,160,174);
11-
background: linear-gradient(45deg, rgba(79,160,174,1) 0%, rgba(210,157,56,1) 100%);
12-
height: 5px;
13-
width: 100%;
14-
position: absolute;
15-
top: 60px;
19+
/* Header & Footer styles */
20+
.main-container {
21+
display: flex;
22+
flex-direction: column;
23+
min-height: 100vh;
1624
}
1725

18-
.menu.links{
19-
background-color: #f8f9fa!important;
20-
padding: 10px 0;
26+
header {
27+
background: rgba(255,255,255,0.03);
28+
backdrop-filter: blur(10px);
29+
border-bottom: 1px solid rgba(255,255,255,0.1);
30+
padding: 1rem 0;
2131
}
2232

23-
.version{
24-
background-color: #D39D38!important;
25-
color: white!important;
33+
header .ui.menu {
34+
background: transparent;
35+
border: none;
36+
box-shadow: none;
2637
}
2738

28-
.segment.container {
29-
background-color: #4d4d4d;
39+
header .ui.menu .item {
40+
color: white;
41+
transition: all 0.3s;
3042
}
3143

32-
.main-container {
33-
display: flex;
34-
flex-direction: column;
35-
min-height: 100vh;
44+
header .ui.menu .item:hover,
45+
header .ui.menu .item.active {
46+
background: var(--gradient);
47+
color: white;
3648
}
3749

3850
main {
39-
flex: 1;
40-
display: flex;
51+
flex: 1;
4152
}
4253

43-
header {
44-
padding: 10px 0;
54+
main > .ui.container {
55+
max-width: 1200px;
56+
padding: 1.5rem 1rem;
57+
}
58+
59+
footer {
60+
background: rgba(255,255,255,0.03);
61+
backdrop-filter: blur(10px);
62+
border-top: 1px solid rgba(255,255,255,0.1);
63+
padding: 2rem 0;
64+
margin-top: 2rem;
65+
color: rgba(255,255,255,0.7);
66+
text-align: center;
67+
}
68+
69+
footer a {
70+
color: var(--primary);
71+
text-decoration: none;
72+
font-weight: 600;
73+
transition: all 0.3s;
74+
}
75+
76+
footer a:hover {
77+
color: white;
78+
}
79+
80+
/* Styles existants pour la page d'accueil */
81+
.modern-container {
82+
max-width: 1200px;
83+
margin: 0 auto;
84+
padding: 1.5rem 1rem;
85+
}
86+
87+
.hero-section {
88+
background: var(--gradient);
89+
border-radius: 20px;
90+
padding: 2rem 1.5rem;
91+
margin-bottom: 2rem;
92+
box-shadow: 0 20px 60px rgba(0, 212, 170, 0.3);
93+
position: relative;
94+
overflow: hidden;
95+
}
96+
97+
.hero-section::before {
98+
content: '';
99+
position: absolute;
100+
top: 0;
101+
left: 0;
102+
right: 0;
103+
bottom: 0;
104+
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
105+
opacity: 0.3;
106+
}
107+
108+
.hero-content {
109+
position: relative;
110+
z-index: 1;
111+
display: flex;
112+
align-items: center;
113+
gap: 2rem;
114+
}
115+
116+
.hero-logo {
117+
width: 80px;
118+
height: 80px;
119+
background: white;
120+
border-radius: 20px;
121+
padding: 0.8rem;
122+
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
123+
flex-shrink: 0;
124+
}
125+
126+
.hero-text h1 {
127+
color: white;
128+
font-size: 2rem;
129+
font-weight: 700;
130+
margin: 0 0 0.5rem 0;
131+
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
132+
}
133+
134+
.version-badge {
135+
display: inline-flex;
136+
align-items: center;
137+
background: rgba(255,255,255,0.2);
138+
backdrop-filter: blur(10px);
139+
padding: 0.4rem 0.9rem;
140+
border-radius: 50px;
141+
color: white;
142+
font-family: 'JetBrains Mono', monospace;
143+
font-size: 0.9rem;
144+
font-weight: 500;
145+
}
146+
147+
.status-card {
148+
background: rgba(255,255,255,0.05);
149+
backdrop-filter: blur(10px);
150+
border: 1px solid rgba(255,255,255,0.1);
151+
border-radius: 16px;
152+
padding: 1.2rem;
153+
margin-bottom: 1.5rem;
154+
color: white;
155+
}
156+
157+
.status-card.success {
158+
border-left: 4px solid var(--primary);
45159
}
46160

47-
footer{
48-
min-height: 200px;
49-
background-color: #434343;
161+
.status-card h3 {
162+
display: flex;
163+
align-items: center;
164+
gap: 0.5rem;
165+
margin: 0 0 1rem 0;
166+
color: var(--primary);
50167
}
51168

52-
header, footer {
53-
color: #f5f5dc;
54-
padding-top: 10px;
169+
.status-card p {
170+
margin: 0;
171+
line-height: 1.6;
172+
opacity: 0.9;
55173
}
56174

57-
main .ui.container{
58-
padding: 10px;
175+
.status-card a {
176+
color: var(--primary);
177+
text-decoration: none;
178+
font-weight: 600;
179+
transition: all 0.3s;
180+
}
181+
182+
.status-card a:hover {
183+
color: white;
184+
text-decoration: underline;
185+
}
186+
187+
.info-grid {
188+
display: grid;
189+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
190+
gap: 1.2rem;
191+
margin-bottom: 1.5rem;
192+
}
193+
194+
.info-card {
195+
background: rgba(255,255,255,0.05);
196+
backdrop-filter: blur(10px);
197+
border: 1px solid rgba(255,255,255,0.1);
198+
border-radius: 16px;
199+
padding: 1.2rem;
200+
transition: all 0.3s;
201+
}
202+
203+
.info-card:hover {
204+
transform: translateY(-5px);
205+
box-shadow: 0 10px 30px rgba(0, 212, 170, 0.2);
206+
border-color: var(--primary);
207+
}
208+
209+
.info-item {
210+
margin-bottom: 1rem;
211+
}
212+
213+
.info-item:last-child {
214+
margin-bottom: 0;
215+
}
216+
217+
.info-label {
218+
color: var(--primary);
219+
font-size: 0.85rem;
220+
font-weight: 600;
221+
text-transform: uppercase;
222+
letter-spacing: 0.5px;
223+
margin-bottom: 0.3rem;
224+
}
225+
226+
.info-value {
227+
color: white;
228+
font-family: 'JetBrains Mono', monospace;
229+
font-size: 0.95rem;
230+
word-break: break-all;
231+
}
232+
233+
.links-section {
234+
background: rgba(255,255,255,0.05);
235+
backdrop-filter: blur(10px);
236+
border: 1px solid rgba(255,255,255,0.1);
237+
border-radius: 16px;
238+
padding: 1.5rem;
239+
}
240+
241+
.links-section h3 {
242+
color: white;
243+
margin: 0 0 1.5rem 0;
244+
font-size: 1.2rem;
245+
}
246+
247+
.links-grid {
248+
display: grid;
249+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
250+
gap: 1rem;
251+
}
252+
253+
.link-card {
254+
background: rgba(255,255,255,0.03);
255+
border: 1px solid rgba(255,255,255,0.1);
256+
border-radius: 10px;
257+
padding: 0.8rem 1.2rem;
258+
text-align: center;
259+
text-decoration: none;
260+
color: white;
261+
font-weight: 600;
262+
transition: all 0.3s;
263+
}
264+
265+
.link-card:hover {
266+
background: var(--gradient);
267+
border-color: transparent;
268+
transform: scale(1.05);
269+
box-shadow: 0 5px 20px rgba(0, 212, 170, 0.3);
270+
}
271+
272+
@media (max-width: 768px) {
273+
.hero-content {
274+
flex-direction: column;
275+
text-align: center;
276+
}
277+
278+
.hero-text h1 {
279+
font-size: 2rem;
280+
}
281+
282+
.info-grid {
283+
grid-template-columns: 1fr;
284+
}
59285
}

0 commit comments

Comments
 (0)