From 5180f429149d41717794f245fdf9673010e9e3a0 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Dec 2019 14:40:00 +0200 Subject: [PATCH] Update pi-hole.css * format code * use `background-color` instead of the `background` shorthand * use the `animation` shorthand * only transition opacity and transform in the chart tooltip * add browserslist settings in package.json * add prettier scripts for CSS and JS (JS is mainly for CI since xo handles this for us) Signed-off-by: XhmikosR --- package.json | 10 +- style/pi-hole.css | 296 +++++++++++++++++++++++++--------------------- 2 files changed, 168 insertions(+), 138 deletions(-) diff --git a/package.json b/package.json index 39e04aede9..b6bfe8bff8 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,21 @@ }, "homepage": "https://github.com/pi-hole/AdminLTE#readme", "scripts": { + "prettier:check": "prettier -l \"style/*.css\" \"scripts/pi-hole/**/*.js\"", + "prettier:fix": "prettier --write \"style/*.css\" \"scripts/pi-hole/**/*.js\"", "xo": "xo", "xo:fix": "npm run xo -- --fix", - "test": "npm run xo" + "test": "npm run xo && npm run prettier:check" }, "devDependencies": { + "prettier": "^1.19.1", "xo": "^0.25.3" }, + "browserslist": [ + "defaults", + "Explorer >= 9", + "not ExplorerMobile <= 11" + ], "prettier": { "bracketSpacing": true, "printWidth": 100, diff --git a/style/pi-hole.css b/style/pi-hole.css index 419db78feb..ab9481ec84 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -6,108 +6,129 @@ * Please see LICENSE file for your rights under this license. */ .small-box { - cursor: default; - -webkit-user-select: none; /* Chrome/Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+ */ - - /* Rules below not implemented in browsers yet */ - -o-user-select: none; - user-select: none; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .small-box span { - -webkit-transition-duration: 500ms; - -o-transition-duration: 500ms; - transition-duration: 500ms; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; } + .small-box span.glow { - text-shadow: 0 0 5px #fff; + text-shadow: 0 0 5px #fff; } + .skin-blue .list-group-item:hover { - background: #ddd; + background-color: #ddd; } .skin-blue .not-used { - background: #eee; + background-color: #eee; } .skin-blue .not-used:hover { - background: #c5c5c5; + background-color: #c5c5c5; } .skin-blue .used { - background: #fff; + background-color: #fff; } .skin-blue .used:hover { - background: #ddd; + background-color: #ddd; } -@-webkit-keyframes Pulse{ - from {color:#630030;-webkit-text-shadow:0 0 2px transparent;} - 50% {color:#e33100;-webkit-text-shadow:0 0 5px #e33100;} - to {color:#630030;-webkit-text-shadow:0 0 2px transparent;} -} -@-o-keyframes Pulse{ - from {color:#630030;text-shadow:0 0 2px transparent;} - 50% {color:#e33100;text-shadow:0 0 5px #e33100;} - to {color:#630030;text-shadow:0 0 2px transparent;} +@-webkit-keyframes Pulse { + from { + color: #630030; + text-shadow: 0 0 2px transparent; + } + + 50% { + color: #e33100; + text-shadow: 0 0 5px #e33100; + } + + to { + color: #630030; + text-shadow: 0 0 2px transparent; + } } -@keyframes Pulse{ - from {color:#630030;text-shadow:0 0 2px transparent;} - 50% {color:#e33100;text-shadow:0 0 5px #e33100;} - to {color:#630030;text-shadow:0 0 2px transparent;} + +@keyframes Pulse { + from { + color: #630030; + text-shadow: 0 0 2px transparent; + } + + 50% { + color: #e33100; + text-shadow: 0 0 5px #e33100; + } + + to { + color: #630030; + text-shadow: 0 0 2px transparent; + } } + .lookatme { - -webkit-animation-name: Pulse; - -o-animation-name: Pulse; - animation-name: Pulse; - -webkit-animation-duration: 2s; - -o-animation-duration: 2s; - animation-duration: 2s; - -webkit-animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; - animation-iteration-count: infinite; + -webkit-animation: 2s infinite Pulse; + animation: 2s infinite Pulse; } .table-responsive { - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch; } /* Optimize Queries-Table for small screens */ -#all-queries td:nth-of-type(1), /* Time column */ -#all-queries td:nth-of-type(5) { /* Status column */ - white-space: nowrap; -} -#all-queries td:nth-of-type(3) { /* Domain column */ - min-width: 200px; - word-break: break-all; - white-space: pre-wrap; -} -#all-queries_info { /* Allow Info String to wrap (useful while filtering entries on small screen) */ - white-space: unset; -} -#all-queries_wrapper .pagination > li > a { /* adjust the buttons width */ - padding-left: 6px; - padding-right: 6px; - min-width: 34px; - text-align: center; -} -@media screen and (max-width: 500px), - screen and (min-width: 767px) and (max-width: 1000px) { - /* Hide "Previous" & "Next"-Buttons in Pagination */ - #all-queries_wrapper .pagination > li.previous, - #all-queries_wrapper .pagination > li.next { - display: none; - } - #all-queries_wrapper .pagination > li:nth-of-type(2) a { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - #all-queries_wrapper .pagination > li:nth-last-of-type(2) a { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } +/* Time column */ +#all-queries td:nth-of-type(1), +/* Status column */ +#all-queries td:nth-of-type(5) { + white-space: nowrap; +} + +/* Domain column */ +#all-queries td:nth-of-type(3) { + min-width: 200px; + word-break: break-all; + white-space: pre-wrap; +} + +/* Allow Info String to wrap (useful while filtering entries on small screen) */ +#all-queries_info { + white-space: unset; +} + +/* adjust the buttons width */ +#all-queries_wrapper .pagination > li > a { + padding-left: 6px; + padding-right: 6px; + min-width: 34px; + text-align: center; +} + +@media screen and (max-width: 500px), screen and (min-width: 767px) and (max-width: 1000px) { + /* Hide "Previous" & "Next"-Buttons in Pagination */ + #all-queries_wrapper .pagination > li.previous, + #all-queries_wrapper .pagination > li.next { + display: none; + } + + #all-queries_wrapper .pagination > li:nth-of-type(2) a { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + + #all-queries_wrapper .pagination > li:nth-last-of-type(2) a { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } } .main-header > .navbar, @@ -116,126 +137,127 @@ } #resetButton { - color: #f00; - font-weight: 700; + color: #f00; + font-weight: 700; } .vertical-alignment-helper { - display: table; - width: 100%; - height: 100%; - pointer-events: none; + display: table; + width: 100%; + height: 100%; + pointer-events: none; } + .vertical-alignment-helper > .vertical-align-center { - display: table-cell; - vertical-align: middle; + display: table-cell; + vertical-align: middle; } + .vertical-alignment-helper > .vertical-align-center > .modal-content { - width: 250px; - margin-left: auto; - margin-right: auto; - word-wrap: break-word; - pointer-events: all; + width: 250px; + margin-left: auto; + margin-right: auto; + word-wrap: break-word; + pointer-events: all; } .alSpinner { - top: 0.1em; - left: 0.1em; - width: 0.8em; - height: 0.8em; - border-radius: 50%; - border: 4px solid #c0c0c0; - border-right-color: transparent; - -webkit-animation: fa-spin 1s infinite linear; - -o-animation: fa-spin 1s infinite linear; - animation: fa-spin 1s infinite linear; + top: 0.1em; + left: 0.1em; + width: 0.8em; + height: 0.8em; + border-radius: 50%; + border: 4px solid #c0c0c0; + border-right-color: transparent; + -webkit-animation: fa-spin 1s infinite linear; + animation: fa-spin 1s infinite linear; } -.extratooltipcanvas{ - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none +.extratooltipcanvas { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } #chartjs-tooltip { - opacity: 1; - position: absolute; - background: rgba(0, 0, 0, .7); - color: #fff; - border-radius: 3px; - -webkit-transition: all .1s ease; - -o-transition: all .1s ease; - transition: all .1s ease; - pointer-events: none; - -webkit-transform: translate(-50%, 0); - -ms-transform: translate(-50%, 0); - -o-transform: translate(-50%, 0); - transform: translate(-50%, 0); + opacity: 1; + position: absolute; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + border-radius: 3px; + pointer-events: none; + -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease; + transition: opacity 0.1s ease, -webkit-transform 0.1s ease; + transition: opacity 0.1s ease, transform 0.1s ease; + transition: opacity 0.1s ease, transform 0.1s ease, -webkit-transform 0.1s ease; + -webkit-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + transform: translate(-50%, 0); } .chartjs-tooltip-key { - display: inline-block; - width: 20px; - height: 10px; - margin-right: 10px; + display: inline-block; + width: 20px; + height: 10px; + margin-right: 10px; } .chart-legend { - height: 250px; - overflow: auto; + height: 250px; + overflow: auto; } .chart-legend ul { - list-style-type: none; + list-style-type: none; } .chart-legend li { - cursor: pointer; + cursor: pointer; } .chart-legend li span { - display: inline-block; - width: 20px; - height: 12px; - margin-right: 5px; + display: inline-block; + width: 20px; + height: 12px; + margin-right: 5px; } .strike { - text-decoration: line-through !important; + text-decoration: line-through !important; } .fa-paypal-icon { - width: 18px; - margin-left: 2px; + width: 18px; + margin-left: 2px; } .sidebar-toggle:before { - font-weight: 900; - font-family: "Font Awesome 5 Free"; + font-weight: 900; + font-family: "Font Awesome 5 Free"; } /* Utilities */ .text-black { - color: #000 !important; + color: #000 !important; } .text-green-light { - color: #7fff00 !important; + color: #7fff00 !important; } .text-green { - color: #080 !important; + color: #080 !important; } .text-orange { - color: #ffa500 !important; + color: #ffa500 !important; } .text-red { - color: #f00 !important; + color: #f00 !important; } .text-vivid-blue { - color: #36f !important; + color: #36f !important; }