You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
440 lines
13 KiB
440 lines
13 KiB
:root {
|
|
--cdr-border: #ccc;
|
|
--cdr-header-border: #bbb;
|
|
--cdr-header-color: #cfd7ff;
|
|
|
|
|
|
--cdr-odd-row: #eaeaea;
|
|
--cdr-even-row: #f3f3f3;
|
|
--cdr-group-row: #fffadf;
|
|
--cdr-active-row: #ffb0ee;
|
|
|
|
|
|
--filter-wildcard-color: #444;
|
|
--filter-wildcard-active-color: #ff18ed;
|
|
|
|
--important-date-background: #ffa3da;
|
|
--weekend-background: #c6dfff;
|
|
|
|
--filter-notify-active-color: #ff4df1;
|
|
--filter-notify-color: #bfb0be;
|
|
|
|
--filter-calltype-color: #212121;
|
|
--filter-calltype-active-color: #ff18ed;
|
|
|
|
--filter-calltype-transition1-color: #555;
|
|
--filter-calltype-transition2-color: #ff4df1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.left-panel .filters {
|
|
position: relative;
|
|
padding-left: .8rem;
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
.left-panel .filters > * {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.left-panel .filters .filter .wrapper {
|
|
display: flex; align-items: center;
|
|
}
|
|
.left-panel .filters .filter .value {
|
|
flex: 1;
|
|
min-width: 6rem;
|
|
margin-right: .5rem;
|
|
background-color: var(--textbox-background);
|
|
}
|
|
.left-panel .filters .filter .wildcard {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
margin-right: .5rem;
|
|
padding: .1rem;
|
|
cursor: pointer;
|
|
fill: var(--filter-wildcard-color);
|
|
transition: fill .15s;
|
|
}
|
|
.left-panel .filters .filter .wildcard.active {
|
|
fill: var(--filter-wildcard-active-color);
|
|
}
|
|
.left-panel .filters .filter .status {
|
|
width: .5rem;
|
|
height: .5rem;
|
|
background-color: var(--filter-notify-color);
|
|
border-radius: .25rem;
|
|
transition: background-color .2s ease-out;
|
|
}
|
|
.left-panel .filters .filter .status.active {
|
|
background-color: var(--filter-notify-active-color);
|
|
}
|
|
|
|
|
|
.left-panel .filters .call-types {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.left-panel .filters .call-types .call-type {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: .5rem;
|
|
margin-right: .5rem;
|
|
cursor: pointer;
|
|
}
|
|
.left-panel .filters .call-types .call-type svg {
|
|
height: 1.5rem;
|
|
fill: var(--filter-calltype-color);
|
|
transition: .15s fill;
|
|
}
|
|
.left-panel .filters .call-types .call-type span {
|
|
margin-top: .25rem;
|
|
font-size: 0.85rem;
|
|
color: var(--filter-calltype-color);
|
|
transition: .15s color;
|
|
}
|
|
.left-panel .filters .call-types .call-type.active svg {
|
|
fill: var(--filter-calltype-active-color);
|
|
}
|
|
.left-panel .filters .call-types .call-type.active span {
|
|
color: var(--filter-calltype-active-color);
|
|
}
|
|
.left-panel .filters .call-types .call-type:hover svg {
|
|
fill: var(--filter-calltype-transition1-color);
|
|
}
|
|
.left-panel .filters .call-types .call-type:hover span {
|
|
color: var(--filter-calltype-transition1-color);
|
|
}
|
|
.left-panel .filters .call-types .call-type.active:hover svg {
|
|
fill: var(--filter-calltype-transition2-color);
|
|
}
|
|
.left-panel .filters .call-types .call-type.active:hover span {
|
|
color: var(--filter-calltype-transition2-color);
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-panel .filters .buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.left-panel .filters .buttons > .button {
|
|
flex: 1;
|
|
min-width: fit-content;
|
|
font-size: .9rem;
|
|
font-weight: 500;
|
|
margin-left: .5rem; margin-right: .5rem;
|
|
}
|
|
.left-panel .filters .buttons > .button:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.left-panel .filters .buttons > .button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
.left-panel .settings {
|
|
position: relative;
|
|
padding-left: .8rem;
|
|
margin-bottom: .75rem;
|
|
}
|
|
.left-panel .settings .component {
|
|
margin-bottom: .5rem;
|
|
font-size: .9rem;
|
|
text-align: left;
|
|
}
|
|
.left-panel .settings .component:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.left-panel .new-entries {
|
|
margin-top: .5rem;
|
|
margin-bottom: .75rem;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
opacity: 0; visibility: hidden;
|
|
transition: opacity .1s, visibility .1s;
|
|
}
|
|
.left-panel .new-entries.active {
|
|
opacity: 1; visibility: visible;
|
|
}
|
|
.left-panel .new-entries .text {
|
|
display: flex; justify-content: space-around;
|
|
}
|
|
.left-panel .new-entries span {
|
|
font-size: 1.1rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.left-panel .new-entries .num {
|
|
font-weight: 600;
|
|
color: var(--important);
|
|
}
|
|
.left-panel .new-entries .update {
|
|
min-width: 7.5rem;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-panel .cdr {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cdr .table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 1000px;
|
|
}
|
|
|
|
.cdr .header {
|
|
display: flex;
|
|
background-color: var(--cdr-header-color);
|
|
border: 1px solid var(--cdr-header-border);
|
|
user-select: none;
|
|
}
|
|
|
|
.cdr .header .cell {
|
|
border-right: 1px solid var(--cdr-header-border);
|
|
}
|
|
|
|
.cdr .header .cell-group {
|
|
padding: 0;
|
|
flex-grow: 0;
|
|
border: none;
|
|
display: flex;
|
|
}
|
|
|
|
.cdr .header .cell-group_col {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.cdr .header .cell-group_col > .cell:not(:last-child) {
|
|
border-bottom: 1px solid var(--cdr-header-border);
|
|
padding-top: .25rem;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.cdr .header .cell-group_row > .cell:last-of-type {
|
|
border-right: 1px solid var(--cdr-header-border);
|
|
}
|
|
|
|
.cdr .header .cell-clickable-area {
|
|
padding-top: .25rem;
|
|
padding-bottom: .25rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cdr .header .cell.sortable .name {
|
|
color: var(--link-normal-color);
|
|
transition: .15s color;
|
|
}
|
|
|
|
.cdr .header .cell.sortable .cell-clickable-area:hover .name {
|
|
color: var(--link-active-color);
|
|
}
|
|
|
|
.cdr .header .cell.sortable .sort-button {
|
|
display: none;
|
|
width: .7rem;
|
|
height: .7rem;
|
|
margin-left: .4rem;
|
|
cursor: pointer;
|
|
transition: .15s fill, .3s transform;
|
|
transform-origin: center center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.cdr .header .cell.sortable .sort-button.sort-asc {
|
|
display: flex;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.cdr .header .cell.sortable .sort-button.sort-desc {
|
|
display: flex;
|
|
}
|
|
|
|
.cdr .header .cell.sortable .cell-clickable-area:hover .sort-button {
|
|
fill: var(--link-active-color);
|
|
}
|
|
|
|
|
|
.cdr .cell {
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-right: 1px solid var(--border);
|
|
padding-left: .75rem;
|
|
padding-right: .75rem;
|
|
min-height: 1.35rem;
|
|
}
|
|
|
|
.cdr .cell:last-of-type {
|
|
border-right: none;
|
|
}
|
|
|
|
.cdr .cell.cell_id { min-width: 3.5rem; max-width: 3.5rem; }
|
|
.cdr .cell.cell_dailyct { min-width: 6rem; max-width: 6rem; }
|
|
.cdr .cell.cell_type { min-width: 4.5rem; max-width: 4.5rem; }
|
|
.cdr .cell.cell_date { min-width: 8.5%; max-width: 8.5%; }
|
|
.cdr .cell.cell_source { min-width: 12.5%; flex-basis: 100%; }
|
|
.cdr .cell.cell_destination { min-width: 12.5%; flex-basis: 100%; }
|
|
.cdr .cell.cell_total-duration { min-width: 5rem; max-width: 5rem; }
|
|
.cdr .cell.cell_call-duration { min-width: 5rem; max-width: 5rem; }
|
|
.cdr .cell.cell_result { min-width: 8rem; max-width: 8rem; }
|
|
.cdr .cell.cell_records { min-width: 7rem; max-width: 7rem; }
|
|
|
|
|
|
.cdr .body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--cdr-border);
|
|
border-top: none;
|
|
max-height: calc(100vh - 12rem);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.cdr .body .entry:nth-child(even) {
|
|
background-color: var(--cdr-even-row);
|
|
}
|
|
|
|
.cdr .body .entry:nth-child(odd) {
|
|
background-color: var(--cdr-odd-row);
|
|
}
|
|
|
|
.cdr .body .entry {
|
|
display: flex;
|
|
min-height: 2.5rem;
|
|
transition: background-color .1s;
|
|
}
|
|
.cdr .body .entry.active {
|
|
background-color: var(--cdr-active-row);
|
|
}
|
|
|
|
.cdr .body .cell {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.cdr .body .cell .image {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.cdr .body .cell .image.link {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
cursor: pointer;
|
|
transition: fill .15s;
|
|
margin-left: .4rem;
|
|
margin-right: .4rem;
|
|
}
|
|
|
|
.cdr .body .cell .image.link:hover {
|
|
fill: var(--control-selected);
|
|
}
|
|
|
|
.cdr .body .entry.group {
|
|
background-color: var(--cdr-group-row);
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 1rem; padding-right: 1rem;
|
|
}
|
|
.cdr .body .entry.group:not(:nth-child(2)) {
|
|
border-top: 1px solid var(--cdr-border);
|
|
}
|
|
.cdr .body .entry.group:not(:last-child) {
|
|
border-bottom: 1px solid var(--cdr-border);
|
|
}
|
|
.cdr .body .entry.group .group-text {
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
min-width: 8rem;
|
|
text-align: left;
|
|
}
|
|
.cdr .body .entry.group .stats {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 1rem;
|
|
}
|
|
.cdr .body .entry.group .stats .image {
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
margin-right: .5rem;
|
|
margin-left: 2rem;
|
|
}
|
|
.cdr .body .entry.group .stats .num-calls {
|
|
text-align: left;
|
|
min-width: 1.5rem;
|
|
}
|
|
|
|
|
|
.cdr .body .no-cdrs {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: 2rem;
|
|
}
|
|
.cdr .body .no-cdrs.active {
|
|
display: flex;
|
|
}
|
|
.cdr .body .no-cdrs .text {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.cdr .controls {
|
|
min-height: 2.5rem;
|
|
max-height: 2.5rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-self: center;
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
margin-top: 1rem;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
.cdr .controls .button {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
margin-left: .75rem;
|
|
margin-right: .75rem;
|
|
}
|
|
|
|
.cdr .controls .button.active {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cdr .controls .button { fill: var(--control-disabled); transition: fill .15s; }
|
|
.cdr .controls .button.active { fill: var(--control-enabled); }
|
|
.cdr .controls .button.active:hover { fill: var(--control-selected); }
|
|
|
|
.cdr .controls .status {
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
font-size: 1.15rem;
|
|
min-width: 5rem;
|
|
}
|
|
|
|
.cdr .controls .goto-page {
|
|
margin-left: 1rem;
|
|
width: 3.5rem;
|
|
}
|
|
|