Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/gsw/initial_setup/index.less
/**
# cpanel - whostmgr/docroot/templates/gsw/initial_setup/index.less
# Copyright 2022 cPanel, L.L.C.
# All rights reserved.
# copyright@cpanel.net http://cpanel.net
# This code is subject to the cPanel license. Unauthorized copying is prohibited
*/
@import (reference) "../../libraries/base-styles/variables.less";
// Reusing list util classes for the .license section.
// Can be scoped for use in other agreement sections without conflict.
@import "../../eula.less";
/* Common Styles */
html,
body {
height: 100%;
}
body {
background: @cpanel-dark-blue-gray; // Same as WHM login
}
.cp-layout-wrapper {
justify-content: center;
}
#masterContainer {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#pageContainer {
color: #ffffff; // Same as WHM login
max-height: 100%;
overflow: auto;
@media (min-width: @screen-sm-min) {
padding: 20px;
}
}
#masterContainer #contentContainer {
height: 100% !important; // There is a very specific selector for this in the master CSS
padding-bottom: 0;
}
.product-logo {
font-size: 0;
text-align: center;
margin: 10px 0 35px 0;
@media (min-width: @screen-sm-min) {
margin-bottom: 45px;
}
path {
fill: #ffffff; // Same as WHM login
}
svg {
width: auto;
max-height: 50px; // Same as WHM login
}
}
.legal-container,
.info-container,
.trial-container,
.license-purchase-intro-container {
margin-bottom: 20px;
@media (min-width: @screen-sm-min) {
width: 70vw;
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
// mobile screens
@media (max-width: @screen-xs-max) {
margin-left: 5px;
margin-right: 5px;
}
}
.btn-link,
.btn-link:hover {
color: #ffffff;
}
a.icon-link:hover,
a.icon-link:active,
a.icon-link:focus {
text-decoration: none;
color: #ffffff;
span {
text-decoration: underline;
}
}
.footer {
display: flex;
justify-content: space-around;
max-width: 400px;
margin: auto;
button.footer-option {
background: transparent;
border: none;
}
.footer-option {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 5px;
cursor: pointer;
html[dir="rtl"] & .fa-arrow-alt-circle-right {
transform: scaleX(-1);
}
color: #ffffff;
&:hover,
&:active,
&:focus {
text-decoration: none;
span:last-child {
text-decoration: underline;
}
}
&[disabled] {
cursor: not-allowed;
span:last-child {
text-decoration: none;
}
}
.fa-stack {
font-size: 1.5em; // This makes the .fa-stack-2x font-size 3em, matching .fa-3x
}
.fa-stack-1x {
font-size: 0.9em;
}
}
}
.alert-list-container {
top: 0 !important; // To override an element style
}
/* Intro Animation view styles */
@import "intro.less";
/* legal view styles */
.legal-container {
b.eff-date {
display: block;
margin-bottom: 10px;
}
.panel {
position: relative;
margin: 0;
box-shadow: inset 0px 3px 12px -2px rgba(0, 0, 0, 0.75);
}
.panel-body {
color: black;
max-height: 50vh;
overflow: auto;
// Remove top padding so that scrolling to #table-of-contents will take you all the way to the top
padding-top: 0;
// Use a little less padding on mobile
@media (max-width: @screen-xs-max) {
padding: 0 10px 10px 10px;
}
}
a#top-link {
opacity: 0;
position: absolute;
top: 10px;
html[dir="ltr"] & {
right: 10px;
}
html[dir="rtl"] & {
left: 10px;
}
transition: 200ms opacity;
}
#table-of-contents h1 {
// Replace the normal top margin with top padding so that it scrolls correctly
margin-top: 0;
padding-top: 15px;
}
.agreement-content {
h1 {
padding-top: 15px;
}
ol {
list-style: none;
margin-top: 10px;
}
hr {
margin: 5px 0 15px;
border-color: #aaa;
}
}
.linked-schedules {
margin: 20px 0;
}
.privacy-policy,
.pricing-and-term {
/* This will avoid large tables in privacy policy to
generate scroll bar on overall content area.
Bootstrap .table-responsive style only works for
screen sizes below 768px */
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
border: 1px solid #ddd;
min-height: 0.01%;
overflow-x: auto;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: normal;
min-width: 250px;
}
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
vertical-align: top;
}
ol.decimal {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol.decimal > li {
counter-increment: item;
margin: 0.6em;
font-weight: bold;
}
ol.decimal > li:first-child {
margin-top: 0.5em;
}
ol.decimal > li:before {
content: counters(item, ".") ".";
padding-right: 0.6em;
}
li ol > li {
margin: 0.5em 0;
overflow-wrap: anywhere;
}
li ol > li:before {
content: counters(item, "") "";
}
ol.decimal > li > ol.decimal > li {
font-weight: normal;
margin-left: 25px;
}
ol.decimal > li p {
font-weight: normal;
}
ol.lower-alpha {
list-style-type: lower-alpha;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
li ol.lower-alpha > li:before,
li ol.upper-alpha > li:before,
li ol.lower-roman > li:before,
li ol.upper-roman > li:before {
content: none;
}
ol.lower-roman {
list-style-type: lower-roman;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
ol.upper-alpha {
list-style-type: upper-alpha;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
ol.upper-roman {
list-style-type: upper-roman;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
a.url-break {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
}
.pricing-and-term {
ol,
ul {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
ol li {
margin-top: 15px;
display: list-item;
list-style-type: decimal;
}
ol ul li {
list-style-type: circle;
}
.indent {
padding-left: 20px;
html[dir="rtl"] & {
padding-left: 0;
padding-right: 20px;
}
}
}
.gdpr-updates {
.gdpr-decimal {
counter-reset: item;
list-style-type: decimal;
}
.gdpr-decimal li {
display: block;
}
.gdpr-decimal li::before {
counter-increment: item;
content: counters(item, ".") "\00a0";
}
.gdpr-nested-letter {
counter-reset: letter;
list-style-type: none;
}
.gdpr-nested-letter li {
list-style-type: none;
}
.gdpr-nested-letter li::before {
counter-increment: letter;
content: "(" counter(letter, lower-alpha) ") \00a0";
}
}
}
@media only print {
* {
overflow: visible !important;
}
@page {
size: landscape;
}
.no-print,
.product-logo {
display: none;
}
.panel {
border: none;
}
.panel-body {
max-height: inherit;
height: auto;
display: block;
}
.legal-container {
max-width: inherit;
width: auto;
}
.full-schedules {
display: block;
font-size: 11px;
h2 {
page-break-before: always;
}
}
#contentContainer,
#pageContainer {
overflow: hidden;
padding: 0;
display: block;
}
#masterContainer {
height: auto;
display: block;
}
a[href]:after {
content: none;
}
.legal-container .privacy-policy {
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
min-width: 200px;
}
}
}
/* server setup view */
.info-container {
.info-block,
.help-block {
color: #dddddd;
}
.help-block a {
color: #dddddd;
}
.help-block a > span {
text-decoration: underline;
}
.help-block a:hover,
.help-block a:active,
.help-block a:focus {
color: #ffffff;
}
label {
font-weight: 600;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: inherit;
}
.footer {
margin-top: 100px;
}
.validation-rules();
}
.validation-rules() {
.validation-container {
color: #333333;
margin-top: 2px;
}
html[dir="rtl"] & .validation-error > .glyphicon {
right: 0;
left: auto;
}
html[dir="rtl"] & .validation-message {
margin-left: 0;
margin-right: 20px;
}
}
/* trial license activation view */
.trial-container,
.license-purchase-intro-container {
.validation-rules();
.button-loading {
position: static;
.action-button-idle-icon {
display: none;
}
}
.button-loading .button-label {
visibility: visible;
display: inline-block;
}
.button-loading-indicator {
position: static;
margin: 0;
}
.panel-body {
color: #333333;
> div {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.trial-heading,
.license-purchase-intro-heading {
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.margin-top-40 {
margin-top: 40px;
}
.email-verification-form {
width: 100%;
margin: auto;
@media (min-width: @screen-sm-min) {
width: 80%;
}
@media (min-width: @screen-md-min) {
width: 70%;
}
}
.text-link {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
.step-text {
font-size: 18px;
}
.success-checkmark {
color: @success-border;
}
.failure {
color: @danger-border;
}
.footer {
margin-top: 100px;
}
.verify-email-alt-actions {
display: flex;
justify-content: center;
margin-top: 4em;
margin-bottom: -2em;
// We want a persistent underline, rather than the standard Bootstrap-provided one that only displays on hover.
// However, a normal underline is distracting and oddly placed, so we will use a more subtle, faux underline instead.
.btn-link {
.button-label {
border-bottom: 1px dashed #a1a1a1;
}
&:hover,
&:active,
&:focus {
text-decoration: none;
.button-label {
border-bottom: 1px solid #ffffff;
}
}
}
// Wrap long email addresses
.btn-link {
.button-label span {
white-space: normal;
}
strong {
word-break: break-all;
}
}
}
// The default underline looks broken with an icon. Just underline the text
.icon-link-underline-fix-container:hover,
.icon-link-underline-fix-container:active,
.icon-link-underline-fix-container:focus {
text-decoration: none;
.icon-link-underline-fix-content {
text-decoration: underline;
}
}
// Provide some colors more in line with this theme
.btn-default {
border-color: transparent;
background: rgba(232, 232, 232, 0.2);
color: #ffffff;
&:hover,
&:active,
&:focus {
background: rgba(232, 232, 232, 0.15);
border-color: #565656;
}
}
.link-button {
color: #ffffff;
}
// Some elements don't look right beyond 600px, so here are some helper classes
@media (max-width: 599px) {
.visible-xxs {
display: block !important;
}
.hidden-xxs {
display: none !important;
}
}
}
/* Website creation view */
.create-account-container {
margin-bottom: 20px;
text-align: center;
@media (min-width: @screen-sm-min) {
width: 70vw;
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
}
Back to Directory
File Manager