Viewing File: /usr/local/cpanel/whostmgr/docroot/styles/whm.less
/*
# cpanel - whostmgr/docroot/styles/whm.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 "mixins.less";
@import (reference) "../libraries/base-styles/variables.less";
@import "../legacy_and_modern.less";
@import (reference) "../shared/css/jupiter.less";
/* ------------------------------------------------------------------------------ */
/* Overide display of all elements under ng-cloak until Angular renders templates.
/* As per Angular docs http://http://docs.angularjs.org/api/ng/directive/ngCloak
/* note that for IE7 support class="ng-cloak" should be defined as well.
/* ------------------------------------------------------------------------------ */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
/* ------------------------------------------------------------------------------ */
/* Global
/* ------------------------------------------------------------------------------ */
body {
font-family: "Open Sans", Arial, sans-serif;
background-color: @jupiter-background-color;
}
/* ------------------------------------------------------------------------------ */
/* Layout
/* ------------------------------------------------------------------------------ */
/* TODO: set px max widths on layout styles */
.layout-extra-small {
width: 25%;
max-width: 920px;
}
.layout-small {
width: 50%;
max-width: 920px;
}
.layout-medium {
width: 75%;
max-width: 920px;
}
.layout-large {
width: 100%;
max-width: 920px;
}
/* Smartphones (portrait and landscape) */
@media only screen and (max-width: 320px) {
.layout-extra-small,
.layout-small,
.layout-medium,
.layout-large {
width: 100%;
}
}
@media only screen and (min-width: 321px) {
.layout-extra-small,
.layout-small,
.layout-medium,
.layout-large {
width: 100%;
}
}
/* ------------------------------------------------------------------------------ */
/* Breadcrumbs
/* ------------------------------------------------------------------------------ */
#navigation {
width: 100%;
display: table;
}
#breadcrumbsContainer {
width: 100%;
z-index: 2147483645;
display: table-row;
}
@media (min-width: 769px) {
#breadcrumbsContainer {
min-height: 42px;
height: 42px;
}
}
@media (max-width: 768px) {
#breadcrumbsContainer {
min-height: 32px;
height: 32px;
}
}
/* expand collapse navigation */
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0 5px 0 0;
margin: 0;
width: 100%;
vertical-align: middle;
line-height: 18px;
}
.breadcrumbs--without-heading {
margin: 1rem 0;
}
#mobileMenuCollapseLink {
display: table-cell;
vertical-align: middle;
cursor: pointer;
line-height: 18px;
text-decoration: none;
width: 35px;
}
#mobileMenuCollapseLink .mobile-menu-icon {
display: inline-block;
background: url(/images/hamburger-left-dark.svg) no-repeat;
background-position: center center;
background-size: 100% 100%;
width: 25px;
height: 25px;
margin: 0 4px 0 4px;
padding-right: 4px;
}
body.nav-collapsed #mobileMenuCollapseLink .mobile-menu-icon {
background: url(/images/hamburger-right-dark.svg) no-repeat;
}
html[dir="rtl"] #mobileMenuCollapseLink .mobile-menu-icon {
background: url(/images/hamburger-right-dark.svg) no-repeat;
}
html[dir="rtl"] body.nav-collapsed #mobileMenuCollapseLink .mobile-menu-icon {
background: url(/images/hamburger-left-dark.svg) no-repeat;
}
@media (max-width: 768px) {
#mobileMenuCollapseLink .mobile-menu-icon {
height: 21px;
width: 21px;
}
}
.breadcrumbs li {
display: inline;
padding: 3px 3px 3px 3px;
}
.breadcrumbs li .leafNode {
color: #333333;
.opacity(0.9);
}
.breadcrumbs a#docs-link img {
width: 18px;
height: 18px;
color: black;
}
.muted {
color: #999999;
}
/* ------------------------------------------------------------------------------ */
/* Page Container & Common Elements
/* ------------------------------------------------------------------------------ */
.description {
margin-bottom: 20px;
}
.row-condensed > {
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xs-11,
.col-sm-11,
.col-md-1,
.col-lg-11,
.col-xs-10,
.col-sm-10,
.col-md-12,
.col-lg-10,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1 {
padding: 0;
}
}
/* ------------------------------------------------------------------------------ */
/* Headings - sizes adapted from structure.less
/* ------------------------------------------------------------------------------ */
h1,
.h1 {
font-size: 21px;
}
h2,
.h2 {
font-size: 19px;
}
h3,
.h3 {
font-size: 18px;
}
h4,
.h4 {
font-size: 16px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 11px;
}
/* ------------------------------------------------------------------------------ */
/* Support menu
/* ------------------------------------------------------------------------------ */
.supportContainer {
display: table-cell;
vertical-align: middle;
position: relative;
width: 30px;
}
.slideContainer {
margin: 7px 20px 0 0;
padding: 0;
position: absolute;
right: 0;
z-index: 99;
width: 220px;
-webkit-transition: width 0.5s ease-in;
transition: width 0.5s ease-in;
display: none;
}
html[dir="rtl"] .slideContainer {
margin: 7px 0 0 20px;
left: 0;
right: auto;
}
.slideTab {
.btn-link:focus,
.btn-link:hover {
border: 1px solid #555253;
color: #555253;
}
}
@media (max-width: 768px) {
.supportContainer {
display: none;
}
}
.slideTab {
display: block;
position: relative;
margin: 0 20px 0 0;
}
html[dir="rtl"] .slideTab {
margin: 0 0 0 20px;
}
.slideTab a {
display: inline-block;
border: 1px solid #555253;
color: #555253;
border-radius: 3px;
.opacity(0.75);
}
.slideTab.active a {
cursor: pointer;
border: 1px solid #ff6c2c;
color: #ff6c2c;
}
.slideTab a:hover,
.slideTab a:focus {
.opacity(1);
}
/* '.slideTabHover' css class is used by the image in slide tab
to change the opacity "onfocus". Had to use this explicit class
due to IE8 not supporting :focus selector for images.
*/
.slideTabHover {
.opacity(1);
}
.slidePanel {
background-color: #5c5c5c;
margin: 0;
padding: 9px;
}
html[dir="ltr"] .slidePanel {
.border-radiuses(0, 0, 5px, 0);
}
html[dir="rtl"] .slidePanel {
.border-radiuses(0, 5px, 0, 0);
}
.slidePanel a {
display: block;
padding: 4px;
color: #ffffff;
text-decoration: none;
.opacity(0.7);
}
.slidePanel a:hover {
color: #ffffff;
.opacity(1);
text-decoration: underline;
}
html[dir="ltr"] .slidePanel {
.box-shadow(2px 2px 3px #4c4c4c);
}
html[dir="rtl"] .slidePanel {
.box-shadow(-2px 2px 3px #4c4c4c);
}
html[dir="rtl"] .developerLicenseWarning,
html[dir="rtl"] .trialLicenseWarning {
background-position: 99% center;
padding: 0 100px 18px 24px;
}
/* ------------------------------------------------------------------------------ */
/* trial and developer warning styles
/* ------------------------------------------------------------------------------ */
.trialLicenseWarning h1,
.developerLicenseWarning h1 {
margin-bottom: 18px;
margin-top: 0;
}
.trial-warning-content {
max-width: 600px;
word-wrap: break-word;
}
.experimental-os-content {
max-width: 600px;
word-wrap: break-word;
}
.padding-top-10 {
padding-top: 10px;
display: block;
}
ul.trial-list {
list-style-type: none;
padding: 10px 0 0;
margin: 0 10px;
}
.cpanel_output_indent {
width: 15px;
display: inline-block;
}
.cpanel_output_color_bold {
font-weight: 900;
}
.cpanel_output_color_blue {
color: blue;
}
.statusmsg,
.warningmsg,
.errormsg,
.okmsg {
font-weight: normal;
margin: 0 0 0 15px;
padding: 5px 0 5px 25px;
}
.warningmsg {
background: transparent url(/yellow-status.gif) no-repeat scroll left center;
}
.errormsg {
background: transparent url(/red-status.gif) no-repeat scroll left center;
}
.okmsg {
background: transparent url(/green-status.gif) no-repeat scroll left center;
}
/* ------------------------------------------------------------------------------ */
/* Browser hack to cleanup input type="number"
/* ------------------------------------------------------------------------------ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ------------------------------------------------------------------------------ */
/* CSS3 Animation support for our common used spinning animation
/* ------------------------------------------------------------------------------ */
.animate-spin {
-webkit-animation: spin 1.1s infinite linear;
-moz-animation: spin 1.1s infinite linear;
-o-animation: spin 1.1s infinite linear;
animation: spin 1.1s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* ------------------------------------------------------------------------------ */
/* Alerts
/* ------------------------------------------------------------------------------ */
.alert-danger {
background-color: #f2dede;
border: 1px solid #e74c3c;
}
.alert-success {
background-color: #dff2d5;
border: 1px solid #27ae60;
}
.alert-warning {
background-color: #fcf8e1;
border: 1px solid #f1c40f;
}
.alert-info {
background-color: #d7edf9;
border: 1px solid #2980b9;
}
.close {
opacity: 0.5;
}
.alert {
position: relative;
}
/*
WARNING: IE8 crashes with glyphicons
If you add another glyphicon change
be sure to update whostmgr/docroot/templates/master_templates/master.tmpl
*/
.alert > .glyphicon {
display: inline-block;
font-size: 20px;
position: absolute;
top: 16px;
}
[dir="ltr"] .alert > .glyphicon {
left: 8px;
}
[dir="rtl"] .alert > .glyphicon {
right: 8px;
}
.alert-message {
color: #333333;
display: table;
vertical-align: middle;
}
[dir="ltr"] .alert-message {
margin-left: 20px;
}
[dir="rtl"] .alert-message {
margin-right: 20px;
}
.alert-message a {
text-decoration: underline;
}
[dir="ltr"] .alert-message > .alert-title {
padding-right: 10px;
}
[dir="rtl"] .alert-message > .alert-title {
padding-left: 10px;
}
/* ------------------------------------------------------------------------------ */
/* Callout Styles
/* ------------------------------------------------------------------------------ */
.callout {
border-left-width: 3px;
border-left-style: solid;
border-left-color: #eeeeee;
margin: 20px 0 20px 0;
padding: 20px;
}
html[dir="rtl"] .callout {
border-left-width: 0;
border-left-style: none;
border-left-color: transparent;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #eeeeee;
}
.callout button,
.callout a.btn {
margin-top: 10px;
}
.callout-danger {
background-color: #f2dede;
border-left-color: #e74c3c;
}
html[dir="rtl"] .callout-danger {
border-left-color: transparent;
border-right-color: #e74c3c;
}
.callout-success {
background-color: #dff2d5;
border-left-color: #27ae60;
}
html[dir="rtl"] .callout-success {
border-left-color: transparent;
border-right-color: #27ae60;
}
.callout-warning {
background-color: #fcf8e1;
border-left-color: #f1c40f;
}
html[dir="rtl"] .callout-warning {
border-left-color: transparent;
border-right-color: #f1c40f;
}
.callout-info {
background-color: #d7edf9;
border-left-color: #2980b9;
}
html[dir="rtl"] .callout-info {
border-left-color: transparent;
border-right-color: #2980b9;
}
.callout-cpanel {
background-color: #f5f5f5;
border-left-color: #ff6c2c;
}
html[dir="rtl"] .callout-cpanel {
border-left-color: transparent;
border-right-color: #ff6c2c;
}
.callout-dismissable .close {
position: relative;
top: -16px;
right: -10px;
color: inherit;
}
html[dir="rtl"] .callout-dismissable .close {
right: 0;
left: -10px;
}
.callout .btn-cpanel {
color: #fff;
background-color: #ff6c2c;
}
.callout .btn-cpanel:hover,
.callout .btn-cpanel:focus {
background-color: #d03f00;
}
/* ------------------------------------------------------------------------------ */
/* Forms
/* ------------------------------------------------------------------------------ */
@highlight-section-bg: #faebcc;
@highlight-section-border: #faebcc;
@border-radius: 2px;
.highlight-section {
background: @highlight-section-bg;
border-radius: @border-radius;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
min-height: 20px;
padding: 19px;
border: 1px solid @highlight-section-border;
}
input[type="checkbox"]:disabled + span,
input[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
/* for certain forms that appear side-by-side */
.form-inline-block {
display: inline-block;
}
/* ------------------------------------------------------------------------------ */
/* Validation Styles
/* ------------------------------------------------------------------------------ */
.validation-container {
background-color: #f8c9c4;
border: 1px solid #a94442;
padding: 5px;
border-radius: 2px;
list-style: none;
@media (max-width: 768px) {
margin-top: 2px;
margin-bottom: 0;
}
}
.validation-warning-container {
background-color: #fcf8e1;
border: 1px solid #f1c40f;
padding: 5px;
border-radius: 2px;
list-style: none;
}
.validation-error {
position: relative;
}
.validation-error > .glyphicon,
.validation-error > .fas {
color: #a94442;
display: inline-block;
position: absolute;
top: 4px;
}
html[dir="ltr"] .validation-error > .glyphicon {
left: 0;
}
html[dir="rtl"] .validation-error > .glyphicon {
right: 0;
}
.validation-warning {
position: relative;
}
.validation-warning > .glyphicon,
.validation-warning > .fas {
color: #f1c40f;
display: inline-block;
position: absolute;
top: 4px;
}
html[dir="ltr"] .validation-warning > .glyphicon {
left: 0;
}
html[dir="rtl"] .validation-warning > .glyphicon {
right: 0;
}
.validation-message {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}
.has-success .help-block,
.has-error .help-block,
.has-warning .help-block {
color: #737373;
}
.info-block,
.help-block {
color: #737373;
display: block;
font-size: 13px;
font-weight: normal;
margin-bottom: 5px;
line-height: 1.2;
}
.ng-dirty .ng-dirty.ng-valid:not(.no-validation-border) {
border-color: #27ae60;
}
.ng-dirty .ng-dirty.ng-invalid:not(.no-validation-border) {
border-color: #a94442;
}
/* ------------------------------------------------------------------------------ */
/* Button Loading Indicator
/* ------------------------------------------------------------------------------ */
.button-loading {
position: relative;
}
.button-loading .button-label {
visibility: hidden;
display: inline-block;
}
.button-loading-indicator {
display: none;
position: absolute;
left: 50%;
top: 50%;
margin-left: -7px;
margin-top: -7px;
}
.button-loading .button-loading-indicator {
display: inline-block;
}
.button-loading .button-loading-indicator {
.animate-spin;
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ------------------------------------------------------------------------------ */
/* Blurbs
/* ------------------------------------------------------------------------------ */
.blurb {
&:extend(.callout);
position: relative;
background-color: #f5f5f5;
border-color: #f78e1e;
span.blurb-label {
position: absolute;
top: 0;
right: 0;
border-radius: 0 0 0.25em 0.25em;
}
}
/* ------------------------------------------------------------------------------ */
/* Table Styles
/* ------------------------------------------------------------------------------ */
.table > thead > tr > th {
border-bottom: 2px solid #323232;
}
.table > tbody > td.active,
.table > tbody > tr.active {
border-left: 2px solid #323232;
}
.table > tbody > tr > td.active,
.table > tbody > tr.active > td {
background-color: #e0e0e0;
color: #323232;
}
.table > tbody > td.danger,
.table > tbody > tr.danger {
border-left: 2px solid #e74c3c;
}
.table > tbody > tr > td.danger,
.table > tbody > tr.danger > td {
background-color: #f2dede;
}
.table > tbody > td.info,
.table > tbody > tr.info {
border-left: 2px solid #2980b9;
}
.table > tbody > tr > td.info,
.table > tbody > tr.info > td {
background-color: #d7edf9;
}
.table > tbody > td.success,
.table > tbody > tr.success {
border-left: 2px solid #27ae60;
}
.table > tbody > tr > td.success,
.table > tbody > tr.success > td {
background-color: #dff2d5;
}
.table > tbody > td.warning,
.table > tbody > tr.warning {
border-left: 2px solid #f1c40f;
}
.table > tbody > tr > td.warning,
.table > tbody > tr.warning > td {
background-color: #fcf8e1;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
vertical-align: middle;
}
/* ------------------------------------------------------------------------------ */
/* List Table Styles
/* ------------------------------------------------------------------------------ */
.list-table {
margin: 0 15px;
}
.list-table > li {
border-width: 0;
padding: 5px;
position: relative;
}
.list-table > .list-table-header {
border-bottom: 2px solid #323232;
font-weight: bold;
padding: 5px;
}
.list-table > li + li {
border-top: 1px solid #ddd;
}
.list-table > li.list-table-header + li {
border-top: none;
}
.list-table-striped > li:nth-child(even) {
background-color: #f9f9f9;
}
.list-table > li.active:before,
.list-table > li.danger:before,
.list-table > li.info:before,
.list-table > li.success:before,
.list-table > li.warning:before {
content: ".";
height: 100%;
display: block;
color: transparent;
position: absolute;
top: 0;
left: 0;
border-left-width: 3px;
border-left-style: solid;
}
.list-table > li.active:before {
border-left-color: #323232;
}
.list-table > li.active {
background-color: #e0e0e0;
color: #323232;
}
.list-table > li.danger:before {
border-left-color: #e74c3c;
}
.list-table > li.danger {
background-color: #f2dede;
}
.list-table > li.info:before {
border-left-color: #2980b9;
}
.list-table > li.info {
background-color: #d7edf9;
}
.list-table > li.success:before {
border-left-color: #27ae60;
}
.list-table > li.success {
background-color: #dff2d5;
}
.list-table > li.warning:before {
border-left-color: #f1c40f;
}
.list-table > li.warning {
background-color: #fcf8e1;
}
/* ------------------------------------------------------------------------------ */
/* Line wrapping
/* ------------------------------------------------------------------------------ */
.wbr:after {
content: "\00200B";
}
/* ------------------------------------------------------------------------------ */
/* Responsive pull/text-align classes.
/* Adapted from https://github.com/Natshah/bootstrap-pull
/* ------------------------------------------------------------------------------ */
/** Pull left xs **/
.pull-left-xs {
float: left;
}
.text-left-xs {
text-align: left;
}
/** Pull right xs **/
.pull-right-xs {
float: right;
}
.text-right-xs {
text-align: right;
}
@media (min-width: 768px) {
/** Pull left sm **/
.pull-left-sm {
float: left;
}
.text-left-sm {
text-align: left;
}
/** Pull right sm **/
.pull-right-sm {
float: right;
}
.text-right-sm {
text-align: right;
}
}
@media (min-width: 992px) {
/** Pull left **/
.pull-left-md {
float: left;
}
.text-left-md {
text-align: left;
}
/** Pull right **/
.pull-right-md {
float: right;
}
.text-right-md {
text-align: right;
}
}
@media (min-width: 1200px) {
/** Pull left **/
.pull-left-lg {
float: left;
}
.text-left-lg {
text-align: left;
}
/** Pull right **/
.pull-right-lg {
float: right;
}
.text-right-lg {
text-align: right;
}
}
@import "responsive_table.less";
body.no-breadcrumbs #pageContainer {
margin-top: 0;
}
/**
* Utility classes
*/
.vertical-center,
.fas.vertical-center {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* ------------------------------------------------------------------------------ */
/* Add some RTL/LTR utilities */
/* ------------------------------------------------------------------------------ */
[dir="rtl"] .pull-right.flip {
float: left !important;
}
[dir="rtl"] .pull-left.flip {
float: right !important;
}
[dir="rtl"] .hide-rtl {
display: none;
}
[dir="ltr"] .hide-ltr {
display: none;
}
/* Extracted from font-awesome-rtl.css until we add this library */
.fa-caret-start:before {
content: "\f0d9";
}
.fa-caret-end:before {
content: "\f0da";
}
[dir="rtl"] .fa-caret-start:before {
content: "\f0da";
}
[dir="rtl"] .fa-caret-end:before {
content: "\f0d9";
}
[dir="ltr"] .fa-caret-start:before {
content: "\f0d9";
}
[dir="ltr"] .fa-caret-end:before {
content: "\f0da";
}
[dir="rtl"] .fa-external-link-alt {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.fa-arrow-end:before {
content: "\f061";
}
[dir="rtl"] .fa-arrow-end:before {
content: "\f060";
}
[dir="ltr"] .fa-arrow-end:before {
content: "\f061";
}
[dir="ltr"] .fas.pull-right {
margin-left: 0.3em;
margin-right: 0;
}
[dir="rtl"] .fas.pull-right {
margin-left: 0;
margin-right: 0.3em;
}
/*
* Overrides of growl styles
* TODO: See if we really need masterContainer and pageContainer overrides for growl.
*/
div#masterContainer .growl-container.growl-fixed.top-right {
top: 120px;
right: 40px;
}
html[dir="rtl"] div#masterContainer .growl-container.growl-fixed.top-right {
left: 40px;
top: 120px;
right: auto;
}
div#pageContainer .growl-container.growl-fixed.top-right {
top: 120px;
right: 40px;
}
html[dir="rtl"] div#pageContainer .growl-container.growl-fixed.top-right {
left: 40px;
top: 120px;
right: auto;
}
/* ------------------------------------------------------------------------------ */
/* Modal Dialog settings */
/* ------------------------------------------------------------------------------ */
.modal-dialog {
// 27px for the top information bar
// 50px for the navigation bar
// 42px for the breadcrumbs bar
// 31px for some extra space
margin-top: 27px + 50px + 42px + 31px;
}
/*
* Icon styles for section headers
*/
.icon-container-body {
padding: 10px 0 0 0;
clear: both;
margin-left: 0;
margin-right: 0;
overflow: hidden;
width: 100%;
}
.item {
display: inline-block;
height: 80px;
padding: 0;
}
html[dir="ltr"] .item {
text-align: left;
/* Hack to account for extra spaces when using display: inline-block on child elements.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
margin-right: -4px;
}
html[dir="rtl"] .item {
text-align: right;
margin-left: -4px;
}
a.item-link {
padding: 2px;
display: block;
}
a:focus.item-link,
a:hover.item-link,
a:active.item-link {
text-decoration: none;
}
.icon {
display: block;
margin: auto;
}
.itemContentWrapper {
padding: 0;
width: 100%;
}
.itemImageWrapper {
width: @icon-size-large;
height: @icon-size-large;
display: inline-block;
}
.itemTextWrapper {
padding: 10px 0 10px 5px;
display: inline-block;
vertical-align: middle;
width: 220px;
color: #4c4c4c;
word-break: initial;
}
html[dir="rtl"] .itemTextWrapper {
padding: 10px 5px 10px 0;
}
/* ------------------------------------------------------------------------------ */
/* Page Template Content Animation (use class="animate-view" on your ng-view element)
/* ------------------------------------------------------------------------------ */
.animate-view {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 1, 1, 1),
opacity 300ms cubic-bezier(0, 1, 1, 1);
transition: transform 300ms cubic-bezier(0, 1, 1, 1),
opacity 300ms cubic-bezier(0, 1, 1, 1);
}
/*Note: Handles Regular Views */
.animate-view.ng-enter,
.animate-view.ng-leave {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
/*Note: Handles Tabbed Views */
.animate-view.view-disabled-remove-active {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
/*Resolves bug: https://github.com/angular/angular.js/issues/4225; */
.animate-view.ng-enter {
display: none;
}
.animate-view.ng-enter.ng-enter-active {
display: block;
}
/* End bug resolution */
.animate-view.ng-leave {
display: none;
}
.view-disabled {
opacity: 0;
pointer-events: none;
}
/* ensures that a text always displays left to right even in rtl mode */
/* necessary for paren text to read correctly “allfather (odin.valhalla)” */
html[dir="rtl"] .left-to-right::after {
content: "\200E";
}
@import (reference) "bootstrap/source/less/variables.less";
@import (reference) "bootstrap/source/less/code.less";
/* Provide classes for pre-like output for when you cannot use a pre tag. */
.pre {
&:extend(pre);
}
Back to Directory
File Manager