This commit is contained in:
ken 2026-09-29 19:33:50 +08:00
parent 15069ca533
commit aff2c8a5ff
16 changed files with 240 additions and 95 deletions

View File

@ -75,14 +75,8 @@ a[href="/en/sitemap"]{
} }
.orbit-bar-inner{
.orbit-bar-menu{
display: flex;
align-items: center;
}
blockquote{ blockquote{
color: #333; color: #fff;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: unset; font-size: unset;
@ -97,15 +91,15 @@ a[href="/en/sitemap"]{
display: none; display: none;
} }
a{ a{
color: #333; color: #fff;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
height: 40px; height: 40px;
padding: 0.7em; height: 40px;
font-size: 0.85em; line-height: 40px;
padding: 0 0.5em;
} }
} }
}
.fa-classic, .fa-regular, .fa-solid, .far, .fas ,.fa{ .fa-classic, .fa-regular, .fa-solid, .far, .fas ,.fa{
font-family: var(--fa-style-family, "FontAwesome")!important; font-family: var(--fa-style-family, "FontAwesome")!important;
} }
@ -290,9 +284,9 @@ blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
} }
iframe{ iframe{
@media(max-width:1024px){ @media(max-width:1024px){
width: 100%!important; width: 100%;
aspect-ratio: 16 / 9; // aspect-ratio: 16 / 9;
height: auto !important; // height: auto !important;
} }
} }

View File

