/* * Client area pages - dark card design (matches client home / sidebar). * Active only on pages where is set in header.tpl * (details, domains, domain details, users, contacts, security, profile, * password, emails, invoices, payment methods). */ body.cui { --cui-card: #0e1517; --cui-line: rgba(255, 255, 255, .08); --cui-line-strong: rgba(255, 255, 255, .14); --cui-input: #0b1512; --cui-text: #e6ecea; --cui-muted: rgba(230, 236, 234, .6); --cui-accent: #7ef3b0; --cui-accent-hover: #a2f7c8; --cui-ink: #0b1512; --cui-red: #e53935; --cui-amber: #f5a623; --cui-blue: #54c7ff; } /* ---------- page header ---------- */ body.cui .header-lined { margin: 0 0 22px; padding: 0; border: 0; background: none; } body.cui .header-lined::before, body.cui .header-lined::after, body.cui .header-lined h1::before, body.cui .header-lined h1::after { display: none !important; } body.cui .header-lined h1 { width: auto; margin: 0 0 6px; padding: 0; border: 0 !important; border-image: none !important; font-family: inherit; font-size: 26px; font-weight: 500; line-height: 1.25; background: none !important; animation: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.cui .header-lined h1 small { font-size: 14px; font-weight: 400; background: none !important; animation: none !important; color: var(--cui-muted) !important; -webkit-text-fill-color: var(--cui-muted) !important; } body.cui .header-lined .breadcrumb { margin: 0; padding: 0; background: none; font-size: 13px; } body.cui .header-lined .breadcrumb > li, body.cui .header-lined .breadcrumb > li > a { color: var(--cui-muted); } body.cui .header-lined .breadcrumb > .active { color: var(--cui-text); } /* ---------- cards ---------- */ body.cui .main-content > form, body.cui .main-content > .tab-content, body.cui .main-content > .table-container, body.cui .main-content > table.table, body.cui .main-content > .well, body.cui .main-content > .panel, body.cui .main-content .panel.panel-default { margin: 0 0 22px; padding: 24px 26px; box-sizing: border-box; background: var(--cui-card); border: 1px solid var(--cui-line); border-radius: 16px; box-shadow: none; color: var(--cui-text); } body.cui .main-content > table.table { display: table; width: 100%; padding: 0; border-collapse: separate; border-spacing: 0; overflow: hidden; } body.cui .main-content .panel.panel-default > .panel-heading { margin: -24px -26px 16px; padding: 18px 26px; background: none; border-bottom: 1px solid var(--cui-line); color: #fff; } body.cui .main-content .panel.panel-default > .panel-heading .panel-title { font-family: inherit; font-size: 16px; font-weight: 500; } body.cui .main-content .panel.panel-default > .panel-body { padding: 0; } body.cui .main-content .panel.panel-default > .panel-footer { margin: 16px -26px -24px; padding: 14px 26px; background: none; border-top: 1px solid var(--cui-line); } /* ---------- typography ---------- */ body.cui .main-content h2, body.cui .main-content h3 { margin: 0 0 14px; font-family: inherit; font-weight: 500; line-height: 1.3; color: #fff; } body.cui .main-content h2 { font-size: 20px; } body.cui .main-content h3 { font-size: 17px; } body.cui .main-content h4 { font-family: inherit; font-weight: 500; color: #fff; } body.cui .main-content p, body.cui .main-content .help-block, body.cui .main-content .text-muted { color: var(--cui-muted); } body.cui .main-content hr { border-color: var(--cui-line); } body.cui .main-content form a:not(.btn), body.cui .main-content .tab-content a:not(.btn):not(.list-group-item), body.cui .main-content .table a:not(.btn) { color: var(--cui-accent); } body.cui .main-content form a:not(.btn):hover, body.cui .main-content .tab-content a:not(.btn):not(.list-group-item):hover, body.cui .main-content .table a:not(.btn):hover { color: var(--cui-accent-hover); } /* domain overview: label / value pairs */ body.cui #tabOverview .row { margin-bottom: 6px; } body.cui #tabOverview .row > [class*="col-"] { margin-left: 0; padding-top: 6px; padding-bottom: 6px; color: var(--cui-text); } body.cui #tabOverview .row h4 { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--cui-muted); } body.cui #tabOverview .row h4 strong { font-weight: 500; } body.cui #tabOverview > ul { padding-left: 18px; } body.cui #tabOverview > ul li { margin: 4px 0; } /* ---------- forms ---------- */ body.cui .main-content label, body.cui .main-content .control-label { font-size: 13px; font-weight: 500; color: var(--cui-muted); } body.cui .main-content .radio-inline, body.cui .main-content .checkbox-inline, body.cui .main-content .radio label, body.cui .main-content .checkbox label { font-size: 14px; font-weight: 400; color: var(--cui-text); } body.cui .main-content .form-group { margin-bottom: 18px; } body.cui .main-content .form-control { height: 46px; padding: 0 14px; box-sizing: border-box; background: var(--cui-input); border: 1px solid var(--cui-line); border-radius: 10px; box-shadow: none; color: var(--cui-text); font-size: 14px; transition: border-color .15s, box-shadow .15s; } body.cui .main-content textarea.form-control { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; } body.cui .main-content select.form-control { cursor: pointer; } body.cui .main-content select[multiple].form-control { height: auto; padding: 8px; } body.cui .main-content .form-control::placeholder { color: rgba(230, 236, 234, .4); } body.cui .main-content .form-control:focus { background: var(--cui-input); border-color: rgba(126, 243, 176, .6); box-shadow: 0 0 0 3px rgba(126, 243, 176, .14); color: #fff; } body.cui .main-content .form-control[disabled], body.cui .main-content .form-control[readonly] { opacity: .55; cursor: not-allowed; background: var(--cui-input); } body.cui .main-content select.form-control option { color: #222; background: #fff; } body.cui .main-content .input-group-addon, body.cui .main-content .input-group-text { background: rgba(255, 255, 255, .04); border: 1px solid var(--cui-line); color: var(--cui-muted); } body.cui .main-content .input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } body.cui .main-content .input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } body.cui .main-content .well { background: rgba(255, 255, 255, .03); border: 1px solid var(--cui-line); border-radius: 12px; box-shadow: none; color: var(--cui-text); } /* ---------- buttons ---------- */ body.cui .main-content .btn { padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; text-shadow: none; box-shadow: none; transition: background .15s, border-color .15s, color .15s, opacity .15s; } body.cui .main-content .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; } body.cui .main-content .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 7px; } body.cui .main-content .btn-lg { padding: 13px 24px; font-size: 16px; } body.cui .main-content .btn-primary, body.cui .main-content .btn-success, body.cui .main-content .btn-info { background: var(--cui-accent); border: 1px solid var(--cui-accent); color: var(--cui-ink); } body.cui .main-content .btn-primary:hover, body.cui .main-content .btn-primary:focus, body.cui .main-content .btn-success:hover, body.cui .main-content .btn-success:focus, body.cui .main-content .btn-info:hover, body.cui .main-content .btn-info:focus { background: var(--cui-accent-hover); border-color: var(--cui-accent-hover); color: var(--cui-ink); box-shadow: none; } body.cui .main-content .btn-default, body.cui .main-content .btn-secondary { background: transparent; border: 1px solid var(--cui-line-strong); color: #fff; } body.cui .main-content .btn-default:hover, body.cui .main-content .btn-default:focus, body.cui .main-content .btn-secondary:hover, body.cui .main-content .btn-secondary:focus { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none; } body.cui .main-content .btn-danger { background: rgba(229, 57, 53, .12); border: 1px solid rgba(229, 57, 53, .5); color: #ff8a80; } body.cui .main-content .btn-danger:hover, body.cui .main-content .btn-danger:focus { background: var(--cui-red); border-color: var(--cui-red); color: #fff; box-shadow: none; } body.cui .main-content .btn-warning { background: rgba(245, 166, 35, .12); border: 1px solid rgba(245, 166, 35, .5); color: #ffc670; } body.cui .main-content .btn-warning:hover { background: var(--cui-amber); border-color: var(--cui-amber); color: var(--cui-ink); } body.cui .main-content .btn[disabled], body.cui .main-content .btn.disabled { opacity: .4; pointer-events: none; } /* ---------- alerts ---------- */ body.cui .main-content .alert { margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; border: 1px solid; font-size: 14px; line-height: 1.55; box-shadow: none; } body.cui .main-content .alert-success { background: rgba(126, 243, 176, .08); border-color: rgba(126, 243, 176, .35); color: #b9f8d6; } body.cui .main-content .alert-danger { background: rgba(229, 57, 53, .1); border-color: rgba(229, 57, 53, .4); color: #ffb4ad; } body.cui .main-content .alert-warning { background: rgba(245, 166, 35, .1); border-color: rgba(245, 166, 35, .4); color: #ffd89a; } body.cui .main-content .alert-info { background: rgba(84, 199, 255, .08); border-color: rgba(84, 199, 255, .35); color: #b8e9ff; } body.cui .main-content .alert a, body.cui .main-content .alert .alert-link { color: inherit; text-decoration: underline; } body.cui .main-content .alert .btn { margin-left: 10px; } /* ---------- tables ---------- */ body.cui .main-content .table { margin: 0; background: transparent; border: 0; color: var(--cui-text); } body.cui .main-content .table > thead > tr > th, body.cui .main-content .table > tbody > tr > th, body.cui .main-content .table > tr > th { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--cui-line) !important; background: none !important; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--cui-muted); vertical-align: middle; } body.cui .main-content .table > tbody > tr > td, body.cui .main-content .table > tr > td { padding: 14px; border: 0; border-top: 1px solid var(--cui-line); background: transparent; vertical-align: middle; color: var(--cui-text); } body.cui .main-content .table > tbody > tr:first-child > td { border-top: 0; } body.cui .main-content .table-striped > tbody > tr:nth-of-type(odd), body.cui .main-content .table-striped > tbody > tr:nth-of-type(even) { background: transparent; } body.cui .main-content .table > tbody > tr:hover > td { background: rgba(255, 255, 255, .025); } body.cui .main-content .table small { color: var(--cui-muted); } body.cui .main-content table.table-list tbody tr[onclick] { cursor: pointer; } /* DataTables (includes/tablelist.tpl, dom: <"listtable"fit>pl) */ body.cui .dataTables_wrapper .listtable { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } body.cui .dataTables_wrapper .listtable > .dataTables_info { order: 1; } body.cui .dataTables_wrapper .listtable > .dataTables_filter { order: 2; } body.cui .dataTables_wrapper .listtable > table { order: 3; flex: 1 1 100%; } body.cui div.dataTables_wrapper div.dataTables_info, body.cui .dataTables_wrapper .dataTables_info { margin: 0; padding: 0 !important; background: none; border: 0; font-size: 13px; font-weight: 400; color: var(--cui-muted); } body.cui .dataTables_wrapper .dataTables_filter { float: none; margin: 0; } body.cui .dataTables_wrapper .dataTables_filter label { display: block; margin: 0; padding: 0; } body.cui .dataTables_wrapper .dataTables_filter label .form-control, body.cui .dataTables_wrapper .dataTables_filter input { width: 260px; height: 42px; margin: 0; padding: 0 14px 0 40px !important; box-sizing: border-box; background: var(--cui-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0aaa6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center / 17px 17px; border: 1px solid var(--cui-line); border-radius: 10px; color: var(--cui-text); font-size: 14px; } body.cui .dataTables_wrapper .dataTables_filter input:focus { border-color: rgba(126, 243, 176, .6); outline: none; box-shadow: 0 0 0 3px rgba(126, 243, 176, .14); } body.cui .dataTables_wrapper table.table-list { margin: 4px 0 0 !important; } body.cui .dataTables_wrapper table.table-list thead th, body.cui .dataTables_wrapper table.table-list thead th:nth-child(even) { border-bottom: 1px solid var(--cui-line) !important; } body.cui .dataTables_wrapper table.table-list thead th.sorting_asc, body.cui .dataTables_wrapper table.table-list thead th.sorting_desc { color: #fff; background: none; } body.cui .dataTables_wrapper .dataTables_paginate { margin: 16px 0 0; float: right; } body.cui .dataTables_wrapper .dataTables_length { margin: 16px 0 0; padding: 0 !important; float: left; background: none !important; border: 0 !important; font-size: 13px; color: var(--cui-muted); } body.cui .dataTables_wrapper .dataTables_length label { margin: 0; padding: 0; background: none; font-weight: 400; color: var(--cui-muted); } body.cui .dataTables_wrapper .dataTables_length select { height: 34px; margin: 0 6px; padding: 0 8px; background: var(--cui-input); border: 1px solid var(--cui-line); border-radius: 8px; color: var(--cui-text); } body.cui .dataTables_wrapper::after { content: ""; display: table; clear: both; } body.cui table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, body.cui table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before { background: var(--cui-accent); color: var(--cui-ink); border: 0; box-shadow: none; } /* pagination */ body.cui .main-content .pagination { margin: 0; } body.cui .main-content .pagination > li > a, body.cui .main-content .pagination > li > span { min-width: 36px; margin: 0 0 0 6px; padding: 7px 12px; text-align: center; background: transparent; border: 1px solid var(--cui-line-strong); border-radius: 8px !important; color: var(--cui-text); } body.cui .main-content .pagination > li > a:hover { background: rgba(255, 255, 255, .06); color: #fff; } body.cui .main-content .pagination > .active > a, body.cui .main-content .pagination > .active > a:hover, body.cui .main-content .pagination > .active > span { background: var(--cui-accent); border-color: var(--cui-accent); color: var(--cui-ink); } body.cui .main-content .pagination > .disabled > a, body.cui .main-content .pagination > .disabled > span { background: transparent; border-color: var(--cui-line); color: var(--cui-muted); opacity: .5; } /* ---------- status labels ---------- */ body.cui .main-content .label { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; text-transform: none; background: rgba(255, 255, 255, .08); color: var(--cui-text); } body.cui .main-content .label-success, body.cui .main-content .label.status-active, body.cui .main-content .label.status-paid, body.cui .main-content .label.status-completed { background: rgba(126, 243, 176, .14); color: var(--cui-accent); } body.cui .main-content .label-warning, body.cui .main-content .label.status-pending, body.cui .main-content .label.status-pending-transfer, body.cui .main-content .label.status-payment-pending, body.cui .main-content .label.status-grace { background: rgba(245, 166, 35, .14); color: #ffc670; } body.cui .main-content .label-danger, body.cui .main-content .label.status-unpaid, body.cui .main-content .label.status-overdue, body.cui .main-content .label.status-suspended, body.cui .main-content .label.status-expired, body.cui .main-content .label.status-redemption, body.cui .main-content .label.status-fraud { background: rgba(229, 57, 53, .14); color: #ff8a80; } body.cui .main-content .label-info, body.cui .main-content .label.status-refunded, body.cui .main-content .label.status-collections, body.cui .main-content .label.status-transferred-away { background: rgba(84, 199, 255, .14); color: #9adcff; } body.cui .main-content .label-default, body.cui .main-content .label.status-cancelled, body.cui .main-content .label.status-terminated, body.cui .main-content .label.status-closed { background: rgba(255, 255, 255, .08); color: var(--cui-muted); } /* ---------- tabs ---------- */ body.cui .main-content .nav-tabs { margin: 0 0 18px; border-bottom: 1px solid var(--cui-line); } body.cui .main-content .nav-tabs > li > a, body.cui .main-content .nav-tabs .nav-link { margin-right: 4px; padding: 10px 16px; border: 0; border-radius: 10px 10px 0 0; background: none; color: var(--cui-muted); font-weight: 500; } body.cui .main-content .nav-tabs > li > a:hover { background: rgba(255, 255, 255, .04); color: #fff; } body.cui .main-content .nav-tabs > li.active > a, body.cui .main-content .nav-tabs > li.active > a:hover, body.cui .main-content .nav-tabs > li.active > a:focus, body.cui .main-content .nav-tabs .nav-link.active { border: 0; background: rgba(126, 243, 176, .08); color: #fff; box-shadow: inset 0 -2px 0 var(--cui-accent); } /* ---------- list groups inside content ---------- */ body.cui .main-content .list-group-item, body.cui .main-content .list-group-item:nth-child(odd), body.cui .main-content .list-group-item:nth-child(even) { background: transparent; border: 0; border-top: 1px solid var(--cui-line); color: var(--cui-text); } body.cui .main-content .list-group-item:first-child { border-top: 0; } /* ---------- mobile ---------- */ @media (max-width: 767px) { body.cui .header-lined h1 { font-size: 21px; } body.cui .main-content > form, body.cui .main-content > .tab-content, body.cui .main-content > .table-container, body.cui .main-content > .well, body.cui .main-content > .panel { padding: 18px; border-radius: 14px; } body.cui .dataTables_wrapper .dataTables_filter, body.cui .dataTables_wrapper .dataTables_filter input { width: 100%; } body.cui .dataTables_wrapper .dataTables_paginate, body.cui .dataTables_wrapper .dataTables_length { float: none; text-align: center; } body.cui .main-content .table > tbody > tr > td, body.cui .main-content .table > thead > tr > th { padding: 10px; } }