@ -6,45 +6,46 @@
* Please see LICENSE file for your rights under this license . * /
/* Text Customisation Options ======> */
. title : before { content : "Website Blocked" ; }
. altBtn : before { content : "Why am I here?" ; }
. linkPH : before { content : "About Pi-hole" ; }
. linkEmail : before { content : "Contact Admin" ; }
# bpOutput . add : before { content : "Info" ; }
# bpOutput . add : after { content : "The domain is being whitelisted..." ; }
# bpOutput . error : before , . unhandled :before { content : "Error" ; }
# bpOutput . unhandled : after { content : "An unhandled exception occurred. This may happen when your browser is unable to load jQuery, or when the webserver is denying access to the Pi-hole API." ; }
# bpOutput . success : before { content : "Success" ; }
# bpOutput . success : after { content : "Website has been whitelisted! You may need to flush your DNS cache" ; }
. recentwl : before { content : "This site has been whitelisted. Please flush your DNS cache and/or restart your browser." ; }
. unknown : before { content : "This website is not found in any of Pi-hole's blacklists. The reason you have arrived here is unknown." ; }
. cname : before { content : "This site is an alias for " ; } /* <a href="http://cname.com">cname.com</a> */
. cname : after { content : ", which may be blocked by Pi-hole." ; }
. blacklist : before { content : "Manually Blacklisted" ; }
. wildcard : before { content : "Manually Blacklisted by Wildcard" ; }
. noblock : before { content : "Not found on any Blacklist" ; }
# bpBlock : before { content : "Access to the following website has been denied:" ; }
# bpFlag : before { content : "This is primarily due to being flagged as:" ; }
# bpHelpTxt : before { content : "If you have an ongoing use for this website, please " ; }
# bpHelpTxt a : before , # bpHelpTxt span :before { content : "ask the administrator" ; }
# bpHelpTxt : after { content : " of the Pi-hole on this network to have it whitelisted" ; }
# bpBack : before { content : "Back to safety" ; }
# bpInfo : before { content : "Technical Info" ; }
# bpFoundIn : before { content : "This site is found in " ; }
# bpFoundIn span : after { content : " of " ; }
# bpFoundIn : after { content : " lists:" ; }
# bpWhitelist : before { content : "Whitelist" ; }
footer span : before { content : "Page generated on " ; }
. title : : before { content : "Website Blocked" ; }
. altBtn : : before { content : "Why am I here?" ; }
. linkPH : : before { content : "About Pi-hole" ; }
. linkEmail : : before { content : "Contact Admin" ; }
# bpOutput . add : : before { content : "Info" ; }
# bpOutput . add : : after { content : "The domain is being whitelisted..." ; }
# bpOutput . error : : before , . unhandled : :before { content : "Error" ; }
# bpOutput . unhandled : : after { content : "An unhandled exception occurred. This may happen when your browser is unable to load jQuery, or when the webserver is denying access to the Pi-hole API." ; }
# bpOutput . success : : before { content : "Success" ; }
# bpOutput . success : : after { content : "Website has been whitelisted! You may need to flush your DNS cache" ; }
. recentwl : : before { content : "This site has been whitelisted. Please flush your DNS cache and/or restart your browser." ; }
. unknown : : before { content : "This website is not found in any of Pi-hole's blacklists. The reason you have arrived here is unknown." ; }
. cname : : before { content : "This site is an alias for " ; } /* <a href="http://cname.com">cname.com</a> */
. cname : : after { content : ", which may be blocked by Pi-hole." ; }
. blacklist : : before { content : "Manually Blacklisted" ; }
. wildcard : : before { content : "Manually Blacklisted by Wildcard" ; }
. noblock : : before { content : "Not found on any Blacklist" ; }
# bpBlock : : before { content : "Access to the following website has been denied:" ; }
# bpFlag : : before { content : "This is primarily due to being flagged as:" ; }
# bpHelpTxt : : before { content : "If you have an ongoing use for this website, please " ; }
# bpHelpTxt a : : before , # bpHelpTxt span : :before { content : "ask the administrator" ; }
# bpHelpTxt : : after { content : " of the Pi-hole on this network to have it whitelisted" ; }
# bpBack : : before { content : "Back to safety" ; }
# bpInfo : : before { content : "Technical Info" ; }
# bpFoundIn : : before { content : "This site is found in " ; }
# bpFoundIn span : : after { content : " of " ; }
# bpFoundIn : : after { content : " lists:" ; }
# bpWhitelist : : before { content : "Whitelist" ; }
footer span : : before { content : "Page generated on " ; }
/* Hide whitelisting form entirely */
/* #bpWLButtons { display: none; } */
/* Text Customisation Options <=============================== */
/* http://necolas.github.io/normalize.css ======> */
@ -98,7 +99,7 @@ html { font-size: 62.5%; }
a { color : #3c8dbc ; text-decoration : none ; }
a : hover { color : #72afda ; text-decoration : underline ; }
b { color : rgb ( 68 , 68 , 68 ) ; }
b { color : rgb ( 68 , 68 , 68 ) ; }
p { margin : 0 ; }
label , . buttons a {
@ -111,7 +112,7 @@ label, .buttons a {
label , . buttons * : not ( [ disabled ] ) { cursor : pointer ; }
/* Touch device dark tap highlight */
header h1 a , label , . buttons * { -webkit- tap-highlight-color : transparent ; }
header h1 a , label , . buttons * { -webkit- tap-highlight-color : transparent ; }
/* Webkit Focus Glow */
textarea , input , button { outline : none ; }
@ -120,14 +121,20 @@ textarea, input, button { outline: none; }
font-family : "Source Sans Pro" ;
font-style : normal ;
font-weight : 400 ;
src : local ( "Source Sans Pro" ) , local ( "SourceSansPro-Regular" ) , url ( "/admin/style/vendor/SourceSansPro/SourceSansPro-Regular.ttf" ) format ( "truetype" ) ;
font-display : swap ;
src : local ( "Source Sans Pro Regular" ) , local ( "SourceSansPro-Regular" ) ,
url ( "/admin/style/vendor/SourceSansPro/source-sans-pro-v13-latin-regular.woff2" ) format ( "woff2" ) ,
url ( "/admin/style/vendor/SourceSansPro/source-sans-pro-v13-latin-regular.woff" ) format ( "woff" ) ;
}
@ font-face {
font-family : "Source Sans Pro" ;
font-style : normal ;
font-weight : 700 ;
src : local ( "Source Sans Pro Bold" ) , local ( "SourceSansPro-Bold" ) , url ( "/admin/style/vendor/SourceSansPro/SourceSansPro-Bold.ttf" ) format ( "truetype" ) ;
font-display : swap ;
src : local ( "Source Sans Pro Bold" ) , local ( "SourceSansPro-Bold" ) ,
url ( "/admin/style/vendor/SourceSansPro/source-sans-pro-v13-latin-700.woff2" ) format ( "woff2" ) ,
url ( "/admin/style/vendor/SourceSansPro/source-sans-pro-v13-latin-700.woff" ) format ( "woff" ) ;
}
body {
@ -138,14 +145,14 @@ body {
}
/* User is greeted with a splash page when browsing to Pi-hole IP address */
# splashpage { background : #222 ; color : rgba ( 255 , 255 , 255 , 0.7 ) ; text-align : center ; }
# splashpage { background : #222 ; color : rgba ( 255 , 255 , 255 , 0.7 ) ; text-align : center ; }
# splashpage img { margin : 5 px ; width : 256 px ; }
# splashpage b { color : inherit ; }
# bpWrapper {
margin : 0 auto ;
max-width : 1250px ;
box-shadow : 0 0 8px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
box-shadow : 0 0 8px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
}
header {
@ -164,15 +171,15 @@ header h1, header h1 a, header .spc, header #bpAlt label {
}
h1 a {
background-color : rgba ( 0 , 0 , 0 , 0 . 1 ) ;
font-family : "Helvetica Neue" , Helvetica , Arial , sans-serif ;
background-color : rgba ( 0 , 0 , 0 , 0 . 1 ) ;
font-family : "Helvetica Neue" , Helvetica , Arial , sans-serif ;
font-size : 2rem ;
font-weight : normal ;
font-weight : 400 ;
min-width : 230px ;
text-align : center ;
text-align : center ;
}
h1 a : hover , header # bpAlt : hover { background-color : rgba ( 0 , 0 , 0 , 0.12 ) ; color : inherit ; text-decoration : none ; }
h1 a : hover , header # bpAlt : hover { background-color : rgba ( 0 , 0 , 0 , 0.12 ) ; color : inherit ; text-decoration : none ; }
header . spc { width : 100 % ; }
@ -180,13 +187,14 @@ header #bpAlt label {
background : url ( "/admin/img/logo.svg" ) no-repeat center left 15px ;
background-size : 15px 23px ;
padding : 0 15px ;
text-indent : 30px ;
text-indent : 30px ;
}
[ type = checkbox ] [ id $ = "Toggle" ] { display : none ; }
[ type = checkbox ] [ id $ = "Toggle" ] : checked ~ # bpAbout ,
[ type = checkbox ] [ id $ = "Toggle" ] : checked ~ # bpMoreInfo {
display : block ; }
[ type = "checkbox" ] [ id $ = "Toggle" ] { display : none ; }
[ type = "checkbox" ] [ id $ = "Toggle" ] : checked ~ # bpAbout ,
[ type = "checkbox" ] [ id $ = "Toggle" ] : checked ~ # bpMoreInfo {
display : block ;
}
/* Click anywhere else on screen to hide #bpAbout */
# bpAboutToggle : checked {
@ -197,28 +205,28 @@ header #bpAlt label {
top : 0 ;
opacity : 0 ;
position : absolute ;
width : 100 % ;
width : 100 % ;
}
# bpAbout {
background : # 3c8dbc ;
border-bottom-left-radius : 5px ;
border : 1px solid # FFF ;
border : 1px solid # fff ;
border-right-width : 0 ;
box-shadow : -1px 1px 1px rgba ( 0 , 0 , 0 , 0 . 12 ) ;
box-shadow : -1px 1px 1px rgba ( 0 , 0 , 0 , 0 . 12 ) ;
box-sizing : border-box ;
display : none ;
font-size : 1 . 7rem ;
top : 50px ;
position : absolute ;
right : 0 ;
width : 280px ;
width : 280px ;
z-index : 1 ;
}
. aboutPH {
box-sizing : border-box ;
color : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
color : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
display : block ;
padding : 10px ;
width : 100 % ;
@ -237,7 +245,7 @@ header #bpAlt label {
. aboutPH p { margin : 10 px 0 ; }
. aboutPH small { display : block ; font-size : 1.2 rem ; }
. aboutLink {
. aboutLink {
background : # fff ;
border-top : 1px solid # ddd ;
display : table ;
@ -261,16 +269,16 @@ main {
# bpOutput {
background : # 00c0ef ;
border-radius : 3px ;
border : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
border : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
color : # fff ;
font-size : 1 . 4rem ;
margin-bottom : 10px ;
margin-top : 5px ;
padding : 15px ;
padding : 15px ;
}
# bpOutput : before {
background : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='14' viewBox='0 0 7 14'%3E%3Cpath fill='%23fff' d='M6 ,11a1.371,1.371,0,0,1,1,1v1a1.371,1.371,0,0,1-1,1H1a1.371,1.371,0,0,1-1-1V12a1.371,1.371,0,0,1,1-1H2V8H1A1.371,1.371,0,0,1,0,7V6A1.371,1.371,0,0,1,1,5H4A1.371,1.371,0,0,1,5,6v5H6ZM3.5,0A1.5,1.5,0,1,1,2,1.5,1.5,1.5,0,0,1,3.5,0Z '/%3E%3C/svg%3E") no-repeat center left ;
# bpOutput : : before {
background : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='14' viewBox='0 0 7 14'%3E%3Cpath fill='%23fff' d='M6 11a1.371 1.371 0 011 1v1a1.371 1.371 0 01-1 1H1a1.371 1.371 0 01-1-1v-1a1.371 1.371 0 011-1h1V8H1a1.371 1.371 0 01-1-1V6a1.371 1.371 0 011-1h3a1.371 1.371 0 011 1v5h1zM3.5 0A1.5 1.5 0 112 1.5 1.5 1.5 0 013.5 0z '/%3E%3C/svg%3E") no-repeat center left ;
display : block ;
font-size : 1 . 8rem ;
text-indent : 15px ;
@ -281,8 +289,8 @@ main {
# bpOutput . error { background : #dd4b39 ; }
. blockMsg , . flagMsg {
font : bold 1 . 8rem Consolas , Courier , monospace ;
padding : 5px 10px 10px 10px ;
font : 700 1 . 8rem Consolas , Courier , monospace ;
padding : 5px 10px 10px ;
text-indent : 15px ;
}
@ -298,7 +306,7 @@ main {
-moz-appearance : none ;
-webkit-appearance : none ;
border-radius : 3px ;
border : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
border : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
box-sizing : content-box ;
display : table-cell ;
font-size : 1 . 65rem ;
@ -309,46 +317,48 @@ main {
text-align : center ;
vertical-align : top ;
white-space : nowrap ;
width : auto ;
width : auto ;
}
. buttons a : hover { text-decoration : none ; }
/* Button hover dark overlay */
. buttons * : not ( input ) : not ( [ disabled ] ) : hover {
background-image : linear-gradient ( to bottom , rgba ( 0 , 0 , 0 , 0 . 1 ) , rgba ( 0 , 0 , 0 , 0 . 1 ) ) ;
color : # FFF ;
background-image : linear-gradient ( to bottom , rgba ( 0 , 0 , 0 , 0 . 1 ) , rgba ( 0 , 0 , 0 , 0 . 1 ) ) ;
color : # fff ;
}
/* Button active shadow inset */
. buttons * : not ( [ disabled ] ) : not ( input ) : active {
box-shadow : inset 0 3px 5px rgba ( 0 , 0 , 0 , 0 . 125 ) ;
box-shadow : inset 0 3px 5px rgba ( 0 , 0 , 0 , 0 . 125 ) ;
}
/* Input border color */
. buttons * : not ( [ disabled ] ) : hover , . buttons input : focus {
border-color : rgba ( 0 , 0 , 0 , 0 . 25 ) ;
border-color : rgba ( 0 , 0 , 0 , 0 . 25 ) ;
}
# bpButtons * { width : 50 % ; color : # FFF ; }
# bpBack { background-color : #00a65a ; }
# bpInfo { background-color : #3c8dbc ; }
# bpButtons * { width : 50 % ; color : # fff ; }
# bpBack { background-color : #00a65a ; }
# bpInfo { background-color : #3c8dbc ; }
# bpWhitelist { background-color : #dd4b39 ; }
# blockpage . buttons [ type = password ] [ disabled ] { color : rgba ( 0 , 0 , 0 , 1 ) ; }
# blockpage . buttons [ disabled ] { color : rgba ( 0 , 0 , 0 , 0.55 ) ; background-color : #e3e3e3 ; }
# blockpage . buttons [ type = password ] : -ms-input-placeholder { color : rgba ( 51 , 51 , 51 , 0.8 ) ; }
# blockpage . buttons [ type = "password" ] [ disabled ] { color : rgba ( 0 , 0 , 0 , 1 ) ; }
# blockpage . buttons [ disabled ] { color : rgba ( 0 , 0 , 0 , 0.55 ) ; background-color : #e3e3e3 ; }
# blockpage . buttons [ type = "password" ] : -ms-input-placeholder { color : rgba ( 51 , 51 , 51 , 0.8 ) ; }
input [ type = "password" ] { font-size : 1.5 rem ; }
input [ type = password ] { font-size : 1.5 rem ; }
@ -webkit-keyframes slidein { from { max-height : 0 ; opacity : 0 ; } to { max-height : 300 px ; opacity : 1 ; } }
@ keyframes slidein { from { max-height : 0 ; opacity : 0 ; } to { max-height : 300 px ; opacity : 1 ; } }
# bpMoreToggle : checked ~ # bpMoreInfo { display : block ; margin-top : 8 px ; animation : slidein 0.05 s linear ; }
# bpMoreToggle : checked ~ # bpMoreInfo { display : block ; margin-top : 8 px ; -webkit- animation : slidein 0.05 s linear ; animation : slidein 0.05 s linear ; }
# bpMoreInfo { display : none ; margin-top : 10 px ; }
# bpQueryOutput {
font-size : 1 . 2rem ;
line-height : 1 . 65rem ;
margin : 5px 0 0 0 ;
margin : 5px 0 0 ;
overflow : auto ;
padding : 0 5px ;
-webkit-overflow-scrolling : touch ;
@ -367,13 +377,13 @@ footer {
border-top : 1px solid # d2d6de ;
color : # 444 ;
font : 1 . 2rem Consolas , Courier , monospace ;
padding : 8px ;
padding : 8px ;
}
/* Responsive Content */
@ media only screen and ( max-width : 500px ) {
h1 a { font-size : 1.8 rem ; min-width : 170 px ; }
footer span : before { content : "Generated " ; }
footer span : : before { content : "Generated " ; }
footer span { display : block ; }
}