@ -1,10 +1,13 @@
@charset "utf-8"; @charset "utf-8";
@import "variables"; @import "variables";
.page-module-title{
margin-top: 1em;
}
.internal-page{ .internal-page{
// .unity-title{ .unity-title{
// margin-top: 1em; margin-top: 1em;
// } }
.page-module-title{ .page-module-title{
display: block !important; display: block !important;
text-align: left !important; text-align: left !important;

View File

@ -19,6 +19,9 @@ $theme-color-third: darken(#256b86, 8%);
$theme-color-green: #0c81ae; $theme-color-green: #0c81ae;
$theme-color-hover: darken(#256b86, 8%); $theme-color-hover: darken(#256b86, 8%);
// :root {
// --theme-color-second: #{$theme-color-second};
// }
// Font stacks // Font stacks
$main-font: "Noto Sans TC", sans-serif; $main-font: "Noto Sans TC", sans-serif;
$sub-font: "Noto Sans TC", sans-serif; $sub-font: "Noto Sans TC", sans-serif;

View File

@ -14,9 +14,6 @@
text-align: end!important; text-align: end!important;
} }
.internal-page{ .internal-page{
.verticalhome{
padding-top: 5em;
}
// .outdropdowns{ // .outdropdowns{
// @media(min-width:769px){ // @media(min-width:769px){
// position: absolute!important; // position: absolute!important;
@ -24,7 +21,7 @@
// } // }
} }
.verticalhome{ .verticalhome{
padding-top: 3em; // padding-top: 3em;
position: relative; position: relative;
width: 100%; width: 100%;
z-index: unset!important; z-index: unset!important;
@ -86,8 +83,8 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 3em; padding-bottom: 1em;
padding-top: 2em; padding-top: 1em;
// p{ // p{
// padding-bottom: 1em; // padding-bottom: 1em;
// } // }

View File

@ -2,7 +2,7 @@
@import "../initial"; @import "../initial";
#orbit-bar .orbit-bar-title a { #orbit-bar .orbit-bar-title a {
color: #333 !important; color: #fff !important;
} }
sup { sup {
line-height: 0; line-height: 0;
@ -18,11 +18,11 @@ sup {
.w-ad-banner{ .w-ad-banner{
border-radius: 0; border-radius: 0;
} }
@media(min-width:1025px){ // @media(min-width:1025px){
.w-ba-banner__wrap{ // .w-ba-banner__wrap{
height: 50vh; // height: 50vh;
} // }
} // }
} }
.dropdowns{ .dropdowns{
background-image: linear-gradient( background-image: linear-gradient(
@ -45,6 +45,12 @@ sup {
float: right; float: right;
} }
@media(max-width: 768px){ @media(max-width: 768px){
a{
color: #333;
padding: 0.5em;
margin: 0;
position: relative;
}
ul{ ul{
display: flex!important; display: flex!important;
flex-wrap: wrap; flex-wrap: wrap;
@ -118,6 +124,9 @@ sup {
} }
} }
.navbar-header h1.default_site_h1, .navbar-header h2.default_site_h1{ .navbar-header h1.default_site_h1, .navbar-header h2.default_site_h1{
@media(max-width:768px){
font-size: 0.8em;
}
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -161,6 +170,11 @@ sup {
.navbar-header { .navbar-header {
z-index: 10; z-index: 10;
position: relative; position: relative;
@media(max-width:768px){
display: flex;
align-items: center;
justify-content: space-between;
}
padding: 0; padding: 0;
padding-top: 0.5em!important; padding-top: 0.5em!important;
margin: 0; margin: 0;
@ -222,7 +236,7 @@ sup {
float: left; float: left;
height: 50px; height: 50px;
padding-right: 0.5em; padding-right: 0.5em;
width: auto!important; width: auto;
@media(min-width: 1024px){ @media(min-width: 1024px){
height: 50px; height: 50px;
} }

View File

@ -11,17 +11,33 @@
.outdropdowns{ .outdropdowns{
.w-ba-banner .controlplay { .w-ba-banner .controlplay {
width: auto; width: auto;
margin-top: 7em; margin-top: 8em;
} }
} }
.ba-banner-widget-youtube{ .ba-banner-widget-youtube{
overflow: hidden; overflow: hidden;
height: auto !important; iframe{
.banner-overlay{ @media(min-width:1025px){
@media(max-width:768px){ position: absolute;
position: relative; top: -180px;
left: 0;
width: 100%;
height: calc(100% + 215px);
}
}
.jarallax-video-audio{
@media(min-width:769px){
top: 7em;
}
}
.w-ba-banner__wrap{
height: auto !important;
}
.banner-overlay{
@media(max-width:768px){
position: relative;
}
} }
}
} }
.w-ba-banner { .w-ba-banner {
position: relative; position: relative;
@ -274,10 +290,10 @@ ul.button-mid{
} }
// Widget 0 // Widget 0
.ba-banner-widget-0 { .ba-banner-widget-0 {
height: 100vh !important; height: 70vh !important;
z-index: 0; z-index: 0;
.w-ba-banner__wrap{ .w-ba-banner__wrap{
height: 100vh !important; height: 70vh !important;
} }
.youtube, .cycle-youtube { .youtube, .cycle-youtube {
width: 100%; width: 100%;
@ -288,12 +304,6 @@ ul.button-mid{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.banner-pager {
right: 1em;
top: -2em;
z-index: 100;
display: none;
}
.button-mid{ .button-mid{
z-index: 101; z-index: 101;
} }
@ -320,7 +330,6 @@ ul.button-mid{
// width: auto; // width: auto;
max-width: unset; max-width: unset;
// transform: translateX(-9%); // transform: translateX(-9%);
height: 100vh;
} }
} }
&,& .jp-jplayer{ &,& .jp-jplayer{
@ -474,25 +483,22 @@ ul.button-mid{
// Widget 3 // Widget 3
.ba-banner-widget-3 { .ba-banner-widget-3 {
.banner-pager .active-slide a { overflow: hidden;
background: $theme-color-second !important; border-radius: 2em;
} .w-ba-banner__image {
.w-ba-banner__wrap {
width: 100%; width: 100%;
height: auto;
} }
.w-ba-banner__slide { .youtube, .cycle-youtube {
width: 100%; width: 100%;
position: relative; height: 100%;
} }
.banner-pager { object, embed {
right: 0; width: 100%;
bottom: 2em; height: 100%;
li { height: unset; width: unset; }
} }
ul.button-mid { display: none; }
} }
//Widget 4 //Widget 4

View File

@ -2306,6 +2306,10 @@ img.w-annc__img {
} }
//widget 15 //widget 15
.widget-announcement-15 { .widget-announcement-15 {
.w-annc__item_inner{
-webkit-box-shadow: 0 1px 2px 0 #0000002e;
box-shadow: 0 1px 2px 0 #0000002e;
}
.cycle-carousel-wrap { .cycle-carousel-wrap {
align-items: stretch; align-items: stretch;
} }
@ -2354,10 +2358,9 @@ img.w-annc__img {
// } // }
.w-annc__img-wrap { .w-annc__img-wrap {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
border: 2px solid #333; aspect-ratio: 16 / 9;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
// @media(min-width:480px)and(max-width:820px){ // @media(min-width:480px)and(max-width:820px){
// height: 9.5em; // height: 9.5em;

View File

@ -78,6 +78,29 @@
//固定選單 //固定選單
.navFixed { .navFixed {
@media (max-width: 768px) {
.site-logo {
display: block!important;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
height: 40px !important;
width: auto !important;
}
.default_site_h1{
padding: 0.5em !important;
}
.navbar-header .default_site_h1>*{
display: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
}
.dropdowns{ .dropdowns{
background-image: none!important; background-image: none!important;
} }
@ -228,7 +251,8 @@ div#layout-navigation.show {
.modules-menu-level-0 { .modules-menu-level-0 {
width: 100%; width: 100%;
padding: 0; padding: 0;
align-items: center; align-items: center;
justify-content: space-between;
@media (min-width:769px)and(max-width: 1200px){ @media (min-width:769px)and(max-width: 1200px){
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -4,6 +4,10 @@
.universal-th-text{ .universal-th-text{
white-space: pre; white-space: pre;
} }
.btn-info {
background-color: #157d9d;
border-color: #157d9d;
}
.universal-table-index h3 { .universal-table-index h3 {
padding: 0; padding: 0;
} }

View File

@ -453,7 +453,7 @@
font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif; font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
font-weight: normal; font-weight: normal;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: #8f8f8f; color: #707070;
line-height: 1.6; line-height: 1.6;
cursor: pointer; cursor: pointer;
} }
@ -707,7 +707,7 @@
.movie_desc{ .movie_desc{
clear: both; clear: both;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: #8f8f8f; color: #707070;
line-height: 1.8; line-height: 1.8;
} }
.video_title { .video_title {
@ -727,7 +727,7 @@
clear: both; clear: both;
} }
.video_group_time{ .video_group_time{
color: #8f8f8f!important; color: #707070!important;
} }
.movietitle{ .movietitle{
margin-bottom: 15px; margin-bottom: 15px;
@ -905,7 +905,7 @@
} }
.video_desc{ .video_desc{
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: #8f8f8f; color: #707070;
line-height: 1.6; line-height: 1.6;
max-height: 5em; max-height: 5em;
} }

View File

@ -72,7 +72,11 @@
vertical-align: top; vertical-align: top;
} }
.widget-link { .widget-link {
margin-bottom: 1em; margin-bottom: 1em;
margin-top: 1em;
.widget-link__more{
display: none;
}
} }
.morebken{ .morebken{
font-size: 1.2em; font-size: 1.2em;

View File

@ -7,6 +7,9 @@
// padding-left: 0.9375em!important; // padding-left: 0.9375em!important;
} }
} }
.widget-breadcrumb{
margin-bottom: 1em;
}
.breadcrumb { .breadcrumb {
@media(max-width: 768px){ @media(max-width: 768px){
padding: 0; padding: 0;

View File

@ -38,7 +38,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="no-print single-child-datapp homebanner " data-pp="301" ></div> <div class="no-print single-child-datapp homebanner " data-pp="1999"></div>
<div class="collapse navbar-collapse modules-menu" id="layout-navigation"> <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
<div class="container"> <div class="container">
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a> <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>

View File

@ -7,7 +7,6 @@
<%= render_orbit_bar %> <%= render_orbit_bar %>
<div class="background" data-pp="100"></div> <div class="background" data-pp="100"></div>
<%= render_header %> <%= render_header %>
<div class="no-print single-child-datapp homebanner " data-pp="999"></div> <div class="no-print single-child-datapp homebanner " data-pp="999"></div>
<div class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></div> <div class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></div>
<div class="layout-content2 topcontent"> <div class="layout-content2 topcontent">
@ -17,10 +16,15 @@
<div class="verticalhome"> <div class="verticalhome">
<div class="layout-content topcontent"> <div class="layout-content topcontent">
<a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a> <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
<div class="contentwrap"> <div class="contentwrap">
<div class="container"> <div class="container">
<section class="body-banner" data-pp="0"></section> <div class="video-banner" data-pp="301" ></div>
</div>
</div>
<div class="layout-slide big-banner extra-box" data-pp="302" ></div>
<div class="contentwrap1">
<div class="layout-content-inner container">
<div class="body-banner" data-pp="0"></div>
<div class="row "> <div class="row ">
<section class="layout-content-box col-sm-4" data-pp="1"></section> <section class="layout-content-box col-sm-4" data-pp="1"></section>
<section class="layout-content-box col-sm-4" data-pp="2"></section> <section class="layout-content-box col-sm-4" data-pp="2"></section>
@ -36,13 +40,6 @@
<section class="layout-content-box col-sm-3" data-pp="6"></section> <section class="layout-content-box col-sm-3" data-pp="6"></section>
<section class="layout-content-box col-sm-3" data-pp="7"></section> <section class="layout-content-box col-sm-3" data-pp="7"></section>
</div> </div>
</div>
</div>
<div class="layout-slide big-banner extra-box" data-pp="302" ></div>
<div class="contentwrap1">
<div class="layout-content-inner container">
<div class="column row"> <div class="column row">
<div class="two-column col-sm-6 ken" data-pp="11"></div> <div class="two-column col-sm-6 ken" data-pp="11"></div>
<div class="two-column col-sm-6 ken" data-pp="12"></div> <div class="two-column col-sm-6 ken" data-pp="12"></div>
@ -53,12 +50,9 @@
<div class="column row"> <div class="column row">
<section class="two-column col-sm-3" data-pp="16"></section> <section class="two-column col-sm-3" data-pp="16"></section>
<section class="two-column col-sm-9" data-pp="17"></section> <section class="two-column col-sm-9" data-pp="17"></section>
</div>
</div> </div>
</div> <div class="container">
</div>
<div class="contentwrap">
<div class="container">
<section class="body-banner" data-pp="68"></section> <section class="body-banner" data-pp="68"></section>
<div class="row"> <div class="row">
<section class="layout-content-box col-sm-3" data-pp="64"></section> <section class="layout-content-box col-sm-3" data-pp="64"></section>
@ -78,15 +72,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="contentwrap2"> <div class="contentwrap2">
<!-- <div class="marqueeken">
<div class="scroll">
<div class="text1">
ORBIT
</div>
</div>
</div> -->
<div class="layout-content-inner container"> <div class="layout-content-inner container">
<div class="column row"> <div class="column row">
<section class="two-column col-sm-9" data-pp="39"></section> <section class="two-column col-sm-9" data-pp="39"></section>
@ -103,15 +89,12 @@
<div class="column row"> <div class="column row">
<section class="extra-box col-sm-12 swiper-banner" data-pp="201"></section> <section class="extra-box col-sm-12 swiper-banner" data-pp="201"></section>
</div> </div>
</div> <div class="row">
</div>
<div class="contentwrap">
<div class="container row">
<section class="layout-content-box col-sm-8" data-pp="35"></section> <section class="layout-content-box col-sm-8" data-pp="35"></section>
<section class="layout-content-box col-sm-4" data-pp="34"></section> <section class="layout-content-box col-sm-4" data-pp="34"></section>
<section class="layout-content-box col-sm-12" data-pp="233"></section> <section class="layout-content-box col-sm-12" data-pp="233"></section>
</div> </div>
</div>
</div> </div>
<div class="container "> <div class="container ">
<div class="move-box-wrapper row"> <div class="move-box-wrapper row">

View File

@ -0,0 +1,99 @@
<div class="w-ba-banner ba-banner-widget-3">
<div class="w-ba-banner__wrap cycle-slideshow"
data-list="images"
data-level="0"
data-cycle-slides=".w-ba-banner__slide"
data-cycle-log="false"
data-cycle-auto-height="{{base_image}}"
data-cycle-speed="{{speed}}"
data-cycle-timeout="{{timeout}}"
data-cycle-fx="{{ad_fx}}"
data-cycle-pager=".banner_caption_{{subpart-id}}"
data-pager-template="<li><button></button></li>"
data-pager-active-class="active-slide"
data-cycle-youtube=true
data-cycle-youtube-autostart=false
data-cycle-swipe=true
data-cycle-swipe-fx="scrollHorz"
>
<div class="w-ba-banner__slide {{class}}"
data-link="{{link}}"
data-cycle-title="{{title}}"
data-cycle-desc="{{context}}"
data-overlay-template="<h3>{{title}}</h3>{{desc}}"
data-bs-target="{{target}}"
>
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
</a>
</div>
</div>
<ul class="w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
<ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
<a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
<i aria-hidden="true"></i>
<p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
</a>
<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
<i aria-hidden="true"></i>
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
</a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
</ul>
</div>
<script>
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
$(this).addClass('active')
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
});
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
$(this).addClass('active')
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
});
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
})
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
});
/* 修正點:處理 Pager 無障礙朗讀文字 */
$('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
var $container = $(this).closest('.w-ba-banner');
var $slides = $(this).find('.w-ba-banner__slide');
var $pagerButtons = $container.find(".banner-pager button");
$pagerButtons.each(function(index) {
var slideTitle = $slides.eq(index).data('cycle-title') || "";
var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
$(this).attr({
"aria-label": ariaLabel,
"title": ariaLabel
});
});
});
</script>
<style type="text/css">
.w-ba-banner .controlplay .pause-slide.active i{
color: #ff4500;
}
.w-ba-banner .controlplay{
width: auto;
}
.w-ba-banner .button-mid{
position: absolute;
width: 100%;
height: 0;
top: 50%;
}
.next-button,.prev-button{
cursor: pointer;
}
</style>

View File

@ -40,6 +40,14 @@
}, },
"thumbnail": "ad_banner2_thumb.png" "thumbnail": "ad_banner2_thumb.png"
}, },
{
"filename": "ad_banner_widget3",
"name": {
"zh_tw": "P1-1. 純圖片導圓角輪播-標準 ( 圖片, 導航圖示 )",
"en": "P1-1. Pure Image Carousel - Rounded - Standard ( image, navigation )"
},
"thumbnail": "ad_banner2_thumb.png"
},
{ {
"filename": "ad_banner_widget0", "filename": "ad_banner_widget0",
"name": { "name": {