This commit is contained in:
parent
9d38d76f52
commit
8c6230ebfb
|
|
@ -3,7 +3,7 @@
|
|||
a[accesskey] {
|
||||
position: absolute;
|
||||
margin-left: -0.9375em;
|
||||
color: transparent;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#orbit-bar a[accesskey] {
|
||||
|
|
|
|||
|
|
@ -290,9 +290,9 @@ blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
|
|||
}
|
||||
iframe{
|
||||
@media(max-width:1024px){
|
||||
width: 100%!important;
|
||||
aspect-ratio: 16 / 9;
|
||||
height: auto !important;
|
||||
width: 100%;
|
||||
// aspect-ratio: 16 / 9;
|
||||
// height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 3em;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
// p{
|
||||
// padding-bottom: 1em;
|
||||
|
|
|
|||
|
|
@ -97,8 +97,12 @@ sup {
|
|||
}
|
||||
}
|
||||
.navbar-header h1.default_site_h1, .navbar-header h2.default_site_h1{
|
||||
@media(max-width:768px){
|
||||
font-size: 0.8em;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.default_site_h1 {
|
||||
display: flex;
|
||||
|
|
@ -135,6 +139,11 @@ sup {
|
|||
.navbar-header {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
@media(max-width:768px){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
|
@ -190,7 +199,7 @@ sup {
|
|||
float: left;
|
||||
height: 50px;
|
||||
padding-right: 0.5em;
|
||||
width: auto!important;
|
||||
width: auto;
|
||||
@media(min-width: 1024px){
|
||||
height: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -468,25 +468,22 @@ ul.button-mid{
|
|||
|
||||
// Widget 3
|
||||
.ba-banner-widget-3 {
|
||||
.banner-pager .active-slide a {
|
||||
background: $theme-color-second !important;
|
||||
}
|
||||
|
||||
.w-ba-banner__wrap {
|
||||
overflow: hidden;
|
||||
border-radius: 2em;
|
||||
.w-ba-banner__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.w-ba-banner__slide {
|
||||
.youtube, .cycle-youtube {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-pager {
|
||||
right: 0;
|
||||
bottom: 2em;
|
||||
li { height: unset; width: unset; }
|
||||
object, embed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
ul.button-mid { display: none; }
|
||||
}
|
||||
|
||||
//Widget 4
|
||||
|
|
|
|||
|
|
@ -2306,6 +2306,10 @@ img.w-annc__img {
|
|||
}
|
||||
//widget 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 {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
|
@ -2354,10 +2358,9 @@ img.w-annc__img {
|
|||
// }
|
||||
|
||||
.w-annc__img-wrap {
|
||||
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 2px solid #333;
|
||||
aspect-ratio: 16 / 9;
|
||||
aspect-ratio: 16 / 9;
|
||||
// @media(min-width:480px)and(max-width:820px){
|
||||
// height: 9.5em;
|
||||
|
|
|
|||
|
|
@ -78,18 +78,33 @@
|
|||
|
||||
//固定選單
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-header{
|
||||
position: relative;
|
||||
}
|
||||
.site-logo {
|
||||
height: 35px !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;
|
||||
}
|
||||
}
|
||||
.header-nav{
|
||||
display: none!important;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
.universal-th-text{
|
||||
white-space: pre;
|
||||
}
|
||||
.btn-info {
|
||||
background-color: #157d9d;
|
||||
border-color: #157d9d;
|
||||
}
|
||||
.universal-table-index h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -453,7 +453,7 @@
|
|||
font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.3px;
|
||||
color: #8f8f8f;
|
||||
color: #707070;
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -707,7 +707,7 @@
|
|||
.movie_desc{
|
||||
clear: both;
|
||||
letter-spacing: 0.3px;
|
||||
color: #8f8f8f;
|
||||
color: #707070;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.video_title {
|
||||
|
|
@ -727,7 +727,7 @@
|
|||
clear: both;
|
||||
}
|
||||
.video_group_time{
|
||||
color: #8f8f8f!important;
|
||||
color: #707070!important;
|
||||
}
|
||||
.movietitle{
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -905,7 +905,7 @@
|
|||
}
|
||||
.video_desc{
|
||||
letter-spacing: 0.3px;
|
||||
color: #8f8f8f;
|
||||
color: #707070;
|
||||
line-height: 1.6;
|
||||
max-height: 5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,8 +72,13 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
.widget-link {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
.widget-link__more{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.morebken{
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -16,11 +16,15 @@
|
|||
<div class="verticalhome">
|
||||
<div class="layout-content topcontent">
|
||||
<a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
|
||||
|
||||
<div class="contentwrap">
|
||||
<div class="container">
|
||||
<div class="video-banner" data-pp="301" ></div>
|
||||
<section class="body-banner" data-pp="0"></section>
|
||||
</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 ">
|
||||
<section class="layout-content-box col-sm-4" data-pp="1"></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="7"></section>
|
||||
</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="two-column col-sm-6 ken" data-pp="11"></div>
|
||||
<div class="two-column col-sm-6 ken" data-pp="12"></div>
|
||||
|
|
@ -53,12 +50,9 @@
|
|||
<div class="column row">
|
||||
<section class="two-column col-sm-3" data-pp="16"></section>
|
||||
<section class="two-column col-sm-9" data-pp="17"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentwrap">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<section class="body-banner" data-pp="68"></section>
|
||||
<div class="row">
|
||||
<section class="layout-content-box col-sm-3" data-pp="64"></section>
|
||||
|
|
@ -78,15 +72,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentwrap2">
|
||||
<!-- <div class="marqueeken">
|
||||
<div class="scroll">
|
||||
<div class="text1">
|
||||
ORBIT
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="layout-content-inner container">
|
||||
<div class="column row">
|
||||
<section class="two-column col-sm-9" data-pp="39"></section>
|
||||
|
|
@ -103,15 +89,12 @@
|
|||
<div class="column row">
|
||||
<section class="extra-box col-sm-12 swiper-banner" data-pp="201"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentwrap">
|
||||
<div class="container row">
|
||||
<div class="row">
|
||||
<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-12" data-pp="233"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container ">
|
||||
<div class="move-box-wrapper row">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -40,6 +40,14 @@
|
|||
},
|
||||
"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",
|
||||
"name": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue