YDU/assets/stylesheets/template/layout/content.scss

628 lines
12 KiB
SCSS
Executable File

@charset "utf-8";
@import "../initial";
html{height: 100%}
body{height: 100%}
.page-home{
background: #fff url("/assets/main_bg.png") center -83px repeat-x;
}
.internal-page
{
background: #fff url("/assets/page_bg.png") center -50px repeat-x;
}
.layout-content {
.control{
outline:1px solid #0f0;
width: 100%;
height: 50px;
text-align: center;
}
.control li{
display:inline-block;
width: 15px;
height: 15px;
background-color:#aaa;
border-radius:50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
border:1px solid #999;
margin: 10px;
cursor:pointer;
}
.control li.active{
background-color:#666;
}
min-height: 600px;
margin-bottom: 2em;
@media(max-width : 767px) {
margin-bottom: 0;
}
.container {
// @extend %response-content;
@media(min-width : 1200px){
width: 1000px;
}
@media(min-width : 768px) and (max-width : 991px) {
width: 100% ;
}
}
section[data-pp="1"]
{ width: 60.7%;
border: solid 1px #E4E4E4;
@media (min-width : 1200px){
padding: 0 ;
}
@media (min-width : 768px) and (max-width : 1199px) {
width: 64.6% ;
}
@media(max-width : 340px) {
width: 300px;
margin:auto;
background-color: #fff;
margin-bottom: 30px;
}
@media (min-width : 341px) and (max-width : 480px) {
width: 341px;
margin:auto;
background-color: #fff;
margin-bottom: 30px;
}
.w-annc.widget-announcement-1.container{
overflow: hidden;
width:100%;
margin:0;
padding: 0;
}
.w-annc__item{
width: 293.1px !important;
a{font-size: 15.6px;
font-weight: bold;
}
@media(min-width :1200px){
padding-left:20px;
padding-right: 0;
}
@media(min-width : 992px) and (max-width : 1199px) {
width: 298px !important;
}
@media(min-width : 989px) and (max-width : 991px) {
width: 304px !important;
}
@media(min-width : 972px) and (max-width : 988px){
width:303px !important;
}
@media(min-width : 961px) and (max-width : 971px){
width:298px !important;
}
@media(min-width : 951px) and (max-width : 960px){
width:294px !important;
}
@media(min-width : 941px) and (max-width : 950px){
width:291px !important;
}
@media(min-width : 931px) and (max-width : 940px){
width:287.7px !important;
}
@media(min-width : 921px) and (max-width : 930px){
width:284px !important;
}
@media(min-width : 911px) and (max-width : 920px){
width:281px !important;
}
@media(min-width : 901px) and (max-width : 910px){
width:278px !important;
}
@media(min-width : 891px) and (max-width : 900px){
width:275px !important;
}
@media(min-width : 881px) and (max-width : 890px){
width:272px !important;
}
@media(min-width : 871px) and (max-width : 880px){
width:270px !important;
}
@media(min-width : 861px) and (max-width : 870px){
width:265px !important;
}
@media(min-width : 851px) and (max-width : 860px){
width:262px !important;
}
@media(min-width : 841px) and (max-width : 850px){
width:258px !important;
}
@media(min-width : 831px) and (max-width : 840px){
width:255px !important;
}
@media(min-width : 821px) and (max-width : 830px){
width:252px !important;
}
@media(min-width : 811px) and (max-width : 820px){
width:250px !important;
}
@media(min-width : 801px) and (max-width : 810px){
width:245px !important;
}
@media(min-width : 791px) and (max-width : 800px){
width:242px !important;
}
@media(min-width : 781px) and (max-width : 790px){
width:238px !important;
}
@media(min-width : 771px) and (max-width : 780px){
width:235px !important;
}
@media(min-width : 768px) and (max-width : 770px){
width:235px !important;
}
@media(min-width : 481px) and (max-width : 767px) {
}
@media (min-width : 401px) and (max-width : 480px) {
width:310px !important;
margin-right: 40px;
}
@media (min-width : 341px) and (max-width : 400px) {
width:310px !important;
margin-right: 36px;
}
@media(max-width : 340px){
width:270px !important;
margin-right: 20px;
}
}
.cycle-carousel-wrap{
white-space: normal !important;
}
.cycle-prev{
margin-right: 10px;
float: right;
padding:0 15px;
background-color: #f6d16e;
position:relative;
color: #bf8e0c;
@media(max-width : 340px){
padding:0 5px;
}
}
.cycle-next{
margin-right: 30px;
float: right;
padding:0 15px;
background-color: #f6d16e;
position: relative;
color: #bf8e0c;
@media(max-width : 340px){
padding:0 5px;
}
}
.w-annc__widget-title{
padding: 0 15px;
}
.w-annc__box{
width:1400%;
}
.more{
float: right;
font-size: 10pt;
line-height: 35px;
color:#333;
}
.w-annc__entry-title{
a{
color: #333;
}
}
}
#pics
{
width: 37.8%;
margin-left:15px;
border: solid 1px #E4E4E4;
height:310px;
overflow: hidden;
@media (min-width : 1200px) {
height:299px;
}
@media (min-width : 992px) and (max-width : 1199px) {
width: 33.8% ;
}
@media(min-width : 768px) and (max-width : 991px) {
width: 33% ;
}
@media(max-width : 767px) {
width: 100%;
margin:0;
}
}
#tabs{
height: 100%;
border: solid 1px #E4E4E4;
margin-top: 30px;
padding: 0;
background: url("/assets/tab_bg.png") repeat-y scroll 0 0;
@media(max-width : 767px) {
overflow: hidden;
background: inherit;
}
}
#links{
padding-left:0;
width: 34.5%;
float: left;
@media(min-width : 825px) and (max-width : 1199px) {
width: 34% ;
}
@media (min-width : 481px) and (max-width : 825px){
width: 33%;
padding-left: 0;
}
@media (max-width : 480px){
width: 100%;
padding-left: 15px;
}
}
#news{
padding: 0 33px 0 0;
width: 55%;
float: left;
@media(min-width : 481px) and (max-width : 1199px) {
width: 54%;
padding: 0 15px;
}
@media (max-width : 480px){
width: 100%;
padding: 0;
}
}
#ads{
padding: 0;
margin-top: 30px;
}
aside[data-pp="2"]
{ padding: 0;
h3{
width: 76%;
margin: 12px 0;
font-family: "微軟正黑體";
.more{
float: right;
font-size: 10pt;
line-height: 35px;
color:#333;
}
}
}
aside[data-pp="3"]
{ float: left;
width:70%;
top:45px;
position: absolute;
.slider{
width:270px;
height: 300px;
overflow: hidden;
@media (max-width : 1199px) {
width: inherit;
}
}
.w-annc__list{
position: relative;
overflow: hidden;
}
.w-annc__item{
width: auto;
margin-bottom:0;
@media (max-width : 1199px) {
width: auto;
}
}
.w-annc__title{
color:#333;
font-size: 12pt;
line-height: 24px;
}
.w-annc__entry-title{
overflow: auto;
background-color: #f6d16e;
padding: 8px;
margin: 0;
}
.w-annc__img-wrap img{
position: inherit!important;
}
}
aside[data-pp="4"]
{
float: right;
width:19%;
.w-annc__item.row{
margin: 0;
width: 100%;
}
.w-annc.widget-announcement-2{
@media(min-width : 1200px) {
margin-left:5px;
}
}
.w-annc__img-wrap.col-sm-4.bullseye
{width: 100%;
height: 47px;
cursor: pointer;
margin:auto;
margin-bottom: 10px;
@media(max-width : 767px) {
width:inherit;
}
}
.w-annc__list{
margin-top: -38px;
}
}
section[data-pp="5"]
{
width: 10.4%;
float: left;
overflow: hidden;
height: 100%;
@media(min-width : 992px) and (max-width : 1199px) {
width: 10.7%;
}
@media(min-width : 825px) and (max-width : 991px) {
width: 10.9% ;
}
@media(min-width : 768px) and (max-width : 825px) {
width: 12.5% ;
}
@media(max-width : 767px){
width: 100% ;
background-color: rgb(236,110,25);
}
ul{
position: relative;
margin:0;
padding: 0;
list-style: none;
@media(max-width : 767px){
text-align: center;
}
li{ cursor:pointer;
color:#fff;
font-family: "微軟正黑體";
padding: 20px 0 20px 15px;
@media(max-width : 767px){
padding: 20px 10px;
display: inline-block;
}
}
.active{
background-color: #DE4F03;
&:before {
content: '';
position:absolute;
left: 0;
margin-top:5px;
@include arrow("left", 6px, 6px, #fff);
@media(max-width : 767px){
display:none;
}
}
}
}
}
aside[data-pp="11"]{
h3{
margin: 20px 0 0 15px;
font-family: "微軟正黑體";
font-size: 12pt;
font-weight: bold;
}
}
section[data-pp="6"]
{ .w-annc.widget-announcement-11{
padding-top: 13px;
position: relative;
display: none;
opacity: 0;
@media(max-width : 1199px){
padding-top: 15px;
}
}
.w-annc.widget-announcement-11.active{
display: block;
overflow: hidden;
}
.w-annc__item{
position: relative;
left: 0;
padding: 0 0 5px 10px;
margin-left:0;
margin-right:0;
border-bottom: solid 1px #eee;
}
.w-annc__category{
font-size: 10pt;
margin: 0 10px 1px;
background-color: #999;
color: #fff;
padding: 4px;
}
.w-annc__postdate{
color:#aaa;
font-size: 10pt;
}
.w-annc__title{
width: 87%;
display: inline-block;
margin-top:10px;
color:#333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media(min-width : 992px) and (max-width : 1199px) {
display: inline-block;
width: 58%;
}
@media (max-width : 991px) {
display: inline-block;
width: 48%;
padding-top: 10px;
}
@media (max-width : 797px) {
width: 44%;
}
@media (max-width : 480px) {
width: 100%;
}
&:hover{
color:#f77319;
}
}
.w-annc__widget-title{
display: inline;
position: absolute;
right:0;
margin:0;
top:-9px;
z-index: 5;
font-weight: bold;
font-size: 12pt;
padding-left:15px;
@media (max-width : 1199px) {
}
}
.w-annc__more.btn.btn-primary.pull-right{
background-color: inherit;
color:#333;
border:0;
font-size: 10pt;
}
}
section[data-pp="7"]{
h3{
margin: 20px 0 0 0;
font-family: "微軟正黑體";
font-size: 12pt;
font-weight: bold;
@media (max-width : 1199px) {
margin-left: 0;
margin-right: 0;
}
}
}
section[data-pp="8"]
{ overflow: hidden;
padding-bottom: 10px;
.widget-link.widget1{
display: none;
opacity: 0;
position: relative;
top:-350px;
}
.widget-link.widget1.active{
display: block;
}
.widget-content{
position: relative;
left: 20px;
float: left;
display: list-item;
width: 49%;
width: calc(50% - 1em);
border-top:inherit !important;
font-size: 10pt;
list-style:disc;
@media(max-width : 965px) {
width: 100% ;
}
a{color:#333;}
}
.widget-title{
//margin-left: -15px;
}
.widget-content-title{
&:hover{
color:#f77319;
}
}
.status-top{
display: none;
}
}
section[data-pp="9"]
{ overflow:hidden;
width: 62.7%;
.w-ad-banner__caption{
display: none !important;
}
padding-left: 0;
@media(max-width : 767px) {
padding: 0;
}
}
aside[data-pp="10"]
{ width: 37.3%;
background-color: #0f2d4f;
padding-left: 30px;
@media(max-width : 1199px) {
height: 192px;
}
.w-annc__more.btn.btn-primary.pull-right{
background-color: inherit;
border: inherit;
}
.w-annc__widget-title{
color: #fff;
font-size: 12pt;
font-weight: bold;
//padding: 15px 0;
}
.w-annc__category{
display: none;
}
.w-annc__postdate{
color:#2776d0;
font-size: 10pt;
}
.w-annc__item.row{
margin: 0;
border-bottom:1px solid #17457a;
//padding: 6px 0;
&:first-child{
padding-top: 0;
}
a{
color:#fff;
}
}
}
.w-ad-banner.ad-banner-widget-4{
margin-bottom: 15px;
}
}