file upload
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
/*全屏遮罩*/
|
||||
.AlertBoxDiv {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
z-index: 5100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.AlertBoxDiv table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.AlertBoxDiv table tr td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*視窗容器*/
|
||||
.AlertBoxDivContent {
|
||||
width: 95%;
|
||||
max-width: 500px;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
margin-top: -20px;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*視窗容器 標題區塊*/
|
||||
.AlertBoxDivContent .AlertBoxDivTitle {
|
||||
padding: 10px 15px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
background-color: #b04d67;
|
||||
font-size: 18px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
/*視窗容器 內容區塊*/
|
||||
.AlertBoxDivContent .AlertBoxDivHtml {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
min-height: 50px;
|
||||
/*max-height: 400px;*/
|
||||
/*overflow: auto;*/
|
||||
}
|
||||
|
||||
/*視窗容器 控制區塊*/
|
||||
.AlertBoxDivContent .AlertBoxDivCtrl {
|
||||
padding: 5px;
|
||||
text-align: right;
|
||||
border-top: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
/*視窗容器 關閉icon*/
|
||||
.AlertBoxDivContent .AlertBoxDivCloseIcon {
|
||||
opacity: 0.7;
|
||||
float: right;
|
||||
font-size: 23px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.AlertBoxDivContent .AlertBoxDivCloseIcon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.AlertBoxDivContent .AlertBoxDivCloseIcon:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.AlertBoxDivContent {
|
||||
zoom: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
/*視窗容器 進度條文字*/
|
||||
.AlertBoxDivContent .AlertBoxDivHtmlText {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*進度條*/
|
||||
.ProgressBar {
|
||||
margin-top: 10px;
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ProgressBar .ProgressBar2 {
|
||||
height: 100%;
|
||||
background-color: #0094ff;
|
||||
position: absolute;
|
||||
border-radius: 0 3px 3px 0;
|
||||
/*transition: linear 0.2s;*/
|
||||
}
|
||||
|
||||
.ProgressBar .ProgressBarWord {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 1px #000,0 0 1px #000,0 0 1px #000,0 0 1px #000;
|
||||
}
|
||||
@@ -0,0 +1,764 @@
|
||||
/*
|
||||
會衝突舊版本
|
||||
|
||||
宣告按鈕 button (button_o) [button_l]
|
||||
傳統 (框線) [底線]
|
||||
|
||||
透明 [btn_space_l]
|
||||
白色 btn_white (btn_white_o)
|
||||
藍色 btn_blue (btn_blue_o)
|
||||
天空藍 btn_sky (btn_sky_o) [btn_sky_l]
|
||||
綠色 btn_green (btn_green_o)
|
||||
初音綠 btn_miku (btn_miku_o)
|
||||
墨綠 btn_darkgreen (btn_darkgreen_o)
|
||||
黃色 btn_yellow (btn_yellow_o)
|
||||
紅色 btn_red (btn_red_o)
|
||||
紫色 btn_purple (btn_purple_o)
|
||||
鐵灰色 btn_iron (btn_iron_o)
|
||||
桃紫色 btn_peach (btn_peach_o)
|
||||
橘色 btn_orange (btn_orange_o)
|
||||
粉紅色 btn_pink (btn_pink_o)
|
||||
|
||||
尺寸縮小 btn_s
|
||||
尺寸放大 btn_lg
|
||||
|
||||
範例： <button type="button" class="button btn_blue">按鈕</button>
|
||||
<button type="button" class="button_o btn_blue_o btn_s">按鈕</button>
|
||||
<a href="" class="button btn_miku btn_lg">連結按鈕</a>
|
||||
|
||||
*/
|
||||
|
||||
button {
|
||||
font-family: 'Noto Sans TC',sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*傳統*/
|
||||
.button {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
/*outline: none;*/
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline-color: #6192c8;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button:hover::after {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*background-color: rgba(255, 255, 255, 0.1);*/
|
||||
background-image: linear-gradient(to top,rgb(255, 255, 255,0.2) 0%,rgba(255, 255, 255, 0.1) 50%,rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.button:active::after {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/*框線*/
|
||||
.button_o {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button_o:hover::after {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.button_o:active::after {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/*底線*/
|
||||
.button_l {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button_l i {
|
||||
color: #0094ff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button_l:hover {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
.button_l:hover i {
|
||||
color: #0072c4;
|
||||
}
|
||||
}
|
||||
|
||||
a.button_l:link,
|
||||
a.button_l:visited,
|
||||
a.button_l:active {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.button_l:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_s {
|
||||
font-size: 12px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn_lg {
|
||||
font-size: 20px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
/*底線專用*/
|
||||
.button_l {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/*透明 btn_space*/
|
||||
.btn_space_l {
|
||||
border: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_space_l:hover {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*白色 btn_white*/
|
||||
.btn_white {
|
||||
color: #505050;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn_white_o {
|
||||
color: #505050;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_white_o:hover {
|
||||
color: #505050;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_white:link,
|
||||
a.btn_white:visited {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_white:active,
|
||||
a.btn_white:hover {
|
||||
color: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_white_o:link,
|
||||
a.btn_white_o:visited {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_white_o:hover,
|
||||
a.btn_white_o:active {
|
||||
color: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
/*藍色 btn_blue*/
|
||||
.btn_blue {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.btn_blue_o {
|
||||
color: #337ab7;
|
||||
background-color: #fff;
|
||||
border: 1px solid #337ab7;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_blue_o:hover {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_blue:link,
|
||||
a.btn_blue:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_blue:active,
|
||||
a.btn_blue:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_blue_o:link,
|
||||
a.btn_blue_o:visited {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_blue_o:hover,
|
||||
a.btn_blue_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*天空藍 btn_sky*/
|
||||
.btn_sky {
|
||||
color: #fff;
|
||||
background-color: #3388ff;
|
||||
}
|
||||
|
||||
.btn_sky_o {
|
||||
color: #3388ff;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3388ff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_sky_o:hover {
|
||||
color: #fff;
|
||||
background-color: #3388ff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_sky_l {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
margin: 0 0 1px 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_sky_l:hover {
|
||||
border-bottom: 2px solid #c86e86;
|
||||
margin: 0 0 0 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_sky:link,
|
||||
a.btn_sky:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_sky:active,
|
||||
a.btn_sky:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_sky_o:link,
|
||||
a.btn_sky_o:visited {
|
||||
color: #3388ff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_sky_o:hover,
|
||||
a.btn_sky_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*綠色 btn_green*/
|
||||
.btn_green {
|
||||
color: #fff;
|
||||
background-color: #009149;
|
||||
}
|
||||
|
||||
.btn_green_o {
|
||||
color: #009149;
|
||||
background-color: #fff;
|
||||
border: 1px solid #009149;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_green_o:hover {
|
||||
color: #fff;
|
||||
background-color: #009149;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_green:link,
|
||||
a.btn_green:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_green:active,
|
||||
a.btn_green:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_green_o:link,
|
||||
a.btn_green_o:visited {
|
||||
color: #009149;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_green_o:hover,
|
||||
a.btn_green_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*初音綠 btn_miku*/
|
||||
.btn_miku {
|
||||
color: #fff;
|
||||
background-color: #0098a1;
|
||||
}
|
||||
|
||||
.btn_miku_o {
|
||||
color: #0098a1;
|
||||
background-color: #fff;
|
||||
border: 1px solid #0098a1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_miku_o:hover {
|
||||
color: #fff;
|
||||
background-color: #0098a1;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_miku:link,
|
||||
a.btn_miku:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_miku:active,
|
||||
a.btn_miku:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_miku_o:link,
|
||||
a.btn_miku_o:visited {
|
||||
color: #0098a1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_miku_o:hover,
|
||||
a.btn_miku_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*墨綠 btn_darkgreen*/
|
||||
.btn_darkgreen {
|
||||
color: #fff;
|
||||
background-color: #2f8966;
|
||||
}
|
||||
|
||||
.btn_darkgreen_o {
|
||||
color: #2f8966;
|
||||
background-color: #fff;
|
||||
border: 1px solid #2f8966;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_darkgreen_o:hover {
|
||||
color: #fff;
|
||||
background-color: #2f8966;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_darkgreen:link,
|
||||
a.btn_darkgreen:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_darkgreen:active,
|
||||
a.btn_darkgreen:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_darkgreen_o:link,
|
||||
a.btn_darkgreen_o:visited {
|
||||
color: #2f8966;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_darkgreen_o:hover,
|
||||
a.btn_darkgreen_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*黃色 btn_yellow*/
|
||||
.btn_yellow {
|
||||
color: #fff;
|
||||
background-color: #f6a800;
|
||||
}
|
||||
|
||||
.btn_yellow_o {
|
||||
color: #f6a800;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f6a800;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_yellow_o:hover {
|
||||
color: #fff;
|
||||
background-color: #f6a800;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_yellow:link,
|
||||
a.btn_yellow:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_yellow:active,
|
||||
a.btn_yellow:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_yellow_o:link,
|
||||
a.btn_yellow_o:visited {
|
||||
color: #f6a800;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_yellow_o:hover,
|
||||
a.btn_yellow_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*紅色 btn_red*/
|
||||
.btn_red {
|
||||
color: #fff;
|
||||
background-color: #e53534;
|
||||
}
|
||||
|
||||
.btn_red_o {
|
||||
color: #e53534;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e53534;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_red_o:hover {
|
||||
color: #fff;
|
||||
background-color: #e53534;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_red:link,
|
||||
a.btn_red:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_red:active,
|
||||
a.btn_red:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_red_o:link,
|
||||
a.btn_red_o:visited {
|
||||
color: #e53534;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_red_o:hover,
|
||||
a.btn_red_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*紫色 btn_purple*/
|
||||
.btn_purple {
|
||||
color: #fff;
|
||||
background-color: #572381;
|
||||
}
|
||||
|
||||
.btn_purple_o {
|
||||
color: #572381;
|
||||
background-color: #fff;
|
||||
border: 1px solid #572381;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_purple_o:hover {
|
||||
color: #fff;
|
||||
background-color: #572381;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_purple:link,
|
||||
a.btn_purple:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_purple:active,
|
||||
a.btn_purple:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_purple_o:link,
|
||||
a.btn_purple_o:visited {
|
||||
color: #572381;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_purple_o:hover,
|
||||
a.btn_purple_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*鐵灰色 btn_iron*/
|
||||
.btn_iron {
|
||||
color: #fff;
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
|
||||
.btn_iron_o {
|
||||
color: #3e3e3e;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_iron_o:hover {
|
||||
color: #fff;
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_iron:link,
|
||||
a.btn_iron:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_iron:active,
|
||||
a.btn_iron:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_iron_o:link,
|
||||
a.btn_iron_o:visited {
|
||||
color: #3e3e3e;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_iron_o:hover,
|
||||
a.btn_iron_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*桃紅色 btn_peach*/
|
||||
.btn_peach {
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
|
||||
.btn_peach_o {
|
||||
color: #c86e86;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c86e86;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_peach_o:hover {
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_peach:link,
|
||||
a.btn_peach:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_peach:active,
|
||||
a.btn_peach:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_peach_o:link,
|
||||
a.btn_peach_o:visited {
|
||||
color: #c86e86;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_peach_o:hover,
|
||||
a.btn_peach_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*橘色 btn_orange*/
|
||||
.btn_orange {
|
||||
color: #fff;
|
||||
background-color: #ec7405;
|
||||
}
|
||||
|
||||
.btn_orange_o {
|
||||
color: #ec7405;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ec7405;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_orange_o:hover {
|
||||
color: #fff;
|
||||
background-color: #ec7405;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_orange:link,
|
||||
a.btn_orange:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_orange:active,
|
||||
a.btn_orange:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_orange_o:link,
|
||||
a.btn_orange_o:visited {
|
||||
color: #ec7405;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_orange_o:hover,
|
||||
a.btn_orange_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*粉紅色 btn_pink*/
|
||||
.btn_pink {
|
||||
color: #fff;
|
||||
background-color: #f3a79f;
|
||||
}
|
||||
|
||||
.btn_pink_o {
|
||||
color: #f3a79f;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f3a79f;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_pink_o:hover {
|
||||
color: #fff;
|
||||
background-color: #f3a79f;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_pink:link,
|
||||
a.btn_pink:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_pink:active,
|
||||
a.btn_pink:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_pink_o:link,
|
||||
a.btn_pink_o:visited {
|
||||
color: #f3a79f;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_pink_o:hover,
|
||||
a.btn_pink_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #505050;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button:disabled:hover::after {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.button_o:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #505050;
|
||||
border: 1px solid #bbb;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.button_l:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.button_l:disabled i {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.btn_sky_l:disabled {
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
}
|
||||
@@ -0,0 +1,456 @@
|
||||
/*本體區塊*/
|
||||
.DropList {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.DropList .DropList_i {
|
||||
padding: 0 2px 0 5px;
|
||||
}
|
||||
|
||||
.DropList button {
|
||||
/*要有這個 手機才會顯示正常*/
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.DropList button[mod-arrow="left"] {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.DropList button[mod-arrow="right"] {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.DropList .DropList_i_loading {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*下拉選單樣式*/
|
||||
.DropList .DropListSelect {
|
||||
text-align: left;
|
||||
min-width: 210px;
|
||||
max-width: 320px;
|
||||
/*max-height: 205px;*/
|
||||
z-index: 5000;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);*/
|
||||
box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/*搜尋優先模式註解*/
|
||||
.DropList .DropListSearchMemo {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/*搜尋列樣式*/
|
||||
.DropList .DropListSearch {
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
/*padding: 0 0 5px 0;*/
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 0 3px 3px 3px;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table tr {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table tr td {
|
||||
height: auto;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table tr td:first-child {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table tr td:last-child {
|
||||
padding: 0 3px 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table tr td button {
|
||||
padding: 3px 2px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
/*height: 100%;*/
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.DropList .DropListSearch table tr td .DropListSearchInput {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
/*下拉清單外殼*/
|
||||
.DropList .DropListTarget {
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/*擴充按鈕模組樣式*/
|
||||
.DropList .DropListPlugin {
|
||||
white-space: nowrap;
|
||||
/*text-align: center;*/
|
||||
/*background-color: #f1f1f1;*/
|
||||
margin: 5px;
|
||||
/*padding: 0 0 5px 0;*/
|
||||
}
|
||||
|
||||
.DropList .DropListPlugin button {
|
||||
/*border-radius: 0;*/
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.DropList .DropListPlugin button:first-child {
|
||||
/*border-radius: 3px 0 0 3px;*/
|
||||
}
|
||||
|
||||
.DropList .DropListPlugin button:last-child {
|
||||
/*border-radius: 0 3px 3px 0;*/
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*當前筆數顯示區塊*/
|
||||
.DropList .DropListNowCount {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px 2px 8px;
|
||||
color: #808080;
|
||||
background-color: #f1f1f1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.DropList .DropListNowCountSelect {
|
||||
color: #000;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
.DropList .DropListNowCountSearch {
|
||||
color: #000;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
.DropList .DropListNowCountAll {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*群組清單樣式*/
|
||||
.DropList .DropListGroupList {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DropList .DropListGroupListItem {
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListGroupListItem:hover {
|
||||
color: #b04d67;
|
||||
}
|
||||
}
|
||||
|
||||
/*群組樣式*/
|
||||
.DropList .DropListOptgroup {
|
||||
/*white-space: nowrap;*/
|
||||
}
|
||||
|
||||
.DropList .DropListOptgroupTitle {
|
||||
cursor: default;
|
||||
/*padding: 0 4px;*/
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.DropList .DropListOptgroupTitle .DropListOptgroupTitleSpan {
|
||||
background-color: #c86e86;
|
||||
padding: 3px 15px 3px 10px;
|
||||
border-radius: 5px 20px 20px 5px;
|
||||
}
|
||||
|
||||
/*清單選項樣式*/
|
||||
.DropList .DropListOption {
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListOption:hover {
|
||||
color: #505050;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.DropList .DropListOption input[type="radio"],
|
||||
.DropList .DropListOption input[type="checkbox"] {
|
||||
box-shadow: rgba(0, 0, 0, 0) 0 0 0 0 inset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.DropList .DropListOption .label_icon,
|
||||
.DropList .DropListOption .label_icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.DropList .DropListOption input[type=checkbox] ~ .label_icon::after {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
.DropList .DropListOption input[type=checkbox]:checked ~ .label_icon::after {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.DropList .DropListOption_Brick {
|
||||
display: inline-block;
|
||||
margin-right: 3.5px;
|
||||
margin-left: 3.5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*選項被選取時的顏色*/
|
||||
.DropList .DropListOptionSelectBG {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListOptionSelectBG:hover {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
}
|
||||
|
||||
/*按鈕關閉使用*/
|
||||
.DropList .DropListDisabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.DropList .DropListDisabled .DropListOption {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.DropList .DropListOption input[type=radio]:disabled ~ .label_icon::after,
|
||||
.DropList .DropListOption input[type=checkbox]:disabled ~ .label_icon::after {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.DropList .DropListOption input[type=radio]:disabled ~ .label_icon::before,
|
||||
.DropList .DropListOption input[type=checkbox]:disabled ~ .label_icon::before,
|
||||
.DropList .DropListOption input[type=radio]:disabled ~ .label_icon::before,
|
||||
.DropList .DropListOption input[type=checkbox]:disabled ~ .label_icon::before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f05e';
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
color: #f00;
|
||||
top: -9px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*下拉選單樣式 手機專用*/
|
||||
.DropList .DropListSelect_Phone {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
border-radius: 0;
|
||||
max-width: initial;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
max-height: initial;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
z-index: 9000;
|
||||
/*overflow: auto;*/
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListOption {
|
||||
padding: 8px 8px;
|
||||
border-bottom: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
/*.DropList .DropListSelect_Phone .DropListOption:last-child {
|
||||
border: 0;
|
||||
}*/
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListOptgroupTitle {
|
||||
/*padding: 0 4px;*/
|
||||
padding: 0 8px;
|
||||
background-color: #f1f1f1;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListOptgroup:first-child .DropListOptgroupTitle {
|
||||
border-top: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListOptgroupTitle .DropListOptgroupTitleSpan {
|
||||
background-color: #f1f1f1;
|
||||
padding: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListSearch {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListSearch button {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListTarget {
|
||||
/*max-height: initial;
|
||||
overflow: initial;
|
||||
border-radius: 0;*/
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListGroupListItem {
|
||||
padding: 8px 8px;
|
||||
border-bottom: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListGroupListItem:first-child {
|
||||
border-top: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListSelect_Phone .DropListGroupListItem:hover {
|
||||
/*color: #ff6a00;*/
|
||||
}
|
||||
}
|
||||
|
||||
/*關閉選單按鈕 手機專用*/
|
||||
.DropList .DropListClose {
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: #808080;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListClose:hover {
|
||||
background-color: #17578e;
|
||||
}
|
||||
}
|
||||
|
||||
/*下拉選單樣式 清單模式*/
|
||||
.DropList .DropListSelect_List {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
/*min-width: 125px;
|
||||
max-height: initial;*/
|
||||
z-index: 1;
|
||||
position: inherit;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d3d3d3;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
overflow: auto;
|
||||
/*top: 0;
|
||||
left: 0;*/
|
||||
}
|
||||
|
||||
/*群組選取樣式*/
|
||||
.DropList .DropListOptgroupTitleGroupSelect {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListOptgroupTitleGroupSelect:hover {
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
}
|
||||
|
||||
/*選項被選取時的顏色*/
|
||||
.DropList .DropListOptgroupTitleGroupSelectBG {
|
||||
color: #fff;
|
||||
background-color: #1b5b93;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .DropListOptgroupTitleGroupSelectBG:hover {
|
||||
color: #fff;
|
||||
background-color: #1b5b93;
|
||||
}
|
||||
}
|
||||
|
||||
.DropList .DropListSelect_Phone .DropListOptgroupTitleGroupSelectBG {
|
||||
background-color: #1b5b93;
|
||||
}
|
||||
|
||||
|
||||
/*控制滑動條樣式*/
|
||||
|
||||
/* 滑動條 寬度 (必要) */
|
||||
.DropList .dropdown_list::-webkit-scrollbar {
|
||||
/*width: 10px;*/
|
||||
}
|
||||
|
||||
/* 滑動條 背景顏色 */
|
||||
.DropList .dropdown_list::-webkit-scrollbar-track {
|
||||
/*margin: 3px 0;*/
|
||||
}
|
||||
|
||||
/* 滑動條 滑塊樣式 */
|
||||
.DropList .dropdown_list::-webkit-scrollbar-thumb {
|
||||
/*background-color: #ccc;
|
||||
border-radius: 2px;*/
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.DropList .dropdown_list::-webkit-scrollbar-thumb:hover {
|
||||
/*background-color: #aaa;*/
|
||||
}
|
||||
}
|
||||
|
||||
/* 滑動條 兩頭監聽按鈕樣式 */
|
||||
.DropList .dropdown_list::-webkit-scrollbar-button {
|
||||
/*width: 0px;
|
||||
height: 0px;*/
|
||||
}
|
||||
|
||||
/* 橫向滑動條跟縱向滑動條相交處顏色 */
|
||||
.DropList .dropdown_list::-webkit-scrollbar-corner {
|
||||
/*background-color: rgba(0, 0, 0, 0);*/
|
||||
}
|
||||
@@ -0,0 +1,510 @@
|
||||
/*
|
||||
可與舊版本並存
|
||||
|
||||
基本用法
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>標題</th>
|
||||
</tr>
|
||||
<tr class="trHover">
|
||||
<td class="tdHover">內容</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
使用擴充樣式 (外層增加 div 覆蓋)
|
||||
<div class="table_shadow table_shadowNoLine">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>標題</th>
|
||||
</tr>
|
||||
<tr class="trHover">
|
||||
<td>內容</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
※ Table擴充樣式 (外層div的class)
|
||||
|
||||
.table_shadow 陰影線風格(優點不會跑格式、不會缺線 / 缺點只能為方形表格、若不為方形會缺線)
|
||||
|
||||
◎延伸樣式：.table_shadowVerticalLine 僅顯示垂直框線
|
||||
.table_shadowHorizontalLine 僅顯示水平框線
|
||||
.table_shadowNoLine 去除框線
|
||||
.table_zebra 斑馬線樣式
|
||||
.table_shadowBlue 改變風格 藍色
|
||||
.table_shadowRed 改變風格 紅色
|
||||
.table_shadowYellow 改變風格 黃色
|
||||
.table_shadowGreen 改變風格 綠色
|
||||
.table_shadowMiku 改變風格 初音綠
|
||||
.table_shadowSky 改變風格 天空藍
|
||||
.table_shadowPeach 改變風格 桃紫色
|
||||
.table_shadowIron 改變風格 鐵灰色
|
||||
|
||||
|
||||
|
||||
※ 水平對齊
|
||||
|
||||
.textL 靠左
|
||||
.textC 置中
|
||||
.textR 靠右
|
||||
|
||||
|
||||
|
||||
※ 垂直對齊
|
||||
|
||||
.vertT 靠上
|
||||
.vertM 置中
|
||||
.vertB 靠下
|
||||
|
||||
|
||||
|
||||
※ 其他設定項目
|
||||
|
||||
.font0 文字大小歸零
|
||||
.table_child 子層樣式(table 的 class，在 table 中要放置子層 table 使用)
|
||||
.table_clear 清除樣式(僅保留外框線及寬100%)
|
||||
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*全域配置*/
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table tr th,
|
||||
table tr td {
|
||||
padding: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/*表格宣告*/
|
||||
.table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table tr th,
|
||||
.table tr td {
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
border: 1px solid #d3d3d3;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.table tr th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*陰影線風格*/
|
||||
.table_shadow {
|
||||
/*overflow: hidden;*/
|
||||
/*border-radius: 0 0 3px 3px;*/
|
||||
box-shadow: 0 0 0 1px #d3d3d3;
|
||||
}
|
||||
|
||||
.table_shadow tr th,
|
||||
.table_shadow tr td {
|
||||
border: 0;
|
||||
box-shadow: 0 -1px 0 0 #d3d3d3 inset,-1px 0 0 0 #d3d3d3 inset;
|
||||
}
|
||||
|
||||
.table_shadow tr th:last-child,
|
||||
.table_shadow tr td:last-child {
|
||||
box-shadow: 0 -1px 0 0 #d3d3d3 inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
.table_shadow tr:last-child th,
|
||||
.table_shadow tr:last-child td {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,-1px 0 0 0 #d3d3d3 inset;
|
||||
}
|
||||
|
||||
.table_shadow tr:last-child th:last-child,
|
||||
.table_shadow tr:last-child td:last-child {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
.table_zebra tr th {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.table_zebra tr:first-child th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.table_zebra tr:nth-child(odd) th,
|
||||
.table_zebra tr:nth-child(odd) td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/*陰影線風格(僅顯示垂直框線)*/
|
||||
.table_shadowVerticalLine tr th,
|
||||
.table_shadowVerticalLine tr td {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,-1px 0 0 0 #d3d3d3 inset;
|
||||
}
|
||||
|
||||
.table_shadowVerticalLine tr th:last-child,
|
||||
.table_shadowVerticalLine tr td:last-child {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
/*陰影線風格(僅顯示水平框線)*/
|
||||
.table_shadowHorizontalLine tr th,
|
||||
.table_shadowHorizontalLine tr td {
|
||||
box-shadow: 0 -1px 0 0 #d3d3d3 inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
.table_shadowHorizontalLine tr:last-child th,
|
||||
.table_shadowHorizontalLine tr:last-child td {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
/*陰影線風格(去除框線)*/
|
||||
.table_shadowNoLine tr th,
|
||||
.table_shadowNoLine tr td,
|
||||
.table_shadowNoLine tr th:last-child,
|
||||
.table_shadowNoLine tr td:last-child,
|
||||
.table_shadowNoLine tr:last-child th,
|
||||
.table_shadowNoLine tr:last-child td {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 藍色)*/
|
||||
.table_shadowBlue {
|
||||
border-top: 2px solid #2185cf;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowBlue tr th {
|
||||
color: #2185cf;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 初音綠)*/
|
||||
.table_shadowMiku {
|
||||
border-top: 2px solid #0098a1;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowMiku tr th {
|
||||
color: #0098a1;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 黃色)*/
|
||||
.table_shadowYellow {
|
||||
border-top: 2px solid #f6a800;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowYellow tr th {
|
||||
color: #f6a800;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 紅色)*/
|
||||
.table_shadowRed {
|
||||
border-top: 2px solid #e53534;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowRed tr th {
|
||||
color: #e53534;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 綠色)*/
|
||||
.table_shadowGreen {
|
||||
border-top: 2px solid #009149;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowGreen tr th {
|
||||
color: #009149;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 天空藍)*/
|
||||
.table_shadowSky {
|
||||
border-top: 2px solid #0094ff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowSky tr th {
|
||||
color: #0094ff;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 桃紫色)*/
|
||||
.table_shadowPeach {
|
||||
border-top: 2px solid #a5027c;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowPeach tr th {
|
||||
color: #a5027c;
|
||||
}
|
||||
|
||||
/*陰影線風格(改變風格 鐵灰色)*/
|
||||
.table_shadowIron {
|
||||
border-top: 2px solid #3e3e3e;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.table_shadowIron tr th {
|
||||
color: #3e3e3e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*水平對齊指令*/
|
||||
.table .textL {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table .textC {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table .textR {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*垂直對齊指令*/
|
||||
.table .vertT {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table .vertM {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table .vertB {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/*註銷表格內文字大小*/
|
||||
.table .font0 {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/*表格中的表格 子層樣式*/
|
||||
.table .table_child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table .table_child tr th,
|
||||
.table .table_child tr td {
|
||||
border: 1px solid #d3d3d3;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
/*清除樣式*/
|
||||
.table .table_clear tr th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table .table_clear tr th,
|
||||
.table .table_clear tr td {
|
||||
padding: 0;
|
||||
height: initial;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: #505050;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*在 table 裡面的 輸入欄位隱藏底線*/
|
||||
.table input[type=text],
|
||||
.table input[type=password] {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
transition: linear 0.2s;
|
||||
}
|
||||
|
||||
.table textarea {
|
||||
border: 0;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
/*在 table 裡面的 textarea 關注時 要顯示外框線 */
|
||||
.table textarea {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.table textarea.showBorder {
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
/*懸停樣式*/
|
||||
@media screen and (min-width: 1025px) {
|
||||
/*.table .trHover:hover th,*/
|
||||
.table .trHover:hover td,
|
||||
.table tr .tdHover:hover {
|
||||
background-color: #fffce7;
|
||||
}
|
||||
|
||||
.table tr .tdHover:active {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.table input[type=text]:hover,
|
||||
.table input[type=password]:hover {
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
.table textarea:hover {
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
}
|
||||
|
||||
.table input[type=text]:focus,
|
||||
.table input[type=password]:focus {
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
.table textarea:focus {
|
||||
border: 1px solid #c86e86;
|
||||
}
|
||||
|
||||
.table tr .tdGray {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*線性表格*/
|
||||
.table-line {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-line tr th,
|
||||
.table-line tr td {
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
.table-line tr th {
|
||||
padding: 0 10px 0 0;
|
||||
text-align: left;
|
||||
color: #0072c4;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.table-line tr td {
|
||||
padding: 10px 10px 10px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-line tr th:last-child,
|
||||
.table-line tr td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.table-line tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.table-line tr th .table2title {
|
||||
color: #0072c4;
|
||||
border-bottom: 2px solid #0072c4;
|
||||
padding: 5px 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/*水平對齊指令*/
|
||||
.table-line .textL {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-line .textC {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-line .textR {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*垂直對齊指令*/
|
||||
.table-line .vertT {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table-line .vertM {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-line .vertB {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/*註銷表格內文字大小*/
|
||||
.table-line .font0 {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/*內距調整 10px*/
|
||||
.table-line .padding-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/*指示連結手勢*/
|
||||
.table-line .trPointer td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*懸停樣式*/
|
||||
@media screen and (min-width: 1025px) {
|
||||
}
|
||||
|
||||
.table-line .trHover:hover td {
|
||||
background-color: #fffce7;
|
||||
}
|
||||
|
||||
/*點擊樣式*/
|
||||
.table-line .trHover:active td {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
/*本體區塊*/
|
||||
.TimePick {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* 將默認的 select 樣式清除，可以利用背景圖片賦予下拉箭頭的樣子 */
|
||||
.TimePick select {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* 清除 ie 的默認選擇框樣式清除，隱藏下拉箭頭*/
|
||||
.TimePick select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*時間選擇器樣式*/
|
||||
.TimePick .TimePickSelect {
|
||||
zoom: 1;
|
||||
text-align: left;
|
||||
width: 300px;
|
||||
z-index: 4950;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d3d3d3;
|
||||
/*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);*/
|
||||
box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.TimePick .TimePickHeader {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #c86e86;
|
||||
padding: 0 2px 2px 2px;
|
||||
}
|
||||
|
||||
.TimePick .TimePickTitle {
|
||||
cursor: default;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TimePick .TimePickTitle select {
|
||||
cursor: pointer;
|
||||
font-family: 'Noto Sans TC',sans-serif;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.TimePick .TimePickTitle select:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.TimePick .TimePickPrevArrow {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.TimePick .TimePickNextArrow {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.TimePick .TimePickPrevArrow:hover,
|
||||
.TimePick .TimePickNextArrow:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.TimePick .TimePickPrevArrow:active,
|
||||
.TimePick .TimePickNextArrow:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr:first-child {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset,0 0 0 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableTitle {
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
opacity: 0.8;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableSpan {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
line-height: 24px;
|
||||
margin: 0 0 5px 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableSpan:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableFalse {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableSelect {
|
||||
cursor: default;
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableSelect:hover {
|
||||
cursor: default;
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableToday {
|
||||
box-shadow: 0 0 0 1px #d3d3d3 inset;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableDisabled {
|
||||
cursor: default;
|
||||
color: #808080;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.TimePick .TimePickSelect .TimePickTable tr td .TimePickTableDisabled:hover {
|
||||
cursor: default;
|
||||
color: #808080;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.TimePick .TimePickDateBox {
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
padding: 5px 2px 0 2px;
|
||||
/*background-color: #f00;*/
|
||||
}
|
||||
|
||||
.TimePick .TimePickTimeBox {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
border-top: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
.TimePick .TimePickTimeBox select {
|
||||
cursor: pointer;
|
||||
font-family: 'Noto Sans TC',sans-serif;
|
||||
border: 0;
|
||||
padding: 2px 4px;
|
||||
outline: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.TimePick .TimePickTimeBox select:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
}
|
||||
|
||||
.TimePick option {
|
||||
font-family: 'Noto Sans TC',sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.TimePick .TimePickWork {
|
||||
text-align: right;
|
||||
padding: 5px;
|
||||
border-top: 1px dashed #d3d3d3;
|
||||
}
|
||||
|
||||
.TimePick .TimePickWork .button {
|
||||
color: #505050;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.TimePick .TimePickWork .button:last-child {
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
|
||||
/*手機板專用*/
|
||||
.TimePick .TimePickSelect_Phone {
|
||||
zoom: 1;
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
border-radius: 5px;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -150px;
|
||||
z-index: 9000;
|
||||
line-height: initial;
|
||||
}
|
||||
Reference in New Issue
Block a user