static.styles.css.bootstrap.epam.custom.css Maven / Gradle / Ivy

Go to download
:root {
    --epm-button-primary-background: #337ab7;
    --epm-button-primary-border: #2e6da4;
    --epm-button-primary-background-hover: #224f70;
    --epm-button-primary-foreground: #fff;

    --epm-button-secondary-background: #8b8b8b;
    --epm-button-secondary-border: #8b8b8b;
    --epm-button-secondary-background-hover: #606060;
    --epm-button-secondary-foreground: #fff;

    --epm-button-danger-background: #d9534f;
    --epm-button-danger-border: #d43f3a;
    --epm-button-danger-background-hover: #963a37;
    --epm-button-danger-foreground: #fff;

    --epm-button-success-background: #5cb85c;
    --epm-button-success-border: #4cae4c;
    --epm-button-success-background-hover: #386b38;
    --epm-button-success-foreground: #fff;

    --epm-success-background: #dff0d8;
    --epm-danger-background: #f2dede;

    --epm-link-color: #337ab7;

    --epm-link-gray: #777;

    --epm-header-background: #c5cfe0;
    --epm-header-frozen-foreground: #40419a;
    --epm-header-not-frozen-foreground: black;

    --epm-input-timestamp-border-radius: 0.7em;

    --epm-full-screen-z-index: 1060;
    --epm-over-full-screen-z-index: 1100;
    --epm-over-all-windows-z-index: 2000;

    --epm-button-partition-blinking: #65a965;

    --epm-faq-font-color: #3c3c3c;
    --epm-faq-hilight-font-color: #6284b6;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.2rem;
}
.btn-primary {
    color: var(--epm-button-primary-foreground);
    background-color: var(--epm-button-primary-background);
    border-color: var(--epm-button-primary-border);
}
.btn-primary:hover {
    background-color: var(--epm-button-primary-background-hover);
}
.btn-secondary {
    color: var(--epm-button-secondary-foreground);
    background-color: var(--epm-button-secondary-background);
    border-color: var(--epm-button-secondary-border);
}
.btn-secondary:hover {
    background-color: var(--epm-button-secondary-background-hover);
}
.btn-danger {
    color: var(--epm-button-danger-foreground);
    background-color: var(--epm-button-danger-background);
    border-color: var(--epm-button-danger-border);
}
.btn-danger:hover {
    background-color: var(--epm-button-danger-background-hover);
}
.btn-success {
    color: var(--epm-button-success-foreground);
    background-color: var(--epm-button-success-background);
    border-color: var(--epm-button-success-border);
}
.btn-success:hover {
    background-color: var(--epm-button-success-background-hover);
}

.bg-success,
.success {
    background-color: var(--epm-success-background) !important;
}
.bg-danger,
.danger {
    background-color: var(--epm-danger-background) !important;
}

.text-primary {
    color: var(--epm-button-primary-background-hover);
    text-decoration: none;
}
.text-success {
    color: var(--epm-button-success-background-hover);
    text-decoration: none;
}
.text-danger {
    color: var(--epm-button-danger-background-hover);
    text-decoration: none;
}
.text-secondary {
    color: var(--epm-button-secondary-background-hover);
    text-decoration: none;
}

.truncated-description {
    display: flex;
    align-items: center;
}

.table>tbody>tr.success>td,
.table>tbody>tr.success>th,
.table>tbody>tr>td.success,
.table>tbody>tr>th.success,
.table>tfoot>tr.success>td,
.table>tfoot>tr.success>th,
.table>tfoot>tr>td.success,
.table>tfoot>tr>th.success,
.table>thead>tr.success>td,
.table>thead>tr.success>th,
.table>thead>tr>td.success,
.table>thead>tr>th.success {
    background-color: var(--epm-success-background);
}

.scrollable-table-container {
    max-height: 70vh;
    overflow-y: scroll;
}

.scrollable-table-container-full-screen {
    max-height: 95vh;
    overflow-y: scroll;
}


.navbar-default {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
}
.navbar-default .navbar-nav>li>a {
    color: var(--epm-link-gray);
}

.dropdown-toggle::after {
    vertical-align: 0;
}

button>i,
a:not(.collapse-button-chevron)>i,
a.previous-offsets-link>i,
a.next-offsets-link>i {
    color: white;
    text-decoration: none;
}

div.collapsed-header>a>i,
a.collapse-button-chevron>i{
    color: var(--epm-link-gray);
    text-decoration: none;
}

.btn-outline {
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;
}

