"MediaWiki:Common.css" 修訂間的差異

出自 淡水維基館
前往： 導覽、 搜尋
 
(未顯示由 3 位使用者於中間所作的 40 次修訂)
行 1： 行 1：
 
/* 此處的 CSS 將應用於所有的面板
 
/* 此處的 CSS 將應用於所有的面板
 +
 +
/* fix google maps little man in responsive skin (20160822 Rocio) */
 +
.gm-style img {
 +
    max-width: none;
 +
}
 
<meta name="viewport" content="width=device-width; initial-scale=1.0" /> */
 
<meta name="viewport" content="width=device-width; initial-scale=1.0" /> */
  
行 16： 行 21：
  
 
@media screen and (max-device-width: 480px) {
 
@media screen and (max-device-width: 480px) {
−
#hs{
+
 
−
position: relative;
 
−
overflow: hidden;
 
−
color:#333;
 
−
}
 
−
#hs-banner{
 
−
height: 200px;
 
−
overflow: hidden;
 
−
position: relative;
 
−
}
 
−
#hs-banner img {
 
−
position: absolute;
 
−
width: 100%;
 
−
        height: auto;
 
−
bottom: -60%;
 
−
}
 
−
#hs .column1{
 
−
float: left;
 
−
width: 100%;
 
−
margin-right: 1%;
 
−
}
 
−
#hs .column2{
 
−
float: left;
 
−
width: 100%;
 
−
}
 
 
}
 
}
  
行 51： 行 32：
 
#hs{
 
#hs{
 
position: relative;
 
position: relative;
−
overflow: hidden;
+
overflow: auto;
 
color:#333;
 
color:#333;
 
}
 
}
 
#hs-banner{
 
#hs-banner{
 
height: 200px;
 
height: 200px;
−
overflow: hidden;
+
overflow: auto;
 
position: relative;
 
position: relative;
 
}
 
}
行 178： 行 159：
 
#hs .column1{
 
#hs .column1{
 
float: left;
 
float: left;
−
width: 48%;
+
width: 49%;
 
margin-right: 1%;
 
margin-right: 1%;
 
}
 
}
 
#hs .column2{
 
#hs .column2{
−
float: right;
+
float: left;
 
width: 50%;
 
width: 50%;
 
}
 
}
行 197： 行 178：
 
}
 
}
 
#hs .right{
 
#hs .right{
−
float:right;
+
float:left;
 
}
 
}
 
#hs .first{
 
#hs .first{
行 324： 行 305：
 
     left: 100%;
 
     left: 100%;
 
}
 
}
−
/* 箭頭向下 */
+
 
−
.arrow-bottom {
 
−
    display: inline-block;
 
−
    margin-left: 5px;
 
−
    border-top: 4px solid #FFF;
 
−
    border-right: 4px solid transparent;   
 
−
    border-left: 4px solid transparent;       
 
−
    width: 1px;
 
−
    height: 1px;
 
−
}
 
−
/* 箭頭向右 */
 
−
.arrow-right {
 
−
    display: inline-block;
 
−
    margin-left: 12px;   
 
−
    border-top: 3px solid transparent;
 
−
    border-bottom: 3px solid transparent;
 
−
    border-left: 3px solid #666;       
 
−
    width: 1px;
 
−
    height: 1px;
 
−
}
 
 
/* END OF NEW home screen */
 
/* END OF NEW home screen */
  
行 395： 行 357：
 
         line-height: 1px;
 
         line-height: 1px;
 
         clear: both;
 
         clear: both;
 +
}
 +
/* 箭頭向下 */
 +
div.arrow-bottom {
 +
    display: inline-block;
 +
    margin-left: 5px;
 +
    border-top: 4px solid #FFF;
 +
    border-right: 4px solid transparent;   
 +
    border-left: 4px solid transparent;       
 +
    width: 1px;
 +
    height: 1px;
 +
}
 +
/* 箭頭向右 */
 +
