@charset "UTF-8";

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2021/7/14, 下午 01:39:20
    Author     : Tomoaki Chen
*/
/*
改寫 Primefaces DataTable。 <br>
PF 對於 DataTable，在做各種操作時「會附上/移除 class」。 <br>
包含 hover 上去時，它也是是加一個 ui-state-hover (不確定為什麼不用 :hover)。 <br>
<br>
另外，因為 PF 的 .ui-state-highlight 是用在「物件(那一行，tr)被點擊後」，以下自己的「顯著(那行)」，只能避開用 highlight <br>

.ui-state-highlight
*/

body .ui-datatable.no-border table,
body .ui-datatable.no-border thead,
body .ui-datatable.no-border tbody,
body .ui-datatable.no-border th ,
body .ui-datatable.no-border tr,
body .ui-datatable.no-border td {
    border: none;
}


/* -------------------------------- 以下比較是關於 DataTable 的「配色」、「文字的顯示」。以 .aki-datatable 當 root -------------------------------- */
.aki-datatable {
    /*body .ui-datatable.aki-datatable {*/
    --datatable-main-color: unset;

    --tr-hover-filter: brightness(1.25);
    --tr-hover-background: unset;

    --tr-selected-filter: opacity(0.7);
    --tr-selected-background: transparent;

    --tr-selected-bg-white-linear-to-bottom: linear-gradient(to bottom, rgba(256, 256, 256, 0.7), rgba(237, 237, 237, 0.7));
    --tr-selected-bg-white-linear-to-top: linear-gradient(to top, rgba(256, 256, 256, 0.7), rgba(237, 237, 237, 0.7));
    --tr-selected-bg-blue: rgba(100, 149, 237, 0.7);
    /* 原本在: body .ui-datatable.aki-datatable.table-tr-highlight-blue table tbody tr:nth-child(even).ui-state-highlight 
    background: #6495ED;
    filter: opacity(0.85);
    */
    --tr-selected-border-left: none;
}



body .ui-datatable.aki-datatable .ui-datatable-header {
    border-bottom: 1px solid #C8C8C8;
    background: #FBFBFB;
}

body .ui-datatable.aki-datatable table thead tr th,
body .ui-datatable.aki-datatable table tfoot tr td{
    background: #E0E0E0;
    text-align: center;
}


/*.ui-datatable.aki-datatable table thead tr th.th-left,
.ui-datatable.aki-datatable.th-left table thead tr th,
.ui-datatable.aki-datatable.table-th-left table thead tr th{
    text-align: left;
}*/
.ui-datatable.aki-datatable table thead tr th.th-left {
    text-align: left;
}

.ui-datatable.aki-datatable table thead tr th.customized-th {

}

body .ui-datatable.aki-datatable thead th.ui-state-active {
    color: #116FBF;
}

body .ui-datatable.aki-datatable table tbody td .aki-title {
    display: none;
}

body .ui-datatable.aki-datatable table tbody tr.ui-state-highlight {
    font-weight: bold;
    color: black;
}

body .ui-datatable.aki-datatable table tbody tr:nth-child(odd) {
    background: #FFFFFF;
}

body .ui-datatable.aki-datatable table tbody tr:nth-child(odd).customized-odd-row {
    background: #FFFFFF;
}

body .ui-datatable.aki-datatable table tbody tr:nth-child(even) {
    background: #EDEDED;
}

body .ui-datatable.aki-datatable table tbody tr:nth-child(even).customized-even-row {
    background: #EDEDED;
}

/*body .ui-datatable.aki-datatable table tbody tr:nth-child(odd).ui-state-highlight {
    background: linear-gradient(to bottom, rgba(256, 256, 256, 0.7), rgba(237, 237, 237, 0.7));
}

body .ui-datatable.aki-datatable table tbody tr:nth-child(even).ui-state-highlight {
    background: linear-gradient(to top, rgba(256, 256, 256, 0.7), rgba(237, 237, 237, 0.7));
}*/

/* 原名稱 body .ui-datatable .ui-datatable-data > tr.ui-state-highlight { */
/* body .ui-datatable.aki-datatable tbody.ui-datatable-data > tr.ui-state-highlight {
    background: #E3F2FD;
    color: #495057;
} */

/*body .ui-datatable.aki-datatable table tbody tr.ui-state-hover {
    filter: brightness(1.25);
}*/


/* ---------------------------------- 以下 這條目前風格不太一樣 ---------------------------------- */