tr.table-info>td>a>i {
    color: var(--epm-link-color);
    text-decoration: none;
}
a>i.info {
    color: var(--epm-link-color);
    text-decoration: none;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td{
    border: 1px solid #ddd;
    background-color: white;
    font-weight: bold;
}

a {
    color: var(--epm-link-color);
    text-decoration: none;
}

.table>tbody>tr.table-info>td,
.table>tbody>tr.table-info>th,
.table>tbody>tr>td.table-info,
.table>tbody>tr>th.table-info,
.table>tfoot>tr.table-info>td,
.table>tfoot>tr.table-info>th,
.table>tfoot>tr>td.table-info,
.table>tfoot>tr>th.table-info,
.table>thead>tr.table-info>td,
.table>thead>tr.table-info>th,
.table>thead>tr>td.table-info,
.table>thead>tr>th.table-info {
    background-color: #d9edf7;
}
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    border: 1px solid #ddd;
}

.page-item.active .page-link {
    background-color: var(--epm-link-color);
    border-color: var(--epm-link-color);
}

.dropdown-toggle::after {
    vertical-align: 0.1em;
}

.form-check-input:checked {
    background-color: var(--epm-link-color);
    border-color: var(--epm-link-color);
}
.form-control {
    padding: 0.3rem 0.75rem;
    font-size: 1em;
}
.form-select {
    padding: 0.3rem 0.75rem;
    font-size: 1em;
}

p {
    margin-top: 0;
    margin-bottom: 10px;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-small {
    line-height: 1em;
}
.btn-time-search {
    border: 1px solid white;
}
.dropdown-menu {
    font-size: 0.9rem;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    line-height: 1em;
    font-size: 0.8em;
}
div.dataTables_wrapper div.dataTables_filter label {
    width: 80%;
    margin: 10px 0 10px 0;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 100%;
    margin: -6px 10px;
}
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
    background-color: var(--epm-header-background);
}
table.dataTable thead tr>.dtfc-fixed-left,
table.dataTable thead tr>.dtfc-fixed-right,
table.dataTable tfoot tr>.dtfc-fixed-left,
table.dataTable tfoot tr>.dtfc-fixed-right {
    color: var(--epm-header-frozen-foreground);
}



.timestamp-class {
    width: 180px;
}
.vertical-line-class-selected {
    border-right: 2px solid #aeadad !important;
}
.vertical-line-class {
    border-right: 1px solid #c8c8c8;
}
div.dataTables_processing div {
    display: none;
}
thead, tbody, tfoot, tr, td, th {
    border-color: #bcbcbc;
}
.truncated22-column  {
    Overflow:hidden;
    max-height: 2rem;
    max-width: 6rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: block;
}

.full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: var(--epm-full-screen-z-index);
}

.info-modal-header-danger {
    font-size: 1.5em;
    color: var(--epm-button-danger-background);
}
.info-modal-header-info {
    font-size: 1.5em;
    color: var(--epm-button-primary-background);
}
.info-modal-text-danger,
.info-modal-text-info {
    display: flex;
    text-align: start;
    align-items: center;
}
.info-modal-text-danger::before {
    font-family: FontAwesome;
    content: "\f05a";
    color: var(--epm-button-danger-background);
    padding: 0.2em;
    font-size: 3em;
}
.info-modal-text-info::before {
    font-family: FontAwesome;
    content: "\f06a";
    color:  var(--epm-button-primary-background);
    padding: 0.2em;
    font-size: 3em;
}

.confirm-modal-text-info {
    display: flex;
    text-align: justify;
    align-items: center;
}
.confirm-modal-text-info::before {
    font-family: FontAwesome;
    content: "\f059";
    padding: 10px;
    font-size: 3em;
    color: var(--epm-button-success-background);
}

.data-modal-header {
    font-size: 1.5em;
    color: var(--epm-button-primary-background);
}
.data-modal-text {
    display: flex;
    text-align: justify;
    align-items: flex-start;
    overflow: scroll;
    margin: 0;
    min-height: 60vh;
    max-height: 70vh;
}

.over-all-windows {
    z-index: var(--epm-over-all-windows-z-index)
}


.external-tool-button {
    display: flex;
    padding: 1em;
    flex-direction: column;
    flex: 0 1 10%;
    background: #edeaea;
    max-width: 7em;
    border-radius: 1em;
    align-items: center;
}
a.external-tool-button>i {
    color: var(--epm-button-success-background);
}
a.external-tool-button>div {
    text-align: center;
}
.external-tool-bar {
    display: flex;
    padding: 1rem 1rem;
    flex-direction: row;
    gap: 1em;
}
.external-tools {
    display: flex;
    justify-content: center;
}
select[name='topics-table_length'],
select[name='consumer-group-table_length'] {
    width: 5em !important;
}
pre.normal-pre {
    margin-bottom: 0;
}