div.arrow-right {
 +
    display: inline-block;
 +
    margin-left: 12px;   
 +
    border-top: 3px solid transparent;
 +
    border-bottom: 3px solid transparent;
 +
    border-left: 3px solid #666;       
 +
    width: 1px;
 +
    height: 1px;
 
}
 
}
 
span.NavToggle {
 
span.NavToggle {
行 693： 行 675：
 
tbody.tl_body{}
 
tbody.tl_body{}
 
tfoot.tl_footer{}
 
tfoot.tl_footer{}
 +
 +
/* == 浮動目錄與透明度 == Add by Rocio 20150119
 +
#toc, .toc {
 +
        display: block;
 +
        position: fixed;
 +
        top: 100px;
 +
        right: 0px;
 +
        min-width: 200px;
 +
        max-width: 350px;
 +
        max-height: 600px;
 +
        overflow-y: scroll;
 +
        border: 1px solid #aaa;
 +
        border-radius: 0 0 1px 1px;
 +
        -moz-border-radius: 0 0 1px 1px;
 +
        background: rgba(249,249,249,0.7);
 +
        padding: 12px;
 +
        box-shadow: 0 1px 8px #000;
 +
        -webkit-box-shadow: 0 1px 8px #000;
 +
        -moz-box-shadow: 0 1px 8px #000;
 +
}*/
 +
#toc, .toc {
 +
        background: rgba(249,249,249,0.7);
 +
        padding: 10px;
 +
}
 +
/* 測試card 20150730 */
 +
.interesting_cards .cards {
 +
    text-align: center;
 +
}
 +
.card {
 +
    background-color: white;
 +
    padding: 0;
 +
    display: inline-block;
 +
    margin-right: .5em;
 +
    margin-left: .5em;
 +
    margin-top: 1em;
 +
    border: 1px solid #d8d8d8;
 +
    border-bottom: 3px solid #d5d5d5;
 +
    text-align: center;
 +
    overflow: hidden;
 +
    width: 200px;
 +
}
 +
.card .info {
 +
    overflow: hidden;
 +
    border-top: 1px solid #dfdfdf;
 +
    width: 200px;
 +
    height: 2.4em;
 +
    display: block;
 +
}
 +
.card .info .title {
 +
    font-size: 80%;
 +
    display: block;
 +
    padding: .5em 1em .5em 1em;
 +
    font-weight: bold;
 +
}
 +
 +
/* 測試手機版界面的設定 2016-10-18 (先寫進來，有空再來測試)
 +
  For portals, added 2011-12-07 -bv
 +
  On wide screens, show these as two columns
 +
  On narrow and mobile screens, let them collapse into a single column */
 +
.portal-column-left {
 +
    float: left;
 +
    width: 50%;
 +
}
 +
.portal-column-right {
 +
    float: right;
 +
    width: 49%;
 +
}
 +
.portal-column-left-wide {
 +
    float: left;
 +
    width: 60%;
 +
}
 +
.portal-column-right-narrow {
 +
    float: right;
 +
    width: 39%;
 +
}
 +
.portal-column-left-extra-wide {
 +
    float: left;
 +
    width: 70%;
 +
}
 +
.portal-column-right-extra-narrow {
 +
    float: right;
 +
    width: 29%;
 +
}
 +
@media only screen and (max-width: 800px) {
 +
    /* Decouple the columns on narrow screens */
 +
    .portal-column-left,
 +
    .portal-column-right,
 +
    .portal-column-left-wide,
 +
    .portal-column-right-narrow,
 +
    .portal-column-left-extra-wide,
 +
    .portal-column-right-extra-narrow {
 +
        float: inherit;
 +
        width: inherit;
 +
    }
 +
}

於 2018年7月4日 (三) 23:07 的最新修訂

/* 此處的 CSS 將應用於所有的面板

/* fix google maps little man in responsive skin (20160822 Rocio) */
.gm-style img {
    max-width: none;
}
<meta name="viewport" content="width=device-width; initial-scale=1.0" /> */

/*全部的使用者都會載入這裡的 CSS。*/
@media screen and (min-width: 1200px) {
    // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    
}

@media screen and (max-width: 767px) {
    // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。    
}

@media screen and (max-device-width: 480px) {

}

body.page-Main_Page h1.firstHeading { display: none; }

#scrollDiv{width:100%;height:25px;line-height:25px; overflow:hidden}      
#scrollDiv li{height:25px;padding-left:10px;list-style:none;}

/* new home screen */
#hs{
	position: relative;
	overflow: auto;
	color:#333;
}
#hs-banner{
	height: 200px;
	overflow: auto;
	position: relative;
}
#hs-banner img {
	position: absolute;
	width: 100%;
        height: auto;
	bottom: -60%;
}
#hs-banner-intro {
    background: none;
    margin: 140px 0 0 3px;
    opacity: 0.8;
    padding: 15px;
    position: relative;
    width: 500px;
    z-index: 1;
    font-size: 110%;
}
#hs-banner-intro h1{
font-family:微軟正黑體, sans-serif;
	border: 0;
	margin-bottom: 0;
}
<!--以下為R設定-->
#hs-bannerR {
	height: 250px;
	overflow: hidden;
	position: relative;
        border-radius: 10px;
}
#hs-bannerR img {
	position: absolute;
	width: 100%;
        height: auto;
	bottom: -60%;
        opacity: 0.7; //透明度
}
#hs-banner-introR {
    border: 1;
    background: none;
    margin: 200px 0 0 20px;
    opacity: 0.8;
    padding: 15px;
    position: relative;
    width: 500px;
    z-index: 1;
    font-size: 120%;
}
#hs-banner-introR h1{
font-family:標楷體, DFKai-sb, sans-serif;
	border: 0;
	margin-bottom: 0;
}
#hs-searchR{
    border: 1;
    background: #FFFFFF;
    margin: 50px 0px 0 0;
    opacity: 0.8; //透明度
    padding: 5px;
    position: relative;
    top:-20px;
    left:40px;
    z-index: 1;
    float: right;
    font-size: 110%;
}
<!--以上為R設定-->
#hs-banner-intro p{
}

