"MediaWiki:Common.css" 修訂間的差異
出自 淡水維基館
(未顯示同一使用者於中間所作的 2 次修訂) | |||
行 769: | 行 769: | ||
width: 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; } }