API tools faq
paste
Advertisement
LKD70

LKD70's Pi-Hole Admin dark Theme

LKD70
Apr 5th, 2017
300
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.33 KB | None | 0 0
raw download clone embed print report
  1. :root {
  2.     --dark-bg-color: rgb(33, 33, 33);
  3.     --dark-color: rgb(25, 25, 25);
  4.     --gray-color: rgb(150, 150, 150); /* Good for non-important text (aka content text */
  5.     --grey-color-darker: rgb(60,60,60); /* Good for avoidable styling features, aka margins */
  6.     --light-color: rgb(245, 245, 245);
  7.     --green-color: rgb(76, 175, 80);
  8.     --orange-color: rgb(255, 152, 0);
  9.     --red-color: rgb(244, 67, 54);
  10.     --blue-color: rgb(3, 169, 244);
  11.     --dark-bg-highlight-color: rgb(40, 40, 40);
  12.     --icon-size: 78px;
  13. }
  14.  
  15. .content,
  16. .content-wrapper {
  17.     background-color: var(--dark-bg-color)!important;
  18. }
  19.  
  20. .overlay,
  21. .overlay>.fa,
  22. .main-footer {
  23.     background-color: var(--dark-bg-color)!important;
  24.     color: var(--light-color)!important;
  25.     border: 0;
  26. }
  27.  
  28. h3,
  29. tbody,
  30. h1 {
  31.     color: var(--light-color);
  32. }
  33.  
  34. h1 {
  35.     padding-left: 15px;
  36.     padding-top: 15px;
  37. }
  38.  
  39. .progress {
  40.     background-color: var(--dark-color)!important;
  41. }
  42.  
  43. .progress-bar-green {
  44.     background-color: var(--green-color)!important;
  45. }
  46.  
  47. .progress-bar-yellow {
  48.     background-color: var(--orange-color)!important;
  49. }
  50.  
  51. .progress-bar-blue {
  52.     background-color: var(--blue-color)!important;
  53. }
  54.  
  55. li.header,
  56. #list>li {
  57.     background-color: var(--dark-bg-color)!important;
  58.     color: var(--gray-color)!important;
  59.     border: 0;
  60. }
  61.  
  62. .form-control {
  63.     display: block;
  64.     width: 100%;
  65.     height: 34px;
  66.     padding: 6px 12px;
  67.     font-size: 14px;
  68.     line-height: 1.42857143;
  69.     color: #555;
  70.     background-color: var(--dark-bg-highlight-color)!important;
  71.     background-image: none;
  72.     border: 0px solid #ccc;
  73.     border-radius: 4px;
  74.     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  75.     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  76.     -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  77.     -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  78.     transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  79. }
  80.  
  81. tr:nth-child(even) {
  82.     background: var(--dark-bg-color)!important
  83. }
  84.  
  85. tr:nth-child(odd) {
  86.     background: var(--dark-color)!important
  87. }
  88.  
  89. th,
  90. .dataTables_info,
  91. label,
  92. #all-queries_ellipsis>a {
  93.     color: var(--gray-color)!important;
  94.     background: var(--dark-bg-color)!important;
  95.     border: 0
  96. }
  97.  
  98. .pagination>.disabled>a,
  99. .pagination>.disabled>a:focus,
  100. .pagination>.disabled>a:hover,
  101. .pagination>.disabled>span,
  102. .pagination>.disabled>span:focus,
  103. .pagination>.disabled>span:hover {
  104.     background: var(--dark-bg-color)!important;
  105.     color: var(--dark-bg-color)!important
  106. }
  107.  
  108. .pagination>li>a,
  109. .pagination>li>span {
  110.     position: relative;
  111.     float: left;
  112.     padding: 6px 12px;
  113.     margin-left: -1px;
  114.     line-height: 1.42857143;
  115.     color: var(--gray-color);
  116.     text-decoration: none;
  117.     background-color: var(--dark-bg-color);
  118.     border: 0;
  119. }
  120.  
  121. .pagination>.active>a,
  122. .pagination>.active>a:focus,
  123. .pagination>.active>a:hover,
  124. .pagination>.active>span,
  125. .pagination>.active>span:focus,
  126. .pagination>.active>span:hover {
  127.     z-index: 3;
  128.     color: var(--light-color)!important;
  129.     cursor: default;
  130.     background-color: var(--dark-bg-highlight-color);
  131.     border-color: #337ab7;
  132.     border: 1;
  133.     border-radius: 4px;
  134. }
  135.  
  136. tr[style="color: rgb(0, 128, 0);"] {
  137.     color: var(--green-color) !important
  138. }
  139.  
  140. tr[style="color: rgb(255, 0, 0);"] {
  141.     background: var(--red-color) !important;
  142.     font-weight: bold;
  143.     color: var(--light-color)!important;
  144. }
  145.  
  146. .table-bordered>thead>tr>th,
  147. .table-bordered>tbody>tr>th,
  148. .table-bordered>tfoot>tr>th,
  149. .table-bordered>thead>tr>td,
  150. .table-bordered>tbody>tr>td,
  151. .table-bordered>tfoot>tr>td,
  152. .table-responsive,
  153. .table-bordered {
  154.     border: 0 !important;
  155. }
  156.  
  157. .btn-default {
  158.     color: var(--light-color)!important;
  159.     cursor: default;
  160.     background-color: var(--dark-bg-highlight-color);
  161.     border-color: #337ab7;
  162.     border: 0;
  163.     border-radius: 4px;
  164. }
  165.  
  166. .btn-default:hover,
  167. .btn-default:active,
  168. .btn-default:focus {
  169.     color: var(--light-color)!important;
  170.     cursor: default;
  171.     background-color: var(--dark-bg-color);
  172.     border-color: #337ab7;
  173.     border: 0;
  174.     border-radius: 4px;
  175. }
  176.  
  177. .glyphicon-trash:before {
  178.     content: "\e014";
  179.     color: var(--red-color)
  180. }
  181.  
  182. #btnAdd {
  183.     color: var(--light-color)!important
  184. }
  185.  
  186. #btnRefresh {
  187.     color: var(--light-color)!important
  188. }
  189.  
  190. .btn-danger {
  191.     background-color: var(--dark-bg-color);
  192.     border-color: var(--dark-bg-color);
  193. }
  194.  
  195. .btn-danger:hover .glyphicon-trash:before,
  196. .btn-danger:hover,
  197. .btn-danger:active,
  198. .btn-danger:focus {
  199.     background: var(--dark-bg-color)!important;
  200.     color: var(--red-color)!important;
  201.     border-color: var(--dark-bg-color);
  202. }
  203.  
  204. .glyphicon-trash:before {
  205.     content: "\e014";
  206.     color: var(--gray-color)!important
  207. }
  208.  
  209. .box,
  210. .small-box {
  211.     background-color: var(--dark-bg-color) !important;
  212.     -webkit-box-shadow: 0px 12px 36px -4px rgba(0, 0, 0, 0.27) !important;
  213.     -moz-box-shadow: 0px 12px 36px -4px rgba(0, 0, 0, 0.27) !important;
  214.     box-shadow: 0px 12px 36px -4px rgba(0, 0, 0, 0.27) !important;
  215. }
  216.  
  217. .small-box {
  218.     text-transform: lowercase;
  219. }
  220.  
  221. .small-box.bg-aqua {
  222.     border-radius: 3px !important;
  223.     border-left: 3px solid var(--red-color) !important;
  224. }
  225.  
  226. .small-box.bg-green {
  227.     border-radius: 3px !important;
  228.     border-left: 3px solid var(--green-color) !important;
  229. }
  230.  
  231. .small-box.bg-red {
  232.     border-radius: 3px !important;
  233.     border-left: 3px solid var(--orange-color) !important;
  234. }
  235.  
  236. .small-box.bg-yellow {
  237.     border-radius: 3px !important;
  238.     border-left: 3px solid var(--blue-color) !important;
  239. }
  240.  
  241. .box {
  242.     border-radius: 3px !important;
  243.     border-left: 3px solid var(--grey-color-darker) !important;
  244.     border-top: 0;
  245.     border-bottom: 0;
  246. }
  247.  
  248. .page-header {
  249.     border-radius: 3px !important;
  250.         border-left: 3px solid var(--blue-color) !important;
  251.     border-top: 0;
  252.     border-bottom: 0;
  253.     -webkit-box-shadow: 0px 12px 36px -4px rgba(0, 0, 0, 0.27) !important;
  254.     -moz-box-shadow: 0px 12px 36px -4px rgba(0, 0, 0, 0.27) !important;
  255.     box-shadow: 0px 12px 36px -4px rgba(0, 0, 0, 0.27) !important;
  256. }
  257.  
  258. .box-header.with-border {
  259.     border-bottom: 0px solid #f4f4f4;
  260. }
  261.  
  262. .inner>.statistic {
  263.     font-weight: normal !important
  264. }
  265.  
  266. .ion {
  267.     font-size: var(--icon-size) !important;
  268. }
  269.  
  270. .bg-green>.inner>.statistic,
  271. .ion-earth {
  272.     color: var(--green-color) !important
  273. }
  274.  
  275. .bg-red>.inner>.statistic,
  276. .ion-ios-list {
  277.     color: var(--orange-color) !important;
  278. }
  279.  
  280. .bg-aqua>.inner>.statistic,
  281. .ion-android-hand {
  282.     color: var(--red-color) !important
  283. }
  284.  
  285. .bg-yellow>.inner>.statistic,
  286. .ion-pie-graph {
  287.     color: var(--blue-color) !important
  288. }
  289.  
  290. /*
  291.  
  292. This broke the help page...
  293. .fa .fa-circle {
  294.     color: var(--green-color) !important
  295. }
  296.  
  297. i.fa.fa-circle[style] {
  298.     display: inline !important;
  299.     color: var(--green-color) !important
  300. }*/
  301.  
  302. i.fa.fa-fire[style] {
  303.     display: inline !important;
  304.     color: var(--blue-color) !important
  305. }
  306.  
  307. .ion-android-hand:before {
  308.     content: "\f405" !important;
  309. }
  310.  
  311. .ion-ios-list:before {
  312.     content: "\f463" !important
  313. }
  314.  
  315. .ion-pie-graph:before {
  316.     content: "\f3cd" !important
  317. }
  318.  
  319. .ion-earth:before {
  320.     content: "\f4d2"
  321. }
  322.  
  323. .skin-blue .main-header .navbar {
  324.     background-color: var(--dark-bg-color)
  325. }
  326.  
  327. .skin-blue .main-header .navbar .nav>li>a {
  328.     color: #fff
  329. }
  330.  
  331. .skin-blue .main-header .navbar .nav>li>a:hover,
  332. .skin-blue .main-header .navbar .nav>li>a:active,
  333. .skin-blue .main-header .navbar .nav>li>a:focus,
  334. .skin-blue .main-header .navbar .nav .open>a,
  335. .skin-blue .main-header .navbar .nav .open>a:hover,
  336. .skin-blue .main-header .navbar .nav .open>a:focus {
  337.     background: rgba(0, 0, 0, 0.1);
  338.     color: #f6f6f6
  339. }
  340.  
  341. .skin-blue .main-header .navbar .sidebar-toggle {
  342.     color: #fff
  343. }
  344.  
  345. .skin-blue .main-header .navbar .sidebar-toggle:hover {
  346.     color: #f6f6f6;
  347.     background: rgba(0, 0, 0, 0.1)
  348. }
  349.  
  350. .skin-blue .main-header .navbar .sidebar-toggle {
  351.     color: #fff
  352. }
  353.  
  354. .skin-blue .main-header .navbar .sidebar-toggle:hover {
  355.     background-color: var(--dark-bg-highlight-color)
  356. }
  357.  
  358. @media (max-width:767px) {
  359.     .skin-blue .main-header .navbar .dropdown-menu li.divider {
  360.         background-color: rgba(255, 255, 255, 0.1)
  361.     }
  362.     .skin-blue .main-header .navbar .dropdown-menu li a {
  363.         color: #fff
  364.     }
  365.     .skin-blue .main-header .navbar .dropdown-menu li a:hover {
  366.         background: #367fa9
  367.     }
  368. }
  369.  
  370. .skin-blue .main-header .logo {
  371.     background-color: var(--dark-bg-color);
  372.     color: var(--light-color);
  373.     border-bottom: 0 solid transparent
  374. }
  375.  
  376. .skin-blue .main-header .logo:hover {
  377.     background-color: var(--dark-bg-highlight-color)
  378. }
  379.  
  380. .skin-blue .main-header li.user-header {
  381.     background-color: #3c8dbc
  382. }
  383.  
  384. .skin-blue .content-header {
  385.     background: transparent
  386. }
  387.  
  388. .skin-blue .wrapper,
  389. .skin-blue .main-sidebar,
  390. .skin-blue .left-side {
  391.     background-color: var(--dark-bg-color);
  392. }
  393.  
  394. .skin-blue .user-panel>.info,
  395. .skin-blue .user-panel>.info>a {
  396.     color: #fff
  397. }
  398.  
  399. .skin-blue .sidebar-menu>li.header {
  400.     color: #4b646f;
  401.     background: #1a2226
  402. }
  403.  
  404. .skin-blue .sidebar-menu>li>a {
  405.     border-left: 3px solid transparent
  406. }
  407.  
  408. .skin-blue .sidebar-menu>li:hover>a,
  409. .skin-blue .sidebar-menu>li.active>a {
  410.     color: #fff;
  411.     background: var(--dark-bg-highlight-color);
  412.     border-left-color: var(--light-color)
  413. }
  414.  
  415. .skin-blue .sidebar-menu>li>.treeview-menu {
  416.     margin: 0 1px;
  417.     background: #2c3b41
  418. }
  419.  
  420. .skin-blue .sidebar a {
  421.     color: #b8c7ce
  422. }
  423.  
  424. .skin-blue .sidebar a:hover {
  425.     text-decoration: none
  426. }
  427.  
  428. .skin-blue .treeview-menu>li>a {
  429.     color: #8aa4af
  430. }
  431.  
  432. .skin-blue .treeview-menu>li.active>a,
  433. .skin-blue .treeview-menu>li>a:hover {
  434.     color: #fff
  435. }
  436.  
  437. .skin-blue .sidebar-form {
  438.     border-radius: 3px;
  439.     border: 1px solid #374850;
  440.     margin: 10px 10px
  441. }
  442.  
  443. .skin-blue .sidebar-form input[type="text"],
  444. .skin-blue .sidebar-form .btn {
  445.     box-shadow: none;
  446.     background-color: #374850;
  447.     border: 1px solid transparent;
  448.     height: 35px;
  449.     -webkit-transition: all .3s ease-in-out;
  450.     -o-transition: all .3s ease-in-out;
  451.     transition: all .3s ease-in-out
  452. }
  453.  
  454. .skin-blue .sidebar-form input[type="text"] {
  455.     color: #666;
  456.     border-top-left-radius: 2px;
  457.     border-top-right-radius: 0;
  458.     border-bottom-right-radius: 0;
  459.     border-bottom-left-radius: 2px
  460. }
  461.  
  462. .skin-blue .sidebar-form input[type="text"]:focus,
  463. .skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  464.     background-color: #fff;
  465.     color: #666
  466. }
  467.  
  468. .skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  469.     border-left-color: #fff
  470. }
  471.  
  472. .skin-blue .sidebar-form .btn {
  473.     color: #999;
  474.     border-top-left-radius: 0;
  475.     border-top-right-radius: 2px;
  476.     border-bottom-right-radius: 2px;
  477.     border-bottom-left-radius: 0
  478. }
  479.  
  480. .skin-blue.layout-top-nav .main-header>.logo {
  481.     background-color: #3c8dbc;
  482.     color: #fff;
  483.     border-bottom: 0 solid transparent
  484. }
  485.  
  486. .skin-blue.layout-top-nav .main-header>.logo:hover {
  487.     background-color: #3b8ab8
  488. }
  489.  
  490.  
  491.  
  492. /* Darken panels (notification popups, etc... */
  493. .panel {
  494.     background-color: var(--dark-color);
  495.     border-color: var(--gray-color);
  496.     color: var(--light-color);
  497. }
  498.  
  499.  
  500.  
  501. /* Make inputs (like search field) text visible */
  502. .input-sm {
  503.     color: var(--gray-color);
  504. }
  505.  
  506.  
  507.  
  508. /* Dropdown "user" menu section... */
  509. .dropdown-menu {
  510.     background-color: var(--dark-color);
  511.     color: var(--light-color);
  512.     border: 1px solid var(--gray-color) !important;
  513. }
  514.  
  515. .navbar-nav>.user-menu>.dropdown-menu>.user-body a {
  516.     color: var(--gray-color) !important;
  517. }
  518.  
  519. .dropdown-menu div {
  520.     color: var(--gray-color) !important;
  521. }
  522.  
  523. .user-footer {
  524.     background-color: var(--dark-color) !important;
  525. }
  526.  
  527. .navbar-nav>.user-menu>.dropdown-menu>.user-body {
  528.     border-bottom: 1px solid var(--gray-color) !important;
  529.     border-top: 1px solid var(--gray-color) !important;
  530.    
  531. }
  532. .dropdown-menu img {
  533.     border: 0 !important; /* I never liked that border... */
  534. }
  535.  
  536.  
  537. /* blacklist button */
  538. tr button {
  539.     background-color: var(--grey-color-darker);
  540.     border-color: var(--grey-color-darker);
  541.     color: var(--red-color);
  542.     border-width: 1px;
  543.     margin: 1px 0 1px 0;
  544.     border-style: groove !important;
  545.     font-weight: 300 !important;
  546. }
  547.  
  548. tr button:hover {
  549.     background-color: var(--grey-color-darker);
  550.     border-color: var(--gray-color);
  551.     color: var(--red-color);
  552. }
  553.  
  554.  
  555.  
  556. /* Login pop-up darken */
  557. .panel-default {
  558.     background-color: var(--dark-color) !important;
  559.     color: var(--light-color) !important;
  560.     border-color: var(--grey-color-darker);
  561. }
  562.  
  563. .panel-heading {
  564.     background-color: var(--dark-color) !important;
  565.     color: var(--light-color) !important;
  566.     border-color: var(--grey-color-darker) !important;
  567. }
  568.  
  569. .box-header {
  570.     background-color: var(--blue-color) !important;
  571. }
  572.  
  573. .btn-primary {
  574.     background-color: var(--blue-color) !important;
  575. }
  576.  
  577.  
  578.  
  579. /* Output "pre" element (for update lists etc...) */
  580.  
  581. pre {
  582.     background-color: var(--dark-bg-highlight-color);
  583.     color: var(--light-color);
  584.     border: 1px solid var(--gray-color) !important;
  585.     border-top: none !important;
  586. }
  587.  
  588.  
  589.  
  590. /* Settings page darken */
  591.  
  592. .box-footer {
  593. background-color: var(--grey-color-darker) !important;
  594. }
  595.  
  596. h4 {
  597.     color: var(--light-color) !important;
  598. }
  599.  
  600. .input-group-addon {
  601.     background-color: var(--grey-color-darker) !important;
  602.     border-color: var(--grey-color-darker) !important;
  603.     color: var(--light-color);
  604. }
  605.  
  606.  
  607.  
  608. /* Help page */
  609. .content {
  610.     color: var(--light-color);
  611. }
  612.  
  613.  
  614.  
  615. /* misc... */
  616.  
  617. p {
  618.     color: var(--gray-color) !important;
  619. }
  620.  
  621. .fa {
  622.     color: var(--gray-color);
  623. }
  624.  
  625. p.lookatme {
  626.     animation: pulse 2s infinite;
  627.     -webkit-animation: pulse 2s infinite;
  628.     color: var(--red-color) !important;
  629. }
  630.  
  631. @-webkit-keyframes pulse {
  632.   0% {
  633.     -webkit-box-shadow: 0 0 0 0 rgba(355,0,0, 0.4);
  634.   }
  635.   70% {
  636.       -webkit-box-shadow: 0 0 0 10px rgba(355,0,0, 0);
  637.   }
  638.   100% {
  639.       -webkit-box-shadow: 0 0 0 0 rgba(355,0,0, 0);
  640.   }
  641. }
  642. @keyframes pulse {
  643.   0% {
  644.     -moz-box-shadow: 0 0 0 0 rgba(355,0,0, 0.4);
  645.     box-shadow: 0 0 0 0 rgba(355,0,0, 0.4);
  646.   }
  647.   70% {
  648.       -moz-box-shadow: 0 0 0 10px rgba(355,0,0, 0);
  649.       box-shadow: 0 0 0 10px rgba(355,0,0, 0);
  650.   }
  651.   100% {
  652.       -moz-box-shadow: 0 0 0 0 rgba(355,0,0, 0);
  653.       box-shadow: 0 0 0 0 rgba(355,0,0, 0);
  654.   }
  655. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!