#hs-search{
 background: #FFFFFF;
    margin: 50px 0px 0 0;
opacity: 0.8;
    padding: 5px;
    position: relative;

    z-index: 1;
    float: right;
    font-size: 110%;
}
#hs-search-back{
	width: 100%;
	height: 40px;
	position: absolute;
	top:0;
	left: 0;
	opacity: 0.8;
	background: #FFF;
	
}
#hs-search input{
	position: relative;
	color:#333;
	font-size: 14px
	

}
#hs-search #bodySearchInput,
#hs-search .searchboxInput {
	width: 220px;
	background: #FFF;
	border:1px solid #B4B4B4;
	padding: 4px;
}
#hs-search .bodySearchBtnGo,
#hs-search .searchboxSearchButton{
	width: 80px;
	margin-left: 10px;
	text-transform: uppercase;
	background: #CCC;
	border:1px solid #B4B4B4;
	border-bottom:2px solid #B4B4B4;
	border-right: 2px solid #B4B4B4;
	-moz-border-radius: 2px;
border-radius: 2px;
padding: 4px 4px 3px;

}
#hs .column1{
	float: left;
	width: 49%;
	margin-right: 1%;
}
#hs .column2{
	float: left;
	width: 50%;
}
#hs .column h2, #hs .column h3{
	margin-bottom: 5px;
	margin-top: 15px;
}
#hs .half{
	width: 50%;
	float: left;
}
#hs .last{
 margin-right:0;
}
#hs .right{
float:left;
}
#hs .first{
 clear:left;
}
/*借我(Vanya)做首頁*/

