Skip to content

Commit 0ce5f3f

Browse files
jimboidjimboid
authored
Merge pull request #198 from CCPBioSim/css-optimisation
move module css into main component site css
2 parents aef2ada + 3190597 commit 0ce5f3f

3 files changed

Lines changed: 168 additions & 194 deletions

File tree

‎pkg_ccpbiosim/constituents/com_ccpbiosim/media/css/site.css‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -466,3 +466,166 @@
466466
max-height:120px;
467467
margin-bottom:15px;
468468
}
469+
470+
/* ---------------------------------------------- Modules ---------------------------------------- */
471+
/* ---------------------------------------------- Hero ---------------------------------------- */
472+
/* HERO VIDEO */
473+
.hero {
474+
position: relative;
475+
min-height: 90vh;
476+
color: white;
477+
overflow: hidden;
478+
}
479+
480+
.hero video {
481+
position: absolute;
482+
inset: 0;
483+
width: 100%;
484+
height: 100%;
485+
object-fit: cover;
486+
z-index: 0;
487+
}
488+
489+
.hero::after {
490+
content: "";
491+
position: absolute;
492+
inset: 0;
493+
background: linear-gradient(
494+
rgba(15, 30, 60, 0.75),
495+
rgba(15, 30, 60, 0.85)
496+
);
497+
z-index: 1;
498+
}
499+
500+
.hero-content {
501+
position: relative;
502+
z-index: 2;
503+
}
504+
505+
/*
506+
.section-padding {
507+
padding: 4rem 0;
508+
}
509+
*/
510+
511+
/* ---------------------------------------------- Youtube ---------------------------------------- */
512+
.youtube_mod_slide { display: none; }
513+
.youtube_mod_slide.active { display: block; }
514+
515+
/* Thumbnail wrapper — 16:9 aspect ratio, clips zoom-on-hover */
516+
.youtube_mod_thumb_wrap {
517+
position: relative;
518+
aspect-ratio: 16 / 9;
519+
overflow: hidden;
520+
background: #000;
521+
border-radius: var(--bs-card-inner-border-radius, .375rem) var(--bs-card-inner-border-radius, .375rem) 0 0;
522+
}
523+
524+
.youtube_mod_thumb {
525+
width: 100%; height: 100%;
526+
object-fit: cover; display: block;
527+
transition: transform .4s ease, opacity .4s ease;
528+
}
529+
530+
.youtube_mod_slide .card:hover .youtube_mod_thumb {
531+
transform: scale(1.04);
532+
opacity: .88;
533+
}
534+
535+
/* Play button overlay */
536+
.youtube_mod_play_btn {
537+
position: absolute; inset: 0;
538+
display: flex; align-items: center; justify-content: center;
539+
background: transparent; border: none; cursor: pointer; padding: 0;
540+
}
541+
542+
.youtube_mod_play_btn svg {
543+
width: 68px; height: 48px;
544+
filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
545+
transition: transform .2s ease, filter .2s ease;
546+
}
547+
548+
.youtube_mod_play_btn:hover svg,
549+
.youtube_mod_play_btn:focus-visible svg {
550+
transform: scale(1.1);
551+
filter: drop-shadow(0 4px 16px rgba(0,0,0,.7));
552+
}
553+
554+
.youtube_mod_play_bg { fill: rgba(20,20,20,.78); transition: fill .2s; }
555+
.youtube_mod_play_btn:hover .youtube_mod_play_bg { fill: #dc3545; }
556+
.youtube_mod_play_arrow { fill: #fff; }
557+
558+
/* Inline player — Bootstrap ratio handles 16:9 sizing */
559+
.youtube_mod_player {
560+
border-radius: var(--bs-card-inner-border-radius, .375rem) var(--bs-card-inner-border-radius, .375rem) 0 0;
561+
overflow: hidden;
562+
}
563+
564+
.youtube_mod_player iframe {
565+
border: none;
566+
}
567+
568+
/* Title: clamp to 2 lines */
569+
.youtube_mod_title {
570+
display: -webkit-box;
571+
-webkit-line-clamp: 2;
572+
-webkit-box-orient: vertical;
573+
overflow: hidden;
574+
}
575+
576+
.youtube_mod_title a { color: inherit; text-decoration: none; }
577+
.youtube_mod_title a:hover,
578+
.youtube_mod_title a:focus { color: #dc3545; text-decoration: underline; }
579+
580+
/* Description: clamp to 3 lines */
581+
.youtube_mod_desc {
582+
display: -webkit-box;
583+
-webkit-line-clamp: 3;
584+
-webkit-box-orient: vertical;
585+
overflow: hidden;
586+
}
587+
588+
/* Dot indicators */
589+
.youtube_mod_dot {
590+
width: 10px; height: 10px; border-radius: 50%;
591+
border: 2px solid #adb5bd; background: transparent;
592+
padding: 0; cursor: pointer;
593+
transition: background .2s, border-color .2s, transform .2s;
594+
}
595+
596+
.youtube_mod_dot.active,
597+
.youtube_mod_dot:hover {
598+
background: #dc3545;
599+
border-color: #dc3545;
600+
transform: scale(1.3);
601+
}
602+
603+
.youtube_mod_dot:focus-visible {
604+
outline: 2px solid #dc3545;
605+
outline-offset: 3px;
606+
}
607+
608+
/* Autoplay progress bar */
609+
.youtube_mod_progress {
610+
height: 3px;
611+
background: #dee2e6;
612+
border-radius: 2px;
613+
overflow: hidden;
614+
}
615+
616+
.youtube_mod_bar {
617+
height: 100%;
618+
background: #dc3545;
619+
border-radius: 2px;
620+
width: 0;
621+
}
622+
623+
/* Reduced motion */
624+
@media (prefers-reduced-motion: reduce) {
625+
.youtube_mod_thumb,
626+
.youtube_mod_play_btn svg,
627+
.youtube_mod_dot,
628+
.youtube_mod_bar { transition: none !important; }
629+
}
630+
631+

‎pkg_ccpbiosim/constituents/mod_ccpbiosim_hero/tmpl/default.php‎

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,10 @@
11
<?php
22
defined('_JEXEC') or die;
33

4+
$wa = $this->document->getWebAssetManager();
5+
$wa->useStyle('com_ccpbiosim.site');
46
?>
57

6-
<style>
7-
:root {
8-
--primary: #1f3a5f;
9-
--accent: #2bb0e6;
10-
}
11-
12-
body {
13-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
14-
}
15-
16-
/* HERO VIDEO */
17-
.hero {
18-
position: relative;
19-
min-height: 90vh;
20-
color: white;
21-
overflow: hidden;
22-
}
23-
24-
.hero video {
25-
position: absolute;
26-
inset: 0;
27-
width: 100%;
28-
height: 100%;
29-
object-fit: cover;
30-
z-index: 0;
31-
}
32-
33-
.hero::after {
34-
content: "";
35-
position: absolute;
36-
inset: 0;
37-
background: linear-gradient(
38-
rgba(15, 30, 60, 0.75),
39-
rgba(15, 30, 60, 0.85)
40-
);
41-
z-index: 1;
42-
}
43-
44-
.hero-content {
45-
position: relative;
46-
z-index: 2;
47-
}
48-
49-
.btn-primary {
50-
background-color: var(--accent);
51-
border: none;
52-
}
53-
54-
.btn-primary:hover {
55-
background-color: #1998c8;
56-
}
57-
58-
.section-padding {
59-
padding: 4rem 0;
60-
}
61-
62-
.bg-light-alt {
63-
background-color: #f5f7fa;
64-
}
65-
66-
footer {
67-
background-color: #0f172a;
68-
color: #cbd5f5;
69-
}
70-
71-
footer a {
72-
color: #93c5fd;
73-
text-decoration: none;
74-
}
75-
</style>
76-
778
<header class="hero d-flex align-items-center">
789
<!-- Replace src with real simulation movie -->
7910
<video

‎pkg_ccpbiosim/constituents/mod_ccpbiosim_youtube/tmpl/default.php‎

Lines changed: 3 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
$autoplayMs = (int) $params->get('autoplay_interval', 5000);
1818

1919
$uid = 'mod-ccpbiosim-yt-' . $module->id;
20+
21+
$wa = $this->document->getWebAssetManager();
22+
$wa->useStyle('com_ccpbiosim.site');
2023
?>
2124

2225
<div id="<?php echo $uid; ?>"
@@ -171,129 +174,6 @@ class="btn btn-outline-secondary rounded-circle p-0 d-flex align-items-center ju
171174

172175
</div><!-- /.youtube_mod -->
173176

174-
<style>
175-
/* ── mod_ccpbiosim_youtube — Bootstrap 5 ────────────────────────────────── */
176-
177-
.youtube_mod_slide { display: none; }
178-
.youtube_mod_slide.active { display: block; }
179-
180-
/* Thumbnail wrapper — 16:9 aspect ratio, clips zoom-on-hover */
181-
.youtube_mod_thumb_wrap {
182-
position: relative;
183-
aspect-ratio: 16 / 9;
184-
overflow: hidden;
185-
background: #000;
186-
border-radius: var(--bs-card-inner-border-radius, .375rem) var(--bs-card-inner-border-radius, .375rem) 0 0;
187-
}
188-
189-
.youtube_mod_thumb {
190-
width: 100%; height: 100%;
191-
object-fit: cover; display: block;
192-
transition: transform .4s ease, opacity .4s ease;
193-
}
194-
195-
.youtube_mod_slide .card:hover .youtube_mod_thumb {
196-
transform: scale(1.04);
197-
opacity: .88;
198-
}
199-
200-
/* Play button overlay */
201-
.youtube_mod_play_btn {
202-
position: absolute; inset: 0;
203-
display: flex; align-items: center; justify-content: center;
204-
background: transparent; border: none; cursor: pointer; padding: 0;
205-
}
206-
207-
.youtube_mod_play_btn svg {
208-
width: 68px; height: 48px;
209-
filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
210-
transition: transform .2s ease, filter .2s ease;
211-
}
212-
213-
.youtube_mod_play_btn:hover svg,
214-
.youtube_mod_play_btn:focus-visible svg {
215-
transform: scale(1.1);
216-
filter: drop-shadow(0 4px 16px rgba(0,0,0,.7));
217-
}
218-
219-
.youtube_mod_play_bg { fill: rgba(20,20,20,.78); transition: fill .2s; }
220-
.youtube_mod_play_btn:hover .youtube_mod_play_bg { fill: #dc3545; }
221-
.youtube_mod_play_arrow { fill: #fff; }
222-
223-
/* Inline player — Bootstrap ratio handles 16:9 sizing */
224-
.youtube_mod_player {
225-
border-radius: var(--bs-card-inner-border-radius, .375rem) var(--bs-card-inner-border-radius, .375rem) 0 0;
226-
overflow: hidden;
227-
}
228-
229-
.youtube_mod_player iframe {
230-
border: none;
231-
}
232-
233-
/* Title: clamp to 2 lines */
234-
.youtube_mod_title {
235-
display: -webkit-box;
236-
-webkit-line-clamp: 2;
237-
-webkit-box-orient: vertical;
238-
overflow: hidden;
239-
}
240-
241-
.youtube_mod_title a { color: inherit; text-decoration: none; }
242-
.youtube_mod_title a:hover,
243-
.youtube_mod_title a:focus { color: #dc3545; text-decoration: underline; }
244-
245-
/* Description: clamp to 3 lines */
246-
.youtube_mod_desc {
247-
display: -webkit-box;
248-
-webkit-line-clamp: 3;
249-
-webkit-box-orient: vertical;
250-
overflow: hidden;
251-
}
252-
253-
/* Dot indicators */
254-
.youtube_mod_dot {
255-
width: 10px; height: 10px; border-radius: 50%;
256-
border: 2px solid #adb5bd; background: transparent;
257-
padding: 0; cursor: pointer;
258-
transition: background .2s, border-color .2s, transform .2s;
259-
}
260-
261-
.youtube_mod_dot.active,
262-
.youtube_mod_dot:hover {
263-
background: #dc3545;
264-
border-color: #dc3545;
265-
transform: scale(1.3);
266-
}
267-
268-
.youtube_mod_dot:focus-visible {
269-
outline: 2px solid #dc3545;
270-
outline-offset: 3px;
271-
}
272-
273-
/* Autoplay progress bar */
274-
.youtube_mod_progress {
275-
height: 3px;
276-
background: #dee2e6;
277-
border-radius: 2px;
278-
overflow: hidden;
279-
}
280-
281-
.youtube_mod_bar {
282-
height: 100%;
283-
background: #dc3545;
284-
border-radius: 2px;
285-
width: 0;
286-
}
287-
288-
/* Reduced motion */
289-
@media (prefers-reduced-motion: reduce) {
290-
.youtube_mod_thumb,
291-
.youtube_mod_play_btn svg,
292-
.youtube_mod_dot,
293-
.youtube_mod_bar { transition: none !important; }
294-
}
295-
</style>
296-
297177
<script>
298178
(function () {
299179
'use strict';

0 commit comments

Comments
 (0)