diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index b2bd0c3..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,17 +234,13 @@ ul.button-mid{ } .ad-overlay{ text-align: center; - padding-top: 20%; position: relative; background: none; color: #fff; + 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; @@ -270,7 +285,7 @@ ul.button-mid{ } @media(max-width: $screen-xs){ .ad-overlay{ - top: 17%; + top: 35%; position: absolute; } } @@ -367,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; @@ -395,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;} } @@ -473,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; @@ -490,8 +499,12 @@ ul.button-mid{ } p{ padding: 0 0.2em; - border-bottom: 3px solid $theme-color-second; - box-shadow: 0px 0px 3px 0px #3333334d; + 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 a6d5f13..2eb74b1 100644 --- a/assets/stylesheets/template/modules/announcement.scss +++ b/assets/stylesheets/template/modules/announcement.scss @@ -8,12 +8,29 @@ // Announcement widget // ## Gerneral styles for widgets +.VivaTimeline{ + z-index: 1; + position: relative; +} .w-annc__table{ // border: 0.0625em solid #ddd !important; .w-annc__th{ @extend .i-title; } } +.w-annc__status{ + margin-right: 0.5em; + line-height: 1 !important; +} +.w-annc__status-wrap{ + display: flex; +} +.i-annc__status-wrap{ + display: flex; +} +.i-annc__th--date{ + min-width: 6em; +} // .w-annc__th{ // border-bottom:0.0625em solid #ddd!important; // } @@ -217,7 +234,7 @@ padding-bottom: 0; } .w-annc__img-wrap { - height: 12.5em; + height: 13.5em; margin:0; } @@ -251,7 +268,7 @@ padding-bottom: 0; } .w-annc__img-wrap { - height: 12.5em; + height: 13.5em; margin:0; } @@ -336,11 +353,6 @@ background: $theme-color-main; } } - @media(max-width: $screen-xs){ - margin-left: 0!important; - margin-right: 0!important; - width: 100% !important; - } } .w-annc__item{ // @media(min-width: $screen-lg){ @@ -417,9 +429,6 @@ .w-annc__title{ color: #fff; - @media(min-width:1920px){ - font-size: 1.6rem!important; - } } .w-annc__title { font-family: $main-font; @@ -492,8 +501,8 @@ } .w-annc__item{ @media(max-width: $screen-xs){ - margin-left: 0 !important; - margin-right: 0 !important; + // margin-left: 0 !important; + // margin-right: 0 !important; } &:hover{ -webkit-transform: translateY(-6px); @@ -546,16 +555,6 @@ font-size: 1.2em; } } - .w-annc__img-wrap { - img{ - 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; @@ -677,9 +676,6 @@ .w-annc__title{ color: #fff; - @media(min-width:1920px){ - font-size: 1.6rem!important; - } } .w-annc__title { font-family: $main-font; @@ -746,9 +742,9 @@ width: 356px!important; } @media (max-width: $screen-xs) { - width: 94vw !important; - margin-left: 0 !important; - margin-right: 0 !important; + width: 93.5vw !important; + margin-left: 0 !important; + margin-right: 1em !important; } &:hover{ -webkit-transition: all .3s ease; @@ -814,16 +810,6 @@ font-size: 1.2em; } } - .w-annc__img-wrap { - img{ - 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; @@ -911,7 +897,7 @@ background-color:#dfdfdf; display: flex; align-items: center; - padding: 0 1em; + padding:0.5em 1em; } h4,p{ padding: 0 1em; @@ -960,11 +946,342 @@ } @media (max-width: 767px) { width: 100%!important; - margin-left: 0; - margin-right: 0; } } } +// 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-top: 1em; + display: none; + } +} +// 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; + @media(max-width:767px){ + } + } + } + .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: 1100px){ + height: 22em; + .w-annc__img-wrap{ + height: 22em; + } + } + @media(min-width: 821px)and(max-width: 1100px){ + height: 22em; + .w-annc__img-wrap{ + height: 22em; + } + } + @media(min-width: $screen-xs)and(max-width: 820px){ + height: 15em; + .w-annc__img-wrap{ + height: 15em; + } + } + @media(max-width: $screen-xs){ + height: 10em; + .w-annc__img-wrap{ + height: 10em; + } + } + } + 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%; + @media(max-width:$screen-xs){ + padding: 10px; + .w-annc__title{ + font-size: medium; + } + } + } + .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 { @@ -1279,13 +1596,8 @@ .widget-announcement-14 { .w-annc__img-wrap { - height: 18.75em; - margin-bottom: 0.9375em; - - @media (min-width: $screen-md) { - height: 12.5em; margin-bottom: 0; - } + padding: 0; } .w-annc__item { @@ -1329,7 +1641,7 @@ } .w-annc__img-wrap { - height: 17.5em; + height: 15.5em; margin: 0; overflow: hidden; } @@ -1354,9 +1666,9 @@ width: 356px!important; } @media (max-width: $screen-xs) { - width: 94vw !important; + width: 94.5vw !important; margin-left: 0 !important; - margin-right: 0 !important; + margin-right: 1em !important; } } // .cycle-slide{ @@ -1368,6 +1680,9 @@ } //Widget 16 .widget-announcement-16 { + .w-annc__img{ + width: 100%; + } .w-annc__content-wrap{ padding: 1em; } @@ -1382,7 +1697,6 @@ .w-annc__title { font-family: $main-font; } - .w-annc__item { padding: 0; } .w-annc__img-wrap { margin: 0 0 0.5rem 0; } @@ -1428,14 +1742,14 @@ white-space: normal; } .w-annc__entry-title { - height: 2.5em; + height: 2em; } .w-annc__img-wrap { - height: 12.5em; + height: 13.5em; margin:0; overflow: hidden; @media (max-width: $screen-xs) { - height: 12.5em; + height: 13.5em; } } .w-annc__content-wrap{ @@ -1530,6 +1844,9 @@ //widget 19 .widget-announcement-19 { + .w-annc__title{ + white-space: normal; + } .cycle-carousel-wrap{ display: flex; } @@ -1560,7 +1877,7 @@ -webkit-line-clamp: 2; } .w-annc__img-wrap { - height: 12.5em; + height: 13.5em; margin: 0 0 1em 0; overflow: hidden; } @@ -1575,7 +1892,7 @@ margin-left: 0.5em; height: 14em; @media(min-width: $screen-lg){ - width:579px !important; + width:582px !important; } @media(max-width: 1025px)and(min-width: 821px){ width: 30.5vw !important; @@ -1584,8 +1901,10 @@ width: 356px!important; } @media (max-width: $screen-xs) { - width: 90vw!important; - } + width: 89vw !important; + margin-left: 0.5em !important; + margin-right: 0.5em !important; + } } } @@ -1683,7 +2002,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; } @@ -1719,7 +2038,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; @@ -1747,13 +2066,15 @@ font-family: $main-font; @extend .i-title; } + .i-annc__status{ + margin-right: 0.5em; + } .i-annc__status-wrap { span { display: inline-block; padding: .2em .6em .3em; &:last-child { - margin: 0 0.3125em 0.1875em 0; display: inline-block; } } @@ -1779,6 +2100,10 @@ display: flex !important; position: relative; align-items: center; + flex-wrap: wrap; + .i-annc__status-wrap{ + width:100% ; + } .i-annc__status-wrap, .i-annc__postdate-wrap, .i-annc__category-wrap { @@ -1870,7 +2195,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__status { @extend .i-title; - display: inline-block; } } @@ -1901,7 +2225,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__status { @extend .i-title; - display: inline-block; } } @@ -1931,6 +2254,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; @@ -1939,18 +2265,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; } } @@ -1958,11 +2278,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; + height: 13.5em; + margin: 1em 0.5em; img { @media (max-width:767px) { transform: scale(1) !important; @@ -1980,12 +2302,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; @@ -2002,8 +2321,8 @@ 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; + height: 13.5em; + margin: 1em 0.5em; img { @media (max-width:767px) { transform: scale(1) !important; @@ -2250,7 +2569,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__status { @extend .i-title; - display: inline-block; } } // Index-21 @@ -2740,7 +3058,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; } @@ -2760,223 +3078,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 af7ff62..2957fd1 100644 --- a/assets/stylesheets/template/modules/calendar.scss +++ b/assets/stylesheets/template/modules/calendar.scss @@ -1,17 +1,7 @@ @charset "utf-8"; @import "../initial"; -.widget-calendar-2{ - .w-calendar-title{ - background:$theme-color-second!important; - } - .day{ - color:$theme-color-second!important; - } - .w-calendar-toggle div{ - background:$theme-color-second!important; - } -} + .w-calendar { width: 100%; position: relative; @@ -66,7 +56,10 @@ } } #orbit_calendar{ + position: relative; + margin-top: 1em; width: 100%!important; + z-index: 0; table th{ background-color: #fff; color: #333; @@ -82,22 +75,95 @@ .fc-daygrid-event-dot{ display: none!important; } + .fc-daygrid-event-harness{ .mybooking{ - background-color:#ff7a00 !important; - color: #fff !important; - border:0!important; - .fc-event-main{ - color: #333 !important; - } + box-shadow: 0 1px 2px 1px #000000; + // background-color:#ff7a00 !important; + // color: #fff !important; + // border:0!important; + // .fc-event-time,.fc-event-title-container{ + // color: #fff !important; + // } + // .fc-event-main-frame{ + // color: #fff !important; + // } } } .fc .fc-daygrid-event{ margin-top: 4px; } +.fc-timegrid-event-harness{ + .mybooking{ + box-shadow: 0 1px 2px 1px #000000; + // background-color:#ff7a00 !important; + // border:0!important; + // .fc-event-main-frame{ + // color: #fff !important; + // } + } +} +.fc-timegrid-slot-label-cushion{ + font-size:small; +} +.fc .fc-timegrid-slot-label{ + border:0; +} +.fc .fc-timegrid-slot{ + height: 0.5em !important; +} +.fc-direction-ltr .fc-timegrid-slot-label-frame{ + text-align:center!important; +} +.fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion{ + padding: 0; +} +.fc .fc-timegrid-axis-frame{ + justify-content: center!important; +} +// .fc-timeGridWeek-view{ +// .fc-event-time{ +// display: none; +// } +// } + .fc-v-event .fc-event-main-frame{ + padding: 5px; + color: #fff; + } + // .fc-timeGridWeek-view{ + // .fc-scrollgrid-sync-table{ + // display: none; + // } + // } + // td.fc-timegrid-axis.fc-scrollgrid-shrink{ + // display: none; + // } +// .fc .fc-timegrid-axis-frame{ +// display: none; +// } + // .fc .fc-timegrid-slot-label{ + // display: none; + // } + +.fc-timegrid-event-harness{ + position:relative!important; + inset: unset !important; +} +.fc-timegrid-event-harness > .fc-timegrid-event{ + position:relative!important; + inset: unset !important; + width: 100%; + border: 0; +} +#hire_form label.col-sm-4.control-label{ + @media(max-width: $screen-xs){ + padding-left:0.9375em!important; + } +} .modal-content{ box-shadow: 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f, 0 11px 15px -7px #00000033; border-radius: 8px; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); border: 0; } .fc .fc-daygrid-day.fc-day-today{ @@ -106,6 +172,8 @@ color: #fff; background-color: #858585; border-radius: 0.65em; + min-width: 2em; + text-align: center; } } .calendar-modal .event_summary{ @@ -120,18 +188,18 @@ } .fc .fc-daygrid-day-number{ margin-top: 0.3em; + color: inherit; +} +.fc .fc-col-header-cell-cushion{ + color: inherit; } .fc-daygrid-dot-event{ display:block !important; } .fc-daygrid-event-harness .fc-daygrid-event{ - background-color: #d3d3d3; - font-size: 1em; padding: 5px; } -.fc .fc-daygrid-more-link{ - font-size: 1em; -} + .fc-timegrid-axis{ min-width: 10em; } @@ -146,7 +214,7 @@ @media(max-width: 768px){ white-space: normal; text-align: justify; - font-size: xx-small; + font-size: small; display: unset !important; padding: 0 !important; } @@ -168,16 +236,9 @@ .fc-daygrid-day-number{ font-size: small; } - // .form-group{ - // .col-sm-4{ - // float: left; - // width: 33.33333333%; - // } - // .col-sm-8{ - // float: left; - // width: 66.66666667%; - // } - // } +} +.has_event{ + background-color: $theme-color-second!important; } .createbooking{ cursor: pointer; @@ -195,92 +256,28 @@ height: 2em; position: relative; border-radius: 2em; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); display: block; border: 1px solid #fff; } position: absolute; top: 5em; right: 103%; - // padding-left: 0.65em; - // a{ - // margin-top: -5.2em; - // margin-left: 5em; - // z-index: 100; - // position: relative; - // } @media(max-width:820px){ display: none!important; } } -#hire_form{ - @media(min-width: 821px){ - min-width: 500px; - height:-webkit-fill-available; - transform: translateX(100%); - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; - -webkit-transition-duration: .35s; - -o-transition-duration: .35s; - transition-duration: .35s; - -webkit-transition-property: transform; - -o-transition-property: transform; - transition-property: transform; - position: relative; - float: right; - display: none; - z-index: 999; - - .form-group{ - margin-bottom: 0.5em; - } +.form-horizontal{ + @media(min-width:769px){ + margin: auto; + width: 60%; } +} .control-label{ @media(max-width: 820px){ padding-left:0.9375em!important; } } - // #pick_start_date{ - // @media(min-width: 821px){ - // margin-left: 0!important; - // margin-top: 1em; - // } - // } - // #pick_end_date{ - // @media(min-width: 821px){ - // margin-left: 0!important; - // margin-top: 1em; - // } - // } - -} -.hire-ken-click2{ - padding-top: 4em; - top: 0; - background: #fff; - right: 0; - width: 40%; - transform: translateX(0%)!important; - display:block!important; -} -.shadowblock{ - overflow-y: scroll !important; - padding: 0; - position: fixed; - background: #333333b8; - width: 100%; - height: -webkit-fill-available; - top: 0; - z-index: 999; - left: 0; - #hire_form{ - @media(min-width: 821px){ - max-width: 580px; - padding-right: 2em; - padding-left: 2em; - } - } -} .fc-popover-header{ padding: 6px 12px!important; .fc-popover-close{ @@ -304,3 +301,281 @@ .fc .fc-timegrid-slot-minor{ border-top: 0; } +.fc-view-harness{ + height: auto!important; +} +.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; + } + .fc-timegrid-slot:empty:before{ + position: absolute; + } + .fc-scroller-liquid-absolute{ + position: relative!important; + @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-scrollgrid-section-liquid{ + display: none!important; + } + span.fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner{ + display: none; + } + .fc-timegrid-axis-frame{ + display: none; + } + th.fc-timegrid-axis{ + display: none; + } + td.fc-timegrid-axis.fc-scrollgrid-shrink{ + display: none; + } +} +.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!important; + } + position: relative!important; + .fc-timegrid-slot{ + border:0!important; + } + .fc-timegrid-slot:empty:before{ + position: absolute; + } + .fc-scroller-liquid-absolute{ + position: relative!important; + @media(min-width:$screen-xs){ + overflow: unset !important; + } + } +.fc-timegrid-slot:empty:before{ + // @media(max-width: $screen-xs){ + height: 0.8em; + position: relative; + display: block; + // } + } +} +.fc-dayGridMonth-view{ + position: relative!important; + .fc-scroller-liquid-absolute{ + position: relative!important; + } + .fc-scrollgrid-sync-table{ + height: 600px!important; + } +} +.ui-widget-header{ + background: #000000!important; + border-color: #000000!important; + color: #fff !important; +} +.ui-state-default{ + background: #fff !important; + border: 0 !important; + text-align: center !important; +} +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{ + border: 0 !important; + background: silver !important; +} +.ui-widget-header a{ + color: #fff!important; +} +.ui-widget-header .ui-icon{ + filter: brightness(500%); +} +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-button.ui-state-active.hover-class{ + border: 0 !important; + background: silver !important; + color:#000!important; +} +.hidden_timepickerbtn{ + margin-left:0.5em; + @media(max-width:$screen-xs){ + margin-left: 0; + margin-top: 0.5em; + } + +} +#confirm_date{ + background: #000000; + border-color: #000000; + &:hover{ + opacity: .8; + } +} +#cancel_date{ + background: #000000; + border-color: #000000; + &:hover{ + opacity: .8; + } +} + #hidden_timepicker{ + background: #f1f1f1; + padding: 1.2em 0 0 0; + border-radius: 0.5em; + + } + .hidden_timepicker{ + display: flex; + justify-content: center; + align-items: center; + @media(max-width:$screen-xs){ + display: grid; + padding: 0 1em; + justify-content: flex-start; + } + } + .property_title{ + font-size: 1.2em; + font-weight: bold; + } + .modal-header{ + .close{ + font-size: 2em; + position: absolute; + right: 0.5em; + } + } +@media(max-width: $screen-xs){ +/* .fc-theme-standard td, .fc-theme-standard th{ + border:0!important; + }*/ + .fc-timeGridWeek-view{ + .fc-scrollgrid-sync-table{ + + } + } +/* .fc .fc-timegrid-axis-frame{ + display: none!important; + }*/ + .fc .fc-timegrid-slot-label{ + display:none!important; + } +} +#property-selector{ + @media(max-width:$screen-xs){ + .fc .fc-daygrid-body-natural .fc-daygrid-day-events{ + display: none!important; + } + .fc .fc-timegrid .fc-daygrid-body{ + display: none!important; + } + .fc-daygrid-day-events{ + display: none!important; + } + td.fc-timegrid-axis.fc-scrollgrid-shrink{ + display: none; + } + } +} +.fc-daygrid-day-bottom{ + a{ + color:$theme-color-main; + } +} +.fc-daygrid-event-harness{ + a{ + 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 3442224..93caf47 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{ @@ -174,9 +177,9 @@ width: 356px!important; } @media (max-width: $screen-xs) { - width: 94vw !important; - margin-left: 0 !important; - margin-right: 0 !important; + width: 93.5vw !important; + margin-left: 0 !important; + margin-right: 1em !important; } &:hover{ -webkit-transition: all .3s ease; @@ -242,16 +245,6 @@ font-size: 1.2em; } } - .w-annc__img-wrap { - img{ - 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; @@ -317,13 +310,7 @@ } } .event-news-22{ - .w-annc__img{ - @media(max-width: 768px){ - height: 100% !important; - width: auto!important; - max-width: unset; - } - } + .w-annc__content-wrap{ width:50%!important; } @@ -477,6 +464,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 +844,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/faq.scss b/assets/stylesheets/template/modules/faq.scss index 1b2ad87..0fd354a 100644 --- a/assets/stylesheets/template/modules/faq.scss +++ b/assets/stylesheets/template/modules/faq.scss @@ -51,32 +51,64 @@ } } } - + &.index2 { + .index-content-title-wrap{ + display: flex; + align-items: center; + justify-content: space-between; + } + .fa-chevron-right{ + background-color: transparent; + width: 30px; + min-width: 30px; + height: 30px; + border-radius: 50%; + text-align: center; + line-height: 30px; + transition: 0.4s; + } + .rotate{ + background-color: $theme-color-second; + color: #fff; + transform: rotate(90deg); + } .index-content { - margin: 1em 0; - border: 1px solid #ccc; + max-width: 900px; + margin: 0 auto 0.5em auto; & h4 { @extend .transition; color: #333; - background-color: #f5f5f5; + background-color: #fff; border-color: #ddd; - padding: 0.625em 0.9375em; - font-size: 1em; + padding:2rem 3rem; + font-size: 1.2em; font-family: $main-font; margin: 0; - + @media(max-width:$screen-xs){ + padding: 2rem 1em; + } &:hover { background: darken($color: #f5f5f5, $amount: 10); + a{ + color: $theme-color-second; + } .post { display: block; } } } .post { - padding: 1em; + @media(max-width:$screen-xs){ + padding: 1em; + } + @media(min-width:$screen-xs){ + padding: 1rem 4em; + } display: none; - background: #fff; } } } -} \ No newline at end of file +} +.index-content{ + list-style: none; +} diff --git a/assets/stylesheets/template/modules/gallery.scss b/assets/stylesheets/template/modules/gallery.scss index 6cd8941..f57d89b 100644 --- a/assets/stylesheets/template/modules/gallery.scss +++ b/assets/stylesheets/template/modules/gallery.scss @@ -1,13 +1,12 @@ @charset "utf-8"; @import "../initial"; - -// Gallery MODULES .index-pic{ .img-thumbnail{ width: 100%; } } +// Gallery MODULES .widget-gallery { .widget-title { @extend .unity-title; @@ -242,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/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..0173c0e --- /dev/null +++ b/assets/stylesheets/template/modules/video.scss @@ -0,0 +1,963 @@ +@charset "utf-8"; + +@import "../initial"; +.video_desc{ + cite{ + display: none; + } +} +.video_tag .video_tags2{ + display: none; + &:first-child{ + display: block!important; + } +} +.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{ + padding-bottom: 1em; + position: relative; + .video_keyword{ + display: none; + } + .video_tag{ + top: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 { + &:first-child{ + border:1px #fff solid; + border-radius: 2px; + background-color: #1515154d; + } + float: left; + padding: 0 0.5em; + + } + } +} +.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{ + + cite{ + display: none; + } + .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_tags2{ + display: block!important; + } + .video_linkwrapper2{ + + @media(min-width:$screen-xs)and(max-width:768px){ + height: 24em; + } + } + width: 100% ; + margin-bottom: 2em; + @media(max-width:1024px){ + width: 100%!important; + } + @media(max-width:$screen-xs){ + width: 100.5vw !important; + margin-left: -6vw; + } + .video_desc{ + .video_link{ + &: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; + } + } + } + + .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; + + } + + .video_group_time{ + color: #fff!important; + position: absolute; + bottom: 4.5em; + margin-left: 10.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:820px)and(min-width:767px){ + .video_title h5{ + font-size: 1.6em; + } + } + @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; + text-align: center; + } + .video_tag{ + left: 12%; + bottom: 10.5em; + 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!important; + } + @media(max-width: 821px)and(min-width: 769px){ + height: 25.6em!important; + } + @media(max-width:$screen-xs){ + height: 14.5em!important; + } + } + + } + + } +} +.video_data-widget-3{ + @media(max-width:768px){ + margin-bottom: 3em; + } + .btnwrapper{ + @media(max-width:768px)and(min-width:$screen-xs){ + top:100%!important; + width: 14%!important; + left: 44%!important; + } + @media(max-width:$screen-xs){ + top: 100%!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; + min-height: 4.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-5{ + margin-bottom: 1em!important; + .video_data{ + .video_group_time{ + display: none; + } + .video_desc{ + display: none; + } + } + span.video-date { + display: block; + font-size: 0.875rem; + font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif; + font-weight: normal; + letter-spacing: 0.3px; + color: #8f8f8f; + line-height: 1.6; + cursor: pointer; +} + margin-bottom: 1em; + .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 0; + margin-top: 0; + } + } + + .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: 88.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{ + @media(max-width:820px){ + .video_box_wrap{ + width: 100vw!important; + left: -1em!important; + margin: 0; + } + } + + 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{ + .cite{ + font-style: normal !important; + } + .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-radius: 2px; + margin-bottom: 1em; + &:first-child{ + border: 1px solid; + } + } +} +.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%; + 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_data-widget-10{ + padding-top: 2em; + .video_info{ + margin:0.5em 0; + } + .video_data{ + @media(max-width:820px)and(min-width: $screen-xs){ + width: 50%!important; + } + } +} +.video_linkwrapper10{ + position: relative; + overflow: hidden; + height: 9.5em; + @media(max-width: 1025px)and(min-width: 821px){ + height:7.5em; + } + @media(max-width: 821px)and(min-width: 769px){ + height:13em; + } + @media(max-width:768px)and(min-width: 600px){ + height: 12em; + } + @media(max-width: $screen-xs){ + height:13em; + } +} +.video_linkwrapper{ + @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: 12em; + } +} +.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: 12em; + } +} +.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:12em; +} +} +.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:12em; + +} +} +.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-2{ + .video_tag{ + display: block!important; + } +} +.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:5px; + 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; }