#sample{
width:749px;
height:287px;
background:url(http://tamsui.dils.tku.edu.tw/wiki/images/b/b8/%E6%B7%A1%E6%B0%B4TAMSUI.jpg)
no-repeat; /*讓ie6能有固定在#sample的效果*/
}
/*下拉*/
#pmenu, #pmenu ul {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
#pmenu {
    margin:25px 0 200px 15px;
}
#pmenu li {
    float:left;
    position:relative;
}
#pmenu a, #pmenu a:visited {
    display:block;
    width:100px; 
    font-size:13px; 
    color:#000;
    height:30px; 
    line-height:29px; 
    text-decoration:none; 
    text-indent:10px; 
    background:#b2ab9b; 
    border:1px solid #fff;
    border-width:0 1px 1px 0;
}
#pmenu li:hover > a{
    background:#dfd7ca;
    color:#c00;
}
#pmenu li ul {
    display: none;

}
#pmenu li:hover > ul {
    display:block;
    position:absolute;
    top:0;
    left:101px;
}
#pmenu > li:hover > ul {
    left:0;
    top:31px;
}
/*另一個下拉*/
#menuv ul{
    margin: 0;
    padding: 0;
    font-size: 13px;
    text-decoration: none;   
    list-style: none;
}
#menuv{
text-decoration: none;    
list-style: none;
}
#menuv li {
    position: relative;
    float: left;
}
/* 選單 li 裡面連結之樣式 */
#menuv li a{
    display: block;
    padding: 12px 20px;
    background: #888;
    color: #FFF;
}
/* 特定在第一層，以左邊灰線分隔 */
#menuv li > a{
    border-bottom: 1px solid #CCC;    
    border-left: 1px solid #CCC;
}
#menuv li > a:hover{
    color: #666;
    background: #DDD
}
/* 特定在第一層 > 第二層之後下拉部分之樣式 */
#menuv li ul{
    display: none;
    float: left;
    position: absolute;
    left: 0;    
    margin: 0;
}
/* 當第一層選單被觸發時，指定第二層顯示 */
#menuv li:hover > ul{
    display: block;
}
/* 特定在第二層或之後下拉部分 li 之樣式 */
#menuv ul li {
    border-bottom: 1px solid #DDD;
}
/* 特定在第二層或之後下拉部分 li （最後一項不要底線）之樣式 */
#menuv ul li:last-child {
    border-bottom: none;
}
/* 第二層或之後 選單 li 之樣式 */
#menuv ul a {
    width: 120px;
    padding: 10px 12px;    
    color: #666;        
    background: #EEE;
}
#menuv ul a:hover {        
    background: #CCC;    
}
/* 第三層之後，上一層的選單觸發則顯示出來（皆為橫向拓展） */
#menuv ul li:hover > ul{
    display: block;
    position: absolute;
    top: 0;    
    left: 100%;
}

/* END OF NEW home screen */

/* Standard Navigationsleisten.*/
 
div.Boxmerge,
div.NavFrame {
        margin: 0px;
        padding: 2px;
        border: 1px solid #aaaaaa;
        border-collapse: collapse;
        font-size: 95%;
}
div.Boxmerge div.NavFrame {
        border-style: none;
        border-style: hidden;
}
div.NavFrame + div.NavFrame,
div.NavFrame + table.collapsible,
table.collapsible + div.NavFrame,
table.collapsible + table.collapsible {
        border-top-style: none;
        border-top-style: hidden;
}
div.NavPic {
        background-color: #ffffff;
        margin: 0px;
        padding: 2px;
        float: left;
}
div.NavFrame div.NavHead {
        min-height: 1.6em;
        font-weight: bold;
        font-size: 100%;
        text-align: center;
        background-color: #efefef;
        cursor:pointer;
}
div.NavFrame p {
        font-size: 100%;
}
div.NavFrame div.NavContent {
        font-size: 100%;
}
div.NavFrame div.NavContent p {
        font-size: 100%;
}
div.NavEnd {
        margin: 0px;
        padding: 0px;
        line-height: 1px;
        clear: both;
}
/* 箭頭向下 */
div.arrow-bottom {
    display: inline-block;
    margin-left: 5px;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;    
    border-left: 4px solid transparent;        
    width: 1px;
    height: 1px;
}
/* 箭頭向右 */
div.arrow-right {
    display: inline-block;
    margin-left: 12px;    
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #666;        
    width: 1px;
    height: 1px;
}
span.NavToggle {
        float: right;
        /*保证在禁用JS状态下不显示提示，使用hidden以保证在navbox标题能占有宽度*/
        visibility: hidden;
        text-align: right;
        font-weight: normal;
        font-size: 80%;
}
 
