diff --git a/assets/images/icon-view@2x.png b/assets/images/icon-view@2x.png new file mode 100644 index 0000000..1a80d4f Binary files /dev/null and b/assets/images/icon-view@2x.png differ diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index dedbabc..1beb367 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -55,14 +55,14 @@ }, // 外掛，所有的外掛都可以放到這個物件裡 - plugins: { - // 自適應圖片裁切，Ray的外掛 - bullEye: function() { - $('.bullseye').bullseye({ - fadeEffect: false - }); - } - }, + // plugins: { + // // 自適應圖片裁切，Ray的外掛 + // bullEye: function() { + // $('.bullseye').bullseye({ + // fadeEffect: false + // }); + // } + // }, // nav: { // 自適應使用的下拉選單 @@ -413,7 +413,6 @@ orbit.goBackTop('top', 800); orbit.plugins.bullEye(); orbit.setColumn('.left-column', '.right-column'); - orbit.ClickMenuHandler(); // 自適應網頁使用，當網頁載入時，如果視窗寬度小於769，就執行orbit.nav.setDropdown函數 if ($(window).width() < 769) { @@ -421,7 +420,7 @@ orbit.MobileMenu(); $('.mobile-menu').append($('.modules-menu')); $('.header-buttom').appendTo($('.modules-menu')); - + orbit.ClickMenuHandler(); } // 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數 @@ -466,83 +465,325 @@ // $('.header-buttom').appendTo($('.dropdowns')); // } function forFreeGo() { + //刪除空的h1 + $('h1').each(function() { + if ($(this).text().trim() === '') { + $(this).remove(); + } + }); + // + // $('.epaper-index2-container h4 a').each(function() { + // var $this = $(this); + // // 取得 a 內部的純文字內容，移除前後空白 + // var textContent = $this.text().trim(); + // // 檢查 a 內部是否所有子元素都是 display: none + // var hasVisibleContent = $this.children().filter(function() { + // return $(this).css('display') !== 'none'; + // }).length > 0; + // // 如果 a 內部沒有純文字，且內部所有元素都是 display: none，則刪除該 a + // if (textContent === '' || !hasVisibleContent) { + // $this.remove(); + // } + // }); + //refresh_btn加上aria-label + $('#refresh_btn').each(function() { + var $this = $(this); + + // 如果 button 尚未有 aria-label，則新增 + if (!$this.attr('aria-label')) { + $this.attr('aria-label', '重新整理'); + } + }); + //無障礙會員表格刪除沒有顯示的th + $('.i-member-tr-head').each(function() { + if ($(this).css('display') === 'none') { + $(this).remove(); + } + }); + //無障礙公告a是空的 + $('.w-annc__subtitle').each(function () { + var $this = $(this); + var $link = $this.find('a'); + + // 檢查 a 是否存在，且去除空白後是否為空字串 + if ($link.length && $link.text().trim() === '') { + $this.remove(); // 移除外層 .w-annc__subtitle + } + }); + //無障礙單位轉換 + $("[style*='font-size']").each(function() { + var fontSize = $(this).css("font-size"); + if (fontSize.includes("px")) { + var pxValue = parseFloat(fontSize); // 取得數值 + var emValue = pxValue / 16; // 假設 1em = 16px + $(this).css("font-size", emValue + "em"); + } + }); + $("[style*='font-size']").each(function() { + var fontSize = $(this).css("font-size"); + if (fontSize.includes("pt")) { + var ptValue = parseFloat(fontSize); // 取得數值 + var emValue = ptValue / 12; // 1em = 12pt（一般轉換標準） + $(this).css("font-size", emValue + "em"); + } + }); + $("table").each(function() { + $(this).find("tr").each(function(rowIndex) { + $(this).find("th").each(function(colIndex) { + if (rowIndex === 0) { + // 第一列的 th，適用於該欄 + $(this).attr("scope", "col"); + } else if (colIndex === 0) { + // 其他列的第一個 th，適用於該行 + $(this).attr("scope", "row"); + } + }); + }); + }); + $(".banner-pager button").addClass('banner-pagerbtn'); + $(".banner-pager button").attr("type","button"); + $(".banner-pager button").append('下一張'); + $("button").attr("role", "button"); + $("select").attr("title","選擇類別"); + $(".jarallax-video-audio").attr("role", "button"); + $('button').each(function() { + var $this = $(this); + if (!$this.attr('title') || $this.attr('title').trim() === '') { + $this.attr('title', '按鈕'); + } + }); + $('img').each(function() { + var $this = $(this); + if (!$this.attr('alt') || $this.attr('alt').trim() === '') { + $this.attr('alt', '這是一張圖片'); + } + }); + $('img').each(function() { + var $this = $(this); + if (!$this.attr('title') || $this.attr('title').trim() === '') { + $this.attr('title', '這是一張圖片'); + } + }); + $(".w-annc__img-wrap a").each(function () { + var $this = $(this); + // 確保 內沒有文字節點 (避免重複添加) + if ($this.text().trim() === "") { + $this.append('公告圖片'); + } + }); + $(".widget-link__widget-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('公告標題'); + } + }); + $(".sitemenu-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('次選單'); + } + }); + $(".annc-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('內頁公告標題'); + } + }); + $(".event-annc-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('內頁活動公告標題'); + } + }); + $(".show-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('內頁活動公告標題'); + } + }); + $(".w-annc__widget-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('公告標題'); + } + }); + $(".widget-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('網路資源標題'); + } + }); + $(".widget-title").each(function () { + if ($(this).text().trim() === "") { + $(this).append('網路資源標題'); + } + }); + $('input').each(function() { + var $this = $(this); + if (!$this.attr('title') || $this.attr('title').trim() === '') { + $this.attr('title', '網內搜尋'); + } + }); + $('.rucaptcha-image').each(function() { + var $button = $(this).next('button'); // 取得緊接在 .rucaptcha-image 之後的 button + if ($button.length && !$button.attr('aria-label')) { + $button.attr('aria-label', '播放驗證碼語音'); + } + }); + // 幫有連結目的之所有a標籤加上aria-label + $('a').each(function() { + var $this = $(this); + + // 如果 已經有 aria-label，則跳過 + if ($this.attr('aria-label')) return; + + var href = $this.attr('href'); + if (!href) return; // 如果沒有 href，則跳過 + + var ariaLabel = ""; + + // 加入開啟方式 + if ($this.attr('target') === '_self') { + ariaLabel += '在本視窗開啟 '; + } else if ($this.attr('target') === '_blank') { + ariaLabel += '在新視窗開啟 '; + } + + // 取得 的文字內容 + var linkText = $this.text().trim(); + if (linkText) { + ariaLabel += linkText; + } else if ($this.children('span').length === 1) { + ariaLabel += $this.children('span').text().trim(); + } + // 如果包含 圖示，標示為 icon + if ($this.find('i').length) { + ariaLabel = "這是 icon"; + } + + // 如果是圖片連結，標示為照片 + if ($this.find('img').length) { + ariaLabel = "這是一張照片"; + } + + // 設定 aria-label + if (ariaLabel) { + $this.attr('aria-label', ariaLabel); + } + }); + // 幫有連結目的之所有a標籤加上title - for(var i=0;i<$('a').length;i++){ - if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){ - var titlestr=""; - if($('a').eq(i).attr('target')=='_self') - titlestr += '在本視窗開啟 '; - else if($('a').eq(i).attr('target') == '_blank') - titlestr += '在新視窗開啟 '; - if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('span').length==1) - titlestr += $('a').eq(i).find('>span').html().trim(); - else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){ - try{ - if($('a').eq(i).html().trim().split('>').length==2) - titlestr += $('a').eq(i).html().trim().split('>')[1].trim(); - else if($('a').eq(i).html().trim().split('>').length==3) - titlestr += $('a').eq(i).html().trim().split('>')[2].trim(); - }catch(e){}; - } - else - titlestr += $('a').eq(i).attr('title'); - if(titlestr.search(' 已經有 title 屬性，則不進行修改 + if ($this.attr('title')) return; + var titlestr = ""; + // 加入開啟方式 + if ($this.attr('target') == '_self') { + titlestr += '在本視窗開啟 '; + } else if ($this.attr('target') == '_blank') { + titlestr += '在新視窗開啟 '; + } + // 決定 title 內容 + var linkText = $this.text().trim(); + if (linkText) { + titlestr += linkText; + } else if ($this.children('span').length == 1) { + titlestr += $this.children('span').text().trim(); + } + // 如果是圖片連結，標示為照片 + if ($this.find('img').length) { + titlestr = "這是一張照片"; + } + // 設定 title + if (titlestr) { + $this.attr('title', titlestr); + } + }); + + // for(var i=0;i<$('a').length;i++){ + // if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){ + // var titlestr=""; + // if($('a').eq(i).attr('target')=='_self') + // titlestr += '在本視窗開啟 '; + // else if($('a').eq(i).attr('target') == '_blank') + // titlestr += '在新視窗開啟 '; + // if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('span').length==1) + // titlestr += $('a').eq(i).find('>span').html().trim(); + // else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){ + // try{ + // if($('a').eq(i).html().trim().split('>').length==2) + // titlestr += $('a').eq(i).html().trim().split('>')[1].trim(); + // else if($('a').eq(i).html().trim().split('>').length==3) + // titlestr += $('a').eq(i).html().trim().split('>')[2].trim(); + // }catch(e){}; + // } + // else + // titlestr += $('a').eq(i).attr('title'); + // if(titlestr.search('=0;i--) - if($('dd a.i-archive-files-item').eq(i).html().trim()=="") - $('dd a.i-archive-files-item').eq(i).parent('dd').remove(); + for(var i=0;i<$('.w-ba-banner__slide a').length;i++){ + if($('.w-ba-banner__slide a').eq(i).attr('href')=="") + $('.w-ba-banner__slide a').eq(i).removeAttr('href'); + if($('.w-ba-banner__slide a').eq(i).attr('target') == "") + $('.w-ba-banner__slide a').eq(i).removeAttr('target'); + }; + // 幫無標題之iframe加上title + for(var i=0;i<$('iframe').length;i++) + if($('iframe').eq(i).attr('title')=="" || $('iframe').eq(i).attr('title')== undefined ){ + if($('iframe').eq(i).attr('src').search('facebook') != -1 ) + $('iframe').eq(i).attr('title','facebook'); + else if($('iframe').eq(i).attr('src').search('google') != -1 ) + $('iframe').eq(i).attr('title','google'); + else if($('iframe').eq(i).attr('src').search('youtube') != -1 ) + $('iframe').eq(i).attr('title','youtube'); + else if($('iframe').eq(i).attr('src').search('twitframe') != -1 ) + $('iframe').eq(i).attr('title','twitter'); + else + $('iframe').eq(i).attr('title','unknown'); + }; + //button是空的就加上內容 + $('button').each(function() { + var $this = $(this); + var titleText = $this.attr('title') || ''; + + // 檢查 button 是否是空的（沒有可見文字或子元素） + if ($this.text().trim() === '' && !$this.children().length && titleText) { + // 新增隱藏的 span，內容為 title + $this.append('' + titleText + ''); + } + }); + // 刪除空的檔案室 + var archievelen = $('dd a.i-archive-files-item').length; + for(i=archievelen-1;i>=0;i--) + if($('dd a.i-archive-files-item').eq(i).html().trim()=="") + $('dd a.i-archive-files-item').eq(i).parent('dd').remove(); // 刪除具有空連結欄位的橫列 - for(var i = 0;i < $('*[data-list] tr td a').length ; i++) - if($('*[data-list] tr td a').eq(i).html().trim()=="") - $('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove(); - // tab按鍵選到menu,會顯示下層的menu(為了符合無障礙) - $('.nav-level-0>li>a').focus(function(e) { + for(var i = 0;i < $('*[data-list] tr td a').length ; i++) + if($('*[data-list] tr td a').eq(i).html().trim()=="") + $('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove(); + // tab按鍵選到menu,會顯示下層的menu(為了符合無障礙) + $('.nav-level-0>li>a').focus(function(e) { e.stopPropagation(); - $(this).parent().focus(); + $(this).parent().focus(); if ($(this).parent().find('.nav-level-1').hasClass('show')) { } else { $('.nav-level-1').removeClass('show'); $(this).parent().find('.nav-level-1').addClass('show'); } }); - $('.nav-level-1>li>a').focus(function(e) { - e.stopPropagation(); - if ($(this).parent().find('.nav-level-2').hasClass('show')) { - }else{ - $('.nav-level-2').removeClass('show'); - $(this).parent().find('.nav-level-2').addClass('show'); - } - }); - $('show').parent('li').focus(); + $('.nav-level-1>li>a').focus(function(e) { + e.stopPropagation(); + if ($(this).parent().find('.nav-level-2').hasClass('show')) { + }else{ + $('.nav-level-2').removeClass('show'); + $(this).parent().find('.nav-level-2').addClass('show'); + } + }); + $('show').parent('li').focus(); } forFreeGo(); @@ -550,9 +791,9 @@ //header banner setting if ( location.href.search('editmode=on') != -1 ) { - $('.header-banner').css('z-index','2'); - } else { - $('.header-banner').css({ + $('.header-banner').css('z-index','2'); + } else { + $('.header-banner').css({ 'position': 'relative', 'top': '0', 'z-index': '-2', @@ -632,19 +873,173 @@ extendPanelWidget(); } +$(document).ready(function () { + if ($(".main-content .video_detail").length > 0) { + $('.sitemenu').css("display","none"); + $('span img[alt="HD"]').parent().hide(); + $('span img[alt="觀看人數"]').remove(); + $(".view_info span").each(function () { + var text = $(this).text().trim(); // 取得 裡的文字，去掉前後空格 + var number = text.replace(/\D/g, ""); // 只保留數字部分 + if (number) { + $(this).text(`・觀看次數：${number}次`); // 更新內容格式 + } + }); + $(".movie_desc").before('