.ui-datatable.aki-datatable.table-th-align-left table thead tr th{
    text-align: left;
}
/* ---------------------------------- 以上 這條目前風格不太一樣 ---------------------------------- */


/*  ---------------------------------- 原本這邊是用另外對 .aki-table 附上更多 css ，對顏色、文字做更進一步的描述，改成用 var() ---------------------------------- */

body .ui-datatable.aki-datatable table tbody tr.ui-state-hover {
    background: var(--tr-hover-background);
    filter: var(--tr-selected-filter, brightness(1.25));
}

/* 202406051110 又改
body .ui-datatable.aki-datatable table tbody tr.ui-state-highlight {
    background: var(--tr-selected-background, var(--tr-selected-bg-white-linear-to-bottom));
    filter: var(--tr-selected-filter, opacity(0.7));
}*/
body .ui-datatable.aki-datatable table tbody tr.ui-state-highlight {
    /* background: var(--tr-selected-background); */
    filter: var(--tr-selected-filter, opacity(0.7));
    border-left: var(--tr-selected-border-left);
}


/* 202406051100 刪除
body .ui-datatable.aki-datatable table tbody tr:nth-child(odd).ui-state-highlight {
    background: var(--tr-selected-background, var(--tr-selected-bg-white-linear-to-bottom));
    // background: var(--tr-hover-background, --tr-selected-bg-white-linear-to-bottom);
    filter: var(--tr-selected-filter, opacity(0.7));
}

body .ui-datatable.aki-datatable table tbody tr:nth-child(even).ui-state-highlight {
    background: var(--tr-selected-background, var(--tr-selected-bg-white-linear-to-top));
    filter: var(--tr-selected-filter, opacity(0.7));
}*/

/* 202406031120 之前
body .ui-datatable.aki-datatable table tbody tr:nth-child(odd).ui-state-highlight {
body .ui-datatable.aki-datatable.table-tr-highlight-opacity table tbody tr:nth-child(odd).ui-state-highlight { 
}

body .ui-datatable.aki-datatable.table-tr-highlight-opacity table tbody tr:nth-child(even).ui-state-highlight {
body .ui-datatable.aki-datatable.table-tr-highlight-opacity table tbody tr:nth-child(even).ui-state-highlight {
}*/

body .ui-datatable.aki-datatable table tbody tr td.td-selection {
    text-align: center;
}

body .ui-datatable.aki-datatable table tbody tr td.td-center {
    text-align: center;
}

/* -------------------------------- 以上比較是關於 DataTable 的「配色」、「文字的顯示」。以 .aki-datatable 當 root -------------------------------- */


/* -------------------------------- 以下比較是關於 DataTable 的「排版」 -------------------------------- */


@media (max-width: 1200px) {
    body .ui-datatable.aki-datatable .ui-datatable-data > tr > td {
        padding: 0.5rem 0.5rem;
    }

}

@media (max-width: 1390px) { /* 864px */ /* 764px */
    body .ui-datatable.aki-datatable {
        display: block;
    }

    body .ui-datatable.aki-datatable table thead,
    body .ui-datatable.aki-datatable table tfoot {
        display :none;
    }

    body .ui-datatable.aki-datatable table tbody td {
        display: block;
        width: 100%;
        border: none;

        padding: 0;
        /*margin: 8px;*/
        margin-top: 8px;
        margin-bottom: 8px;
    }

    body .ui-datatable.aki-datatable table tbody td .aki-title {
        display: block;
        color: #0078A3;
        width: 100%;
        font-weight: bold;
        /*text-decoration: underline;*/
        padding-bottom: 4px;
        padding-top: 4px;

        /*margin-left: 8px;*/
        padding: 8px;
    }

    body .ui-datatable.aki-datatable table tbody td .aki-content {
        display: block;
        width: 100%;

        /*margin-left: 12px;*/
        /*margin-right:12px;*/
        padding-left: 12px; /*結果是因為上面 td maring: 8px 導致他超出範圍，不是因為此*/
        /*
        https://www.w3schools.com/css/css_padding.asp
        The CSS width property specifies the width of the element's content area.
        The content area is the portion inside the padding, border, and margin of an element (the box model).
        So, if an element has a specified width, the padding added to that element will be added to the total width of the element. T
        his is often an undesirable result.
        */
    }
}
/* -------------------------------- 以上比較是關於 DataTable 的「排版」 -------------------------------- */