Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinktra4-tpt-test1
1guest175.96.108.19623285n3Mar 15, 2019 7:56:14 AMlinkresources
index.zulzul
<zk>
<style src="test.css" />
<style>
</style>
<separator/>
<zscript><![CDATA[
List listModel = new ArrayList();
for(int i=0;i<101;i++)
{
listModel.add(i);
}
]]>
</zscript>
<listbox id="listbox" height="700px" style="overflow-x:auto;overflow-y:auto;">
<custom-attributes org.zkoss.zul.listbox.rod="true" />
<custom-attributes org.zkoss.zul.listbox.initRodSize="100" />
<listitem forEach="${listModel}">
<listcell label="${forEachStatus.index+1}"/>
<listcell label="${each}-2"/>
<listcell label="${each}-3"/>
<listcell label="${each}-4"/>
</listitem>
</listbox>
</zk>
test.csscss/*@import url("form_ui.css");*/
/*
class* -> class name contains blablabla
class^ -> class name begins with blablabla
*/
body *:not([class*="z-icon-"]):not([class*="sky-menu"]):not([class^="z-menu"]):not([class*="fa"]):not([class*="breadcrumb-label"])
{
/*
這段css的意思是
body 底下所有的elements，只要class name不是 z-icon-/sky-menu/z-menu/fa/breadcrumb-label的，都要套這個設定
*/
/*之後再一起放大*/
font-size: 26px;
/*font-size: 20px;*/
font-family:"Microsoft JhengHei";
}
#ground-info span
{
/*下方狀態列不放大*/
font-size: 20px;
}
body
{
background-color:#333333;
}
.breadcrumb-row
{
background-color:#333333;
border-bottom:0px;
color:#D8D8D8;
}
/*
sky-block
*/
#sky-block1.row
{
/*background-color:#1b1b1b;*/
background-color:#1e2a37;
}
#sky-block1
{
border: 1px solid #1b1b1b;
}
/*
sys-menu position
*/
#sys-menu{
padding:4px 0px;
margin-right:550px !important;
/*
position:absolute;
top:0px;
left:67px;
z-index:50;
*/
}
#sys-menu .tpt-btn-menu, .z-button.sky-menu
{
min-width:120px;
}
#sys-menu .tpt-btn-menu:hover
{
background-color: #1abc9c;
border-color: #1abc9c;
color: #fff;
cursor: pointer;
}
.sky-title.z-label
{
display:none;
}
#sys-menu .btn.tpt-btn-menu, .z-button.sky-menu {
border-color: #839095;
font-size:26px;
}
.z-button.sky-menu:hover{
background-color: #1abc9c;
border-color: #1abc9c;
color: #fff;
cursor: pointer;
}
.z-button.sky-menu{
background-color: #1e2a37;
border: 1px solid #839095;
box-shadow: none;
color: #fff;
border-radius: 2px;
/* padding: 10px;*/
}
/*
not prod style
*/
.NOT-PROD #sky-block1.row
{
background-color: #B71C1C;
}
.NOT-PROD #sys-menu .btn.tpt-btn-menu, .NOT-PROD .z-button.sky-menu
{
background-color: #B71C1C;
border-color: #FFFFFF;
}
.NOT-PROD #sys-menu .btn.tpt-btn-menu:hover, .NOT-PROD .z-button.sky-menu:hover{
background-color: #EFA50B;
}
/*
tab hover style
*/
.z-tab:hover {
background: #FFFFFF;
}
.z-tab:hover .z-tab-text {
color:black;
font-weight: bold;
padding-top:2px;
}
.z-tab-selected {
background: #298d74;
}
.z-tab-selected .z-tab-text {
color:white;
font-weight:bold;
}
.z-tab-selected
{
border-bottom:4px solid #ffb529;
}
.z-tab-text {
color: #E0E0E0;
}
/*
消除tabpanel之間的padding
*/
.sky-tab.z-tabpanel, .sky-tab .z-window, .sky-tab .z-window-content
{
padding:0px;
}
.z-tabpanel
/*
麵包屑我在那裡的highlight
*/
.breadcrumb-label.z-label:nth-last-child(2) {
color: #3498DB;
font-weight: bold;
}
/*Form Element style*/
.z-datebox-input:focus, .z-intbox:focus, .z-combobox-input:focus, .z-textbox:focus{
border-color:#FFB529;
border: 1px solid #FFB529;
/*background-color:rgba(255,255,0,0.85);*/
background-color:wheat;
}
.z-comboitem:hover
{
background:wheat;
}
.z-comboitem:hover .z-comboitem-text
{
color:black;
font-weight:bold;
}
/*
Sunken input
*/
.z-textbox, .z-intbox, .z-doublebox, .z-selectbox , .z-datebox-input, .z-paging-input
{
/* background:rgba(144,202,249, 0.6); */
box-shadow:2px 2px 4px #757575 inset;
background:white;
}
/*input改成白底黑字*/
.z-intbox, .z-datebox-input, .z-combobox-input, .z-spinner-input,.z-textbox, .z-timebox-input, .z-paging-input
{
background:white;
color:black;
}
/* 0923 - 拿掉border
.z-combobox
{
border:1px solid #839095;
}
*/
.z-grid-body .z-cell, .z-listbox-body .z-listbox-emptybody td, .z-grid-body .z-grid-emptybody td
{
color:rgba(255,255,255,0.9);
}
.z-listbox-body .z-listbox-emptybody td, .z-grid-body .z-grid-emptybody td
{
background:#57707A;
}
/*listheader*/
.z-listheader, .z-column
{
background:#0097A7;
border-left:1px solid white;
border-bottom:1px solid white;
}
/*調整checkbox label的位置*/
.z-checkbox input[type=checkbox] + label:before, .z-radio input[type=radio] + label:before
{
width:24px;
height:24px;
/*vertical-align:sub;*/
vertical-align:baseline;/*0923字體放大後要用這個對齊*/
}
/*--------------------------------------------------------------------------------------------------------------
* cell + row 's hover & selected style
*/
.z-row:hover>.z-row-inner, .z-row:hover>.z-cell, .z-listitem.z-listitem-selected:hover>.z-listcell, .z-listitem:hover>.z-listcell
,.z-listitem:hover>.z-listcell>.z-listcell-content
{
background:rgba(30,42,55,0.8);
color:rgba(255,255,255,0.9);
}
.z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell{
}
.z-listitem.z-listitem-selected>.z-listcell, .z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell {
background:rgba(30,42,55,0.8);
color:rgba(255,255,255,0.9);
}
.z-listbox-odd>.z-listcell, .z-listbox .z-listcell {
background: #334b5d;
border-bottom:1px solid rgba(255,255,255,0.4);
}
.z-listbox-paging-bottom
{
border-top:1px solid rgba(255,255,255,0.4);
}
.z-row .z-label
{
font-weight:600;
}
.z-listcell-content .z-groupbox>.z-groupbox-header .z-caption,
.z-listcell-content .z-groupbox>.z-groupbox-content,
.z-listcell-content .z-groupbox>.z-groupbox-header
{
background:#334b5d;
}
.z-listcell-content .z-groupbox>.z-groupbox-header
{
color:rgba(255,255,255,0.9);
}
/*
radio button 字體放大
*/
.z-radio input[type=radio]:checked + label:after
{
left:9px;
top: 11px;
width:6px;
height:6px;
}
/*
groupbox header
*/
.z-caption-content
{
font-weight:bold;
}
/* Card style*/
.card {
/*-webkit-box-shadow: 0 2px 1px rgba(0,0,0,.05);*/
/*box-shadow: 0 2px 1px rgba(0,0,0,.05);*/
/*margin-bottom: 1.875rem;*/
border-radius: 0;
position: relative;
display: block;
background-color:#223c50; /*跟z-grid一樣*/
border: 1px solid rgba(0, 0, 0, .06);
}
.card-block {
/*padding: 0.5em 1.5rem;*/
/*padding: 0 0.5rem 0.5rem 0.5rem;*/
padding:0;
}
.card .row{
border-bottom:1px solid #42596a;
padding:6px 6px;
margin:0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.card .row.last
{
border-bottom:0px;
}
.card .row .label
{
/*padding-top:4px;*/
font-weight:bold;
text-align:right;
}
/*一般購票的劃位結果頁的row padding擠一點*/
.card.minirow .row
{
padding:0px;
}
.card.minirow .row:hover
{
background:none;
}
.card .row .label.normal
{
/*padding-top:4px;*/
font-weight:bold;
text-align:left;
}
.card .row .label.center
{
font-weight:bold;
text-align:center;
}
.card .row .label span.required, .card .row .label span
{
font-weight:bold;
}
.card .row:hover
{
background:rgba(30,42,55,0.8);
color:rgba(255,255,255,0.9);
}
.card .card-header
{
font-size:1.2rem;
color:white;
background-color:#298d74;
padding: 0.2rem 1rem;
/*垂直置中*/
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.card .card-header
{
font-weight:bold;
}
.card .card-header i
{
padding-right:10px;
}
.card .z-radio input[type=radio]:checked + label:after, .card .z-checkbox input[type="checkbox"]:checked + label:after
{
/*top:13px;*/
top:16px;/*0923 字體放大後調整對齊位置*/
}
/*查詢結果用的card box*/
.card.groupbox
{
margin:10px;
border:1px solid #42596a;
}
.z-checkbox input[type="checkbox"]:checked + label:after{
width:4px;
height:4px;
top:15px;
}
.z-listheader-content, .z-listcell-content, .z-listgroup-content, .z-listgroupfoot-content, .z-listfooter-content
{
padding:4px;
}
.z-paging-info
{
color: rgba(255,255,255,0.8);
}
.z-listheader-content
{
font-weight:bold;
}
.card .z-auxheader, .z-window.z-window-modal .z-auxheader, .z-groupbox-3d>.z-groupbox-header
{
/*border-left:1px solid #FFFFFF;*/
/*border-bottom:1px solid #FFFFFF;*/
background-color:#0097A7;
}
.card .z-auxheader .z-auxheader-content span
{
font-weight:bold;
}
.z-listbox-header-border
{
margin:0px;
border:0px;
}
.z-include .z-window
{
border:0px;
}
.z-window.z-window-modal
{
/*background-color:#3D9CDD;*/
}
.z-window.z-window-modal .z-window-header
{
color:white;
font-weight:bold;
paddint-bottom:10px;
}
.z-modal-mask
{
background:#a9a9a982;
opacity:0.75;
}
.z-icon-remove:before, .z-icon-close:before, .z-icon-times:before {
font-size: 30px;
}
.z-grid-header-border
{
border-bottom:0px;
}
.z-combobox-popup, .z-bandbox-popup, .z-datebox-popup, .z-timebox-popup
{
border:1px solid white;
}
/* 沒有border的Card div */
.card.noborder
{
border:0px;
}
.z-groupbox-3d>.z-groupbox-header .z-caption, .z-groupbox-3d>.z-groupbox-header .z-groupbox-title
{
cursor:n-resize;
}
.z-groupbox-3d>.z-groupbox-header .z-caption-content, .z-groupbox-3d>.z-groupbox-header .z-groupbox-title-content
{
color:white;
}
.z-groupbox-3d>.z-groupbox-header .z-caption-content, .z-groupbox-3d>.z-groupbox-header .z-groupbox-title-content:before
{
font-family:FontAwesome;
content:"\f142";
padding-right:10px;
}
.z-groupbox
{
margin:5px;
}
.z-groupbox>.z-groupbox-header .z-groupbox-title-content
{
color:wheat;
font-weight:bold;
}
.z-window .z-button
{
background-color: #298d74;
/*border-color: #298d74;*/
color: #fff;
cursor: pointer;
transition: all ease-in 0.3s;
/*增加立體效果*/
border-style: outset;
border-width: 4px;
border-color: #74b5a4;
}
.z-window .z-button:focus
{
border-color: #74b5a4;
background-color:#F9A825;
}
.z-window .z-button:hover{
background-color:#F9A825;
border-color:#F9A825;
}
.btn-primary:hover
{
background-color:#F2C619;
}
.btn-inverse, .tpt-btn-menu {
background-color: #1e2a37;
border-color: #1e2a37;
box-shadow: none;
color: #fff;
}
.btn, .z-window .z-button {
border-radius: 2px;
padding: 10px 10px;
}
.z-window .z-button.btn-info
{
background-color: #3498DB;
border-color: #3498DB;
color: #fff;
cursor: pointer;
transition: all ease-in 0.3s;
}
/*必填欄位星號放大*/
.required span.z-label-star {
display: inline !important;
position: relative;
top: 12px ;
font-size: 34px !important;
line-height: 20%;
color:#FF1818;
}
#app-body span.label-desc
{
font-size:16px;
color:rgba(0,0,0,0,8);
font-weight:normal;
display:inline-block;
}
.z-button[disabled], .z-button[disabled]:hover
{
border:1px solid grey;
background:grey;
cursor:not-allowed;
}
/*----------------------------------------------------------------------------------------------------*/
/*互動螢幕按鈕*/
.btnPopup:before
{
font-family:FontAwesome;
/*content:"\f03d";*/
content:"\f0ec";
}
.z-window .z-button.btnPopup
{
background-color: #1abc9c;
box-shadow: none;
color: #fff;
padding:0px 10px;
margin:0px 10px;
}
.z-window .z-button.btnPopup:hover
{
background-color:#ffb529;
border:0px;
}
.divStop
{
text-align: left;
min-width: 350px;
border-color:#c0c0c0;
margin-bottom: 3px;
cursor: default;
}
.divStop.z-comboitem:hover
{
background:#3d9cdd;
border:2px solid white;
color:white;
}
.divStop.z-comboitem:hover span
{
font-weight:bold;
}
/*車站選擇器的按鈕*/
/*預設風格*/
.popupBtnDefault.z-button
{
padding:1rem 0.5rem;
margin:2px;
min-width:165px;
}
/*重點車站風格*/
.popupBtnBold.z-button
{
background: #3498DB;
border-color: #79add2;
}
.staLevel_1.z-button
{
background: #3498DB;
border-color: #79add2;
}
.staLevel_0.z-button
{
color: white;
background-color: #8E24AA;
border-color: #8E24AA;
}
.popupBtnCity.z-button
{
padding:1rem;
margin:2px;
min-width:100px;
}
.z-textbox-disabled[disabled],
.z-doublebox-disabled[disabled],
.z-selectbox[disabled], .z-intbox-disabled[disabled]
{
border-color: #e6e6e6;
background: lightgray !important;
color:black !important;
opacity:1;
cursor:text;
}
.z-textbox-disabled[disabled]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #57707a;
opacity: 1; /* Firefox */
}
.z-textbox-disabled[disabled]::placeholder:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #57707a;
}
.z-textbox-disabled[disabled]::placeholder::-ms-input-placeholder { /* Microsoft Edge */
color: #57707a;
}
.gridcell .z-label, .info-col.z-label, .hilite.z-label
{
color:wheat;
}
.hilite.z-label
{
font-weight: bold;
}
.grid-border, .grid-border td
{
border:1px solid #42596a;
}
.z-label.checkout
{
font-size:3rem !important;
color:#EF6C00;
}
.z-label.seatLable
{
color:wheat;
}
.z-label.standLable
{
color:#53a9ff;
}
.z-label.changeSeattLable
{
color:#53a9ff;
}
.z-label.partSeatLable
{
color:#53a9ff;
}
.z-label.lackSeatMsg
{
color:#ff00ff;
font-weight: bold;
}
.z-label.seatInfo
{
color:#00ff40;
}
.z-label.checkout2
{
color:#EF6C00;
}
.z-label.hilite2
{
font-size:2rem !important;
}
.z-label.emphcolor
{
color:#EF6C00;
}
/* form action button style*/
.form-action {
border-top:1px solid #42596a;
padding: 0.5rem;
margin-top: 0.5rem;
}
.form-action button {
line-height: 1.5rem;
margin-right: 0.5rem;
}
/*新增按鈕的icon (加號)*/
.createBtn:before
{
font-family:FontAwesome;
content:"\f067";
}
/*刪除icon (垃圾桶)*/
.deleteBtn:before {
font-family: FontAwesome;
content: "\f014";
font-size: 1.2rem;
}
/* 按鈕背景: 紅色*/
.deleteBtn.z-button {
background: #B71C1C;
border-color: #B71C1C;
color: white;
}
/* 紅色按鈕 Hover Styles*/
.deleteBtn.z-button:focus, .deleteBtn.z-button:hover {
background: #FF5252;
border-color: #FF5252;
}
.label-seatNo
{
padding: 0p 4px;
border-radius: 1px;
float:left;
/*border:1px solid white;*/
min-width: 180px;
margin: 2px;
}
.card .row.unset
{
-ms-flex-align: unset;
-webkit-align-items: unset;
-webkit-box-align: unset;
align-items: unset;
}
.z-column-content, .z-row-content, .z-group-content, .z-groupfoot-content, .z-footer-content,.z-grid-body .z-cell
{
padding:4px;
}
.cell-label
{
color:#3d9cdd;
}
.blue-label
{
color:#3d9cdd;
}
/*delete button icon*/
.deleteBtn:before
{
font-family: FontAwesome;
content: "\f014";
font-size: 1.2rem;
}
.label-seatNo:hover
{
background: rebeccapurple;
}
span.deleteBtn:hover
{
cursor:pointer;
color:red;
}
/*
當班報表CSS
*/
/* 每條統計項目的row height*/
.dutyReport .row
{
padding:4px;
height:26px;
}
.dutyReport .row.acum_total
{
height:30px;
margin:4px 0px;
}
.dutyReport .row.bigTxt
{
height: 32px;
}
.dutyReport .row.acum_sum
{
margin-top: 4px;
}
.dutyReport .card-block
{
background:rgba(0,0,0,0.2);
padding: 5px 2px 10px;
}
.z-window .dutyReport .card .card-block .row span
{
font-size:20px;
}
.z-window .dutyReport .card .card-block .row.bigTxt span
{
font-size:24px;
}
/* 各項統計類別的總計highlight*/
.z-window .dutyReport .card .card-block .row.acum_total span
{
/*font-size:20px;*/
color:wheat;
}
.textToLeft
{
text-align:left;
}
.textToRight
{
text-align:right;
}
.underline
{
border-bottom:1px solid;
}
.doubleline
{
border-bottom:2px double;
}
.indent1
{
padding-left:2em;
}
.indent2
{
padding-left:4em;
}
.acum_total
{
font-weight:bold;
}
.z-label.dollar:before
{
content:"$";
}
.card .row.div_hr
{
height:10px;
}
/*dollar sign*/
.fa-dollar:before {
font-family: FontAwesome;
content: "\f155";
margin-right: 10px;
font-size: 24px;
}
.fa-money:before
{
font-family: FontAwesome;
content: "\f0d6";
margin-right: 10px;
font-size: 24px;
}
.fa-credit-card:before {
font-family: FontAwesome;
content: "\f09d";
margin-right: 10px;
font-size: 24px;
}
.fa-print:before, .printBtn:before {
font-family: FontAwesome;
content: "\f02f";
margin-right: 10px;
font-size: 24px;
}
.fa-calculator:before
{
font-family: FontAwesome;
content: "\f1ec";
margin-right: 10px;
font-size: 24px;
}
.fa-balance-scale:before
{
font-family: FontAwesome;
content: "\f160";
margin-right: 10px;
font-size: 24px;
}
/*結帳按鈕的icon*/
.checkoutBtn:before
{
font-family: FontAwesome;
content: "\f046";
margin-right: 10px;
font-size: 24px;
}
/*日結按鈕的icon多一個月亮*/
.checkoutDayBtn:before
{
font-family: FontAwesome;
content:"\f186";
margin-right: 10px;
font-size: 20px;
}
/*交易明細按鈕的icon*/
.txnDetailBtn:before {
font-family: FontAwesome;
/*content: "\f090";*/
/*content: "\f06e";*/
/*content:"\f013";*/
/*content:"\f00e";*/
/*font-size: 1.2rem;*/
content:"\f0cb";
margin-right:10px
}
.dutyRecordBtn:before
{
font-family:FontAwesome;
content: "\f1ec";
margin-right:10px;
}
/*已結帳的按紐要是藍色的*/
.z-window .z-button.blueBtn
{
background-color:#1565C0;
border-color:#1565C0;
}
/*icon for closeBtn*/
.z-window .z-button.closeBtn:before
{
font-family:FontAwesome;
content: "\f00d";
padding-right: 0.5rem;
}
/*灰色按紐*/
.z-window .z-button.grayBtn
{
color: white;
background: #27A2CF;
border-color: #27A2CF;
}
.z-window .z-button.grayBtn:hover
{
background-color: #228EB6;
border-color: #228EB6;
}
.z-window .z-button.blueBtn:hover
{
border-color: #2979FF;
background: #2979FF;
}
.z-window-content
{
padding:4px;
}
.z-label.minus-income
{
color:#EF6C00;
}
.confirmBtn:before
{
content:"\f00c";
font-family:FontAwesome;
padding-right:10px;
}
.divDuty .z-listcell-content .z-label,
.divDuty .z-listheader-content,
.divDuty .z-listcell-content,
.divDuty .z-groupbox-title-content,
.divDuty .z-caption-content,
.divDuty .z-checkbox-content
{
font-size:20px !important;
}
/*
End of 當班報表CSS
*/
/*查詢按鈕的icon*/
.searchBtn:before
{
content:"\f002";
font-family:FontAwesome;
padding-right:10px;
}
.z-grid-header
{
background:none;
}
/*選座的按鈕 先藏起來*/
.btnSelectSeat
{
/*display:none;*/
}
/* 選座button icon*/
.btnSelectSeat:before
{
content:"\f009";
font-family:FontAwesome;
padding-right:10px;
}
/* 保留座button icon*/
.btnReservationSeat:before
{
content:"\f00b";
font-family:FontAwesome;
padding-right:10px;
}
/*隱藏保留座按鈕*/
.btnReservationSeat
{
display:none;
}
/* 加價按鈕icon*/
.btnExtraTkt:before
{
content:"\f12b";
font-family:FontAwesome;
padding-right:10px;
}
/*乘車變更按鈕icon*/
.btnExchange:before
{
content:"\f0ec";
font-family:FontAwesome;
padding-right:10px;
}
.z-button.btnExchange
{
min-width:170px;
height:2.5em;
}
.z-button.seatBtn
{
margin: 2px;
width: 100px;
}
/*ReadOnly*/
.z-textbox.z-textbox-readonly, .z-intbox.z-intbox-readonly
{
color:black;
}
/*listbox checkable style*/
.z-icon-check:before {
background: #298d74;
color: white;
font-weight: bold;
}
/*調整listbox的checkbox的樣式*/
.z-listheader-checkable, .z-listitem-checkable
{
border:0px;
border-radius:0px;
}
.z-listitem-selected>.z-listcell>.z-listcell-content>.z-listitem-checkable .z-listitem-icon
,.z-listheader-checkable.z-listheader-checked .z-listheader-icon
{
line-height:20px;
}
/* 調整一般取票的 master detail*/
.divFetch .z-detail-icon
{
font-size:30px;
}
.divFetch .z-detail
{
width:30px;
}
tr.divFetch
{
height:45px;
}
.divFetch .z-detail-outer
{
padding-top:10px;
}
.fetchBtn:before
{
content:"\f019";
font-family:FontAwesome;
padding-right:10px;
}
/*paymentbox buttons*/
.btnPayCash:before
{
font-family:FontAwesome;
padding-right:10px;
content:"\f155";
}
.btnPayCredit:before
{
font-family:FontAwesome;
padding-right:10px;
content:"\f09d";
}
.btnPayTaiwan:before
{
font-family:FontAwesome;
padding-right:10px;
content:"\f1bb";
}
.btnPayMobile:before
{
font-family:FontAwesome;
padding-right:10px;
content:"\f1ee";
}
.divPayway .btnPayCash,
.divPayway .btnPayCredit,
.divPayway .btnPayTaiwan,
.divPayway .btnPayMobile,
.divPayway .fetchBtn,
.divPayway .btnAcmlCart
{
min-width:170px;
height:2.5em;
}
.divPayway .closeBtn
{
height:2.5em;
/*margin-left: 40px;*/
min-width: 170px;
color:red;
}
/**/
/*咖啡色按紐*/
.z-button.LimeBtn
{
color: white;
background-color: #9E9D24;
border-color: #9E9D24;
}
/*咖啡色,紫色,藍色按鈕disabled*/
.z-button.LimeBtn[disabled], .z-button.LimeBtn[disabled]:hover,
.z-button.purpleBtn[disabled], .z-button.purpleBtn[disabled]:hover,
.z-button.blueBtn[disabled], .z-button.blueBtn[disabled]:hover
{
background-color:gray;
border-color:gray;
color:lightgray;
}
.z-button.LimeBtn:hover
{
background: #C0CA33;
border-color: #C0CA33;
}
/*紫色按紐*/
.z-button.purpleBtn
{
color: white;
background-color: #8E24AA;
border-color: #8E24AA;
}
.z-button.purpleBtn:hover
{
background: #AB47BC;
border-color: #AB47BC;
}
/*Disabled*/
.z-combobox-disabled>*, .z-bandbox-disabled>*, .z-datebox-disabled>*, .z-timebox-disabled>*, .z-spinner-disabled>*, .z-doublespinner-disabled>*
{
border-color: #e6e6e6;
background: lightgray!important;
color:black !important;
cursor: default!important;
}
/*textbox 轉大寫*/
.uppercase {
text-transform: uppercase;
}
/**/
/*應收金額用的紅色*/
.z-label.positive
{
color: #EF6C00;
}
/*應退金額用的綠色*/
.z-label.negative
{
color: #25EF44;
}
.z-groupbox>.z-groupbox-header
{
color:white;
}
/*
訊息區的字體跟顏色
*/
/*FATAL*/
body div[class*="top-app-message"] span
{
font-size:30px;
}
.top-app-message-block .FATAL .z-label
{
color:red;
font-weight:bold;
}
.top-app-message-block .WARN .z-label
{
color:green;
font-weight:bold;
}
.top-app-message-block .INFO .z-label
{
color:blue;
font-weight:bold;
}
.top-app-message-body .top-app-message-close:before {
font-size: 30px;
margin-top: 6px;
}
/*麵包屑的字體*/
.breadcrumb-label.z-label
{
font-size:20px;
}
/*天區右上角的圖示大小*/
.fa-bell:before, .fa-question-circle:before
{
font-size:24px;
}
.dateBtn
{
white-space: pre-line;
padding-top: 0;
line-height: 28px;
height: 100px;
}
/*架構組車站選擇器裡的按鈕 增加的css*/
.popupBtnBold.z-button, .popupBtnDefault.z-button
{
font-size: 26px;
min-width: 210px;
}
.gap.z-label
{
margin:0px 10px;
}
/*累計樣式*/
/*累計button圖示*/
.btnAcmlCart:before
{
font-family:FontAwesome;
padding-right:10px;
content:"\f07a";
}
.divAcml
{
min-width: 120px;
float: right;
/*border: 1px solid #839095;*/
}
.divAcml .tpt-btn-menu
{
border:0px;
}
.divAcml .acmlBtn
{
border-right:1px solid #839095;
}
.divAcml .acmlBtn:before
{
font-family:FontAwesome;
content:"\f07a";
padding-right:10px;
}
#sys-menu .divAcml .tpt-btn-menu:hover
{
background-color:transparent;
color:#F9A825
}
#sys-menu .divAcml .positive
{
color:#EF6C00;
}
#sys-menu .divAcml .negative
{
color:#25EF44;
}
#sys-menu .divAcml .deleteBtn:before
{
font-size:26px;
}
#sys-menu .divAcml .deleteBtn.z-button
{
background:none;
}
#sky-info .divAcml .tpt-btn-menu:hover
{
background-color:transparent;
color:#F9A825
}
#sky-info .divAcml .positive
{
color:#EF6C00;
}
#sky-info .divAcml .negative
{
color:#25EF44;
}
#sky-info .divAcml .deleteBtn:before
{
font-size:26px;
}
#sky-info .divAcml .deleteBtn.z-button
{
background:none;
}
.endDayDutyTitle {
height: 50px;
text-align:center;
}
.endDayDutyBox {
height: 50px;
text-align:right;
}
/*End of 累計樣式*/