影片敘述

'); + $(".movie_desc").each(function () { + var decodedHtml = $("
- ::: - {{header-data}} +
+ ::: + {{header-data}} +
+
+
+ + + +
+
{{video_duration}}
+
{{video_tag}}
+
{{video_keyword}}
+
{{video_postdate}}
+
{{video_title}}
+
{{video_desc}}
@@ -40,3 +45,6 @@ } + \ No newline at end of file diff --git a/modules/video_pro/_video_pro_widget2.html.erb b/modules/video_pro/_video_pro_widget2.html.erb new file mode 100644 index 0000000..743d060 --- /dev/null +++ b/modules/video_pro/_video_pro_widget2.html.erb @@ -0,0 +1,65 @@ +
+ +
+
+ + \ No newline at end of file diff --git a/modules/video_pro/_video_pro_widget3.html.erb b/modules/video_pro/_video_pro_widget3.html.erb new file mode 100644 index 0000000..cbe089a --- /dev/null +++ b/modules/video_pro/_video_pro_widget3.html.erb @@ -0,0 +1,130 @@ +
+
+
+ + +
+
+ +
+ +
+ \ No newline at end of file diff --git a/modules/video_pro/_video_pro_widget4.html.erb b/modules/video_pro/_video_pro_widget4.html.erb new file mode 100644 index 0000000..c3b0b99 --- /dev/null +++ b/modules/video_pro/_video_pro_widget4.html.erb @@ -0,0 +1,135 @@ +
+
+
+ + +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/modules/video_pro/_video_pro_widget5.html.erb b/modules/video_pro/_video_pro_widget5.html.erb new file mode 100644 index 0000000..c88584d --- /dev/null +++ b/modules/video_pro/_video_pro_widget5.html.erb @@ -0,0 +1,156 @@ +
+ +
+
+
+ \ No newline at end of file diff --git a/modules/video_pro/info.json b/modules/video_pro/info.json index 5c1b39b..8e16317 100644 --- a/modules/video_pro/info.json +++ b/modules/video_pro/info.json @@ -9,6 +9,42 @@ }, "thumbnail" : "thumb.png" }, + { + "filename" : "video_pro_widget2", + "force_cover": "true", + "name" : { + "zh_tw" : "2. 影片列表2 ( 縮圖, 影片資訊, 頁面連結)", + "en" : "2. Video List 2 ( snapshot, video info, page link)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "video_pro_widget3", + "force_cover": "true", + "name" : { + "zh_tw" : "3. 影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)", + "en" : "3.carousel-Video List ( snapshot, video info, page link)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "video_pro_widget4", + "force_cover": "true", + "name" : { + "zh_tw" : "4. 影片列表倫波 ( 縮圖, 頁面連結)", + "en" : "4.carousel-Video List ( snapshot, page link)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "video_pro_widget5", + "force_cover": "true", + "name" : { + "zh_tw" : "5. 大圖影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)", + "en" : "5.bigcarousel-Video List ( snapshot, video info, page link)" + }, + "thumbnail" : "thumb.png" + }, { "filename" : "video_pro_widget_jqcloud1", "force_cover": "true", @@ -51,8 +87,8 @@ "filename" : "video_pro_index3", "force_cover": "true", "name" : { - "zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)", - "en" : "3. Video List 2 + Modal window ( snapshot, video info)" + "zh_tw" : "3. 三欄 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)", + "en" : "3. 3col-Video List 2 + Modal window ( snapshot, video info)" }, "thumbnail" : "thumb.png" }, @@ -60,8 +96,17 @@ "filename" : "video_pro_index_post_agency1", "force_cover": "true", "name" : { - "zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)", - "en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)" + "zh_tw" : "4. 三欄 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)", + "en" : "4. 3col-Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "video_pro_index4", + "force_cover": "true", + "name" : { + "zh_tw" : "4. 四欄影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)", + "en" : "4. 4col-Video List 1 + Category filter + Search ( snapshot, video info, page link)" }, "thumbnail" : "thumb.png" } diff --git a/modules/video_pro/video_pro_index1.html.erb b/modules/video_pro/video_pro_index1.html.erb index ae360f4..7fe93c6 100644 --- a/modules/video_pro/video_pro_index1.html.erb +++ b/modules/video_pro/video_pro_index1.html.erb @@ -3,17 +3,17 @@
").html($(this).text()).html(); // 轉換轉義的 HTML + $(this).html(decodedHtml); // 設置為真正的 HTML + }); + $(".video_group_time").each(function () { + var $this = $(this); // 當前 .video_group_time + // 找到對應的 ，並移動到 .video_group_time 內部 + var $q = $this.closest(".imglst_desc").find(".movie_desc q"); + if ($q.length) { + $this.append($q.clone()); // 將 複製並添加到 .video_group_time + $q.remove(); // 移除 .movie_desc 裡的 + } + // 移動 .view_info 到 .video_group_time 的內部 + $this.append($this.siblings(".view_info")); + // 取得內容並移除 "SystemAdmin | " 前綴 + var text = $this.text().trim(); + var newText = text.replace(/^.*\|\s*/, ""); // 移除 "SystemAdmin | " + $this.text(newText); // 更新內容 + $(this).insertBefore($(this).closest(".imglst_desc").siblings("h3")); + }); + + $(".main-content").css({ + "max-width": "920px", + "margin": "auto" + }); + $(".video_box_wrap").css("padding-bottom", "56%"); + + $(".video_yt_box").insertBefore(".video_group_time"); + + }; + function getYouTubeThumbnail() { + var $ytThumb = $(".ytp-cued-thumbnail-overlay-image"); + if ($ytThumb.length) { + var imageUrl = $ytThumb.css("background-image"); + // 檢查背景圖格式：url("https://...") + var urlMatch = imageUrl.match(/url\(["']?(.*?)["']?\)/); + var extractedUrl = urlMatch ? urlMatch[1] : null; + if (extractedUrl) { + // console.log("成功獲取縮圖:", extractedUrl); + $(".background").css("background-image", `url("${extractedUrl}")`); + } else { + // console.log("背景圖格式不對，改用影片 ID 生成縮圖"); + setThumbnailFromVideoId(); + } + } else { + // console.log("找不到 .ytp-cued-thumbnail-overlay-image，改用影片 ID 生成縮圖"); + setThumbnailFromVideoId(); + } + } + function setThumbnailFromVideoId() { + var $iframe = $("iframe[src*='youtube.com/embed']"); + if ($iframe.length) { + var src = $iframe.attr("src"); + var videoIdMatch = src.match(/youtube\.com\/embed\/([^?]+)/); + var videoId = videoIdMatch ? videoIdMatch[1] : null; + if (videoId) { + var fallbackImageUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`; + // console.log("透過影片 ID 取得縮圖:", fallbackImageUrl); + $(".background").css("background-image", `url("${fallbackImageUrl}")`); + } + } + } + // 嘗試多次加載 + var interval = setInterval(function () { + if ($(".ytp-cued-thumbnail-overlay-image").length || $("iframe[src*='youtube.com/embed']").length) { + getYouTubeThumbnail(); + clearInterval(interval); + } + }, 1000); + }); // 當文件物件模型(DOM)載入後，執行init函數 $(document).ready(function() { + function adjustSlideWidth() { + var $container = $(".container"); + var $list = $(".w-annc__list"); + var $items = $(".w-annc__item"); + + var containerWidth = $container.width(); // 獲取容器寬度 + var slidesVisible = parseInt($list.attr("data-cycle-carousel-visible")) || 4; // 讀取可見數量 (預設4) + var itemMargin = parseFloat($items.css("margin-left")) + parseFloat($items.css("margin-right")); // 計算 margin + + // 計算 w-annc__item 的寬度 (確保總寬度不超過 .container) + var itemWidth = (containerWidth / slidesVisible) - itemMargin; + + // 更新 w-annc__item 的寬度 + $items.css({ + "width": itemWidth + "px", + "box-sizing": "border-box" + }); + } + + // 初次載入時調整 + adjustSlideWidth(); + + // 監聽視窗大小變化 + $(window).resize(adjustSlideWidth); + $(window).on("load", function () { + var $carouselWrap = $(".cycle-carousel-wrap"); + var $carouselList = $(".w-annc__list"); + + // 取得 data-cycle-carousel-visible 的數值 + var slidesVisible = parseInt($carouselList.attr("data-cycle-carousel-visible")) || 4; + + // 取得 .w-annc__item 的寬度 + var itemWidth = $(".w-annc__item").outerWidth(true); // 包含 margin + + // 計算正確的 left 位置，確保第一個 item 不會被切掉 + var newLeft = -(itemWidth * Math.floor(slidesVisible / 2)); + + // 如果 newLeft 是負的，則修正為 0（避免完全消失） + if (newLeft < 0) newLeft = 0; + + // 更新 cycle-carousel-wrap 的位置 + $carouselWrap.css("left", newLeft + "px"); + }); - //背景widget設定 - if ( location.href.search('editmode=on') != -1 ) { - $('.background').css('z-index','2'); - $('.background').css('position','relative'); - } else { - $('.background').css('z-index','-1'); - $('.background').css('position','fixed'); - }; - + // 綁定滑動事件 + $(".cycle-slideshow").swipe({ + swipeLeft: function () { + $(this).cycle("next"); // 向左滑動，切換到下一張 + }, + swipeRight: function () { + $(this).cycle("prev"); // 向右滑動，切換到上一張 + }, + threshold: 50, // 滑動靈敏度（數值越小越敏感） + }); + //改變日期格式 + $(".video_group_time").each(function () { + var $this = $(this); + var originalText = $this.text().trim(); // 取得原始內容 + // 正則表達式匹配 YYYY-MM-DD 格式的日期 + var formattedText = originalText.replace(/(\d{4})-(\d{2})-(\d{2})/g, function (match, year, month, day) { + return parseInt(month, 10) + "月" + parseInt(day, 10) + "日"; + }); + $this.text(formattedText); // 更新內容 + }); + + $(".video_group_time").each(function () { + var $this = $(this); // 當前 .video_group_time + var $q = $this.closest(".video_data").find(".video_desc q").clone(); // 找到對應的 q + if ($q.length) { + $this.append($q); // 只加上對應的 q + } + }); + //常用到的js + // $('.').after($('.')); + // $('.').before($('.')); + // $('.').append($('.')); + // if($('.show-announcement').hasClass('show-announcement')) { + // $('.').css('', ''); + // } + $(".mybooking").append(''); + //內頁dattpp移位 $('.i-annc__page-title').after($('.sitemenu-wrap2')); $('.i-archive-title').after($('.sitemenu-wrap2')); $('.page-module-title').after($('.sitemenu-wrap2')); @@ -655,24 +1050,31 @@ extendPanelWidget(); $(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)")); $(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child")); - //常用到的js - // $('.').after($('.')); - // $('.').before($('.')); - // $('.').append($('.')); - // if($('.show-announcement').hasClass('show-announcement')) { - // $('.').css('', ''); - // } + //檔案室手風琴 + $('.panel-title>.collapsed').click(function(){ + $(this).find('.fa').toggleClass("fa-chevron-down"); + $(this).find('.fa').toggleClass("fa-chevron-up"); + }); + + //背景widget設定 + if ( location.href.search('editmode=on') != -1 ) { + $('.background').css('z-index','2'); + $('.background').css('position','relative'); + } else { + $('.background').css('z-index','-1'); + $('.background').css('position','fixed'); + }; //公告類別顏色 - $(".w-annc .w-annc__category-wrap").each(function() { - var SaveCategory = $(this).find(".w-annc__category").text(); - $(this).addClass(SaveCategory); - }) - $(".w-annc__item ").each(function() { - var SaveCategory2 = $(this).find(".w-annc__category").text(); - $(this).addClass(SaveCategory2); - }) + // $(".w-annc .w-annc__category-wrap").each(function() { + // var SaveCategory = $(this).find(".w-annc__category").text(); + // $(this).addClass(SaveCategory); + // }) + // $(".w-annc__item ").each(function() { + // var SaveCategory2 = $(this).find(".w-annc__category").text(); + // $(this).addClass(SaveCategory2); + // }) $(".i-annc__item .i-annc__category-wrap").each(function() { var SaveCategory = $(this).find(".i-annc__category").text(); $(this).addClass(SaveCategory); @@ -723,7 +1125,7 @@ extendPanelWidget(); $("nav ul").toggleClass('hidden'); }); $('.morebken').click(function(){ - $('.list-unstyled>li:nth-child(n+16)').slideToggle(); + $('.list-unstyled>li:nth-child(n+5)').slideToggle(); $(".morebken .fa-chevron-down").toggleClass("rotate"); $(".openmorebken").toggleClass("closemorebken"); @@ -768,8 +1170,11 @@ extendPanelWidget(); // $('.outdropdowns').removeClass('navFixed'); /* 移除選單固定效果 */ // } // }); - $('.navbar-brand h2').replaceWith(function () { - return "

