/**
 * Add block
 */

#ccm-panel-page {
    #ccm-panel-page-versions {
        table {
            th, td {
                color: #707c8c;
            }

            tr.ccm-panel-page-version-approved {
              td {
                background-color: #154661 !important;
                color: #ccc;
              }
            }

            td {

                a.ccm-panel-page-versions-version-menu {
                    color: #707c8c;
                    &.ccm-panel-page-versions-hover {
                        color: #3baaf7;
                    }
                }
            }

            thead {
                th {
                    background-color: #34353a;

                    button {
                        color: #a2a3a8;
                    }

                    button.disabled {
                        color: #494c55;
                        cursor: pointer;
                    }

                }
            }

            tbody {
                tr:hover {
                    td {
                        background-color: #1e252f !important;
                    }
                }

                td {
                    background-color: #2b2c31;
                }

                tr:nth-child(even) td {
                    background-color: #303136;
                }

                tr.ccm-panel-page-versions-version-checked {
                    td {
                        background-color: #10131a !important;
                        span.ccm-panel-page-versions-version-timestamp, span.ccm-panel-page-versions-version-id {
                            color: #3baaf7;
                        }
                    }
                }

            }
        }
    }
}

.ui-dialog-content {
    #ccm-panel-page-versions {
        table {
            th, td {
                color: #333;
            }

          tr.ccm-panel-page-version-approved {
            td {
              background-color: rgba(59, 170, 247, 0.1);
            }
          }

          td {
                a.ccm-panel-page-versions-version-menu {
                    color: #707c8c;
                    &.ccm-panel-page-versions-hover {
                        color: #3baaf7;
                    }
                }
            }

            thead {
                th {
                    background-color: #eee;
                    border-bottom: 1px solid #ccc;


                    button.disabled {
                        color: #aaa;
                        cursor: pointer;
                    }

                }
            }

            tbody {

                tr.ccm-panel-page-versions-version-checked {
                    td {
                        background-color: #B8E4F8 !important;
                        span.ccm-panel-page-versions-version-timestamp, span.ccm-panel-page-versions-version-id {
                            color: #3baaf7;
                        }
                    }
                }

            }
        }
    }
}

#ccm-panel-page-versions {

    header {
        margin-bottom: 0px;
    }

    table {
        .user-select(none);
        width: 100%;
        th, td {
            font-size: 13px;
            padding-left: 16px;
            padding-bottom: 16px;
            padding-top: 16px;
        }

        thead {
            th {

              border-bottom: 1px solid rgba(0,0,0,0);

              button {
                    font-weight: bold;
                    font-size: @font-size-small;
                }

                button:hover {
                    color: #e3e4e9;
                    text-decoration: none;
                }

            }
        }

      tfoot {
        td {

          border-top: 1px solid rgba(0,0,0,0);

        }
      }

      tbody {
            tr:hover {
                td {


                    a.ccm-panel-page-versions-version-menu {
                        .opacity(1);
                    }
                }
            }
            td {
                .transition(background-color 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000));

                a.ccm-panel-page-versions-version-menu {
                    .opacity(0);
                    .transition(opacity 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000));
                    color: #707c8c;
                    &:hover {
                        text-decoration: none;
                    }
                    &.ccm-panel-page-versions-hover {
                        color: #3baaf7;
                        .opacity(1);
                        text-decoration: none;
                    }
                }
            }

            tr {
                .translate3d(0, 0, 0);
                .transition-transform(cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.2s);
            }



            td:last-child {
                white-space: nowrap;
                padding-right: 20px;
                i.fa-ok {
                    margin-right: 5px;
                }
            }

            td.ccm-panel-page-versions-details {
                width: 100%;
            }

        }
    }

}

div#ccm-menu-click-proxy {
    &.ccm-panel-page-versions-hover {
        z-index: @index-level-menu-panel-and-dialog;
        background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    }
}


div#ccm-popover-menu-container.ccm-panel-page-versions-container, div#ccm-popover-menu-container.ccm-panel-page-versions-container div.popover {
    z-index: @index-level-menu-panel-and-dialog;
}

div#ccm-panel-detail-page-versions {
    div.ccm-panel-detail-content {
        padding: 0px;
        height: 100%;
        width: 100%;
        iframe#ccm-page-preview-frame {
            width: 100%;
            height: 100%;
            top: 0;
            .box-sizing(border-box);
            background: transparent;
            margin: 0px;
            padding: 0px;
        }

        ul.nav-tabs {
            display: block;
            background-color: #e2f4ff;
            padding: 0px;
            margin-bottom: 0px;
            #gradient > .vertical(#e2f4ff, #cbdee5, 80%, 100%);

            li.active {
                a {
                    color: #27649a;
                    &:after {
                        content: "";
                        width: 0px;
                        display: block;
                        margin: 6px auto 0px auto;
                        height: 0px;
                        border-style: solid;
                        border-width: 8px 4px 0 5px;
                        border-color: #81caed transparent transparent transparent;
                    }
                }
            }
            li {
                display: inline-block;

                a {
                    display: inline-block;
                    display: block;
                    color: #7b95a6;
                    text-decoration: none;
                    padding: 25px;
                    position: relative;

                    &:hover {
                        text-decoration: none;
                        color: #27649a;
                    }

                }
            }
        }
    }
}