label {
    gap: 5px !important;
}
div.dataTables_wrapper div.dataTables_length select {
    margin-top: -5px;
}
div.dataTables_processing {
    width: 250px !important;
    min-height: 4em;
    padding-top: 10px !important;
}
div.dataTables_wrapper div.dataTables_length label {
    margin: 10px 0 0 0;
}

.filter-number-value {
    max-width: 12em;
}
.filter-string-value {
    min-width: 30em;
}

div.schema-content-dialog {
    min-width:20vw;
    max-width:50vw;
    max-height:90vh;
}
div.schema-content-dialog-body {
    overflow-y: scroll;
    text-align: left;
    padding: 1em 3em 1em 3em;
}

div.tombstone-content-dialog {
    min-width:20vw;
    max-width:40vw;
    max-height:90vh;
}
div.tombstone-content-dialog-body {
    overflow-y: scroll;
    text-align: left;
}

.tombstone-column {
    word-wrap: break-word;
    max-width: 20em;
}
.tombstone-icon-column {
    display: inline;
    padding: 0.3em;
}
.tombstone-text-area{
    min-width:31vw;
    min-height:40vh;
    width:100%;
    font-size:1.2em;
    border-color:lightgray;
}

.column-selector-dialog {
    min-width: 40vw;
    max-width: 60vw;
}
.column-selector-dialog-content {
    max-height:90vh;
}
.column-selector-dialog-column {
    display:flex;
    flex-wrap:wrap;
    gap: 0 2em;
    max-height:70vh;
    flex-direction: column;
}
.column-selector-dialog-item {
    flex: 0 1;
}
#column-selector-dialog {
    z-index: var(--epm-over-full-screen-z-index);
}

#search-offsets-for-time-link-fwd {
    border-top-right-radius: var(--epm-input-timestamp-border-radius);
    border-bottom-right-radius: var(--epm-input-timestamp-border-radius);
}

.input-timestamp {
    border-top-left-radius: var(--epm-input-timestamp-border-radius);
    border-bottom-left-radius: var(--epm-input-timestamp-border-radius);
    min-width: 10em;
    padding: 0rem 0.75em;
}

.offsets-timestamp-wrapper {
    margin-left: auto;
    max-width: 20em;
    min-width: 20em;
}

.to-min-max-title {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
    gap: 0 0.5em;
}
.to-min-max-button {
    max-width: 5em;
    min-width: 5em;
}
.inactive-partition {
    color: rgb(127, 127, 127);
}

.blinked {
    animation: blinker 0.3s linear 4;
}
@keyframes blinker {
    0% {
        color: rgba(0,0,0,0);
        font-weight: bold;
    }
    50% {
        color: var( --epm-button-partition-blinking );
        font-weight: bold;
    }
}

.after-blinking {
    color: var( --epm-button-partition-blinking );
    font-weight: bold;
}

.faq-button {
    display: inline;
}
.faq-button::before {
    font-family: FontAwesome;
    content: "\f059";
    color: var(--epm-button-primary-background);
    cursor: pointer;
}
.faq {
    color: var(--epm-faq-font-color);
    padding-right: 2em;
}
/*.faq b {*/
/*    color: var(--epm-faq-hilight-font-color);*/
/*}*/
.faq-content {
    text-align:left;
    font-size:1.2em;
    padding: 0 2em 1em 0;
    max-height: 40em;
    overflow-y: scroll;
}
.faq-spinner {
    width:100%;
    text-align: center;
}


.large-table-column-20 {
    max-width: 20%;
    min-width: 20%;
    word-break: break-all;
}
.large-table-column-10 {
    max-width: 10%;
    min-width: 10%;
    word-break: break-all;
}
.timestamp-faq-item {
    padding: 0.6em 0.4em 0 0;
}
.fetch-faq-button {
    padding: 0.6em 0 0 0.2em;
    display: inline;
}
.timeout-faq-button {
    padding-top: 0.6em;
    margin-right: -0.2em;
}
.query-filter-faq-button {
    padding: 0.6em 0.3em 0 0;
}

.consumer-group-header {
    display: flex;
    justify-content: space-between;
    padding-right: 2em;
}

.full-screen-button {
    display: inline;
}
#recordTableContainer {
    background: white;
}

.right-icons-in-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.tombstone-republish-icons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}