" +$(this).html() + "

"; + $('.navbar-brand h2').replaceWith(function() { + return $("

", { + class: this.className, + html: $(this).html() + }); }); $('#search'). attr('title', '另開新視窗'); $(window).scroll(function() { @@ -829,15 +1234,15 @@ extendPanelWidget(); // // //選單 // $(document).ready(function() { // -// //drop down menu -// $(".dropdown-toggle").hover(function() { -// $('.modules-menu-level-1').addClass('display-on'); -// }); -// $(".dropdown-toggle").mouseleave(function() { -// $('.modules-menu-level-1').removeClass('display-on'); -// }); +// //drop down menu +// $(".dropdown-toggle").hover(function() { +// $('.modules-menu-level-1').addClass('display-on'); +// }); +// $(".dropdown-toggle").mouseleave(function() { +// $('.modules-menu-level-1').removeClass('display-on'); +// }); // -// }); +// }); // $(document).ready(function() { // // "use strict"; diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss index 9b6477f..d5eecf9 100644 --- a/assets/stylesheets/template/base/_global.scss +++ b/assets/stylesheets/template/base/_global.scss @@ -120,7 +120,11 @@ a.btn-primary { } } } - +img{ + width: 100%; + height: 100%; + object-fit: cover; +} // Take care of exceeding content // body[data-module="page_content"], // body[data-module="announcement"] { diff --git a/assets/stylesheets/template/base/_variables.scss b/assets/stylesheets/template/base/_variables.scss index bcf1345..51a0fe1 100644 --- a/assets/stylesheets/template/base/_variables.scss +++ b/assets/stylesheets/template/base/_variables.scss @@ -16,7 +16,7 @@ $theme-red: #d20001; $theme-blue: #003d7e; $theme-color-main: #333333; -$theme-color-second:#1a1b20; +$theme-color-second:#1273eb; $theme-color-third: #1273eb; $theme-color-green: #32D9C3; $theme-color-hover:#1e71c1; @@ -41,15 +41,27 @@ $font-h5: 1.2rem; $font-h6: 1rem; h1{ font-size:2.5rem; + @media(max-width:$screen-xs){ + font-size:2rem; + } } h2{ font-size: 2rem; + @media(max-width:$screen-xs){ + font-size:1.8rem; + } } h3{ font-size:1.8rem; + @media(max-width:$screen-xs){ + font-size:1.6rem; + } } h4{ font-size: 1.5rem; + @media(max-width:$screen-xs){ + font-size:1.3rem; + } } h5{ font-size: 1.2rem; diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss index 9b0104b..09913f8 100644 --- a/assets/stylesheets/template/layout/content.scss +++ b/assets/stylesheets/template/layout/content.scss @@ -9,12 +9,11 @@ .verticalhome{ position: relative; width: 100%; - background-color: #F8F9FA; overflow: hidden; } .internal-page{ .layout-content{ - background: #F8F9FA; + background: transparent; padding-bottom: 4em; } } diff --git a/assets/stylesheets/template/layout/footer.scss b/assets/stylesheets/template/layout/footer.scss index e33b245..5c3c30e 100644 --- a/assets/stylesheets/template/layout/footer.scss +++ b/assets/stylesheets/template/layout/footer.scss @@ -9,6 +9,10 @@ padding: 2em 0; color: $theme-color-main; font-size: 0.8125em; + .footer-updated-date{ + clear: both; + padding-left: 1em; + } ul{ padding: 0; } @@ -54,6 +58,8 @@ font-size: 0.8125em; border: #e0e0e0 1px solid; padding: 0.5em 1em; + display: inline-block; + margin-bottom: 1em; } .fatfooter{ display: none; diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index 7e9ccf8..eed1e4b 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -1,9 +1,13 @@ @charset "utf-8"; @import "../initial"; +.fc-cal-date-selected-fusion { + font-size: 1em!important; +} .outdropdowns{ position: relative; z-index: 1; + padding: 0.5em 0; } .header-nav { ul{ @@ -25,7 +29,7 @@ outline: 0.3125em auto -webkit-focus-ring-color !important; } .layout-header { - z-index: 2; + z-index: 10; position: relative; margin-bottom: 0; border: none; @@ -45,13 +49,19 @@ } .header-banner { overflow: hidden; } .header-nav { - padding:1em 0 0 0; - color: $theme-color-main; - font-family: $main-font; - text-transform:uppercase; - display: flex; - align-items: center; - justify-content: flex-end; + background: #f5f5f5; + padding:0; + + >.container{ + color: $theme-color-main; + font-family: $main-font; + text-transform:uppercase; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 0.9375em; + padding-left: 0.9375em; + } @media(max-width: 820px){ justify-content: space-between; padding:0; @@ -67,17 +77,16 @@ padding: 0; margin-top: 0; margin-bottom: 0; - color: $theme-color-main; } a { - color: $theme-color-main; text-decoration: none; padding: 15px; + font-size: 0.85em; } @media (min-width:1025px) { - margin-bottom: -4em; + // margin-bottom: -4em; position: relative; } } @@ -108,11 +117,10 @@ margin:0; line-height: 3.75em; h1{ - margin-top: 1em; font-size: 1.2em; display: flex; align-items: center; - color: #155E75; + color:#1a66b1; font-weight: bold; } } diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index 84a2ec7..2a0f360 100644 --- a/assets/stylesheets/template/modules/ad_banner.scss +++ b/assets/stylesheets/template/modules/ad_banner.scss @@ -14,20 +14,28 @@ iframe{ border: none; } + .jp-video{ + border:0; + } .w-ba-banner { position: relative; height: fit-content !important; - .cursor { cursor: pointer; } + .w-ad-banner__caption{ + @media(max-width:768px){ + h3{ + margin-top: 0; + } + } + } } .w-ba-banner__wrap { width: 100%; max-width: 100%; height: auto; - overflow: hidden; } .w-ba-banner__slide { @@ -55,23 +63,34 @@ iframe{ .banner-pager { @include list-reset; position: absolute; - bottom: 0.5rem; + bottom: 0.5rem!important; z-index: 200; text-align:center; width: 100%; li { - display: inline-block; - height: 3px; - width: 4%; + + // height: 3px; + // width: 4%; + // margin: 0 2px; cursor: pointer; - margin: 0 2px; + display: inline-block; + width:auto!important; } button { - background: hsla(0,0%,100%,.4); - width: 100%; - height: 3px; - border: unset; + // background: hsla(0,0%,100%,.4); + // width: 100%; + // height: 3px; + // border: unset; + background: white !important; + display: inline-block; + margin-right: 0.25em; + width: 0.8em !important; + height: 0.8em !important; + border-radius: 50%; + opacity: .5; + cursor: pointer; + border: 0; } .active-slide button { opacity: 1; @@ -98,7 +117,7 @@ iframe{ position: absolute; right: 1em; top: 3%; - z-index: 99; + z-index:101; a { display: inline-block; margin-right: 0.25em; @@ -147,7 +166,7 @@ ul.button-mid{ top: 50%; position: absolute; transform: translateY(-50%); - z-index: 99; + z-index: 100; &:hover { background: rgba(0,0,0,0.1); @@ -169,7 +188,7 @@ ul.button-mid{ top: 50%; position: absolute; transform: translateY(-50%); - z-index: 99; + z-index: 100; &:hover { background: rgba(0,0,0,0.1); } @@ -215,18 +234,13 @@ ul.button-mid{ } .ad-overlay{ text-align: center; - padding-top: 20%; position: relative; background: none; color: #fff; - z-index: 100; + z-index: 99; + padding-left: 10%; + padding-right: 10%; // text-shadow: 1px 1px 1px #0000008c; - @media screen and (min-width:$screen-xs) and (max-width:1025px){ - padding-top: 30%; - } - @media(max-width: $screen-xs){ - padding-top: 60%; - } } img{ position: fixed; @@ -271,7 +285,7 @@ ul.button-mid{ } @media(max-width: $screen-xs){ .ad-overlay{ - top: 17%; + top: 35%; position: absolute; } } @@ -368,22 +382,20 @@ ul.button-mid{ } -// specific style for youtube widget -.ba-banner-widget-youtube { - .cycle-slide-active { - z-index: 101 !important; - } -} + //Widget 5 .ba-banner-widget-5 { - background: url(/assets/BANNER-BG-01.jpg) 0 0 no-repeat; - .slide-img { padding: 1rem 1.5rem; } + margin: 1em 0; + .slide-img { + @media(min-width:769px){ + padding: 0; + } + } .slide-content { z-index: 200; font-family: $main-font; - padding-top: 0.5rem; - padding-left: 0; + padding: 1em 7em 1em 1em; h3 { font-size: 1rem; @@ -396,14 +408,9 @@ ul.button-mid{ word-break: break-all; font-size: 1rem; color: #373634; - padding: 0 2em 0.5em 0; } } - .controlplay { display: none; } .banner-pager { - right: 1rem; - top: 0; - width: unset; li { height: unset; width: unset; } a { background: #a0d2f3;} } @@ -474,6 +481,7 @@ ul.button-mid{ display: none; } .banner-overlay { + border-bottom: 3px solid $theme-color-second; text-align: center; width: 100%; visibility: unset !important; @@ -491,7 +499,12 @@ ul.button-mid{ } p{ padding: 0 0.2em; - border-bottom: 3px solid $theme-color-second; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; } } } diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss index 944038b..6c29cac 100644 --- a/assets/stylesheets/template/modules/announcement.scss +++ b/assets/stylesheets/template/modules/announcement.scss @@ -8,6 +8,10 @@ // Announcement widget // ## Gerneral styles for widgets +.VivaTimeline{ + z-index: 1; + position: relative; +} .w-annc__table{ // border: 0.0625em solid #ddd !important; .w-annc__th{ @@ -425,9 +429,6 @@ .w-annc__title{ color: #fff; - @media(min-width:1920px){ - font-size: 1.6rem!important; - } } .w-annc__title { font-family: $main-font; @@ -685,9 +686,6 @@ .w-annc__title{ color: #fff; - @media(min-width:1920px){ - font-size: 1.6rem!important; - } } .w-annc__title { font-family: $main-font; @@ -971,6 +969,347 @@ } } } +// Widget-23 +.widget-announcement-23 { + .w-annc__list{ + flex-wrap: wrap; + display: flex; + justify-content: center; + .w-annc__item{ + @media(min-width:769px){ + margin: 0.5em; + width: calc(25% - 1em)!important; + } + } + .w-annc__item:first-child{ + @media(min-width:769px){ + width: calc(50% - 1em)!important; + } + } + .w-annc__item:nth-child(2){ + @media(min-width:769px){ + width: calc(50% - 1em)!important; + } + } + } + .w-annc__more-wrap{ + display: none; + } + + .w-annc__title { + font-family: $main-font; + } + .w-annc__img-wrap { + margin-bottom: 0.5em; + border-radius: 20px; + overflow: hidden; + .w-annc__img{ + width: 100%; + position: relative !important; + } + } + .w-annc__item{ + margin-bottom: 1em; + padding: 0; + background-color: transparent!important; + &:hover{ + .w-annc__img{ + -webkit-transition: .3s ease-out; + -moz-transition: .3s ease-out; + -ms-transition: .3s ease-out; + -o-transition: .3s ease-out; + transition: .3s ease-out; + filter: brightness(40%); + } + } + } + .w-annc__entry-title{ + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + .w-annc__meta{ + padding: 1em; + display: none; + } + .w-annc__entry-title{ + padding: 0 1em; + } +} +// Widget-24 +.widget-announcement-24 { + .cycle-carousel-wrap{ + display: flex; + align-items: baseline; + } + .w-annc__entry-title{ + margin: 0; + } + .w-annc__meta i{ + color: #fff!important; + } + .w-annc__list{ + display: flex; + justify-content: center; + flex-wrap: wrap; + } + .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; + } + .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{ + -webkit-transition: .3s all ease; + -o-transition: .3s all ease; + transition: .3s all ease; + padding-bottom: 1em; + @media (max-width: $screen-xs) { + margin: 0; + } + &:hover{ + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; + .w-annc__content-wrap:after{ + width: 100%; + background: #f2f2f2; + } + } + } + .w-annc__item{ + @media(max-width: $screen-xs){ + + } + &:hover{ + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + + .w-annc__img-wrap{ + 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; + 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__img-wrap { + img{ + // height: 100% !important; + width:100%!important; + // max-width: unset; + // position: relative !important; + // margin: 0 !important; + // transform: translateX(-7%); + @media(max-width:767px){ + height: 100% !important; + width:auto!important; + max-width: unset; + position: relative !important; + margin: 0 !important; + transform: translateX(-7%); + } + } + } + .w-annc__item{ + padding: 0; + margin-right: 0.5em; + margin-left: 0.5em; + margin-bottom: 1em; + overflow: hidden; + position: relative !important; + @media(min-width:768px){ + &:nth-child(1){ + width: calc(200% / 3 - 1em)!important; + } + &:nth-child(2){ + width: calc(100% / 3 - 1em)!important; + } + &:nth-child(3){ + width: calc(100% / 3 - 1em)!important; + } + &:nth-child(4){ + width: calc(200% / 3 - 1em)!important; + } + } + @media(max-width:767px){ + + &:nth-child(2){ + width: calc(100% / 2 - 1em) !important; + margin-right: 0.5em; + } + &:nth-child(3){ + width: calc(100% / 2 - 1em) !important; + margin-left: 0.5em; + } + } + + @media(max-width: $screen-xs){ + width: 100% !important; + } + @media(min-width: 1600px){ + height: 20em; + .w-annc__img-wrap{ + height: 20em; + } + } + @media(min-width: 821px)and(max-width: 1599px){ + height: 20em; + .w-annc__img-wrap{ + height: 20em; + } + } + @media(min-width: $screen-xs)and(max-width: 820px){ + height: 16em; + .w-annc__img-wrap{ + height: 16em; + } + } + @media(max-width: $screen-xs){ + height: 16em; + .w-annc__img-wrap{ + height: 16em; + } + } + } + li{ + &:hover{ + .card:before{ + height:100%; + } + .w-annc__subtitle{ + max-height: 100px; + opacity: 1; + } + } + position: relative; + } + .card{ + position: absolute; + z-index:0; + padding: 20px 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 32%, #00000080 89%); + width: 100%; + } + .card:before{ + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 8px; + background-color: $theme-color-second; + z-index: -1; + -webkit-transition: height .6s; + transition: height .6s; + } +} // Widget-5 .widget-announcement-5 { .w-annc__title { @@ -1374,6 +1713,9 @@ } //Widget 16 .widget-announcement-16 { + .w-annc__img{ + width: 100%; + } .w-annc__content-wrap{ padding: 1em; } @@ -1388,7 +1730,6 @@ .w-annc__title { font-family: $main-font; } - .w-annc__item { padding: 0; } .w-annc__img-wrap { margin: 0 0 0.5rem 0; } @@ -1694,7 +2035,7 @@ .i-annc__img-wrap { overflow: hidden; height: 14.5em; - margin: 0 0 1em 0; + margin: 1em 0.5em; @media (max-width:$screen-xs) { height: 7em; } @@ -1730,7 +2071,7 @@ // box-shadow: #0000004d 0 0 4px; // background: #fff; @media(min-width: $screen-xs){ - float: left; + // float: left; } &:hover{ // border: 1px solid $theme-color-second; @@ -1946,6 +2287,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } // Index-7 .index-announcement-7 { + .i-annc__item{ + border:0; + } .i-annc__list { display: flex; flex-wrap: wrap; @@ -1954,18 +2298,12 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl font-family: $main-font; } .i-annc__list > .i-annc__item { - margin-right: 0.9375em; - width: calc( 100%/3 - 1.5em ); - margin-bottom: 1em; - border-bottom: 0; - @media (max-width:767px) { - width: calc( 100%/2 - 1.25em ); - min-height: unset; - margin: 0; - margin-bottom: 1em; - } + width:calc( 100%/3); @media (max-width: $screen-xs) { width: 100%!important; + min-height: unset; + margin: 0; + margin-bottom: 1em; } } @@ -1973,11 +2311,13 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl clear: both; } - + .i-annc__content-wrap{ + margin: 0.5em; + } .i-annc__img-wrap { overflow: hidden; height: 12.5em; - margin: 0 0 1em 0; + margin: 1em 0.5em; img { @media (max-width:767px) { transform: scale(1) !important; @@ -1995,12 +2335,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl font-family: $main-font; } .i-annc__list > .i-annc__item { - width: calc( 100%/4 - 1.5em ); - margin-bottom: 1em; - margin-right: 0.5em; - margin-left: 0.5em; + width: calc( 100%/4); @media (max-width:767px) { - width: calc( 100%/2 - 1.25em ); + width: calc( 100%/2); min-height: unset; margin: 0; margin-bottom: 1em; @@ -2018,7 +2355,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__img-wrap { overflow: hidden; height: 12.5em; - margin: 0 0 1em 0; + margin: 1em 0.5em; img { @media (max-width:767px) { transform: scale(1) !important; @@ -2754,7 +3091,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__img-wrap { overflow: hidden; height: 14.5em; - margin: 0 0 1em 0; + margin: 1em 0.5em; @media (max-width:$screen-xs) { height: 7em; } @@ -2774,223 +3111,3 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl padding: 0; } } -.video_data-widget-1{ - .video_info{ - margin:0.5em 0; - } -} -.video_title { - clear: both; -} -.video_data{ - list-style: none; -} -.video_tag{ - display: flex; - float: left; -} -.view_info{ - margin-bottom: 1em; -} -.video_group_time{ - clear: both; -} -.video_group_time{ - color: $theme-color-main!important; -} -.video_tag{ - color: #fff!important; - background: #626262; - padding: 4px 8px; - border-radius: 5px; - margin: 0.5em 0.5em 0.5em 0; -} -.video_title { - clear: both; - height: 3em; -} -.video_data_wrap{ - padding-right: 0.4375em; - padding-left: 0.4375em; -} -.imglst_desc{ - margin: 1em 0; -} -.category_box { - padding: 0; - border: 1px solid #6868688f; - border-radius: 0.5em 0 0 0.5em; - overflow: hidden; -} -.search_box{ - padding: 0; - border-radius: 0 0.5em 0.5em 0; - overflow: hidden; - border: 1px solid #6868688f; -} -.video_linkwrapper{ - position:relative; - height: 12em; - overflow:hidden; - width: 100%; - border-radius: 1em; - img{ - transform:scale(1.3) translatey(-6px); - width: 100%; - } - @media(max-width: 1025px)and(min-width: 821px){ - height: 11.5em; - img{ - transform:scale(1.6) translatey(-3px); - } - } - @media(max-width: 821px)and(min-width: 769px){ - height:8em; - img{ - transform:scale(1.6) translatey(-3px); - } - } - @media(max-width:768px)and(min-width: 600px){ - height: 22.5em; - img{ - transform:scale(1.3) translatey(-45px); - width: 100%; - } - } -} -.video_desc { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - white-space: normal; - padding-bottom: 0; - @media(min-width: 769px){ - height: 3em; - } - -} - -.video_linkwrapper2{ - position:relative; - height: 17.5em; - overflow:hidden; - width: 100%; - border-radius: 1em; - img{ - transform:scale(1.3) translatey(-41px); - width: 100%; - } - @media(max-width: 1025px)and(min-width: 821px){ - height:16.5em; - img{ - transform:scale(1.3) translatey(-8px); - } - } - @media(max-width: 821px)and(min-width: 769px){ - height:11.5em; - img{ - transform:scale(1.3) translatey(-13px); - } - } - @media(max-width:768px)and(min-width: 600px){ - height: 22.5em; - img{ - transform:scale(1.3) translatey(-48px); - width: 100%; - } - } - @media(max-width: $screen-xs){ - height: 12.5em; - img{ - transform:scale(1.3) translatey(-22px); - width: 100%; - } - } -} -.video_linkwrapper3{ - position:relative; - height: 12em; - overflow:hidden; - img{ - transform:scale(1.6) translatey(5px); - } - @media(max-width: 1025px)and(min-width: 821px){ - height:9.5em; - img{ - transform:scale(1.6) translatey(6px); - } - } - @media(max-width: 821px)and(min-width: 769px){ - height:7.5em; - img{ - transform:scale(1.6) translatey(6px); - } - } - @media(max-width:768px)and(min-width: 600px){ - height: 22.5em; - img{ - transform:scale(1.3) translatey(-48px); - width: 100%; - } - } - @media(max-width: $screen-xs){ - height: 12.5em; - img{ - transform:scale(1.3) translatey(-3px); - width: 100%; - } - } -} -.video_data{ - @media(max-width: 768px){ - width: 100%; - } -} -.video_data:hover, .video_data.hover-class{ - @media(min-width: 1025px){ - .video_snapshot{ - box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3); - -webkit-transform: scale(1.35) translateY(-6px); - -ms-transform: scale(1.35) translateY(-6px); - transform: scale(1.35) translateY(-6px); - -webkit-transition: all .3s ease; - -moz-transition: all .3s ease; - -ms-transition: all .3s ease; - -o-transition: all .3s ease; - transition: all .3s ease; - } - .video_linkwrapper3{ - .video_snapshot{ - -webkit-transform: scale(1.95) translateY(-6px)!important; - -ms-transform: scale(1.95) translateY(-6px)!important; - transform: scale(1.95) translateY(-6px)!important; - } - } - } -} -.index-publications-3{ - @media(min-width:$screen-xs){ - .i-annc__img{ - width: auto; - max-width: unset; - height: 20em; - } - } -} -.index-publications-3 .i-annc__img-wrap{ - overflow: hidden; - margin: 0 0 1em 0; - text-align: center; -} -// .index-publications-3 .i-annc__content-wrap{ -// height: 6em; -// } -.wordcloud2{ - span{ - font-size: 1.5em !important; - height: 2em !important; - position: relative !important; - } -} diff --git a/assets/stylesheets/template/modules/archives.scss b/assets/stylesheets/template/modules/archives.scss index b29069d..8f823f5 100644 --- a/assets/stylesheets/template/modules/archives.scss +++ b/assets/stylesheets/template/modules/archives.scss @@ -550,6 +550,7 @@ font-family: $main-font; display: flex; flex-wrap: wrap; + align-items:center; a { @media(min-width: 769px){ max-width: 80%; diff --git a/assets/stylesheets/template/modules/calendar.scss b/assets/stylesheets/template/modules/calendar.scss index 2fd71f9..9ec7623 100644 --- a/assets/stylesheets/template/modules/calendar.scss +++ b/assets/stylesheets/template/modules/calendar.scss @@ -199,9 +199,7 @@ .fc-daygrid-event-harness .fc-daygrid-event{ padding: 5px; } -.fc .fc-daygrid-more-link{ - font-size: 1em; -} + .fc-timegrid-axis{ min-width: 10em; } @@ -308,6 +306,15 @@ } .fc-timeGridDay-view{ position: relative!important; + span.fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner{ + display: none; + } + .fc-timegrid-axis-frame{ + display: none; + } + .fc-scrollgrid-section-liquid{ + display: none; + } .fc-timegrid-slot{ border:0!important; } @@ -319,10 +326,48 @@ @media(min-width:$screen-xs){ overflow: unset !important; } - + } + .fc-daygrid-day-frame{ + @media(min-width: $screen-xs){ + min-height: 7em!important; + } + @media(max-width: $screen-xs){ + min-height:24em !important; + } } } .fc-timeGridWeek-view{ +/* table th{ + display: table-cell; + }*/ +/* .fc-col-header { + display: none; + }*/ +/* .fc-timegrid-axis{ + display: none; + }*/ + .fc-daygrid-day-frame{ + @media(min-width: $screen-xs){ + min-height: 7em!important; + } + @media(max-width: $screen-xs){ + min-height:24em !important; + } + } + .fc-event-title{ + @media(max-width: $screen-xs){ + -webkit-line-clamp: 4!important; + } + } + span.fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner{ + display: none; + } + .fc-timegrid-axis-frame{ + display: none; + } + .fc-scrollgrid-section-liquid{ + display: none; + } position: relative!important; .fc-timegrid-slot{ border:0!important; @@ -406,7 +451,7 @@ border-radius: 0.5em; } - .hidden_timepicker1{ + .hidden_timepicker{ display: flex; justify-content: center; align-items: center; @@ -433,7 +478,7 @@ }*/ .fc-timeGridWeek-view{ .fc-scrollgrid-sync-table{ - display:none!important; + } } .fc .fc-timegrid-axis-frame{ @@ -469,3 +514,53 @@ color:$theme-color-main; } } +table.fc-col-header{ + width:100%!important; +} +a.fc-daygrid-more-link.fc-more-link{ + display: block; + padding: 0.5em; + border-radius: 1em; + box-shadow: 0 2px 6px #00000026; + border: 0.0625em solid #00000033; + @media(max-width: 768px){ + padding: 0.3em; + font-size: .85em; + } +} +.fc .fc-daygrid-more-link{ + font-size: 1.2em; + font-weight: bold; +} +.fc-h-event .fc-event-title{ + display:-webkit-box!important; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + min-height: 3em; +} +.mybooking{ + &:after{ + content:"\f2bd"!important; + position: relative!important; + background: none!important; + display: block; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + color: #fff; +/* @media(min-width: $screen-xs){ + position: absolute; + top: 2em; + right: 1em; + }*/ + } +} +.mybookinga{ + margin-bottom: 0.5em; + a{ + font-size: 1em; + font-weight: bold; + } +} diff --git a/assets/stylesheets/template/modules/epaper.scss b/assets/stylesheets/template/modules/epaper.scss index e939ae0..5c1ff0e 100644 --- a/assets/stylesheets/template/modules/epaper.scss +++ b/assets/stylesheets/template/modules/epaper.scss @@ -163,21 +163,15 @@ // epaper-index2 .epaper-index2-container{ - border-style: solid; - border-color: #ccc; - border-width: 0 1px 1px; + // border-style: solid; + // border-color: #ccc; + // border-width: 0 1px 1px; h1,h2,h3,h4{ border-bottom: 1px solid #ccc;//#e1e1e1; margin: 0; padding: 10px 0 10px 10px; span{ - float:right; - margin-right:10px; - color: #0e5c92; - border: 1px solid #d1d1d1; - background: #f0f0f0; - padding: 4px 6px; - margin-top:-3px; + } } margin-top: 15px; @@ -228,9 +222,6 @@ background:#fff; } } -.epaper-description a:visited{ - color: #777575; -} .epaper-description a:hover{ text-decoration-color: #333; text-decoration-line: underline; diff --git a/assets/stylesheets/template/modules/event_news.scss b/assets/stylesheets/template/modules/event_news.scss index c7c91d4..10948d0 100644 --- a/assets/stylesheets/template/modules/event_news.scss +++ b/assets/stylesheets/template/modules/event_news.scss @@ -1,6 +1,9 @@ @charset "utf-8"; @import "../initial"; +.w-annc__list{ + clear: both; +} .i-annc__table{ // border: 0.0625em solid #ddd !important; .i-annc__th{ @@ -477,6 +480,9 @@ // Index-5 .index-eventnews-5{ +.i-annc__item{ + width:100% ; + } .i-annc__content-wrap{ @media(max-width: 768px){ padding-top: 0.5em; @@ -854,3 +860,6 @@ display: inline-block; } } +.widget-event-news-calendar-2.w-calendar .w-calendar-title{ + background:$theme-color-second; +} \ No newline at end of file diff --git a/assets/stylesheets/template/modules/gallery.scss b/assets/stylesheets/template/modules/gallery.scss index 4303853..f57d89b 100644 --- a/assets/stylesheets/template/modules/gallery.scss +++ b/assets/stylesheets/template/modules/gallery.scss @@ -241,6 +241,7 @@ overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; + height: 2.5em; } .index-img-description { diff --git a/assets/stylesheets/template/modules/member.scss b/assets/stylesheets/template/modules/member.scss index a87c275..18bdd34 100644 --- a/assets/stylesheets/template/modules/member.scss +++ b/assets/stylesheets/template/modules/member.scss @@ -67,6 +67,7 @@ .i-member-pic { width: 100%; + padding: 0; } .i-member-profile-list { @@ -280,6 +281,82 @@ .i-member-profile-list { @include list-reset; word-break: break-all; + text-align: center; + } + + .i-member-profile-item { + font-size: 1em; + line-height: 1.3; + padding-top: 0.5em; + letter-spacing: 1px; + } + .i-member-title { display: none; } + .i-member-item:nth-child(4n+1) { + clear: both; + } + + .i-member-pic-wrap { + padding: 0; + } +} +//index 7 +.index-member-7 { + .i-member-section { + margin: auto; + } + .i-member-list { + display: flex; + flex-flow: row wrap; + margin: 0; + } + .i-member-item { + float: none; + padding: 15px; + + @media (max-width:1280px) { + width: calc( 100% / 3 ); + } + @media (max-width:767px) { + width: calc( 100% / 2 ); + } + @media (max-width:580px) { + width: 100%; + } + } + .i-member-item-inner { + height: auto !important; + } + + .i-member-status-title { + @extend .unity-title; + } + + .i-member-item-inner { + background: none; + } + + .i-member-pic-wrap { + height: auto; + margin-bottom: 16px; + + @media(max-width:580px) { + overflow: hidden; + border-radius: 50%; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + height: 14em; + width: 14em; + margin: 1.5em auto 1em auto; + } + } + + .i-member-pic { + width: 100%; + } + + .i-member-profile-list { + @include list-reset; + word-break: break-all; + text-align: center; } .i-member-profile-item { diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss index d24e6ab..5696b8f 100644 --- a/assets/stylesheets/template/modules/menu.scss +++ b/assets/stylesheets/template/modules/menu.scss @@ -3,6 +3,12 @@ @import "../initial"; // // 選單樣式2 +// .modules-menu .modules-menu-level-1 > li:hover, .modules-menu .modules-menu-level-1 > li.hover-class{ +// background-color: transparent!important; +// >a{ +// text-decoration: underline; +// } +// } // .modules-menu{ // @media (min-width: $screen-sm){ // li{ @@ -197,7 +203,6 @@ } @media (min-width:1025px) { margin: 0; - padding:0.5em 0 0; list-style: none; display: flex; flex-wrap: wrap; @@ -315,6 +320,11 @@ right: 0; } } + &:nth-last-child(2){ + .modules-menu-level-1 { + right: 0; + } + } } @media (min-width: $screen-sm) { @@ -566,7 +576,7 @@ transition-property:transform; } .mobile-menu .modules-menu.collapse.in { - transform: translateX(100%); + transform: translateX(0%); -webkit-transition-timing-function:ease; -o-transition-timing-function:ease; transition-timing-function:ease; @@ -580,7 +590,6 @@ .mobile-menu .collapse.navbar-collapse.modules-menu { overflow-y: scroll; - transform: translateX(0%); } .display-on{ display:block!important; diff --git a/assets/stylesheets/template/modules/text_marquee.scss b/assets/stylesheets/template/modules/text_marquee.scss index e5081a9..0b4c888 100644 --- a/assets/stylesheets/template/modules/text_marquee.scss +++ b/assets/stylesheets/template/modules/text_marquee.scss @@ -1,12 +1,29 @@ @import "../initial"; .marquee { - background: rgba(255,255,255,0.1); - border: 1px solid rgba(0,0,0,0.1); - border-radius: 0.3125em; + background:#ff0000; font-size: 0.938em; - list-style: outside none none; - margin: 0 0 1.875em; + list-style:none; + margin: 0; min-height: 1.875em; overflow: hidden; - padding: 0.9375em; + padding: 0.75em; + color: #fff; + li{ + list-style:none; + } + a{ + color: #fff; + } + &:before{ + content: "\f0a1"; + font-family: FontAwesome; + color: #FFEB3B; + font-size: 18px; + padding-right: 0.5em; + float: left; + } } +.text_marqueewrapper{ + z-index:1 ; + position: relative; +} \ No newline at end of file diff --git a/assets/stylesheets/template/modules/universal-table.scss b/assets/stylesheets/template/modules/universal-table.scss index 38406bf..c354621 100644 --- a/assets/stylesheets/template/modules/universal-table.scss +++ b/assets/stylesheets/template/modules/universal-table.scss @@ -1,6 +1,25 @@ @charset "utf-8"; @import "../initial"; +.universal-table-index tbody{ + width:100% ; +} +.universal-table-show{ + .view_count > i:before{ + content: "\f019"!important; + margin: 0.5em; + padding: 0.5em; + border-radius: 1em; + } +} +.universal-table-index{ + .view_count > i:before{ + content: "\f019"!important; + margin: 0.5em; + padding: 0.5em; + border-radius: 1em; + } +} .universal-table-index{ tr{ background-color: #fff!important; @@ -193,10 +212,10 @@ } } .column_entry_files{ - padding-left: 1em; + padding-left:0; } .column_entry_file{ - list-style: disc; + list-style: none; } .ken-click2{ margin-top:-3em; diff --git a/assets/stylesheets/template/modules/video.scss b/assets/stylesheets/template/modules/video.scss new file mode 100644 index 0000000..ca3d4c3 --- /dev/null +++ b/assets/stylesheets/template/modules/video.scss @@ -0,0 +1,978 @@ +@charset "utf-8"; + +@import "../initial"; +.Video__Player{ + display: flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + width: 100%; + height: 100%; + .Video__PlayerButton{ + display: inline-block; + padding-bottom: 0px; + padding-top: 0px; + border-radius: 50%; + border: 0px; + background-color: $theme-color-second; + background: url(/assets/btn-play.svg) no-repeat; + background-size: 100%; + background-repeat: no-repeat; + background-position: center center; + transition: 0.5s; + width: 60px; + height: 60px; + &:hover{ + width: 80px; + height: 80px; + } + } +} +.view_info{ + max-height: 100%; + border-radius: 2px; + font-size: 0.875rem; + font-weight: normal; + letter-spacing: 0.3px; + text-align: center; + display: flex; + -webkit-box-align: center; + align-items: center; + position: absolute; + padding: 0px 8px; + background-color: #000000cc; + color: rgb(255, 255, 255); + z-index: 10; + top: 10px; + left: 10px; + border: 1px solid transparent; + line-height: 1.45; + span{ + color:#fff; + } + &:before{ + content: ""; + display: inline-block; + margin-right: 5px; + width: 14px; + height: 10px; + background: url(/assets/icon-view@2x.png) no-repeat; + position: relative; + background-size: contain; + } +} +.w-video_data{ + position: relative; + .video_keyword{ + display: none; + } + .video_tag{ + top:10px; + left:10px; + max-height: 100%; + border: 0; + border-radius: 2px; + background-color: transparent; + font-size: 0.875rem; + font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif; + font-weight: normal; + letter-spacing: 0.3px; + text-align: center; + display: flex; + -webkit-box-align: center; + align-items: center; + position: absolute; + padding: 0px 8px; + color: #fff; + z-index: 5; + .video_tags2 { + float: left; + min-width: 5em; + border: 1px solid; + border-radius: 2px; + background-color: #1515154d; + } + } +} +.view_info{ + img{ + width: 30px!important; + } +} +.videohover{ + position: absolute; + width: 100%; + height: 100%; + transition: 0.3s; + top: 0; + opacity: 0; +} +.video_data{ + z-index: 1!important; + position: relative!important; + &:hover{ + .video_title{ + .video_link{ + color: $theme-color-second; + text-decoration: underline; + } + } + + .videohover{ + position: absolute; + width: 100%; + height: 100%; + transition: 0.3s; + z-index: 2; + opacity: 1; + } + } + &:hover{ + @media(min-width: 1025px){ + .video_snapshot{ + box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3); + -webkit-transform: scale(1.1) ; + -ms-transform: scale(1.1) ; + transform: scale(1.1) ; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; + } + .video_linkwrapper2{ + .video_snapshot{ + -webkit-transform: scale(1.1) !important; + -ms-transform: scale(1.1) !important; + transform: scale(1.1) !important; + } + } + } + .video_tag{ + display: none; + } + + } + img{ + width: 100%; + height: 100%; + object-fit: cover; + } + + @media(max-width: 768px){ + width: 100%; + } +} +.video_data-widget-1{ + .video_info{ + margin:0.5em 0; + } +} +.video_data-widget-2{ + .col-sm-4{ + @media(min-width:768px){ + width: 33.33333333%; + float: left; + } + } + .video_data_wrap{ + @media(min-width:$screen-xs){ + display: flex; + flex-wrap: wrap; + } + } + + .video_desc{ + display: none; + } + .video_info{ + margin:0.5em 0; + } + .video_link{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } + .video_keyword{ + display: none; + } + .video_data{ + + &:first-child{ + .video_keyword{ + display: -webkit-box !important; + text-overflow: ellipsis; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + white-space: normal; + overflow: hidden; + } + .video_linkwrapper2{ + + @media(min-width:$screen-xs)and(max-width:768px){ + height: 24em; + } + } + width: 100% ; + @media(max-width:$screen-xs){ + width: 100.5vw !important; + margin-left: -6vw; + } + .video_desc{ + .video_link{ + text-align: center; + &:hover{ + &:before{ + background-color: #c21000!important; + } + } + &:before{ + content: " ▶ 觀看節目"; /* Font Awesome 播放圖示 + 文字 */ + font-weight: 900; + position: absolute; + display: inline-flex; + align-items: center; + gap: 5px; + display: inline-flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + padding: 0px 15px; + height: 44px; + border-radius: 22px; + line-height: 42px; + border: 1px solid transparent; + background-color: $theme-color-second; + color: rgb(255, 255, 255); + font-size: 1.25rem; + letter-spacing: 0.3px; + font-weight: normal; + white-space: nowrap; + transition: 0.3s; + bottom: 3em; + } + } + } + + .video_title{ + &:before{ + content: ''; + position: relative; + background: url(/assets/icon-now.svg) no-repeat; + width: 35px; + height: 35px; + background-size: contain; + display: block; + margin-right: 0.5em; + margin-top: 1.2em; + float: left; + @media(max-width:$screen-xs){ + width: 50px; + height: 50px; + position: absolute; + top: -2.5em; + left: 44%; + float: none; + } + } + h5{ + font-size: 1.8em; + } + } + .videohover{ + display: none!important; + } + .video_tag{ + position: absolute; + left: 6em; + bottom: 8em; + top: auto; + display: block!important; + background-color:transparent; + border:0; + } + .video_desc{ + display: block; + height: 4.1em; + overflow: hidden; + margin-bottom: 8em; + + } + margin-bottom: 2em; + .video_group_time{ + color: #fff!important; + position: absolute; + bottom: 4.5em; + margin-left: 9.5em; + } + .view_info{ + display: none; + } + + @media(min-width:767px){ + + &:before{ + content: ''; + position: absolute; + bottom: 0; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); + top: 0; + z-index: 1; + width: 100%; + height: 100%; + } + } + .video_info{ + position: absolute; + z-index: 2; + bottom: 0; + color: #fff; + a{ + color: #fff; + } + @media(min-width:767px){ + padding: 2em 5em; + width: 55%; + } + @media(max-width:767px){ + margin: 0; + padding: 1em; + background-color: #444; + position: relative; + padding-bottom: 4em; + padding-top: 3em; + .video_title h5{ + font-size: 1.2em; + } + .video_tag{ + left: 12%; + bottom: 9em; + flex-wrap: wrap; + justify-content: center; + display: flex!important; + width: 75%; + .video_keyword{ + margin-top: 0.5em; + } + } + .video_link:before{ + bottom: 4em; + left: 32vw; + } + .video_group_time{ + margin-left: 0; + width: 100%; + text-align: center; + left: 0; + bottom:2.5em; + } + } + + } + + + .video_linkwrapper2{ + @media(min-width:1025px){ + height: 40.6em; + } + @media(min-width:769px)and(max-width:1024px){ + height: 32.6em; + } + @media(max-width: 821px)and(min-width: 769px){ + height: 25.6em; + } + @media(max-width:$screen-xs){ + height: 14.5em; + } + } + + } + + } +} +.video_data-widget-3{ + @media(max-width:768px){ + margin-bottom: 3em; + } + .btnwrapper{ + @media(max-width:768px)and(min-width:$screen-xs){ + top: 90%!important; + width: 14%!important; + left: 44%!important; + } + @media(max-width:$screen-xs){ + top: 90%!important; + width: 24% !important; + left: 38% !important; + } + } + .video_data_wrap{ + @media(min-width:$screen-xs){ + display: flex; + flex-wrap: wrap; + } + } + .video_data{ + @media(max-width:821px)and(min-width:$screen-xs){ + width: 48vw !important; + float: none; + } + @media(max-width:$screen-xs){ + width: 92.5vw !important; + margin-left: 0 !important; + margin-right: 1em !important; + float: none; + } + } + .video_desc{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + max-height: 4.5em; + line-height: 1.5em; + } + .video_info{ + margin:0.5em 0; + } + .video_link{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } +} +.video_data-widget-4{ + .btnwrapper{ + @media(max-width:$screen-xs){ + top: 90%!important; + width: 24% !important; + left: 38% !important; + } + } + .video_data_wrap{ + @media(min-width:$screen-xs){ + display: flex; + flex-wrap: wrap; + } + } + .video_data{ + + @media(max-width:821px)and(min-width:$screen-xs){ + width: 48vw !important; + float: none; + } + @media(max-width:$screen-xs){ + width: 92.5vw !important; + margin-left: 0 !important; + margin-right: 1em !important; + float: none; + } + } + .video_desc{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + max-height: 4.5em; + line-height: 1.5em; + } + .video_info{ + margin:0.5em 0; + min-height: 6em; + } + .video_link{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } +} +.video_data-widget-5{ + .cycle-pager{ + font-size: 1.25rem; + font-family: "Noto Serif TC", serif; + font-weight: bold; + h5{ + font-size: 1.25rem; + border-bottom: 1px solid #ccc; + padding: 0.5em; + } + } + + .video_title h5{ + @extend .i-title; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + .view_info{ + float: right; + } + .view_info img{ + margin-right: 5px; + } + .Video__Player{ + display: flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + width: 100%; + height: 100%; + .Video__PlayerButton{ + display: inline-block; + padding-bottom: 0px; + padding-top: 0px; + border-radius: 50%; + border: 0px; + background-color: $theme-color-second; + background: url(/assets/btn-play.svg) no-repeat; + background-size: 100%; + background-repeat: no-repeat; + background-position: center center; + transition: 0.5s; + width: 60px; + height: 60px; + &:hover{ + width: 80px; + height: 80px; + } + } + } + .view_info{ + max-height: 100%; + border-radius: 2px; + font-size: 0.875rem; + font-weight: normal; + letter-spacing: 0.3px; + text-align: center; + display: flex; + -webkit-box-align: center; + align-items: center; + position: absolute; + padding: 0px 8px; + background-color: #000000cc; + color: rgb(255, 255, 255); + z-index: 10; + top: 10px; + left: 10px; + border: 1px solid transparent; + line-height: 1.45; + span{ + color:#fff; + } + &:before{ + content: ""; + display: inline-block; + margin-right: 5px; + width: 14px; + height: 10px; + background: url(/assets/icon-view@2x.png) no-repeat; + position: relative; + background-size: contain; + } + } + .cycle-sentinel { + display: none !important; +} + .pager-controls{ + position: absolute; + right: 1em; + bottom: 1em; + .prev-btn,.next-btn{ + color: #909090; + background: #fff; + border-radius: 50%; + border: none; + height: 2.5em; + width: 2.5em; + transition: .3s; + &:hover{ + filter: drop-shadow(rgb(214, 214, 214) 0px 0px 0.1rem); + } + } + @media(max-width:768px){ + position: relative; + float: right; + right: 0; + bottom: 0; + } + } + .video_data_wrap{ + @media(min-width:$screen-xs){ + display: flex; + flex-wrap: wrap; + } + } + .video_data{ + @media(max-width:$screen-xs){ + width: 93.5vw !important; + margin-left: 0 !important; + margin-right: 1em !important; + float: none; + } + } + .video_desc{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + max-height: 4.5em; + line-height: 1.5em; + } + .video_info{ + margin:0.5em 0; + } + .video_link{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } +} +.video_detail{ + h3{ + margin-top: 0.5em; + } +} +.movie_desc{ + clear: both; + letter-spacing: 0.3px; + color: #8f8f8f; + line-height: 1.8; +} +.video_title { + clear: both; +} +.video_data{ + list-style: none; +} +.video_tag{ + display: flex; + float: left; +} +.view_info{ + margin-bottom: 1em; +} +.video_group_time{ + clear: both; +} +.video_group_time{ + color: #8f8f8f!important; +} +.movietitle{ + margin-bottom: 15px; + width: 100%; + border-bottom: 1px solid #ccc; + clear: both; + font-family: "Noto Serif TC", serif; + font-weight: bold; + h4{ + width: 100px; + border-bottom: 2px solid #141414; + padding-bottom: 0.5em; + margin-bottom: 0; + } +} +.imglst_desc{ + .video_tag{ + background-color: transparent; + color: $theme-color-second; + font-weight: normal; + letter-spacing: 0.3px; + text-align: center; + display: inline-block; + padding: 0px 7px; + max-height: 100%; + border: 1px solid; + border-radius: 2px; + margin-bottom: 1em; + } +} +.video_title { + clear: both; + @extend .i-title; +} +.video_data_wrap{ + padding-right: 0.4375em; + padding-left: 0.4375em; +} +.imglst_desc{ + margin: 1em 0; +} +.category_box { + padding: 0; + border: 1px solid #6868688f; + border-radius: 0.5em 0 0 0.5em; + overflow: hidden; +} +.search_box{ + padding: 0; + border-radius: 0 0.5em 0.5em 0; + overflow: hidden; + border: 1px solid #6868688f; +} +.video_linkwrapper{ + position:relative; + height: 12em; + overflow:hidden; + width: 100%; + border-radius: 1em; + img{ + width: 100%; + } + +} +.video_desc { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + padding-bottom: 0; + +} + +.video_linkwrapper{ + position:relative; + height: 12.5em; + overflow:hidden; + width: 100%; + border-radius: 1em; + @media(max-width: 1025px)and(min-width: 821px){ + height:10.5em; + } + @media(max-width: 821px)and(min-width: 769px){ + height:8em; + } + @media(max-width:768px)and(min-width: 600px){ + height: 23.5em; + } + @media(max-width: $screen-xs){ + height: 11.5em; + } +} +.video_linkwrapper2{ + position:relative; + height: 13.5em; + overflow:hidden; + + @media(max-width: 1025px)and(min-width: 769px){ + height:10em; + + } + @media(max-width: 821px)and(min-width: 768px){ + height:7.5em; + + } + @media(max-width:767px)and(min-width:$screen-xs){ + height: 22.5em; + } + @media(max-width:$screen-xs){ + height: 13em; + } +} +.video_linkwrapper3{ + position:relative; + height: 13.5em; + overflow:hidden; + + @media(max-width: 1025px)and(min-width: 821px){ + height:10em; + + } +@media(max-width: 821px)and(min-width: 769px){ + height: 7.8em; + + +} +@media(max-width:768px)and(min-width:$screen-xs){ + height: 12em; + +} +@media(max-width: $screen-xs){ + height:13em; +} +} +.video_linkwrapper4{ + position:relative; + height: 9em; + overflow:hidden; + + @media(max-width: 1025px)and(min-width: 821px){ + height:7em; + + + } + @media(max-width: 821px)and(min-width: 769px){ + height: 7.8em; + + + } + @media(max-width:768px)and(min-width:$screen-xs){ + height: 11.5em; + + } + @media(max-width: $screen-xs){ + height:13em; + + } +} +.video_linkwrapper5{ + + position:relative; + height: 27em; + overflow:hidden; + + @media(max-width: 1025px)and(min-width: 821px){ + height:21.5em; + + } +@media(max-width: 821px)and(min-width: 769px){ + height: 7.8em; + + +} +@media(max-width:768px)and(min-width:$screen-xs){ + height: 25em; + +} +@media(max-width: $screen-xs){ + height:13em; + +} +} +.video_group_time{ + q{ + margin-left: 0.5em; + } + q::before { + display: none!important; + } + q::after { + display: none!important; + } +} + +.video_data-modal-view .play_icon{ + height: 55px; +} +.video_box_wrap{ + box-shadow: #15151580 0px 2px 10px 0px; + margin-bottom: 1em; +} +.video_data-index-1{ + .view_info{ + position: relative; + } +} +.video_data-post-agency-1{ + .view_info{ + position: relative; + } +} +.video_data-index-4{ + + .i-annc__page-title{ + display: none; + } + .category_box{ + border:0; + display: flex; + justify-content: center; + } + button.category-btn{ + margin: 0.5em; + display: inline-flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + padding: 0px 15px; + height: 36px; + border-radius: 18px; + line-height: 34px; + border: 1px solid rgb(204, 204, 204); + background-color: rgb(255, 255, 255); + color: rgb(20, 20, 20); + font-size: 1rem; + font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif; + letter-spacing: 0.3px; + font-weight: normal; + white-space: nowrap; + transition: 0.3s; + &:hover{ + background-color: $theme-color-second; + color: #ffffff; + } + &:active{ + background-color: $theme-color-second; + color: #ffffff; + } + } + .video_linkwrapper2{ + height: 9.5em; + } + .video_desc{ + letter-spacing: 0.3px; + color: #8f8f8f; + line-height: 1.6; + max-height: 5em; + } + .video_info{ + margin:0.5em 0; + } + .video_link{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } + .video_tag{ + top:10px; + left: 10px; + max-height: 100%; + border: 0; + border-radius: 2px; + background-color: transparent; + font-size: 0.875rem; + font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif; + font-weight: normal; + letter-spacing: 0.3px; + text-align: center; + display: flex; + -webkit-box-align: center; + align-items: center; + position: absolute; + padding: 0px 8px; + color: #fff; + z-index: 5; + .video_tags2 { + float: left; + min-width: 5em; + border: 1px solid; + border-radius: 2px; + background-color: #1515154d; + } + } +} \ No newline at end of file diff --git a/assets/stylesheets/template/modules/web_resource.scss b/assets/stylesheets/template/modules/web_resource.scss index adfeeba..0c881c4 100644 --- a/assets/stylesheets/template/modules/web_resource.scss +++ b/assets/stylesheets/template/modules/web_resource.scss @@ -3,6 +3,28 @@ @import "../initial"; // Link MODULES +.morebken{ + font-size: 1.2em; + font-weight: normal; + color: #333; + padding: 0.5em 1em; + width: fit-content; + float: right; + cursor: pointer; + display: flex; + align-items: center; + &:hover{ + color: $theme-color-second; + } + i{ + font-size: 0.8em; + padding-left: 5px; + } +} +.rotate { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); +} .widget-link_wrapper{ z-index: 1; } @@ -36,7 +58,7 @@ align-items: normal; } .liWrapper{ - margin: 0.5em; + margin:0 0.5em; overflow: hidden; } } @@ -46,7 +68,7 @@ &.widget1 { img{ - width: 32%; + // width: 32%; } .widget-content { text-align: center; @@ -56,7 +78,6 @@ } .widget-content-title { - display: inline-block; padding-top: 0.5em; @extend .i-subtitle; } @@ -70,6 +91,17 @@ } } } + &.widget2{ + .list-unstyled{ + display: flex; + justify-content: center; + flex-wrap: wrap; + overflow: hidden; + li:nth-child(n+5){ + display: none; + } + } + } &.widget-3 { ul{ @media(max-width: $screen-xs){ @@ -108,10 +140,10 @@ padding: 0.5em !important; } .link-img-wrap{ - border-radius: 50%; + border-radius:10em; overflow: hidden; &:hover{ - border-radius: 20%; + border-radius:2em; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; @@ -169,6 +201,7 @@ // Link INDEX .index-link { + clear: both; .index-title { @extend .unity-title; } diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss index 683c139..c9826f7 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -22,7 +22,16 @@ //RWD @import "RWD"; - +.sr-only{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} .dropdown-toggle:focus { // outline: 2px solid #43B5FC; @@ -475,13 +484,13 @@ ul.tab_nav { table td{ border: 1px solid #ddd!important; @media (max-width: 480px) { - width: 100%; + width: auto!important; text-align: center; } } td,th{ @media(max-width: $screen-xs){ - width: 100%; + width: auto!important; text-align: center; } } @@ -669,13 +678,18 @@ table.dataTable>tbody>tr.child{ } } } +//內頁搜尋樣式 input.search_box{ - background: #fff!important; - border: 1px solid #bbb!important; - color: #333!important; + background: #fff !important; + border: 1px solid #bbb !important; + color: #333 !important; padding: 0.5em !important; - margin-right: 0.5em !important; - border-radius: 0.5em!important; + margin-right: 0.25em !important; + border-radius: 0.5em !important; + margin-left: 0.25em !important; + @media(max-width:1024px){ + margin-top: 0.5em !important; + } } ::placeholder { color: #333!important; @@ -685,6 +699,10 @@ input.search_box{ background: #fff!important; color: #333!important; margin-right: 0.5em!important; + @media(max-width:1024px){ + margin-left: 0.25em !important; + margin-top: 0.5em !important; + } } #category_select_box>option{ background: #fff!important; @@ -725,6 +743,7 @@ a.ui-state-default{ border: 0!important; background: silver!important; } + .aligncenter{ display: flex; align-items: center; diff --git a/assets/stylesheets/template/widget/sitemenu.scss b/assets/stylesheets/template/widget/sitemenu.scss index ed4bd89..95b3d2b 100644 --- a/assets/stylesheets/template/widget/sitemenu.scss +++ b/assets/stylesheets/template/widget/sitemenu.scss @@ -1,6 +1,10 @@ @charset "utf-8"; @import "../initial"; +.sitemenu{ + z-index: 1; + position: relative; +} .sitemenu-wrap{ // padding-right: 0.9375em!important; // padding-left: 0.9375em!important; diff --git a/home/header.html.erb b/home/header.html.erb index ead7f9a..dee11d9 100644 --- a/home/header.html.erb +++ b/home/header.html.erb @@ -33,8 +33,10 @@ {{site_name}}