From be23369a0d40087a1b2fc9d78fa4b0b70d22f1dd Mon Sep 17 00:00:00 2001 From: ken Date: Fri, 2 Oct 2026 16:36:28 +0800 Subject: [PATCH] up --- assets/javascripts/app.js | 147 +- .../stylesheets/template/base/_accesskey.scss | 2 +- assets/stylesheets/template/base/_global.scss | 5 + .../template/modules/announcement.scss | 2078 ++++++++++++----- .../template/modules/event_news.scss | 6 +- home/index.html.erb | 7 - modules/ad_banner/_ad_banner_widget2.html.erb | 2 +- .../_ad_banner_widget2_video.html.erb | 2 +- modules/ad_banner/_ad_banner_widget3.html.erb | 2 +- modules/ad_banner/_ad_banner_widget5.html.erb | 8 +- .../_ad_banner_widget8_video.html.erb | 2 +- .../_ad_banner_widget9_video.html.erb | 2 +- modules/announcement/_annc_widget1.html.erb | 28 +- modules/announcement/_annc_widget15.html.erb | 52 +- modules/announcement/_annc_widget16.html.erb | 32 +- modules/announcement/_annc_widget18.html.erb | 22 +- modules/announcement/_annc_widget19.html.erb | 148 +- modules/announcement/_annc_widget2.html.erb | 40 +- modules/announcement/_annc_widget20.html.erb | 8 +- modules/announcement/_annc_widget21.html.erb | 8 +- modules/announcement/_annc_widget22.html.erb | 14 +- modules/announcement/_annc_widget23.html.erb | 8 +- modules/announcement/_annc_widget24.html.erb | 8 +- modules/announcement/_annc_widget25.html.erb | 2 +- modules/announcement/_annc_widget26.html.erb | 56 +- modules/announcement/_annc_widget27.html.erb | 173 ++ modules/announcement/_annc_widget28.html.erb | 180 ++ modules/announcement/_annc_widget3.html.erb | 8 +- modules/announcement/_annc_widget30.html.erb | 244 ++ modules/announcement/_annc_widget31.html.erb | 25 + modules/announcement/_annc_widget4.html.erb | 96 +- modules/announcement/_annc_widget5.html.erb | 4 +- modules/announcement/annc_index10.html.erb | 58 +- modules/announcement/annc_index11.html.erb | 1 + modules/announcement/annc_index12.html.erb | 1 + modules/announcement/annc_index13.html.erb | 2 +- modules/announcement/annc_index15.html.erb | 4 +- modules/announcement/annc_index16.html.erb | 50 +- modules/announcement/annc_index18.html.erb | 46 +- modules/announcement/annc_index21.html.erb | 4 +- modules/announcement/info.json | 476 ++-- modules/announcement/show.html.erb | 35 +- modules/archive/archive_index1.html.erb | 3 +- modules/archive/archive_index12.html.erb | 3 +- modules/archive/archive_index17.html.erb | 3 +- modules/archive/archive_index2.html.erb | 3 +- modules/archive/archive_index3.html.erb | 3 +- modules/archive/archive_index4.html.erb | 3 +- modules/archive/archive_index6.html.erb | 3 +- .../_annc_widget1.html.erb | 2 +- .../_annc_widget15.html.erb | 2 +- .../_annc_widget16.html.erb | 2 +- .../_annc_widget18.html.erb | 2 +- .../_annc_widget2.html.erb | 2 +- .../_annc_widget3.html.erb | 2 +- .../_annc_widget4.html.erb | 2 +- modules/custom_announcement/show.html.erb | 2 +- .../_event_news_widget1.html.erb | 2 +- .../_event_news_widget15.html.erb | 32 +- .../_event_news_widget2.html.erb | 2 +- .../_event_news_widget20.html.erb | 8 +- .../_event_news_widget21.html.erb | 12 +- .../_event_news_widget22.html.erb | 12 +- .../_event_news_widget3.html.erb | 2 +- .../_event_news_widget4.html.erb | 190 +- .../_event_news_widget5.html.erb | 2 + modules/event_news_mod/show.html.erb | 37 +- modules/event_news_mod/show2.html.erb | 37 +- modules/video_pro/_video_pro_widget1.html.erb | 2 +- modules/video_pro/_video_pro_widget2.html.erb | 2 +- modules/video_pro/_video_pro_widget3.html.erb | 2 +- modules/video_pro/_video_pro_widget4.html.erb | 2 +- modules/video_pro/_video_pro_widget5.html.erb | 2 +- modules/video_pro/_video_pro_widget6.html.erb | 2 +- modules/video_pro/video_pro_index1.html.erb | 2 +- modules/video_pro/video_pro_index2.html.erb | 2 +- .../video_pro/video_pro_index2_tag.html.erb | 2 +- modules/video_pro/video_pro_index3.html.erb | 2 +- modules/video_pro/video_pro_index4.html.erb | 2 +- .../video_pro_index_post_agency1.html.erb | 2 +- .../web_resource/_web_res_widget2.html.erb | 2 +- .../web_resource/_web_res_widget7.html.erb | 2 +- .../web_resource/_web_res_widget8.html.erb | 2 +- 83 files changed, 3025 insertions(+), 1474 deletions(-) create mode 100644 modules/announcement/_annc_widget27.html.erb create mode 100644 modules/announcement/_annc_widget28.html.erb create mode 100644 modules/announcement/_annc_widget30.html.erb create mode 100644 modules/announcement/_annc_widget31.html.erb diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 98f0224..efb1e89 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -964,7 +964,7 @@ $(this).append('網路資源標題'); } }); - $('input').each(function() { + $('input.input-search, .search-container input, .search-box input, #search input').each(function() { var $this = $(this); if (!$this.attr('title') || $this.attr('title').trim() === '') { $this.attr('title', '網內搜尋'); @@ -992,7 +992,7 @@ var isLinkImage = $parentA.length > 0 && $parentA.text().replace(/\u00a0/g, '').trim() === ""; // --- 1. 處理「裝飾性圖片」標註 --- - if (currentAlt === "announcement image" || currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片" || currentAlt === "這是一張圖片" || currentTitle === "這是一張圖片") { + if (currentAlt === "announcement image" || currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片" || currentAlt === "這是一張圖片" || currentTitle === "這是一張圖片"||currentAlt === "This is a image" ||currentTitle === "This is a image") { $img.attr('alt', ''); $img.removeAttr('title'); return; @@ -2183,27 +2183,28 @@ $(function() { }); //rucaptcha-image $(document).ready(function () { - $('.rucaptcha-image').removeAttr('onload'); - - // 檢查是否已插入過 - if (!$('#captcha_audio').length) { - const audioButton = $(` - - `); - - const audio = $(''); - - $('.rucaptcha-image').after(audioButton, audio); + // >>> 修正：先確認頁面上真的有驗證碼圖片，再往下執行，避免沒有驗證碼的頁面也發出多餘的 wav 請求 + if ($('.rucaptcha-image').length) { + $('.rucaptcha-image').removeAttr('onload'); + // 檢查是否已插入過 + if (!$('#captcha_audio').length) { + const audioButton = $(` + + `); + const audio = $(''); + $('.rucaptcha-image').after(audioButton, audio); + } } + // <<< 修正結束 }); //萬用表格searchbtn2 @@ -2226,6 +2227,28 @@ $(function() { // 預設 aria-expanded 為 false $(".searchbtn2").attr("aria-expanded", "false"); }); + // ✅ searchbtn2 Tab 鍵聚焦時自動展開 .searchbox + $(document).ready(function() { + function fixSearchbtn2FocusA11y() { + setTimeout(function() { + $('.searchbtn2').on('focus', function() { + var $searchbox = $('.searchbox'); + + // ✅ 只在收合狀態時才展開，不影響已展開的狀態 + if (!$searchbox.is(':visible')) { + $searchbox.slideDown(300, function() { + // ✅ 同步更新 aria-expanded（與原本 click 邏輯一致） + $('.searchbtn2').attr('aria-expanded', 'true'); + // ✅ 同步加上 ken-click2（與原本 click 邏輯一致） + $('.searchbtn2').closest('.ken-click').addClass('ken-click2'); + }); + } + }); + }, 500); + } + + fixSearchbtn2FocusA11y(); + }); // 強制保持全站search展開 $(document).ready(function () { @@ -3472,7 +3495,7 @@ function fixSortLinkA11y() { }); } function fixSearchInputA11y() { - $('input[type="search"], input[type="text"]').each(function () { + $('input[type="search"], input.input-search, .search-container input, .search-box input').each(function () { var $input = $(this); // 已有對應 label 就跳過 @@ -3573,4 +3596,82 @@ $(document).ready(function () { }); + //banner英文 + $(function() { + function fixBannerA11yByLang() { + setTimeout(function() { + var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase(); + var isEn = pageLang.startsWith('en'); + + var i18n = { + playControls: isEn ? 'Playback Controls' : '播放控制選項', + resume: isEn ? 'Play' : '繼續播放', + pause: isEn ? 'Pause' : '暫停播放', + prev: isEn ? 'Previous' : '上一張', + next: isEn ? 'Next' : '下一張', + slide: isEn ? 'Slide' : '第', + slideUnit: isEn ? '' : ' 張投影片' + }; + + $('.w-ba-banner').each(function() { + var $banner = $(this); + + // ✅ 播放控制選項 radiogroup label + $banner.find('.controlplay').attr('aria-label', i18n.playControls); + + // ✅ 繼續播放按鈕 + $banner.find('.resume-slide').attr({ + 'aria-label': i18n.resume, + 'title': i18n.resume + }); + $banner.find('.resume-slide p').text(i18n.resume); + + // ✅ 暫停播放按鈕 + $banner.find('.pause-slide').attr({ + 'aria-label': i18n.pause, + 'title': i18n.pause + }); + $banner.find('.pause-slide p').text(i18n.pause); + + // ✅ 上一張按鈕 + $banner.find('.prev-button').attr('aria-label', i18n.prev); + + // ✅ 下一張按鈕 + $banner.find('.next-button').attr('aria-label', i18n.next); + + // ✅ Pager 按鈕 + var $slides = $banner.find('.w-ba-banner__slide'); + $banner.find('.banner-pager button').each(function(index) { + var slideTitle = $slides.eq(index).data('cycle-title') || ''; + var ariaLabel = isEn + ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '') + : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : ''); + $(this).attr({ + 'aria-label': ariaLabel, + 'title': ariaLabel + }); + }); + }); + + // ✅ Cycle2 初始化後也重新處理 Pager（因為 pager 是動態產生的） + $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function() { + var $banner = $(this).closest('.w-ba-banner'); + var $slides = $banner.find('.w-ba-banner__slide'); + $banner.find('.banner-pager button').each(function(index) { + var slideTitle = $slides.eq(index).data('cycle-title') || ''; + var ariaLabel = isEn + ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '') + : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : ''); + $(this).attr({ + 'aria-label': ariaLabel, + 'title': ariaLabel + }); + }); + }); + + }, 800); + } + + fixBannerA11yByLang(); + }); }(jQuery, window)); diff --git a/assets/stylesheets/template/base/_accesskey.scss b/assets/stylesheets/template/base/_accesskey.scss index ba746e3..cbe1cdb 100644 --- a/assets/stylesheets/template/base/_accesskey.scss +++ b/assets/stylesheets/template/base/_accesskey.scss @@ -3,7 +3,7 @@ a[accesskey] { position: absolute; margin-left: -0.9375em; - color: transparent !important; + color: transparent; } .verticalhome{ a[accesskey] { diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss index 1888e31..24d6e08 100644 --- a/assets/stylesheets/template/base/_global.scss +++ b/assets/stylesheets/template/base/_global.scss @@ -6,6 +6,11 @@ .fa-classic, .fa-regular, .fa-solid, .far, .fas ,.fa{ font-family: var(--fa-style-family, "FontAwesome")!important; } +li#language-li { + @media(max-width:767px){ + display: none !important; + } +} #orbit-bar .orbit-bar-inner > label:focus, #orbit-bar .orbit-bar-inner > label.focus{ .orbit-bar-search-sign-language{ display: block diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss index b28bfdd..27b5324 100644 --- a/assets/stylesheets/template/modules/announcement.scss +++ b/assets/stylesheets/template/modules/announcement.scss @@ -8,11 +8,47 @@ // Announcement widget // ## Gerneral styles for widgets +#category_select_box{ + width: 160px; +} +.w-annc__wrap { + clear: both; +} +.w-annc{ + margin-top: 1em; + .nav_tabs_filter{ + justify-content: end; + @media(max-width:768px){ + width: 100%; + justify-content: flex-start; + } + } +} +h3.w-annc__widget-title { + float: left; +} +.w-annc .w-annc__category{ + padding: 0.15rem 0.6rem; + border-radius: 5px; + background-color: $theme-color-second; + color: #fff; + display: inline-block; +} +td.w-annc__category { + background-color: transparent !important; + color: #333 !important; +} +.w-annc__postdate-wrap,.w-annc__category-wrap{ + i{ + display: none; + } +} .article-thumbs { margin-bottom: 1em; } .w-annc__entry-title { padding: 0; + font-size: 1em; } .widget-title-a{ display: block; @@ -48,7 +84,7 @@ line-height: 1 !important; } .w-annc__status-wrap{ - display: flex; + // display: flex; } .i-annc__status-wrap{ float: left; @@ -56,16 +92,14 @@ .i-annc__th--date{ min-width: 6em; } -// .w-annc__th{ -// border-bottom:0.0625em solid #ddd!important; -// } + .w-annc tr { border: 0.0625em solid #ddd !important; } .w-annc__item{ padding-bottom: 1em; } -.w-annc .w-annc__subtitle{ +.w-annc .w-annc__subtitle,.w-annc p{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -102,12 +136,17 @@ } } .w-annc { + margin-bottom: 1em; position: relative; z-index: 1; + clear: both; .w-annc__widget-title { @extend .unity-title; display: block; } + .transitionfade { + border-radius: 1em; + } .w-annc__list { margin: 0; @@ -123,7 +162,6 @@ } .w-annc__postdate, .w-annc__category { - white-space: nowrap; @extend .i-subtitle; } .w-annc__status-wrap, @@ -136,6 +174,7 @@ position: relative; align-items: center; flex-wrap: wrap; + justify-content: space-between; .w-annc__postdate-wrap{ margin-right: 0.5em; } @@ -159,7 +198,7 @@ } .w-annc__subtitle { - @extend .i-title; + @extend .i-subtitle; color: $theme-color-main; } @@ -184,9 +223,59 @@ } } } - +.w-annc__item_inner{ + border-radius: 1em; +} +.w-annc__img-wrap { + border-radius: 1em; + overflow: hidden; +} +.w-annc__inner { + clear: both; +} +img.w-annc__img { + border: 1px solid #cacaca; + border-radius: 1em; +} +.w-annc__postdate { + min-width: 7.5em; +} +.w-annc__table{ + @media(max-width:768px){ + thead{ + display: none; + } + } +} +.i-annc__item_inner{ + border-radius: 1em; +} +.i-annc__img-wrap { + border-radius: 1em; + overflow: hidden; +} +.i-annc__inner { + clear: both; +} +.i-annc__img { + border: 1px solid #cacaca; + border-radius: 1em; +} +.i-annc__postdate-wrap { + min-width: 6.5em; +} +.i-annc__table{ + @media(max-width:768px){ + thead{ + display: none; + } + } +} // Widget-1 .widget-announcement-1 { + .w-annc .w-annc__subtitle,.w-annc p{ + -webkit-line-clamp: 6!important; + } .w-annc__more-wrap{ display: none; } @@ -201,11 +290,15 @@ position: relative !important; } } + .w-annc__content-wrap{ + padding: 1em; + } .w-annc__item{ background-color: #fff; border: 1px solid #dedcdc; margin-bottom: 1em; padding: 0; + border-radius: 1em; &:hover{ transition: all .3s; transform: translate(-5px, -10px); @@ -214,7 +307,6 @@ } } .w-annc__entry-title{ - display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -225,16 +317,17 @@ padding: 1em; display: none; } - .w-annc__subtitle{ - padding:1em; - } - .w-annc__entry-title{ - padding: 0 1em; - } } // Widget-2 .widget-announcement-2 { + .w-annc .w-annc__subtitle,.w-annc p{ + -webkit-line-clamp: 6!important; + } + .widget-title-a-inner{ + display: block; + padding-top: 0.2em; + } // @media(min-width: 768px){ // .col-sm-4{ // width: 33.33333333%; @@ -247,9 +340,9 @@ // } .w-annc__item{ margin-bottom: 1em; - padding: 0; + padding: 0.2em; overflow: hidden; - padding-bottom: 0; + border-radius: 1em; &:hover{ transition: all .3s; transform: translate(-5px, -10px); @@ -257,11 +350,12 @@ overflow: hidden; } } - .w-annc__img-wrap { + .i-annc__img-wrap { + padding: 0; - aspect-ratio: 16 / 9; } .w-annc__content-wrap { + padding: 1em; @media(max-width: $screen-xs){ padding-right: 0.9375em; padding-left: 0.9375em; @@ -269,6 +363,10 @@ } .w-annc__img-wrap { margin:0; + overflow: hidden; + aspect-ratio: 16 / 9; + padding: 0; + } .w-annc__title { @@ -278,7 +376,12 @@ // Widget-3 .widget-announcement-3 { - .w-annc__img-wrap { + .w-annc .w-annc__subtitle,.w-annc p{ + -webkit-line-clamp: 6!important; + } + .i-annc__img-wrap { + overflow: hidden; + aspect-ratio: 16 / 9; padding: 0; } .w-annc__item{ @@ -286,6 +389,7 @@ padding: 0; overflow: hidden; padding-bottom: 0; + border-radius: 1em; &:hover{ transition: all .3s; transform: translate(-5px, -10px); @@ -294,7 +398,7 @@ } } .w-annc__content-wrap { - padding-top: 1em; + padding: 1em; @media(max-width: $screen-xs){ padding-right: 0.9375em; padding-left: 0.9375em; @@ -305,6 +409,9 @@ } .w-annc__img-wrap { margin:0; + overflow: hidden; + aspect-ratio: 16 / 9; + padding: 0; } .w-annc__title { @@ -324,7 +431,7 @@ text-overflow: ellipsis; white-space: normal; } - .w-annc__more { margin-top: 1.5em; } + .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } @@ -474,7 +581,7 @@ white-space: normal; } .w-annc__widget-title { text-align: center; } - .w-annc__more { margin-top: 1.5em; } + .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } @@ -549,7 +656,7 @@ } } } - .w-annc__subtitle{ + .w-annc__subtitle,p{ color: #fff; font-size: 1rem; display: -webkit-box; @@ -563,6 +670,8 @@ opacity: 0; -webkit-transition: max-height .6s,opacity .6s; transition: max-height .6s,opacity .6s; + padding-bottom: 0; + margin-bottom: 0; @media(min-width:1920px){ font-size: 1.2em; } @@ -591,7 +700,7 @@ .card:before{ height:100%; } - .w-annc__subtitle{ + .w-annc__subtitle,p{ max-height: 100px; opacity: 1; } @@ -682,7 +791,7 @@ white-space: normal; } .w-annc__widget-title { text-align: center; } - .w-annc__more { margin-top: 1.5em; } + .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } @@ -693,6 +802,7 @@ } .w-annc__content-wrap{ padding: 1.5em; + color: #fff; div{ display: -webkit-box; overflow: hidden; @@ -765,7 +875,7 @@ } } } - .w-annc__subtitle{ + .w-annc__subtitle,p{ color: #fff; font-size: 1rem; display: -webkit-box; @@ -779,6 +889,8 @@ opacity: 0; -webkit-transition: max-height .6s,opacity .6s; transition: max-height .6s,opacity .6s; + padding-bottom: 0; + margin-bottom: 0; @media(min-width:1920px){ font-size: 1.2em; } @@ -804,7 +916,7 @@ .card:before{ height:100%; } - .w-annc__subtitle{ + .w-annc__subtitle,p{ max-height: 100px; opacity: 1; } @@ -849,10 +961,11 @@ } .w-annc__subtitle{ - -webkit-line-clamp: 2; + -webkit-line-clamp: 2; } .w-annc__content-wrap{ width: 100%; + padding: 1em; } .w-annc__list{ display: flex; @@ -866,7 +979,7 @@ padding:0.5em 1em; } h4,p{ - padding: 0 1em; + padding: 0; } .w-annc__title { font-family: $main-font; @@ -903,7 +1016,7 @@ margin-left: 0.5em; margin-bottom: 1em; padding: 0; - display: flex!important; + border-radius: 1em; @media(min-width: 768px){ width: calc(50% - 1.25em)!important; // --heightC: 50vh; @@ -1018,7 +1131,7 @@ font-family: $main-font; } .w-annc__widget-title { text-align: center; } - .w-annc__more { margin-top: 1.5em; } + .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } @@ -1039,11 +1152,6 @@ -webkit-box-orient: vertical; } } - .clearfix{ - // text-align: center; - // display: flex; - // justify-content: center; - } .w-annc__subtitle { display: -webkit-box; -webkit-line-clamp: 2; @@ -1053,6 +1161,7 @@ } .w-annc__content-wrap { display: inline-block; + color: #fff; &:after { content: ''; display: block; @@ -1096,14 +1205,6 @@ box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; } - img{ - // transform: scale(1.2)!important; - // -webkit-transition: .3s ease-out; - // -moz-transition: .3s ease-out; - // -ms-transition: .3s ease-out; - // -o-transition: .3s ease-out; - // transition: .3s ease-out; - } .transitionfade{ height: inherit; position: absolute; @@ -1120,7 +1221,7 @@ } } } - .w-annc__subtitle{ + .w-annc__subtitle,p{ color: #fff; font-size: 1rem; display: -webkit-box; @@ -1134,6 +1235,8 @@ opacity: 0; -webkit-transition: max-height .6s,opacity .6s; transition: max-height .6s,opacity .6s; + padding-bottom: 0; + margin-bottom: 0; @media(min-width:1920px){ font-size: 1.2em; } @@ -1211,7 +1314,7 @@ .card:before{ height:100%; } - .w-annc__subtitle{ + .w-annc__subtitle,p{ max-height: 100px; opacity: 1; } @@ -1250,300 +1353,14 @@ transition: height .6s; } } -//widget-25 -.widget-announcement-25 { - .w-annc__widget-title{ - span{ - display: block; - } - } - .w-annc__more-wrap{ - display: flex; - justify-content: center; - } - .btn-right,.btn-left{ - &:hover{ - background: #e5e5e5!important; - } - } - @media(min-width:1024px){ - .prevnext{ - width: 8% !important; - left: 10%; - } - display: flex; - flex-wrap: wrap; - .w-annc__more-wrap{ - width:29%; - display: flex; - justify-content: center; - } - .w-annc__list{ - width:71%; - } - } - .w-annc__item{ - padding: 0; - margin-right: 1em; - overflow: hidden; - position: relative !important; - @media(min-width: 1600px){ - height: 28em; - .w-annc__img-wrap{ - height: 28em; - } - } - @media(min-width: $screen-xs)and(max-width: 1599px){ - height: 20em; - .w-annc__img-wrap{ - height: 20em; - } - } - @media(max-width: $screen-xs){ - height: 20em; - .w-annc__img-wrap{ - height: 20em; - } - } - } - .w-annc__item{ - box-shadow:none!important; - -webkit-box-shadow:none!important; - } - .w-annc__entry-title{ - margin: 0; - width: 100%; - } - .w-annc__meta i{ - color: #fff!important; - } - .w-annc__list{ - display: flex; - justify-content: center; - } - .w-annc__postdate-wrap{ - color: #fff!important; - } - .w-annc__status-wrap{ - color: #fff!important; - } - .w-annc__category-wrap{ - color: #fff!important; - } - - .w-annc__title{ - color: #fff; - } - .w-annc__title { - font-family: $main-font; - white-space: normal; - } - .w-annc__widget-title { text-align: center; } - .w-annc__more { margin-top: 1.5em; } - .w-annc__list > .w-annc__item:nth-child(3n+1) { - clear: both; - } - - .w-annc__img-wrap { - margin:0; - height: auto; - } - .w-annc__content-wrap{ - padding: 1.5em; - div{ - display: -webkit-box; - overflow: hidden; - text-overflow: ellipsis; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } - } - .clearfix{ - // text-align: center; - // display: flex; - // justify-content: center; - } - .w-annc__subtitle { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - } - .w-annc__content-wrap { - display: inline-block; - &:after { - content: ''; - display: block; - margin-top: 5px; - height: 4px; - width: 0; - background: transparent; - transition: width .5s ease, background-color .5s ease; - } - } - .w-annc__item{ - padding: 0.5em; - margin: 0!important; - } - .w-annc__item_inner{ - background: #fff; - -webkit-transition: .3s all ease; - -o-transition: .3s all ease; - transition: .3s all ease; - -webkit-box-shadow:none!important; - box-shadow:none!important; - margin: 0; - margin-bottom: 1em; - overflow: hidden; - } - .w-annc__item_inner{ - &:hover{ - -webkit-transform: translateY(-6px); - -ms-transform: translateY(-6px); - transform: translateY(-6px); - img{ - // transform: scale(1.2)!important; - // -webkit-transition: .3s ease-out; - // -moz-transition: .3s ease-out; - // -ms-transition: .3s ease-out; - // -o-transition: .3s ease-out; - // transition: .3s ease-out; - } - .transitionfade{ - height: inherit; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0,0,0,.4); - -webkit-transition: .3s ease-out; - -moz-transition: .3s ease-out; - -ms-transition: .3s ease-out; - -o-transition: .3s ease-out; - transition: .3s ease-out; - } - } - } - .w-annc__item{ - &:hover{ - -webkit-transform: translateY(-6px); - -ms-transform: translateY(-6px); - transform: translateY(-6px); - .card{ - top: 0; - display: flex; - align-items: end; - flex-wrap: wrap; - } - img{ - transform: scale(1.2)!important; - -webkit-transition: .3s ease-out; - -moz-transition: .3s ease-out; - -ms-transition: .3s ease-out; - -o-transition: .3s ease-out; - transition: .3s ease-out; - } - .transitionfade{ - height: inherit; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0,0,0,.4); - -webkit-transition: .3s ease-out; - -moz-transition: .3s ease-out; - -ms-transition: .3s ease-out; - -o-transition: .3s ease-out; - transition: .3s ease-out; - } - } - } - .w-annc__subtitle{ - color: #fff; - font-size: 1rem; - display: -webkit-box; - overflow: hidden; - text-overflow: ellipsis; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: 0; - opacity: 0; - -webkit-transition: max-height .6s,opacity .6s; - transition: max-height .6s,opacity .6s; - @media(min-width:1920px){ - font-size: 1.2em; - } - } - .w-annc__item{ - margin-right: 1em; - overflow: hidden; - position: relative !important; - @media(min-width: 1600px){ - height: 28em; - .w-annc__img-wrap{ - height: 28em; - } - } - @media(min-width: $screen-xs)and(max-width: 1599px){ - height: 20em; - .w-annc__img-wrap{ - height: 20em; - } - } - @media(max-width: $screen-xs){ - height: 20em; - .w-annc__img-wrap{ - height: 20em; - } - } - } - li{ - &:hover{ - .card:before{ - height:100%; - } - .w-annc__subtitle{ - max-height: 100px; - opacity: 1; - } - } - position: relative; - } - .card{ - position: absolute; - z-index:0; - padding: 30px 25px; - bottom: 0; - left: 0; - background-color: transparent; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080)); - background-image: linear-gradient( - 180deg - , #ffffff00 2%, #00000080 89%); - width: 100%; - } - .card:before{ - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 8px; - background-color: #00356aab; - z-index: -1; - -webkit-transition: height .6s; - transition: height .6s; - } -} // Widget-26 .widget-announcement-26 { + .status-top i{ + color: #fff!important; + } + .widget-title-a { + display: inline!important; + } .w-annc__item{ padding: 0; } @@ -1563,7 +1380,7 @@ font-size: 1.6rem!important; } } - .w-annc__subtitle{ + .w-annc__subtitle,p{ color: #fff; font-size: 1rem; display: -webkit-box; @@ -1577,6 +1394,8 @@ opacity: 0; -webkit-transition: max-height .6s,opacity .6s; transition: max-height .6s,opacity .6s; + padding-bottom: 0; + margin-bottom: 0; @media(min-width:1920px){ font-size: 1.2em; } @@ -1624,7 +1443,7 @@ .card:before{ height:100%; } - .w-annc__subtitle{ + .w-annc__subtitle,p{ max-height: 100px; opacity: 1; } @@ -1676,11 +1495,9 @@ padding: 30px 25px; bottom: 0; left: 0; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080)); - background-image: linear-gradient( - 180deg - , #ffffff00 2%, #00000080 89%); + background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2%, rgba(0, 0, 0, 0.501961) 89%); width: 100%; + color: #fff; } .card:before{ content: ""; @@ -1695,6 +1512,369 @@ transition: height .6s; } } +// widget 27 +.widget-announcement-27 { + .btn-right,.btn-left{ + background-color: $theme-color-second; + &:hover{ + background: rgba(0, 0, 0, 0.45) !important; + } + } + .w-annc__list { + display: flex; + flex-wrap: wrap; + width: 100%; + justify-content: flex-start; + gap: 1rem; + padding: 0 2.5rem; + box-sizing: border-box; + } + + .w-annc__item { + overflow: hidden; + background-color: #fff; + border: none; + border-left: 4px solid $theme-color-second; + border-radius: 6px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); + transition: box-shadow 0.25s ease, transform 0.25s ease; + margin: 0; + padding: 0; + display: flex !important; + flex-direction: column; + box-sizing: border-box; + + @media(min-width: 1025px) { + width: calc(33.333% - 0.7rem) !important; + } + @media(max-width: 1024px)and(min-width:480px) { + width:calc(50% - 0.7rem) !important; + } + @media(max-width: 480px) { + width: 100% !important; + } + + &:hover { + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); + transform: translateY(-2px); + } + } + + .w-annc__content-wrap { + width: 100%; + display: flex; + flex-direction: column; + padding: 1em; + } + .w-annc__status-wrap{ + @media(max-width:1900px){ + width: 100%; + } + } + .w-annc__meta { + background: none; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0; + + } + .w-annc__category-wrap { + margin-left: auto; + padding-left: 0.5rem; + } + + .w-annc__category { + color: #fff; + } + .w-annc__postdate-wrap { + display: block; + } + + .w-annc__postdate { + color: #535353; + } + + h4, .w-annc__entry-title { + padding: 0; + margin: 0.2rem 0 0.6rem; + } + + .w-annc__title { + font-family: $main-font; + font-weight: 700; + color: #1a1a1a; + line-height: 1.5; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-decoration: none; + + &:hover { + color: $theme-color-second; + } + } + + // 描述隱藏 + .w-annc__subtitle { + display: none; + } + + // 左右箭頭美化 + .btn-left, + .btn-right { + &:hover { + background: rgba(0, 0, 0, 0.45) !important; + } + + &:focus { + outline: 2px solid #2980b9; + outline-offset: 2px; + } + } + + // 標題區 + .w-annc__widget-title { + float: left; + } + + .w-annc__more-wrap { + @media(max-width: 768px) { + display: none; + } + } + + // RWD 手機 + @media(max-width: 767px) { + .w-annc__list { + padding: 0; + } + + .w-annc__item { + margin-bottom: 0.75rem; + } + } +} +// Widget-30 +.widget-announcement-30 { + .w-annc__item{ + &:hover{ + .w-annc__subtitle{ + opacity: 1; + transition: max-height .6s, opacity .6s; + max-height: 100px; + } + } + } + .w-annc__list { + @media(min-width: $screen-sm) { + display: grid; + grid-template-areas: + "g1 g2 g3" + "g1 g4 g5"; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 1.25rem; + } + + @media(max-width: $screen-sm-max) { + display: flex; + } + + li { + list-style: none; + + >a{ + @media(min-width:769px){ + background: #ffffff; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + transition: box-shadow 0.2s ease, transform 0.2s ease; + border-radius: 12px; + overflow: hidden; + } + + &:hover { + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); + transform: translateY(-2px); + } + } + + + + &:nth-child(1) { grid-area: g1; } + &:nth-child(2) { grid-area: g2; } + &:nth-child(3) { grid-area: g3; } + &:nth-child(4) { grid-area: g4; } + &:nth-child(5) { grid-area: g5; } + + // 第一張大卡：圖片佔滿上半，文字在下 + &:nth-child(1) { + display: flex; + flex-direction: column; + + .w-annc__img-wrap { + flex: 1; + min-height: 200px; + } + + .w-annc__title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.3; + } + + .w-annc__subtitle { + font-size: 1.2rem; + min-height: 187px; + opacity: 1; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; + } + } + + // 小卡：圖片在上，內容在下 + &:nth-child(n+2) { + display: flex; + flex-direction: column; + + .w-annc__img-wrap { + height: 200px; + flex-shrink: 0; + } + + .w-annc__title { + font-weight: 600; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + } + } + } + + // 圖片滿版 + .w-annc__img-wrap { + overflow: hidden; + + a { + display: block; + height: 100%; + } + + img { + width: 100% !important; + height: 100% !important; + object-fit: cover; + display: block; + position: relative !important; + margin: 0 !important; + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.03); + } + } + + .card { + padding: 1rem 1.25rem; + flex: 1; + display: flex; + flex-direction: column; + gap: 0.4rem; + background: #ffffff; + z-index: 2; + width: 100%; + box-sizing: border-box; + } + + .w-annc__category { + display: inline-block; + padding: 0.15rem 0.6rem; + border-radius: 20px; + font-weight: 600; + background: #ffe0ec; + color: #c0155a; + } + + .w-annc__meta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.4rem; + margin-bottom: 0.3rem; + i { + display: none; + } + } + + .w-annc__postdate { + color: #535353; + } + + .w-annc__title { + color: #1a1a1a; + text-decoration: none; + font-family: $main-font; + + &:hover { + color: #c0155a; + } + } + + .w-annc__entry-title { + margin: 0.2rem 0; + min-height: 3em; + } + + .w-annc__subtitle { + margin: 0; + font-size: 0.9rem; + color: #555; + line-height: 1.6; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + max-height: 0; + opacity: 0; + transition: max-height 0.6s, opacity 0.6s; + } + + .w-annc__item { + margin-bottom: 0; + padding-bottom: 0 !important; + } + + // 更多按鈕 + .w-annc__more-wrap { + margin-top: 1rem; + } + + // RWD 手機版 + @media(max-width: $screen-sm-max) { + .w-annc__list li { + margin-bottom: 0; + + + .w-annc__img-wrap { + height: 200px; + } + + .w-annc__subtitle { + max-height: 100px; + opacity: 1; + } + } + } +} // Widget-5 .widget-announcement-5 { .w-annc__title { @@ -1718,9 +1898,14 @@ // Widget-6 .widget-announcement-6 { - + background: #f5f5f5; + border-radius: 1em; + padding: 1em; + margin-bottom: 1em; .w-annc__entry-title { + @media(min-width: 769px){ margin: 0; + } } @@ -1749,6 +1934,10 @@ // Widget-7 .widget-announcement-7 { + background: #f5f5f5; + border-radius: 1em; + padding: 1em; + margin-bottom: 1em; .w-annc__item { &:hover{ background-color:#adb5bd33; @@ -1768,7 +1957,9 @@ } .w-annc__entry-title { + @media(min-width: 769px){ margin: 0; + } } // .w-annc__category-wrap, @@ -1779,7 +1970,15 @@ display: inline-block; } } - +// Widget-31 +.widget-announcement-31 { + .w-annc__category-wrap,.w-annc__postdate-wrap{ + width: fit-content; + @media(max-width: 768px){ + padding: 0.5em; + } + } +} // ## Gerneral styles for table widgets @@ -1787,29 +1986,58 @@ // Widget-8 // ## Table .widget-announcement-8 { - td{ + @media(min-width:769px){ + .w-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .w-annc__th--category, + .w-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .w-annc__th--date, + .w-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + + td { padding-bottom: 0.8em; padding-top: 0.8em; } - .w-annc__th{ + + .w-annc__th { white-space: nowrap; - @media(max-width: $screen-xs){ + background: #fff; + + @media(max-width: $screen-xs) { width: 100%; } } + .w-annc__item { - &:hover{ - background-color:#adb5bd33; - padding-left: 1rem; - -webkit-transition: .3s ease-out; - -moz-transition: .3s ease-out; - -ms-transition: .3s ease-out; - -o-transition: .3s ease-out; - transition: .3s ease-out; - } - } - .w-annc__th { - background: #fff; + &:hover { + background-color: #adb5bd33; + padding-left: 1rem; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } } .w-annc__status { @@ -1828,7 +2056,36 @@ // Widget-9 .widget-announcement-9 { - td{ + @media(min-width:769px){ + .w-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .w-annc__th--category, + .w-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .w-annc__th--date, + .w-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + + + td { padding-bottom: 0.8em; padding-top: 0.8em; } @@ -2010,14 +2267,17 @@ // Widget-14 .widget-announcement-14 { + .w-annc__img{ + height: auto; + } .w-annc__inner{ @media(min-width:769px){ display: flex; } } - .w-annc__img-wrap{ + .w-annc__list{ @media(min-width:769px){ - padding-right: 1em!important; + padding-left: 1em!important; } } .w-annc__img-wrap { @@ -2047,6 +2307,10 @@ } //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; } @@ -2065,6 +2329,7 @@ display: flex; flex-direction: column; flex: 1; /* 內容區塊自動填滿剩餘空間 */ + white-space: normal; } .w-annc__item{ @media (max-width: $screen-xs) { @@ -2083,7 +2348,7 @@ .w-annc__title { font-family: $main-font; } - .w-annc__more { margin-top: 1.5em; } + .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } @@ -2094,10 +2359,9 @@ // } .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; @@ -2139,6 +2403,37 @@ } //Widget 16 .widget-announcement-16 { + img.w-annc__img{ + height: auto; + } + .prev-button{ + float: left; + height: 2.5em; + width: 2.5em; + position: absolute; + transition: 0.3s; + left: 0.6%; + color: rgb(255, 255, 255); + border-radius: 50%; + } + .next-button{ + float: right; + height: 2.5em; + width: 2.5em; + position: absolute; + transition: 0.3s; + right: 0.6%; + color: rgb(255, 255, 255); + border-radius: 50%; + } + .prev-button,.next-button{ + background-color: $theme-color-second; + border-radius: 2em; + color: #fff; + &:hover{ + background: rgba(0, 0, 0, 0.45) !important; + } + } .w-annc__item{ // padding-right: 1em; } @@ -2195,6 +2490,7 @@ } // Widget-18 .widget-announcement-18 { + .w-annc__title { font-family: $main-font; display: -webkit-box; @@ -2204,9 +2500,9 @@ text-overflow: ellipsis; white-space: normal; } - .w-annc__entry-title { - height: 2em; - } + // .w-annc__entry-title { + // height: 2em; + // } .w-annc__img-wrap { aspect-ratio: 16 / 9; margin:0; @@ -2220,6 +2516,9 @@ @media(min-width: 769px){ width: calc(33.3333% - 2em); } + @media(max-width:768px)and (min-width:$screen-xs){ + width: calc(50% - 1em); + } @media (min-width: $screen-xs) { margin-right: 0.5em; margin-left: 0.5em; @@ -2282,9 +2581,6 @@ .w-annc__title{ white-space: normal; } - .cycle-carousel-wrap{ - display: flex; - } .w-annc__th{ white-space: nowrap; @media(max-width: $screen-xs){ @@ -2296,14 +2592,12 @@ font-family: $main-font; } .w-annc__widget-title { float: left; } - .w-annc__more { margin-top: 1.5em; } + .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } .w-annc__list { - justify-content: center; - display: flex; @media(max-width: 768px){ align-items: baseline; } @@ -2317,30 +2611,84 @@ overflow: hidden; } .w-annc__item{ - padding: 30px 40px!important; + vertical-align: top; + @media(max-width:768px){ + width: 100%!important; + } + .w-annc__content-wrap{ + padding:1em; margin-bottom: 1em; margin-top: 1em; - border-radius: 30px!important; + border-radius: 6px; background: rgba(255,255,255,0.6)!important; box-shadow: 0px 0px 4px 0px #00000033!important; margin-right: 0.5em; margin-left: 0.5em; height: 14em; - @media(min-width: $screen-lg){ - width:582px !important; + white-space: normal; + border-left: 4px solid $theme-color-second; } - @media(max-width: 1025px)and(min-width: 821px){ - width: 30.5vw !important; +} + + +} +//widget 28 +.widget-announcement-28 { + .btn-right,.btn-left{ + background-color: $theme-color-second; + &:hover{ + background: rgba(0, 0, 0, 0.45) !important; + } } - @media(max-width: 820px)and(min-width: $screen-xs){ - width: 356px!important; + .w-annc__title{ + white-space: normal; } - @media (max-width: $screen-xs) { - width: 89vw !important; - margin-left: 0.5em !important; - margin-right: 0.5em !important; - } + .w-annc__th{ + white-space: nowrap; + @media(max-width: $screen-xs){ + width: 100%; + } + } + overflow: hidden; + .w-annc__title { + font-family: $main-font; } + .w-annc__widget-title { float: left; } + + .w-annc__list > .w-annc__item:nth-child(3n+1) { + clear: both; + } + + .w-annc__list { + @media(max-width: 768px){ + align-items: baseline; + } + } +.w-annc__subtitle{ + -webkit-line-clamp: 2; +} + .w-annc__img-wrap { + height: 13.5em; + margin: 0 0 1em 0; + overflow: hidden; + } +.w-annc__item{ + vertical-align: top; + .w-annc__content-wrap{ + padding:1em; + margin-bottom: 1em; + margin-top: 1em; + border-radius: 6px; + background: rgba(255,255,255,0.6)!important; + box-shadow: 0px 0px 4px 0px #00000033!important; + margin-right: 0.5em; + margin-left: 0.5em; + height: 14em; + white-space: normal; + border-left: 4px solid $theme-color-second; + } +} + } // widget-23 @@ -2489,7 +2837,7 @@ .i-annc__category, .i-annc__view-count { font-family: $main-font; - @extend .i-title; + @extend .i-subtitle; } .i-annc__status{ margin-right: 0.5em; @@ -2559,13 +2907,13 @@ } .i-annc__entry-title { - margin-bottom: 0; - margin-top: 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - text-overflow: ellipsis; - overflow: hidden; + // margin-bottom: 0; + // margin-top: 0; + // display: -webkit-box; + // -webkit-line-clamp: 2; + // -webkit-box-orient: vertical; + // text-overflow: ellipsis; + // overflow: hidden; // clear: both; } @@ -2582,9 +2930,11 @@ // control datatable css table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before { background-color: $theme-color-second !important; + display: none; } table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before { background-color: $theme-gray !important; + display: none; } .i-annc__table .child span.dtr-data li { padding: 0 0.5em; @@ -2601,8 +2951,19 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__item { margin-bottom: 0; padding-bottom: 0.8em; - border-bottom: 0.0625em solid #ddd; - width: 100%; + width: 100%; + &:hover{ + background-color: #adb5bd33; + padding-left: 1rem; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } + } + .i-annc__postdate-wrap,.i-annc__category-wrap{ + width:fit-content; } // .i-annc__title { // &:before { @@ -2617,12 +2978,12 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__category-wrap, .i-annc__postdate-wrap { - @extend .i-title; + @extend .i-subtitle; color: #666666; } .i-annc__status { - @extend .i-title; + @extend .i-subtitle; } } @@ -2634,11 +2995,19 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__item { margin-bottom: 0; padding-bottom: 0.8em; - border-bottom: 0.0625em solid #ddd; float: none; + &:hover{ + background-color: #adb5bd33; + padding-left: 1rem; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } } - .i-annc__title { - + .i-annc__postdate-wrap,.i-annc__category-wrap{ + width:fit-content; } .i-annc__entry-title { @@ -2659,8 +3028,28 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl // Index-5 .index-announcement-5{ + .i-annc__img-wrap { + margin:0; + overflow: hidden; + aspect-ratio: 16 / 9; + padding: 0; + + } .i-annc__item { width: 100%; + &:hover{ + .i-annc__title{ + color:$theme-color-second; + } + .i-annc__img{ + transform: scale(1.05) !important; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } + } } .i-annc__content-wrap{ @media(max-width: 768px){ @@ -2673,8 +3062,28 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } // Index-6 .index-announcement-6 { + .i-annc__img-wrap { + margin:0; + overflow: hidden; + aspect-ratio: 16 / 9; + padding: 0; + + } .i-annc__item { width: 100%; + &:hover{ + .i-annc__title{ + color:$theme-color-second; + } + .i-annc__img{ + transform: scale(1.05) !important; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } + } } .i-annc__title { font-family: $main-font; @@ -2684,6 +3093,19 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .index-announcement-7 { .i-annc__item{ border:0; + &:hover{ + .i-annc__title{ + color:$theme-color-second; + } + .i-annc__img{ + transform: scale(1.05) !important; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } + } } .i-annc__list { display: flex; @@ -2816,12 +3238,66 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl // Index-10 .index-announcement-10 { +} +table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control{ + padding-left:1em; +} +table.dataTable>tbody>tr.child ul.dtr-details{ + width: 100%; } // Index-11 .index-announcement-11 { - table{ - border: 0.0625em solid #ddd !important; -} + .i-annc__category{ + display: table-cell!important; + } + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + @media(min-width:769px){ + table{ + border: 0.0625em solid #ddd !important; + } + } + @media(max-width:768px){ + tr{ + margin-bottom: 1em; + } + td{ + border: 0; + } + } + @media (max-width: 768px) { + .i-annc__view-count::before { + font-family: "Font Awesome 6 Free"; + font-weight: 400; + content: "\f06e"; /* fa-eye (regular) */ + margin-right: 4px; + } + } .child{ li{ @@ -2836,22 +3312,93 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl width:50%!important; } } - table tr{ - flex-wrap: unset!important; - } } -// .dtr-details{ -// display: flex!important; -// li{ -// width: 50%; -// } -// } + // Index-12 .index-announcement-12 { + table.dataTable > tbody > tr.child { + padding: 0; + display: none; + } + td{ + display: table-cell!important; + } + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + @media(min-width:769px){ + table{ + border: 0.0625em solid #ddd !important; + } + } + @media(max-width:768px){ + tr{ + margin-bottom: 1em; + } + td{ + border: 0; + } + } + @media (max-width: 768px) { + .i-annc__view-count::before { + font-family: "Font Awesome 6 Free"; + font-weight: 400; + content: "\f06e"; /* fa-eye (regular) */ + margin-right: 4px; + } + } - table{ - border: 0.0625em solid #ddd !important; -} .child{ li{ list-style: none; @@ -2865,14 +3412,35 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl width:50%!important; } } - table tr{ - flex-wrap: unset!important; - } } // Index-13 .index-announcement-13 { - thead{ + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } } .child{ li{ @@ -2889,14 +3457,35 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl border: 0; } } - table tr{ - flex-wrap: unset!important; - } } // Index-14 .index-announcement-14 { - thead{ - // border-bottom: 0.125em solid #ddd; + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } } .child{ li{ @@ -2913,15 +3502,91 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl border: 0; } } - table tr{ - flex-wrap: unset!important; - } } // Index-15 .index-announcement-15 { - table{ + table.dataTable > tbody > tr.child { + padding: 0; + display: none; + } + td{ + display: table-cell!important; + } + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + + @media(min-width:769px){ + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + // 類別欄：縮到剛好容納內容 + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + // 日期欄：同樣縮到最小 + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + @media(min-width:769px){ + table{ border: 0.0625em solid #ddd !important; -} + } + } + @media(max-width:768px){ + tr{ + margin-bottom: 1em; + } + td{ + border: 0; + } + } + @media (max-width: 768px) { + .i-annc__view-count::before { + font-family: "Font Awesome 6 Free"; + font-weight: 400; + content: "\f06e"; /* fa-eye (regular) */ + margin-right: 4px; + } + } .child{ li{ list-style: none; @@ -2937,31 +3602,119 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl border: 0; } } - table tr{ - flex-wrap: unset!important; - } } // Index-16 .index-announcement-16 { - table{ - border: 0.0625em solid #ddd !important; -} - li{ - list-style: none!important; + table.dataTable > tbody > tr.child { + padding: 0; + display: none; + } + td { + display: table-cell !important; + } + + @media(min-width: 769px) { + .i-annc__table { + table-layout: auto !important; } - @media(max-width: $screen-xs){ - .i-annc__th--date{ - width:50%!important; - border: 0; + + th, td { + width: auto; } - .i-annc__th--title{ - width:50%!important; + + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-right: 1em; + } + + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + + @media(min-width: 769px) { + .i-annc__table { + table-layout: auto !important; + } + + th, td { + width: auto; + } + + .i-annc__th--category, + .i-annc__category { + width: 1% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + + .i-annc__th--date, + .i-annc__postdate { + width: 10% !important; + white-space: nowrap; + padding-left: 1em; + padding-right: 1em; + } + } + + @media(min-width: 769px) { + table { + border: 0.0625em solid #ddd !important; + } + } + + @media(max-width: 768px) { + tr { + margin-bottom: 1em; + } + td { border: 0; } } - table tr{ - flex-wrap: unset!important; + + @media (max-width: 768px) { + .i-annc__view-count::before { + font-family: "Font Awesome 6 Free"; + font-weight: 400; + content: "\f06e"; + margin-right: 4px; + } + .i-annc__th { + border: 0 !important; + } + .i-annc__files,.i-annc__links{ + display:flex !important; + } + [data-list="bulletin_files"],[data-list="bulletin_links"]{ + width: 80%; + } + // ✅ 新增：RWD < 769 時顯示 data-label 作為前綴標題 + .i-annc__files[data-label]::before, + .i-annc__links[data-label]::before { + content: attr(data-label); + display: inline-block; + font-weight: bold; + margin-right: 0.5em; + color: #333; + font-size: 1em; + background: #ccc; + height: fit-content; + padding: 0.2em; + border-radius: 0.2em; + } } + + li { + list-style: none !important; + } + td ul { margin: 0; padding: 0; @@ -3007,6 +3760,20 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } // Index-21 .index-announcement-21{ + + .i-annc__postdate-wrap{ + margin-right: 0!important; + justify-content: center; + border-radius: 1em; + overflow: hidden; + min-width: unset; + } + .i-annc__meta{ + justify-content: center; + padding: 0; + margin-bottom: 1em; + + } @media(min-width: 768px)and(max-width: 1023px){ .col-sm-10{ width:73.333333%; @@ -3015,20 +3782,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .col-sm-2{ width: 16.66666667%; float: left; - max-width: 150px; - min-width: 150px; - } - } - @media(min-width:1024px){ - .col-sm-10{ - width: 83.33333333%; - float: left; - } - .col-sm-2{ - width: 16.66666667%; - float: left; - max-width: 150px; - min-width: 150px; } } .i-annc__item{ @@ -3052,9 +3805,197 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } // Announcement show + .s-annc__related-file { + margin-bottom: 0.9375em; + } + + .s-annc__related-file, + .s-annc__related-link { + padding-bottom: 0.375em; + padding-left: 0; + list-style: none; + + i { + margin:0; + color: darken($theme-gray-light, 10%); + margin-right: 0.5em; + } + } + + .s-annc__related-link-list, + .s-annc__related-file-list { + display: inline-block; + width: 100%; + } + .s-annc__flie-title{ + width: 100%; + } + .s-annc__flie-title,.s-annc__link-title { + padding-left: 0; + // white-space: nowrap; + // width: 100%; + margin-right: 0.5em; + text-align: justify; + color: $theme-color-second!important; + background-color: rgba($theme-color-second, 0.08); + margin-bottom: 0.5em; + padding: 0.5em; + &:hover{ + background:$theme-color-second; + color: #fff!important; + i,a{ + color: #fff!important; + } + } + + } +.carousel_images { + .w-ba-banner .controlplay .resume-slide.active i{ + color: #32D9C3; + } + .w-ba-banner .controlplay .pause-slide.active i{ + color: #ff4500; + } + .carousel_images_slide{ + margin-top: -2.5em !important; + } + .w-ba-banner__slide{ + height: auto !important; + aspect-ratio: 16 / 9 !important; + text-align: center; + background-color: rgba($theme-color-second, 0.1)!important; + .w-ba-banner__image{ + width: auto; + height: 100%; + } + .banner-overlay{ + text-shadow: unset; + padding-top: 0.5em; + min-height: 7em; + background-color: rgba($theme-color-second, 0.1)!important; + position: relative; + display:block; + background-image: unset; + color: #333; + display: flex; + justify-content: center; + align-items: center; + .carousel__description{ + color: #333; + } + p{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } + } + } + .carousel_img-wrap { + position: relative; + display: block; + + &::after { + content: ''; + position: absolute; + inset: 0; + background-color: $theme-color-second; + z-index: 1; + pointer-events: none; // ✅ 讓點擊穿透遮罩，img 仍可點擊 + } + } + + .carousel_img { + display: block; + width: 100%; + } +} + +.carousel__description { + position: relative; + z-index: 2; + color: #333; +} + +.carousel__description { + position: relative; + z-index: 2; + color: #333; +} +.carousel__description{ + color: #333; +} +.carousel_images3{ + p { + padding-top: 1em; + padding-bottom: 1rem; + margin-bottom: 0; + } + .carousel_image{ + background-color: rgba($theme-color-second, 0.1); + margin-bottom: 1em; + border-radius: 1em; + > a{ + display: block; + position: relative; + overflow: hidden; + border-radius: 1em; + } + &:hover{ + img{ + transform: scale(1.05) !important; + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + } + } + } + + img{ + border-radius: 1em; + width: 100%; + } + @media (min-width: 768px) { + display: block !important; + column-count: 2; + column-gap: 16px; + .carousel_image{ + break-inside: avoid; + padding: 0; + display: inline-block; + width: 100% !important; + + } + } +} +.s-annc__post-wrap{ + .s-annc__subtitle { + margin-bottom: 1em; + // width: 60%; + // background-color: rgba($theme-color-second, 0.1); + // border-bottom: 1px solid #c3c3c3; + } +} +// .s-annc__sub-img.pull-right{ +// width: 38%; +// @media(max-width:768px){ +// width: 100%; +// } +// } +// .s-annc__sub-img.pull-left{ +// width: 38%; +// @media(max-width:768px){ +// width: 100%; +// } +// } .s-annc { .s-annc__date-wrap,.s-annc__author-wrap,.s-annc__tag-wrap { list-style: none; + float: none; } .s-annc__show-title { @extend .unity-title; @@ -3093,6 +4034,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .s-annc__tag-wrap { .s-annc__tag { font-weight: normal; + background-color: $theme-color-second; } } } @@ -3103,20 +4045,31 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl @include clearfix; margin-bottom: 2em; .s-annc__sub-img { - padding-bottom: 2em; + background-color: rgba($theme-color-second, 0.1); + border-radius: 1em; width: 40%; + margin-bottom: 1em; + @media(max-width:768px){ + width: 100%; + } + img{ + width: 100%; + } + @media(max-width:480px){ width: 100%; } - padding-bottom: 2em; // background: #eee; // padding: 0.5em; // border: 1px solid #e2e0e0; - img { padding: 0; } + img { padding: 0; border-radius: 1em;} .s-annc__img_description { - margin: 0.5em 0; + @media(max-width:768px){ + + } + padding:1em; + margin:0; display: block; - @extend .i-title } } } @@ -3127,42 +4080,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl // border-top: 0.0625em dotted $theme-gray-light; } - .s-annc__related-file { - margin-bottom: 0.9375em; - } - .s-annc__related-file, - .s-annc__related-link { - padding-bottom: 0.375em; - padding-left: 1.6em; - list-style: none; - - i { - margin: 0.5em 0 0 -1.6em; - float: left; - color: darken($theme-gray-light, 10%); - } - } - - .s-annc__related-link-list, - .s-annc__related-file-list { - display: inline-block; - } - - .s-annc__flie-title,.s-annc__link-title { - padding-left: 0; - white-space: nowrap; - width: 100%; - text-align: justify; - color: #0077D8; - border: 1px solid #0077D8; - margin-bottom: 1em; - padding: 0.5em; - &:hover{ - background:#f3f3f3; - } - - } .s-annc__social > * { display: inline-block; @@ -3199,7 +4117,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl width: 2px; margin-left: -1px; content: ''; - background-color: #ccd1d9 + background-color: #c2c2c2; } .VivaTimeline dl dt { @@ -3213,6 +4131,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl text-align: center; background-color: #aab2bd; border-radius: 4px; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); -webkit-border-radius: 4px; -moz-border-radius: 4px; z-index: 100; @@ -3230,10 +4149,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl width: 22px; height: 22px; margin-left: -11px; - background-color: #4fc1e9; - border: 4px solid #f5f7fa; + background-color: $theme-color-second; + border: 2px solid #494949; border-radius: 50%; - -webkit-border-radius: 50%; -moz-border-radius: 50% } @@ -3243,9 +4161,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl top: 31px; left: 50%; display: inline-block; - width: 100px; + width: fit-content; padding: 10px 20px; - color: #4fc1e9 + color:$theme-color-second; } .VivaTimeline dl dd .events { @@ -3253,11 +4171,12 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl width: 47%; padding: 10px 0 0; margin-top: 31px; - background-color: #CCC; - border-radius: 4px; - - -webkit-border-radius: 4px; - -moz-border-radius: 4px + padding: 20px; + border: solid 1px #dfdfdf; + border-radius: 5px; + @media(max-width:768px){ + padding:1em; + } } .VivaTimeline dl dd .events:before { @@ -3272,35 +4191,41 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .VivaTimeline dl dd .events .events-object { margin: 0 auto; + border-radius: 1em; + margin: 0.5em 0; } .VivaTimeline dl dd .events .events-header { min-height: 30px; line-height: 20px; - text-align: center; font-size: 1em; font-weight: bold; cursor: pointer; padding: 0 0.5em; + @media(max-width:768px){ + padding: 0; + } } .VivaTimeline dl dd .events .events-body { overflow: hidden; zoom: 1; - background-color: #EEE; - padding: 10px; } .VivaTimeline dl dd .events .events-body .row{ display:none; + height: auto !important; } .VivaTimeline dl dd .events .events-body .events-desc { - text-indent: 2em; padding: 0 15px; + @media(max-width:768px){ + padding: 0; + } } .VivaTimeline dl dd .events .events-footer { text-align:center; + display: none; } .VivaTimeline dl dd .events .events-footer ol { list-style: none; @@ -3310,7 +4235,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .VivaTimeline dl dd .events .events-footer ol li { background: #32b487; border-radius: 5px; - + behavior: url("/assets/ie_support/PIE2/PIE.htc"); margin: 10px; display: inline-block; width: 10px; @@ -3322,7 +4247,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } .VivaTimeline dl dd.pos-right .time { - margin-left: -100px; + margin-left: -105px; text-align: right } @@ -3331,8 +4256,21 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } .VivaTimeline dl dd.pos-right .events:before { - left: -12px; - border-color: transparent #CCC transparent transparent +content: ""; + position: absolute; + top: 32px; + left: 1px; + width: 0; + height: 0; + border-width: 8px; + border-color: #fff #fff transparent transparent; + border-style: solid; + -webkit-transform: rotate(-135deg) translateY(-50%); + transform: rotate(-135deg) translateY(-50%); + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2); + box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2); } .VivaTimeline dl dd.pos-left .time { @@ -3345,8 +4283,25 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } .VivaTimeline dl dd.pos-left .events:before { - right: -12px; - border-color: transparent transparent transparent #CCC + content: ""; + position: absolute; + top: 32px; + left: 1px; + width: 0; + height: 0; + border-width: 8px; + border-color: #fff #fff transparent transparent; + border-style: solid; + -webkit-transform: rotate(-135deg) translateY(-50%); + transform: rotate(-135deg) translateY(-50%); + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2); + box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2); + left: inherit; + right: 1px; + -webkit-transform: rotate(45deg) translateY(-50%); + transform: rotate(45deg) translateY(-50%); } .VivaTimeline .carousel-indicators{ @@ -3377,8 +4332,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl margin-right: 4%; } .VivaTimeline dl dd.pos-left .events:before { - left: -12px; - border-color: transparent #CCC transparent transparent + left: 0; + right: inherit; + transform: rotate(-135deg) translateY(-50%); } .VivaTimeline dl dd.pos-right .time { padding: 10px 0; @@ -3390,14 +4346,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl width: 73%; margin-right: 4%; } - /* - .VivaTimeline dl dd .events .events-body { - display: none; - } - .VivaTimeline dl dd .events .events-footer { - display: none; - } - */ } @media screen and (max-width: 500px) { @@ -3415,7 +4363,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl // Index-18 .index-announcement-18 { li.i-annc__item.col-md-4:nth-child(3n){ - clear: unset!important; + clear: unset!important; } .i-annc__meta .i-annc__status-wrap,.i-annc__meta .i-annc__postdate-wrap, .i-annc__meta .i-annc__category-wrap{ color: #fff; @@ -3437,32 +4385,27 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl transition-timing-function: ease; transition-duration: 1s; } - //類別變色 - .全部{ - background-color: #cb804b; - border: 3px solid #cb804b!important; - } - .公告{ - background-color: #ddc080; - border: 3px solid #ddc080!important; + .i-annc__item{ + background-color: $theme-color-second; + border: 3px solid $theme-color-second !important; + color: #fff; + a{ + color: #fff; + } } - .公告1{ - background-color: #94506e; - border: 3px solid #94506e!important; - } - .公告2{ - background-color: #599cf6; - border: 3px solid #599cf6!important; - } - .公告3{ - background-color: #80b885; - border: 3px solid #80b885!important; - } - .公告4{ - background-color: #6e4626; - border: 3px solid #4b2c12!important; - } - + // 類別變色（白色文字對比比 4.5:1，符合 WCAG AA） + // .全部 { + // background-color: #9e5a28 !important; + // border: 3px solid #9e5a28 !important; + // } + // .公告 { + // background-color: #8a6d1a !important; + // border: 3px solid #8a6d1a !important; + // } + // .公告1 { + // background-color: #7a2d52 !important; + // border: 3px solid #7a2d52 !important; + // } .i-annc__list { display: flex; @@ -3475,6 +4418,8 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl transition: all 0.3s; width: calc( 100%/5 - 1.5em); margin-bottom: 1em; + background-color: $theme-color-second; + border: 3px solid $theme-color-second; &:hover{ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.5); transform: translateY(-5px); @@ -3482,6 +4427,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl @media(max-width: 768px){ width:calc( 100%/2 - 1em); } + @media(max-width:480px){ + width:100%; + } } } .i-annc__title { @@ -3502,15 +4450,11 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl padding: 0 0.5em; } .i-annc__item{ - padding: 0; + padding: 0.5em; } .i-annc__img-wrap { overflow: hidden; - // height: 14.5em; - margin: 1em 0.5em; - @media (max-width:$screen-xs) { - height: 7em; - } + margin-bottom: 1em; img { @media (max-width:767px) { transform: scale(1) !important; diff --git a/assets/stylesheets/template/modules/event_news.scss b/assets/stylesheets/template/modules/event_news.scss index 2d0a00d..e9d6bd8 100644 --- a/assets/stylesheets/template/modules/event_news.scss +++ b/assets/stylesheets/template/modules/event_news.scss @@ -315,7 +315,7 @@ } } } - .w-annc__subtitle{ + .w-annc__subtitle,p{ color: #fff; font-size: 1rem; display: -webkit-box; @@ -329,6 +329,8 @@ opacity: 0; -webkit-transition: max-height .6s,opacity .6s; transition: max-height .6s,opacity .6s; + padding-bottom: 0; + margin-bottom: 0; @media(min-width:1920px){ font-size: 1.2em; } @@ -354,7 +356,7 @@ .card:before{ height:100%; } - .w-annc__subtitle{ + .w-annc__subtitle,p{ max-height: 100px; opacity: 1; } diff --git a/home/index.html.erb b/home/index.html.erb index 65f076c..2eb9492 100644 --- a/home/index.html.erb +++ b/home/index.html.erb @@ -85,13 +85,6 @@
-
-
-
- ORBIT -
-
-
diff --git a/modules/ad_banner/_ad_banner_widget2.html.erb b/modules/ad_banner/_ad_banner_widget2.html.erb index e7c9f79..354fa5a 100644 --- a/modules/ad_banner/_ad_banner_widget2.html.erb +++ b/modules/ad_banner/_ad_banner_widget2.html.erb @@ -29,7 +29,7 @@
- +
- +