/* Hatnotes and disambiguation notices */
.rellink /*,
.dablink */ {
    /* font-style: italic; */
    /* @noflip */
    padding-left: 1.6em;
    margin-bottom: 0.5em;
}
.rellink i /*,
.dablink i */ {
    font-style: normal;
}

/*2014年5月12日Vanya測試用*/
/* Align */
.valign-middle, .valign-center, .va-m, .va-c { vertical-align: middle; }
.valign-top, .va-t { vertical-align: top; }
.valign-bottom, .va-b { vertical-align: bottom; }
.alignt-middle, .alignt-center, .at-m, .at-c, .eplist { text-align: center; }
.alignt-left, .at-l { text-align: left; }
.alignt-right, .at-r, .collapseButton { text-align: right; }
.align-middle, .align-center, .a-m, .a-c, .eplist { margin: 0 auto; }
.align-left, .a-l { float: left; }
.align-right, .a-r, .collapseButton, .userbox, .babelbox { float: right; }
/* 圓角邊框 */
.roundy { border-radius: 10px; }
.roundytl { border-top-left-radius: 10px; }
.roundytr { border-top-right-radius: 10px; }
.roundybl { border-bottom-left-radius: 10px; }
.roundybr { border-bottom-right-radius: 10px; }
.roundytop { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.roundyright { border-bottom-right-radius: 10px; border-top-right-radius: 10px; }
.roundybottom { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.roundyleft { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.roundy-10 { border-radius: 10px; }
.roundytl-10 { border-top-left-radius: 10px; }
.roundytr-10 { border-top-right-radius: 10px; }
.roundybl-10 { border-bottom-left-radius: 10px; }
.roundybr-10 { border-bottom-right-radius: 10px; }
.roundytop-10 { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.roundyright-10 { border-bottom-right-radius: 10px; border-top-right-radius: 10px; }
.roundybottom-10 { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.roundyleft-10 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.roundy-4 { border-radius: 4px; }
.roundytl-4 { border-top-left-radius: 4px; }
.roundytr-4 { border-top-right-radius: 4px; }
.roundybl-4 { border-bottom-left-radius: 4px; }
.roundybr-4 { border-bottom-right-radius: 4px; }
.roundytop-4 { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.roundyright-4 { border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
.roundybottom-4 { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.roundyleft-4 { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.roundy-5 { border-radius: 5px; }
.roundytl-5 { border-top-left-radius: 5px; }
.roundytr-5 { border-top-right-radius: 5px; }
.roundybl-5 { border-bottom-left-radius: 5px; }
.roundybr-5 { border-bottom-right-radius: 5px; }
.roundytop-5 { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.roundyright-5 { border-bottom-right-radius: 5px; border-top-right-radius: 5px; }
.roundybottom-5 { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.roundyleft-5 { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.roundy-6 { border-radius: 6px; }
.roundytl-6 { border-top-left-radius: 6px; }
.roundytr-6 { border-top-right-radius: 6px; }
.roundybl-6 { border-bottom-left-radius: 6px; }
.roundybr-6 { border-bottom-right-radius: 6px; }
.roundytop-6 { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.roundyright-6 { border-bottom-right-radius: 6px; border-top-right-radius: 6px; }
.roundybottom-6 { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.roundyleft-6 { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.roundy-8 { border-radius: 8px; }
.roundytl-8 { border-top-left-radius: 8px; }
.roundytr-8 { border-top-right-radius: 8px; }
.roundybl-8 { border-bottom-left-radius: 8px; }
.roundybr-8 { border-bottom-right-radius: 8px; }
.roundytop-8 { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.roundyright-8 { border-bottom-right-radius: 8px; border-top-right-radius: 8px; }
.roundybottom-8 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.roundyleft-8 { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.roundy-15 { border-radius: 15px; }
.roundytl-15 { border-top-left-radius: 15px; }
.roundytr-15 { border-top-right-radius: 15px; }
.roundybl-15 { border-bottom-left-radius: 15px; }
.roundybr-15 { border-bottom-right-radius: 15px; }
.roundytop-15 { border-top-left-radius: 15px; border-top-right-radius: 15px; }
.roundyright-15 { border-bottom-right-radius: 15px; border-top-right-radius: 15px; }
.roundybottom-15 { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.roundyleft-15 { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.roundy-20 { border-radius: 20px; }
.roundytl-20 { border-top-left-radius: 20px; }
.roundytr-20 { border-top-right-radius: 20px; }
.roundybl-20 { border-bottom-left-radius: 20px; }
.roundybr-20 { border-bottom-right-radius: 20px; }
.roundytop-20 { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.roundyright-20 { border-bottom-right-radius: 20px; border-top-right-radius: 20px; }
.roundybottom-20 { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.roundyleft-20 { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.roundy-24 { border-radius: 24px; }
.roundytl-24 { border-top-left-radius: 24px; }
.roundytr-24 { border-top-right-radius: 24px; }
.roundybl-24 { border-bottom-left-radius: 24px; }
.roundybr-24 { border-bottom-right-radius: 24px; }
.roundytop-24 { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.roundyright-24 { border-bottom-right-radius: 24px; border-top-right-radius: 24px; }
.roundybottom-24 { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.roundyleft-24 { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.roundy-25 { border-radius: 25px; }
.roundytl-25 { border-top-left-radius: 25px; }
.roundytr-25 { border-top-right-radius: 25px; }
.roundybl-25 { border-bottom-left-radius: 25px; }
.roundybr-25 { border-bottom-right-radius: 25px; }
.roundytop-25 { border-top-left-radius: 25px; border-top-right-radius: 25px; }
.roundyright-25 { border-bottom-right-radius: 25px; border-top-right-radius: 25px; }
.roundybottom-25 { border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
.roundyleft-25 { border-top-left-radius: 25px; border-bottom-left-radius: 25px; }
.roundy-30 { border-radius: 30px; }
.roundytl-30 { border-top-left-radius: 30px; }
.roundytr-30 { border-top-right-radius: 30px; }
.roundybl-30 { border-bottom-left-radius: 30px; }
.roundybr-30 { border-bottom-right-radius: 30px; }
.roundytop-30 { border-top-left-radius: 30px; border-top-right-radius: 30px; }
.roundyright-30 { border-bottom-right-radius: 30px; border-top-right-radius: 30px; }
.roundybottom-30 { border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
.roundyleft-30 { border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.roundy-32 { border-radius: 32px; }
.roundytl-32 { border-top-left-radius: 32px; }
.roundytr-32 { border-top-right-radius: 32px; }
.roundybl-32 { border-bottom-left-radius: 32px; }
.roundybr-32 { border-bottom-right-radius: 32px; }
.roundytop-32 { border-top-left-radius: 32px; border-top-right-radius: 32px; }
.roundyright-32 { border-bottom-right-radius: 32px; border-top-right-radius: 32px; }
.roundybottom-32 { border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }
.roundyleft-32 { border-top-left-radius: 32px; border-bottom-left-radius: 32px; }
.roundy-48 { border-radius: 48px; }
.roundytl-48 { border-top-left-radius: 48px; }
.roundytr-48 { border-top-right-radius: 48px; }
.roundybl-48 { border-bottom-left-radius: 48px; }
.roundybr-48 { border-bottom-right-radius: 48px; }
.roundytop-48 { border-top-left-radius: 48px; border-top-right-radius: 48px; }
.roundyright-48 { border-bottom-right-radius: 48px; border-top-right-radius: 48px; }
.roundybottom-48 { border-bottom-left-radius: 48px; border-bottom-right-radius: 48px; }
.roundyleft-48 { border-top-left-radius: 48px; border-bottom-left-radius: 48px; }
.roundy-50 { border-radius: 50px; }
.roundytl-50 { border-top-left-radius: 50px; }
.roundytr-50 { border-top-right-radius: 50px; }
.roundybl-50 { border-bottom-left-radius: 50px; }
.roundybr-50 { border-bottom-right-radius: 50px; }
.roundytop-50 { border-top-left-radius: 50px; border-top-right-radius: 50px; }
.roundyright-50 { border-bottom-right-radius: 50px; border-top-right-radius: 50px; }
.roundybottom-50 { border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
.roundyleft-50 { border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
.roundy-60 { border-radius: 60px; }
.roundytl-60 { border-top-left-radius: 60px; }
.roundytr-60 { border-top-right-radius: 60px; }
.roundybl-60 { border-bottom-left-radius: 60px; }
.roundybr-60 { border-bottom-right-radius: 60px; }
.roundytop-60 { border-top-left-radius: 60px; border-top-right-radius: 60px; }
.roundyright-60 { border-bottom-right-radius: 60px; border-top-right-radius: 60px; }
.roundybottom-60 { border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }
.roundyleft-60 { border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.roundy-80 { border-radius: 80px; }
.roundytl-80 { border-top-left-radius: 80px; }
.roundytr-80 { border-top-right-radius: 80px; }
.roundybl-80 { border-bottom-left-radius: 80px; }
.roundybr-80 { border-bottom-right-radius: 80px; }
.roundytop-80 { border-top-left-radius: 80px; border-top-right-radius: 80px; }
.roundyright-80 { border-bottom-right-radius: 80px; border-top-right-radius: 80px; }
.roundybottom-80 { border-bottom-left-radius: 80px; border-bottom-right-radius: 80px; }
.roundyleft-80 { border-top-left-radius: 80px; border-bottom-left-radius: 80px; }
.roundy-96 { border-radius: 96px; }
.roundytl-96 { border-top-left-radius: 96px; }
.roundytr-96 { border-top-right-radius: 96px; }
.roundybl-96 { border-bottom-left-radius: 96px; }
.roundybr-96 { border-bottom-right-radius: 96px; }
.roundytop-96 { border-top-left-radius: 96px; border-top-right-radius: 96px; }
.roundyright-96 { border-bottom-right-radius: 96px; border-top-right-radius: 96px; }
.roundybottom-96 { border-bottom-left-radius: 96px; border-bottom-right-radius: 96px; }
.roundyleft-96 { border-top-left-radius: 96px; border-bottom-left-radius: 96px; }
.roundy-100 { border-radius: 100px; }
.roundytl-100 { border-top-left-radius: 100px; }
.roundytr-100 { border-top-right-radius: 100px; }
.roundybl-100 { border-bottom-left-radius: 100px; }
.roundybr-100 { border-bottom-right-radius: 100px; }
.roundytop-100 { border-top-left-radius: 100px; border-top-right-radius: 100px; }
.roundyright-100 { border-bottom-right-radius: 100px; border-top-right-radius: 100px; }
.roundybottom-100 { border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; }
.roundyleft-100 { border-top-left-radius: 100px; border-bottom-left-radius: 100px; }
/* 圆角表格样式 */
.eplist tr:last-child td:first-child { border-bottom-left-radius: 6px; }
.eplist tr:last-child td:last-child { border-bottom-right-radius: 6px; }

/* ***** ***** TimelineTable ***** ***** */
table.tl_table{
        border-width: thin;
        border-spacing: 2px;
        border-style: outset;
        border-color: black;
        border-collapse: separate;
        background-color: white;
        border-radius: 9px;
}
 
th.tl_title{
        text-transform: uppercase
        text-align: center;
        border-width: 1px;
        padding: 1px;
        border-style: outset;
        border-color: blue;
        background-color: rgb(243, 248, 252);
        border-radius: 9px;
}
 
th.tl_years{
        text-align: center;
        font-style: italic;
        border-width: 1px;
        padding: 1px;
        border-style: outset;
        border-color: blue;
        background-color: rgb(223, 228, 252);
        border-radius: 4px;
}
 
th.tl_months{
        text-align: center;
        border-width: 1px;
        padding: 1px;
        border-style: outset;
        border-color: blue;
        background-color: rgb(243, 248, 252);
        border-radius: 2px;
}
 
th.tl_days{
        text-align: center;
        border-width: 1px;
        padding: 1px;
        border-style: outset;
        border-color: blue;
        background-color: rgb(243, 248, 252);
        border-radius: 2px;
}
 
th.tl_weeks{
        text-align: center;
        border-width: 1px;
        padding: 1px;
        border-style: outset;
        border-color: blue;
        background-color: rgb(243, 248, 252);
        border-radius: 2px;
}
 
td.tl_freetime{
        background-color: rgb(187, 210, 236);
        border-width: 1px;
        border-color: black;
        border-style: inset;
        border-radius: 7px;
}
 
td.tl_event{
        text-align: center;
        padding: 1px;
        background-color: rgb(61, 114, 194);
        border-width: 1px;
        border-color: white;
        border-style: inset;
        color: white;
        border-radius: 7px;
        white-space: normal
}
 
td.tl_foot{
        text-align: center;
        padding: 1px;
        background-color: rgb(243, 248, 252);
        border-width: 1px;
        border-color: blue;
        border-style: ridge;
        color: gray;
        border-radius: 9px;
}
 
thead.tl_header{}
tbody.tl_body{}
tfoot.tl_footer{}

/* == 浮動目錄與透明度 == Add by Rocio 20150119
#toc, .toc {
        display: block;
        position: fixed;
        top: 100px;
        right: 0px;
        min-width: 200px;
        max-width: 350px;
        max-height: 600px;
        overflow-y: scroll;
        border: 1px solid #aaa;
        border-radius: 0 0 1px 1px;
        -moz-border-radius: 0 0 1px 1px;
        background: rgba(249,249,249,0.7);
        padding: 12px;
        box-shadow: 0 1px 8px #000;
        -webkit-box-shadow: 0 1px 8px #000;
        -moz-box-shadow: 0 1px 8px #000;
}*/
#toc, .toc {
        background: rgba(249,249,249,0.7);
        padding: 10px;
}
/* 測試card 20150730 */
.interesting_cards .cards {
    text-align: center;
}
.card {
    background-color: white;
    padding: 0;
    display: inline-block;
    margin-right: .5em;
    margin-left: .5em;
    margin-top: 1em;
    border: 1px solid #d8d8d8;
    border-bottom: 3px solid #d5d5d5;
    text-align: center;
    overflow: hidden;
    width: 200px;
}
.card .info {
    overflow: hidden;
    border-top: 1px solid #dfdfdf;
    width: 200px;
    height: 2.4em;
    display: block;
}
.card .info .title {
    font-size: 80%;
    display: block;
    padding: .5em 1em .5em 1em;
    font-weight: bold;
}

/* 測試手機版界面的設定 2016-10-18 (先寫進來，有空再來測試)
   For portals, added 2011-12-07 -bv
   On wide screens, show these as two columns
   On narrow and mobile screens, let them collapse into a single column */
.portal-column-left {
    float: left;
    width: 50%;
}
.portal-column-right {
    float: right;
    width: 49%;
}
.portal-column-left-wide {
    float: left;
    width: 60%;
}
.portal-column-right-narrow {
    float: right;
    width: 39%;
}
.portal-column-left-extra-wide {
    float: left;
    width: 70%;
}
.portal-column-right-extra-narrow {
    float: right;
    width: 29%;
}
@media only screen and (max-width: 800px) {
    /* Decouple the columns on narrow screens */
    .portal-column-left,
    .portal-column-right,
    .portal-column-left-wide,
    .portal-column-right-narrow,
    .portal-column-left-extra-wide,
    .portal-column-right-extra-narrow {
        float: inherit;
        width: inherit;
    }
}
取自 "http://tamsui.dils.tku.edu.tw/wiki/index.php?title=MediaWiki:Common.css&oldid=22378"