whmcs dark mode
Lara Theme Dark by irama7
Details
Authorirama7
LicenseNo License
Categorywhmcs
Created
Updated
Size54 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Lara Theme Dark
@namespace Sparked Host
@version 1.5.5
@homepageURL https://dev01.sparked.xyz
@license CC-BY-SA-4.0
@author Raúl M.
@advanced dropdown color-scheme "Color scheme" {
Yellow "Yellow" <<<EOT
:root {--maincolor: #f39c12;--maincolorlighter: #ffcf82;--maincolorevenlighter: #ffe9c6;--maincolordarker: #a96c0c;--maincolortransparent: #ffb10094;--maincoloralertborder: #d28000;--logopart: #e08e0b;--logoparthover: #db8b0b;--huerotate: hue-rotate(320deg);} EOT;
Purple "Purple" <<<EOT
:root{--maincolor: #605ca8;--maincolorlighter: #c0bdff;--maincolorevenlighter: #c0bdff;--maincolordarker: #3f3d70;--maincolortransparent: #605ca879;--maincoloralertborder: #3d3a74;--logopart: #545194;--logoparthover: #3d3b6d;--huerotate: hue-rotate(155deg);} EOT;
Blue "Blue" <<<EOT
:root{--maincolor: #1296e2;--maincolorlighter: #1cacff;--maincolorevenlighter: #3bb7ff;--maincolordarker: #0a80c4;--maincolortransparent: #1296e279;--maincoloralertborder: #008ad9;--logopart: #1e8bc9;--logoparthover: #1e8bc9;--huerotate: hue-rotate(100deg);} EOT;
Red "Red" <<<EOT
:root{--maincolor: #de4135;--maincolorlighter: #e3695f;--maincolorevenlighter: #f09e97;--maincolordarker: #ab2b22;--maincolortransparent: #de413579;--maincoloralertborder: #ff2e1f;--logopart: #bd3228;--logoparthover: #96221a;--huerotate: hue-rotate(270deg);} EOT;
Green "Green" <<<EOT
:root{--maincolor: #00b75f;--maincolorlighter: #1dca77;--maincolorevenlighter: #4adc96;--maincolordarker: #068e4d;--maincolortransparent: #00b75f79;--maincoloralertborder: #26c177;--logopart: #05a558;--logoparthover: #058246;--huerotate: hue-rotate(45deg);} EOT;
Pink "Pink (use with Purple)" <<<EOT
:root{--maincolor: #e21273;--maincolorlighter: #e889b5;--maincolorevenlighter: #ffd6e9;--maincolordarker: #8f0e4a;--maincolortransparent: #e2127379;--maincoloralertborder: #d14f8c;--logopart: #bd1161;--logoparthover: #a10d52;--huerotate: hue-rotate(250deg);} EOT;
}
==/UserStyle== */
@-moz-document url-prefix("https://billing.sparkedhost.com/staffportal/") {
/*[[color-scheme]]*/
::selection {
background-color: var(--maincolor);
color: white;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
}
a {
color: var(--maincolor);
transition: 0.2s all ease-in-out;
}
body {
background-color: #202020;
color: #fff;
}
button, input, select, textarea {
background-color: #2d2d2d;
border-color: #48484894;
padding: 5px 10px;
border-radius: 10px;
transition: 0.2s all ease-in-out;
}
select:focus {
outline: none;
border-color: var(--maincolor);
}
a:hover {
color: var(--maincolorlighter);
}
a:hover, a:active, a:focus {
outline: none;
text-decoration: none;
color: var(--maincolorevenlighter);
}
code {
padding: 2px 5px;
font-size: 90%;
color: #dadada;
background-color: #ffffff0f;
border-radius: 6px;
}
#inputIntelliSearchValue {
border: none !important;
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.control-sidebar-dark {
color: #c3c3c3;
}
.main-footer {
background: #252525;
padding: 15px;
color: #fff;
border-top: 1px solid #48484894;
}
.intl-tel-input .country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
padding: 0;
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
background-color: #2d2d2d;
border: 1px solid #48484894;
border-radius: 10px;
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
}
.intl-tel-input .country-list .country {
transition: 0.2s all ease-in-out;
}
.intl-tel-input .country-list .country.highlight {
background-color: var(--maincolor);
}
h2 {
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 10px 0 15px 0;
}
.content-header > h1 {
margin: 0;
font-size: 30px;
color: #ffffff;
}
.content-wrapper,
.right-side {
min-height: 100%;
background-color: #202020;
z-index: 800;
}
ul.admin-tabs>li>a, ul.client-tabs>li>a {
margin-left: 6px;
padding: 5px 9px 5px;
background-color: #202020;
border: 1px solid #48484894;
text-decoration: none;
color: #ffffff;
transition: 0.2s all ease-in-out;
font-size: 14px;
}
ul.admin-tabs>li>a:hover, ul.client-tabs>li>a:hover {
border: 1px solid #ccc;
text-decoration: none;
}
.nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
color: #fff;
background: var(--maincolor);
}
.control-sidebar-dark, .control-sidebar-dark + .control-sidebar-bg {
background: #2d2d2d;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:hover, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:focus, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:active {
background: #2d2d2d;
color: #fff;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus {
border-left-color: #3e3e3e;
border-bottom-color: var(--maincolor);
border-bottom-width: 2px;
transition: 0.2s all ease-in-out;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
background: #232323;
color: #bfbfbf;
}
.nav-tabs.control-sidebar-tabs > li > a, .nav-tabs.control-sidebar-tabs > li > a:hover {
border-top: none;
border-right: none;
border-left: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
color: #fff;
background-color: #2d2d2d;
}
input.btn.btn-warning:hover {
background-color: var(--maincolorlighter);
}
input.btn.btn-warning {
background-color: var(--maincolor);/*********************************************************************************************************************/
border-color: var(--maincolor);
font-size: 17px;
transition: 0.2s all ease-in-out;
}
input.btn.btn-warning:hover, input.btn.btn-warning:active {
background-color: var(--maincolordarker);
border-color: var(--maincolortransparent);
}
input.btn.btn-warning.focus, input.btn.btn-warning:focus, input.btn.btn-warning:hover, input.btn.btn-warning:active.focus, input.btn.btn-warning:active:focus, input.btn.btn-warning:active:hover, .open>.dropdown-toggle.input.btn.btn-warning.focus, .open>.dropdown-toggle.input.btn.btn-warning:focus, .open>.dropdown-toggle.input.btn.btn-warning:hover {
color: #fff;
background-color: var(--maincolordarker);
border-color: var(--maincolortransparent);
}
.control-sidebar-dark .control-sidebar-menu > li > a:hover {
background: #383838;
box-shadow: 0px 6px 16px 0px #252525;
transform: translateY(-5px);
}
.control-sidebar-menu > li > a {
display: block;
padding: 10px 15px;
transition: 0.2s all ease-in-out;
}
div > form > .form-group {
margin-top: 10px;
}
/* START YELLOW */
.skin-yellow .sidebar a {
color: #c3c3c3;
}
.skin-yellow .wrapper, .skin-yellow .main-sidebar, .skin-yellow .left-side {
background-color: #2d2d2d;
}
.skin-yellow .sidebar-menu > li:hover > a, .skin-yellow .sidebar-menu > li.active > a {
color: #ffffff;
background: #383838;
border-left-color: var(--maincolor);
transition: 0.2s all ease-in-out;
}
.skin-yellow .sidebar-menu > li > a {
border-left: 4px solid transparent;
transition: 0.1s all ease-in-out;
}
.skin-yellow .sidebar-menu > li > .treeview-menu {
margin: 0 1px;
background: #252525;
}
.skin-yellow .treeview-menu > li > a {
color: #c3c3c3;
transition: 0.1s all ease-in-out;
}
.skin-yellow .sidebar-form {
border-radius: 3px;
border: 1px solid #484848;
margin: 10px 10px;
}
.skin-yellow .sidebar-form input[type="text"], .skin-yellow .sidebar-form .btn {
box-shadow: none;
background-color: #383838;
border: 1px solid transparent;
height: 35px;
}
/* END YELLOW */
/* START PURPLE */
.skin-purple .sidebar a {
color: #c3c3c3;
}
.skin-purple .wrapper, .skin-purple .main-sidebar, .skin-purple .left-side {
background-color: #2d2d2d;
}
.skin-purple .sidebar-menu > li:hover > a, .skin-purple .sidebar-menu > li.active > a {
color: #ffffff;
background: #383838;
border-left-color: var(--maincolor);
transition: 0.2s all ease-in-out;
}
.skin-purple .sidebar-menu > li > a {
border-left: 4px solid transparent;
transition: 0.1s all ease-in-out;
}
.skin-purple .sidebar-menu > li > .treeview-menu {
margin: 0 1px;
background: #252525;
}
.skin-purple .treeview-menu > li > a {
color: #c3c3c3;
transition: 0.1s all ease-in-out;
}
.skin-purple .side...