Viewing File: /usr/local/cpanel/base/frontend/jupiter/domains/index.less
// Copyright 2025 WebPros International, LLC
// All rights reserved.
// copyright@cpanel.net http://cpanel.net
// This code is subject to the cPanel license. Unauthorized copying is prohibited.
@import (reference) "../libraries/bootstrap/source/less/variables.less";
@import "../css/ux-styles.less";
.label a,
.label a:active,
.label a:hover {
color: inherit;
font-size: inherit;
line-height: inherit;
}
.gear_column {
text-align: right;
}
.gear_menu {
text-align: left;
}
.checkbox label.text-muted {
font-style: italic;
}
.fixed-width-table {
table-layout: fixed;
}
.cutoff_with_ellipses {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.bottom-search-btn {
vertical-align: top;
margin: 0;
box-shadow: none;
}
.table-link {
display: inline-block;
vertical-align: middle;
padding-top: @padding-base-vertical;
padding-right: @padding-base-horizontal;
padding-bottom: @padding-base-vertical;
padding-left: 0;
}
.table-controls-row {
margin-bottom: 10px;
}
.animate-show-hide {
position: relative;
top: 0;
&.ng-enter {
transition: 0.25s linear all;
opacity: 0;
&.ng-enter-active {
opacity: 1;
}
}
&.ng-leave {
display: none;
}
}
.animate-show-hide-slide {
left: 0;
&.ng-enter {
left: -25vw;
&.ng-enter-active {
left: 0;
}
}
&.ng-leave {
left: 0;
&.ng-leave-active {
left: -25vw;
}
}
}
.domain-suggestion-list-group {
.list-group-item {
padding: 0;
}
}
.segmented-list {
display: flex;
input[type="radio"] {
display: none;
}
.list-group-item {
display: inline-block;
flex: 1;
margin-bottom: 0;
margin-left: -4px;
margin-right: 0;
&:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
}
}
.list-group-item[disabled="disabled"] {
cursor: default;
&:hover,
&:focus {
background-color: #fff;
}
.list-group-item-content {
font-style: italic;
}
}
}
.domain-chosen-selector {
width: 100%;
vertical-align: middle;
}
.chosen-container {
vertical-align: middle;
margin-top: 4px;
width: 100% !important;
}
.return-to-list-link {
text-align: right;
}
.global-actions-row {
text-align: left;
}
.domain-lister-view td a.btn:first-child {
padding-left: 0;
}
@media (max-width: @screen-md-min) {
.responsive-table table {
display: table;
}
.responsive-table thead {
display: table-header-group;
}
.responsive-table tbody {
display: table-row-group;
}
.responsive-table td,
.responsive-table th {
display: table-cell;
}
.responsive-table tr {
display: table-row;
}
.submit-form-group {
text-align: center;
button {
margin-bottom: 4px;
}
}
.return-to-list-link {
text-align: center;
}
.global-actions-row {
text-align: left;
}
.break-on-mobile {
word-break: break-all;
white-space: normal;
}
}
@media (min-width: @screen-sm-min) {
.action-column {
white-space: normal !important;
}
}
.gear_column {
width: 40px;
}
html[dir="rtl"] {
.gear_column {
text-align: left;
}
.gear_menu {
text-align: right;
left: 0;
right: auto;
}
.extraInfoSection {
padding-right: 80px;
}
.domain-chooser__close-btn {
right: auto;
left: 20px;
}
}
.action-bar .form-control {
display: inline-block;
width: auto;
}
#domainItemLister_items_table_th_batchSelect,
table#domainItemLister_items_table > tbody > tr > td.batchSelectTd {
width: 30px;
flex: none;
}
.btn.url-link {
text-transform: none;
text-align: left;
}
.row-expand-container {
display: inline-block;
}
.extraInfoSection {
padding-left: 80px;
dt {
font-weight: 600;
}
dd {
margin-top: 3px;
margin-bottom: 15px;
}
}
.new-domain-input {
display: flex;
align-items: center;
gap: 10px;
}
.panel-body {
overflow: hidden;
}
.docroot-form-control-container {
display: flex;
align-items: self-start;
column-gap: 8px;
.docroot-label-container {
.info-block {
margin: 4px 0 0;
}
label {
display: inline;
}
}
}
// The backend doesn't seem to accept uppercase
// letters in domain names so this visually enforces
// that standard for the frontend
form input[type="text"]#newDomainName,
form input[type="text"]#subDomainPart {
text-transform: lowercase;
}
// When the domain recommendations banner is visible, the sidebar
// widget needs extra top margin to stay aligned with the page content.
.widget--with-banner-offset {
margin-top: 20px;
}
// ==========================================================================
// Domain Recommendations Banner
// ==========================================================================
.domain-recommendations-banner {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px;
padding: 15px 20px;
box-shadow: 0 8px 20px 0 var(--dropshadow, rgba(2, 2, 2, 0.04));
margin: 20px 0;
background-color: #fff;
border: 1px solid #e7e7e8;
border-radius: 4px;
// Standardised close button — same icon size, hit area, and colour as the
// create-domain chooser and search modal close controls.
&__close {
flex-shrink: 0;
padding: 6px;
font-size: 20px;
line-height: 1;
color: #3c4d5a;
background: none;
border: none;
cursor: pointer;
transition: color 0.15s ease;
&:hover,
&:focus-visible {
color: #212529;
}
&:focus-visible {
outline: 2px solid #003da6;
outline-offset: 2px;
}
}
&__header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
&__illustration {
flex-shrink: 0;
width: 166px;
height: 96px;
img {
display: block;
width: 100%;
height: 100%;
}
}
&__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
&__heading {
margin: 0;
flex: 1;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
&__suggestions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
margin: 0;
font-family: Lato, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 120%;
color: var(--Theme-Dark, #212529);
}
&__suggestion {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
&__check-icon {
color: #ff6c37;
width: 24px;
height: 24px;
aspect-ratio: 1/1;
font-size: 24px;
}
&__footer-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
&__pricing {
flex: 1;
min-width: 0;
margin: 0;
font-size: 12px;
line-height: 1.5;
color: #212529;
strong {
color: #212529;
}
}
&__explore-btn {
flex-shrink: 0;
display: flex;
height: 32px;
padding: 5px 9px;
justify-content: center;
align-items: center;
gap: 8px;
white-space: nowrap;
font-size: 14px;
line-height: 1.5;
color: #003da6;
background-color: #fff;
border: 1px solid #ff6c37;
border-radius: 3.2px;
cursor: pointer;
box-shadow: none;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
&:hover {
background-color: #fdf6ef;
border-color: #ff6c37;
}
&:focus {
color: #003da6;
background-color: #ccd8ed;
border-color: #003da6;
}
&:focus-visible {
outline: 2px solid #003da6;
outline-offset: 2px;
}
}
}
// Responsive: stack vertically on narrow viewports
@media (max-width: 767px) {
.domain-recommendations-banner {
flex-direction: column;
align-items: flex-start;
padding-right: 20px;
&__illustration {
display: none;
}
&__footer-row {
flex-direction: column;
align-items: stretch;
}
&__explore-btn {
width: 100%;
justify-content: center;
}
}
}
.domain-recommendations-banner {
&__status {
margin: 0;
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
color: var(--Theme-Dark, #212529);
}
&__progress {
position: relative;
flex: 1;
min-width: 0;
height: 5px;
overflow: hidden;
background-color: #e7e7e8;
border-radius: 4px;
}
&__progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 40%;
background-color: var(--Theme-Dark, #212529);
border-radius: 4px;
animation: domain-recs-progress 1.5s ease-in-out infinite;
}
}
@keyframes domain-recs-progress {
0% {
left: -40%;
}
100% {
left: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.domain-recommendations-banner__progress-bar {
animation: none;
left: 0;
width: 35%;
}
}
// ==========================================================================
// Reusable Domain Search modal — extracted into a scoped LESS file so the
// component can be reused outside this app and to keep this index.less
// readable. All .domain-search-modal* selectors live in that file.
@import "directives/domainSearchModal.less";
// Shared <tld-priority-input> directive — used by both the recommendations
// modal and the create-domain "purchase" chooser.
@import "directives/tldPriorityInput.less";
// Domain Type Chooser Modal
body.domain-chooser-open {
overflow: hidden;
}
.domain-chooser-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1050;
display: flex;
align-items: flex-start;
justify-content: center;
// The tri-option chooser is intentionally larger than the search/purchase
// modal (per design review on CPANEL-53291), so it keeps its own taller
// viewport offset rather than the shared 80px.
padding: 15vh 20px 20px;
}
.domain-chooser {
position: relative;
background: #fff;
border-radius: 4px;
box-shadow: 0 8px 20px rgba(2, 2, 2, 0.04);
padding: 30px;
// Wider than the search/purchase modal: the three side-by-side option
// cards need the extra room to avoid wrapping and scrolling (design
// review, CPANEL-53291).
max-width: 900px;
width: 100%;
// Cap the height to the space the overlay actually leaves (viewport minus
// the 15vh top offset and 20px bottom padding above). Using a flat 90vh
// let the modal run to 15vh + 90vh = 105vh and pushed the footer buttons
// off-screen on shorter viewports — most visibly when unchecking "Share
// document root" reveals the extra document-root group (CPANEL-54611).
max-height: calc(85vh - 20px);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 30px;
// Standardised close button — same icon, size, and hit area as the
// search modal's .domain-search-modal__close.
&__close-btn {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
padding: 6px;
cursor: pointer;
line-height: 1;
font-size: 20px;
color: #3c4d5a;
&:hover,
&:focus-visible {
color: #212529;
}
&:focus-visible {
outline: 2px solid #003da6;
outline-offset: 2px;
}
}
&__heading {
font-family: "Lato", sans-serif;
font-size: 32px;
font-weight: 500;
color: #212529;
margin: 0;
line-height: 1.2;
}
&__cards {
display: flex;
gap: 24px;
}
&__card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: #fff;
border: 1px solid #e7e7e8;
border-radius: 8px;
cursor: pointer;
text-align: center;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
&:hover {
border-color: #ff6c37;
box-shadow: 0 2px 8px rgba(255, 108, 55, 0.15);
}
&:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
&--selected {
border-color: #ff6c37;
box-shadow: 0 2px 8px rgba(255, 108, 55, 0.15);
}
}
&__actions {
display: flex;
gap: 16px;
justify-content: flex-end;
align-items: center;
}
&__btn-cancel {
background: none;
border: none;
padding: 6px 12px;
font-family: "Lato", sans-serif;
font-size: 16px;
font-weight: 400;
color: #003da6;
cursor: pointer;
border-radius: 4px;
line-height: 1.5;
&:hover {
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
}
&__btn-continue {
background: #003da6;
border: 1px solid #003da6;
padding: 7px 13px;
font-family: "Lato", sans-serif;
font-size: 16px;
font-weight: 400;
color: #fff;
cursor: pointer;
border-radius: 4px;
line-height: 1.5;
&:hover {
background: #002d7a;
border-color: #002d7a;
}
&:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
}
&__card-illustration {
width: 208px;
height: 128px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
img {
max-width: 100%;
max-height: 100%;
}
}
&__card-subtitle {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: 400;
color: #3c4d5a;
margin-bottom: 4px;
}
&__card-heading {
font-family: "Lato", sans-serif;
font-size: 20px;
font-weight: 500;
color: #212529;
}
&__form {
display: flex;
flex-direction: column;
gap: 20px;
}
&__form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
&__form-label {
font-family: "Lato", sans-serif;
font-size: 16px;
font-weight: 700;
color: #212529;
margin: 0;
}
&__form-description {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: 400;
color: #3c4d5a;
margin: 0;
}
&__input {
height: 36px;
border: 0.5px solid #3c4d5a;
border-radius: 4px;
padding: 0 12px;
font-family: "Lato", sans-serif;
font-size: 14px;
color: #212529;
width: 100%;
box-sizing: border-box;
text-transform: lowercase;
&:focus {
outline: 2px solid #0d6efd;
outline-offset: -1px;
border-color: #0d6efd;
}
}
&__checkbox-row {
display: flex;
align-items: center;
gap: 8px;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: 400;
color: #212529;
cursor: pointer;
margin: 0;
}
&__checkbox {
width: 24px;
height: 24px;
flex-shrink: 0;
cursor: pointer;
accent-color: #003da6;
}
&__form-help {
font-family: "Lato", sans-serif;
font-size: 13px;
font-weight: 400;
color: #3c4d5a;
margin: 0;
padding-left: 32px;
}
&__docroot-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
&__docroot-heading-row {
display: flex;
align-items: center;
gap: 6px;
}
&__docroot-heading {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: 700;
color: #212529;
}
&__docroot-info-icon {
font-size: 16px;
color: #3c4d5a;
cursor: help;
}
&__docroot-input-wrapper {
display: flex;
align-items: center;
border: 0.5px solid #3c4d5a;
border-radius: 4px;
overflow: hidden;
height: 36px;
&:focus-within {
outline: 2px solid #0d6efd;
outline-offset: -1px;
}
}
&__docroot-prefix {
font-family: "Lato", sans-serif;
font-size: 14px;
color: #3c4d5a;
background: #f5f5f5;
padding: 0 8px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
border-right: 0.5px solid #3c4d5a;
user-select: none;
}
&__docroot-input {
flex: 1;
border: none;
outline: none;
padding: 0 12px;
font-family: "Lato", sans-serif;
font-size: 14px;
color: #212529;
height: 100%;
}
&__subdomain-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
&__subdomain-input-wrapper {
display: flex;
align-items: center;
border: 0.5px solid #3c4d5a;
border-radius: 4px;
overflow: hidden;
height: 36px;
&:focus-within {
outline: 2px solid #0d6efd;
outline-offset: -1px;
}
}
&__subdomain-input {
flex: 1;
border: none;
outline: none;
padding: 0 12px;
font-family: "Lato", sans-serif;
font-size: 14px;
color: #212529;
height: 100%;
}
&__subdomain-suffix {
font-family: "Lato", sans-serif;
font-size: 14px;
color: #3c4d5a;
background: #f5f5f5;
padding: 0 8px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
border-left: 0.5px solid #3c4d5a;
user-select: none;
}
&__form--purchase {
text-align: left;
display: flex;
flex-direction: column;
gap: 8px;
}
&__search-row {
display: flex;
align-items: stretch;
margin-top: 0;
}
&__search-bar {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
&__search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
pointer-events: none;
}
&__search-input {
padding-left: 36px;
height: 44px;
font-family: "Lato", sans-serif;
font-size: 14px;
}
&__search-options-link {
align-self: flex-start;
background: none;
border: none;
padding: 0;
margin-top: 8px;
color: #1f7eaf;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
&:hover,
&:focus {
text-decoration: underline;
}
}
&__search-options {
margin-top: 16px;
padding: 0;
border: 0;
background: transparent;
}
}
@media (max-width: @screen-sm-min) {
.domain-chooser {
padding: 20px;
&__heading {
font-size: 24px;
}
&__cards {
flex-direction: column;
}
}
}
Back to Directory