Skip to content

Instantly share code, notes, and snippets.

@buchanansc

buchanansc/Custom.css

Created September 11, 2012 01:07
Show Gist options
  • Save buchanansc/3695228 to your computer and use it in GitHub Desktop.
Save buchanansc/3695228 to your computer and use it in GitHub Desktop.
Download ZIP
Custom.css - WebKit Inspector styles for Google Chrome
Raw
_images.scss
$img_noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAAAAACH0MYjAAAFdUlEQVQYGQXBAXYrKw4FwN7/fi4cIQSSAEG3HTuZ/xY0VRf01NvH7EVtv9AtlFAYAhsBnuhekbZbZfvLvp2FsKFeN191WeVMo47shW+4eSxjhcBX8ABRQTGhier9aL+RN+fXCmpXTTqRsdS65CEmFSBRtAdKLd3o82ci1CIny8DE05g3VqFxZTfqy7++MnUZYuhYMkyyl1cUAGXDHsC7BC8OpQ03nk3o4p1JuClp/8IjellVB+Y0G4VfCc/EfGPmfJ+W8QCCrHm1rHGFyYxf6X3dhFAzkLyPey8tgAcRGHkcBH7axumqno1QrZx+rbr+ndyb/CAmMivSc4MxaxJ7MEECTykWLF6uby270OgJDbh8ZqbUBD6FFxojt1agjYudRlkO6Th+ap8IGIqWqZhUct4XWqfAsa8yjV4zPWI8oz6coVptYCtXIOFIWQ7yjOUxCwouhIehPcQDbmaVvZ2V+925FKEGLJ8CFcBQtsDRXXStgFyhU/QwMqzgTc9dV8TqBIAZxR8Y4tFAg/ac23iJsZRv0mWXxaJIx019rtrC+cPLn5qkMOVGs0MbqX4j1kBdrJHLFKmU7WJvLIDtQFL2gpB0o7uCdrDvj5lOxq2Rt4sKEUCzNODI9dBbOGwK3j+vzHNWxwFXQBaklKcLtsVoAGAUE+xvuK5IdJ28mwaCGDJfdaH/srSquJOnAdQKt5EQhAA2moV4PRxc5DqxC3ue1QaXtSB2rLbeUI1gb06GZnwy6XdIBlrabHN9QGFXe/KajgzkEQCEQydKKd6y0zMe7ZtX4u+ogQrAZjC3GmPWq2VltL5LbbJJfQOOyYCH9ugxBIQSQxv+oP09UNIuuXhTuXRw5L4Sq97GQIFColFAy3ioA7bGwDsl+zvAQGfpCCk7+Nq0fHVd/Sf7JOdHgQeVZetqaphrFJ3z8wDCL3yLEcNy/Ivy34XnNqTtMVqunBWauwqidMzsBJB35yMcuopn54aOs1KC0/X3TuEza2TMOQoQhMSDwwpqmSDgzWyzfdHWyWgl84hqKN92FdzPvRDIs7+PVFvQGCqzoQT8xaNH/OmzG2pPQGpU/Y8KIvG1R7R1f59zNGJ4YDLPchcFhlR8pQr0xXNsb/xxtXFjYuS1yrqe4ZThiW7QqxPN4bIYjlMb0+xTAvr7ox3LekbjRcj8oG7mq8c7pldOp6G8KOoHyjXS8OJw8WGjYjmn+sFkUNLxDa8/R31dD33WuquXOvuCWtv+eHEbi2cGzkLwHSlTkHq+K7gG9XbCJ64RiHgIZoT6ZhOb+Za60cGk5mhV0F9WX2kkmxaZ0BFGbM8V+kN4XGCRfSq2RFR1s8oPpnXEboLJIeVA04EuB9d1U2oX5WD/maX/VxCj0/dNg+Uwh0zQb/q4uZB04K0ZHxmmAzfycMsXJOdQy5o1A77ad7WwCZE4C/1BmwDVF7dCTShegH84YAdxiZrTYH94AkAp+VVPHtooIkeAR9YOMsaeuZDhJSp3jFs/evmRSO7g2mjemBiiER+PVSPn7em29yiTXo96rMCzRsfQbZh2HRmzo9RGtRowaz93biEohA9cEw05zMcIqLHeL8aNrCM2pcvoFbLfdXJumh0NFfjNIK5gXmQ4PU2VyhOPO8YE8K3BlvoFMR/mu80b7W7Es6/JetLBcZxwAMsY9COTO7NWCwgqt6CLU0rmxHt4w2waLxJOvUigLjo6AZ6BhVolw1KVG+9/hX3ldhk5jHO3gVrf+3Ff3ucE4NZngUud2ABWTKCiiAXXleI4Ln86yCY31I5njexP8eK7lYCBfliA4zJWCPuLTSH+zPWStP3SLnUlUC6Gtn7r+LMo/jRG1iDUCnjGjv+BssB4p3KPJPXbuPwfk2X7RnpyzNAAAAAASUVORK5CYII=');
// Console
$icon_error: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAA8ElEQVQYV42QIWvCURTF3xcwqMEgIgaD0WgSBLHbtFgsK/oZbLa1pSXDBMGiiJrkL4LlCYPBBhajCuPPS1s8O+fOaPDBj3vuPec9eNcBcBPnamRG/B00rzkF39hc2+3w2+9D7KtV/PR6xqXVCvItOOLN724Xx2YT63IZOqrqz50O5FvwlULDqFLBtFhEOJ0wzmaxoN5zJt+CLxTvjQZWhQLGySS891YXZJPPQ74FnykOpRIiGkuyrddNi10mA/kWHFJ85HI40JiTOI6tqhfyLTjgr3apVPhKp/F5e1VVRIlEkG/BJ+6JzIi/g+b/e3yEPwLA0D8dm+euAAAAAElFTkSuQmCC');
$icon_warning: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABBElEQVQYV2P4//8/w5nNjMg4EYhXQ2m4OANI4elNjDDMcXYL68Ivb+e+ANEgPkwOrPD4ekYwPrGB0ffuGY9Tf76u/n/3tOspEB8mB1Z4ZDUjCLMcW8s09+Pzzg+hoaH/Pzxp+ADig8RB8mCF+5czMhxYweh8cZ/BiY9Pav4zAIWf38j4f2aH8gmQOEgerHDXIkbGPUsYZzy8Gvvm+mW3/1u3lP6/dMHh/8VT1m9A4iB5sMJt8xitDq0TPf7gptP/u1eNwSaC6LtXTf4fXMN7HCQPVrhxJuOcWyeVX768rfn/5S2N/1/fVoJpEL55XOYlSB6scFE3w5QFnQzHcGGQPFghMRgAoznikHH1G/AAAAAASUVORK5CYII=');
Raw
Custom.css
/**
* Custom.css
* WebKit Inspector styles for Google Chrome
*
* by Scott Buchanan <[email protected]>
* http://wafflesnatcha.github.com
*
* Fugue Icons by Yusuke Kamiyamane
* http://p.yusukekamiyamane.com
*/
#-webkit-web-inspector .monospace, #-webkit-web-inspector .source-code {
font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, Courier, monospace !important;
tab-size: 4 !important;
}
#-webkit-web-inspector.platform-mac #toolbar {
background-image: -webkit-linear-gradient(top, #e2e2e2, #c6c6c6) !important;
border-bottom: 1px solid #5a5a5a !important;
border-top: none !important;
box-sizing: border-box !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
#-webkit-web-inspector.platform-mac.inactive #toolbar {
background-image: -webkit-linear-gradient(top, #f2f2f2, #e3e3e3) !important;
border-bottom-color: #a3a3a3 !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !important;
}
#-webkit-web-inspector.platform-mac.undocked #toolbar {
background-image: -webkit-linear-gradient(top, rgba(212, 212, 212, 0.85), rgba(170, 170, 170, 0.8)), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAAAAACH0MYjAAAFdUlEQVQYGQXBAXYrKw4FwN7/fi4cIQSSAEG3HTuZ/xY0VRf01NvH7EVtv9AtlFAYAhsBnuhekbZbZfvLvp2FsKFeN191WeVMo47shW+4eSxjhcBX8ABRQTGhier9aL+RN+fXCmpXTTqRsdS65CEmFSBRtAdKLd3o82ci1CIny8DE05g3VqFxZTfqy7++MnUZYuhYMkyyl1cUAGXDHsC7BC8OpQ03nk3o4p1JuClp/8IjellVB+Y0G4VfCc/EfGPmfJ+W8QCCrHm1rHGFyYxf6X3dhFAzkLyPey8tgAcRGHkcBH7axumqno1QrZx+rbr+ndyb/CAmMivSc4MxaxJ7MEECTykWLF6uby270OgJDbh8ZqbUBD6FFxojt1agjYudRlkO6Th+ap8IGIqWqZhUct4XWqfAsa8yjV4zPWI8oz6coVptYCtXIOFIWQ7yjOUxCwouhIehPcQDbmaVvZ2V+925FKEGLJ8CFcBQtsDRXXStgFyhU/QwMqzgTc9dV8TqBIAZxR8Y4tFAg/ac23iJsZRv0mWXxaJIx019rtrC+cPLn5qkMOVGs0MbqX4j1kBdrJHLFKmU7WJvLIDtQFL2gpB0o7uCdrDvj5lOxq2Rt4sKEUCzNODI9dBbOGwK3j+vzHNWxwFXQBaklKcLtsVoAGAUE+xvuK5IdJ28mwaCGDJfdaH/srSquJOnAdQKt5EQhAA2moV4PRxc5DqxC3ue1QaXtSB2rLbeUI1gb06GZnwy6XdIBlrabHN9QGFXe/KajgzkEQCEQydKKd6y0zMe7ZtX4u+ogQrAZjC3GmPWq2VltL5LbbJJfQOOyYCH9ugxBIQSQxv+oP09UNIuuXhTuXRw5L4Sq97GQIFColFAy3ioA7bGwDsl+zvAQGfpCCk7+Nq0fHVd/Sf7JOdHgQeVZetqaphrFJ3z8wDCL3yLEcNy/Ivy34XnNqTtMVqunBWauwqidMzsBJB35yMcuopn54aOs1KC0/X3TuEza2TMOQoQhMSDwwpqmSDgzWyzfdHWyWgl84hqKN92FdzPvRDIs7+PVFvQGCqzoQT8xaNH/OmzG2pPQGpU/Y8KIvG1R7R1f59zNGJ4YDLPchcFhlR8pQr0xXNsb/xxtXFjYuS1yrqe4ZThiW7QqxPN4bIYjlMb0+xTAvr7ox3LekbjRcj8oG7mq8c7pldOp6G8KOoHyjXS8OJw8WGjYjmn+sFkUNLxDa8/R31dD33WuquXOvuCWtv+eHEbi2cGzkLwHSlTkHq+K7gG9XbCJ64RiHgIZoT6ZhOb+Za60cGk5mhV0F9WX2kkmxaZ0BFGbM8V+kN4XGCRfSq2RFR1s8oPpnXEboLJIeVA04EuB9d1U2oX5WD/maX/VxCj0/dNg+Uwh0zQb/q4uZB04K0ZHxmmAzfycMsXJOdQy5o1A77ad7WwCZE4C/1BmwDVF7dCTShegH84YAdxiZrTYH94AkAp+VVPHtooIkeAR9YOMsaeuZDhJSp3jFs/evmRSO7g2mjemBiiER+PVSPn7em29yiTXo96rMCzRsfQbZh2HRmzo9RGtRowaz93biEohA9cEw05zMcIqLHeL8aNrCM2pcvoFbLfdXJumh0NFfjNIK5gXmQ4PU2VyhOPO8YE8K3BlvoFMR/mu80b7W7Es6/JetLBcZxwAMsY9COTO7NWCwgqt6CLU0rmxHt4w2waLxJOvUigLjo6AZ6BhVolw1KVG+9/hX3ldhk5jHO3gVrf+3Ff3ucE4NZngUud2ABWTKCiiAXXleI4Ln86yCY31I5njexP8eK7lYCBfliA4zJWCPuLTSH+zPWStP3SLnUlUC6Gtn7r+LMo/jRG1iDUCnjGjv+BssB4p3KPJPXbuPwfk2X7RnpyzNAAAAAASUVORK5CYII=") !important;
}
#-webkit-web-inspector.platform-mac.undocked.inactive #toolbar {
background-image: -webkit-linear-gradient(top, rgba(244, 244, 244, 0.85), rgba(218, 218, 218, 0.8)), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAAAAACH0MYjAAAFdUlEQVQYGQXBAXYrKw4FwN7/fi4cIQSSAEG3HTuZ/xY0VRf01NvH7EVtv9AtlFAYAhsBnuhekbZbZfvLvp2FsKFeN191WeVMo47shW+4eSxjhcBX8ABRQTGhier9aL+RN+fXCmpXTTqRsdS65CEmFSBRtAdKLd3o82ci1CIny8DE05g3VqFxZTfqy7++MnUZYuhYMkyyl1cUAGXDHsC7BC8OpQ03nk3o4p1JuClp/8IjellVB+Y0G4VfCc/EfGPmfJ+W8QCCrHm1rHGFyYxf6X3dhFAzkLyPey8tgAcRGHkcBH7axumqno1QrZx+rbr+ndyb/CAmMivSc4MxaxJ7MEECTykWLF6uby270OgJDbh8ZqbUBD6FFxojt1agjYudRlkO6Th+ap8IGIqWqZhUct4XWqfAsa8yjV4zPWI8oz6coVptYCtXIOFIWQ7yjOUxCwouhIehPcQDbmaVvZ2V+925FKEGLJ8CFcBQtsDRXXStgFyhU/QwMqzgTc9dV8TqBIAZxR8Y4tFAg/ac23iJsZRv0mWXxaJIx019rtrC+cPLn5qkMOVGs0MbqX4j1kBdrJHLFKmU7WJvLIDtQFL2gpB0o7uCdrDvj5lOxq2Rt4sKEUCzNODI9dBbOGwK3j+vzHNWxwFXQBaklKcLtsVoAGAUE+xvuK5IdJ28mwaCGDJfdaH/srSquJOnAdQKt5EQhAA2moV4PRxc5DqxC3ue1QaXtSB2rLbeUI1gb06GZnwy6XdIBlrabHN9QGFXe/KajgzkEQCEQydKKd6y0zMe7ZtX4u+ogQrAZjC3GmPWq2VltL5LbbJJfQOOyYCH9ugxBIQSQxv+oP09UNIuuXhTuXRw5L4Sq97GQIFColFAy3ioA7bGwDsl+zvAQGfpCCk7+Nq0fHVd/Sf7JOdHgQeVZetqaphrFJ3z8wDCL3yLEcNy/Ivy34XnNqTtMVqunBWauwqidMzsBJB35yMcuopn54aOs1KC0/X3TuEza2TMOQoQhMSDwwpqmSDgzWyzfdHWyWgl84hqKN92FdzPvRDIs7+PVFvQGCqzoQT8xaNH/OmzG2pPQGpU/Y8KIvG1R7R1f59zNGJ4YDLPchcFhlR8pQr0xXNsb/xxtXFjYuS1yrqe4ZThiW7QqxPN4bIYjlMb0+xTAvr7ox3LekbjRcj8oG7mq8c7pldOp6G8KOoHyjXS8OJw8WGjYjmn+sFkUNLxDa8/R31dD33WuquXOvuCWtv+eHEbi2cGzkLwHSlTkHq+K7gG9XbCJ64RiHgIZoT6ZhOb+Za60cGk5mhV0F9WX2kkmxaZ0BFGbM8V+kN4XGCRfSq2RFR1s8oPpnXEboLJIeVA04EuB9d1U2oX5WD/maX/VxCj0/dNg+Uwh0zQb/q4uZB04K0ZHxmmAzfycMsXJOdQy5o1A77ad7WwCZE4C/1BmwDVF7dCTShegH84YAdxiZrTYH94AkAp+VVPHtooIkeAR9YOMsaeuZDhJSp3jFs/evmRSO7g2mjemBiiER+PVSPn7em29yiTXo96rMCzRsfQbZh2HRmzo9RGtRowaz93biEohA9cEw05zMcIqLHeL8aNrCM2pcvoFbLfdXJumh0NFfjNIK5gXmQ4PU2VyhOPO8YE8K3BlvoFMR/mu80b7W7Es6/JetLBcZxwAMsY9COTO7NWCwgqt6CLU0rmxHt4w2waLxJOvUigLjo6AZ6BhVolw1KVG+9/hX3ldhk5jHO3gVrf+3Ff3ucE4NZngUud2ABWTKCiiAXXleI4Ln86yCY31I5njexP8eK7lYCBfliA4zJWCPuLTSH+zPWStP3SLnUlUC6Gtn7r+LMo/jRG1iDUCnjGjv+BssB4p3KPJPXbuPwfk2X7RnpyzNAAAAAASUVORK5CYII=") !important;
}
#-webkit-web-inspector.platform-mac.compact #toolbar {
border-bottom-color: #5c5c5c !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.1) !important;
}
#-webkit-web-inspector.platform-mac.compact.inactive #toolbar {
border-bottom-color: #8e8e8e !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
}
#-webkit-web-inspector.platform-mac #toolbar .toolbar-item.close-left {
margin: 0 !important;
padding: 2px 6px !important;
}
#-webkit-web-inspector.platform-mac #toolbar .toolbar-item.close-left button {
height: 100% !important;
margin: 0 !important;
position: relative !important;
background: none !important;
width: 16px !important;
}
#-webkit-web-inspector.platform-mac #toolbar .toolbar-item.close-left button::before {
-webkit-text-stroke: 1px white;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 100%;
bottom: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 18px 18px -10px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.3);
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
content: '\2DF';
font-family: "Courier New", Courier, monospace;
font-size: 17px;
height: 15px;
left: 0;
line-height: 22px;
margin: 3px 0;
padding: 0;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
top: 0;
width: 15px;
-webkit-font-smoothing: antialiased;
}
#-webkit-web-inspector.platform-mac #toolbar .toolbar-item.close-left button:hover::before {
background-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset, 0 18px 18px -10px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.3);
color: white;
}
#-webkit-web-inspector.platform-mac #toolbar .toolbar-item.close-left button:active:hover::before {
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) inset, 0 18px 18px -10px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.3);
}
#-webkit-web-inspector.platform-mac.undocked #toolbar .toolbar-item.close-left {
display: none !important;
}
#-webkit-web-inspector.platform-mac #main-panels {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar {
height: 25px !important;
padding: 0 !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow {
border-radius: 0 !important;
border: none !important;
height: 100% !important;
margin: 0 !important;
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-left: 6px !important;
padding-right: 6px !important;
position: relative !important;
text-shadow: inherit !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable {
padding-left: 11px !important;
padding-right: 11px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable.toggled-on,
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable:active,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow.dropdown-visible,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow:active {
background-color: rgba(0, 0, 0, 0.55) !important;
background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.3), rgba(100, 100, 100, 0.3)) !important;
color: white !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable:not(.toggled-on):active,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow:not(.dropdown-visible):hover,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow:not(.dropdown-visible):active {
background-color: rgba(0, 0, 0, 0.1) !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable.toggled-on:before,
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable.toggled-on:after,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow.dropdown-visible:before,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow.dropdown-visible:after {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.17) 50%, rgba(0, 0, 0, 0.05) 85%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.23) 50%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0) 100%) !important;
background-position: 0 0, 1px 0 !important;
background-repeat: no-repeat !important;
background-size: 2px 100%, 1px 100% !important;
bottom: 0;
content: ' ';
margin: 0 !important;
overflow: hidden;
position: absolute;
right: 0;
text-indent: -1000000px;
top: 0;
width: 2px;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item.toggleable.toggled-on:before,
#-webkit-web-inspector:not(.undocked) #toolbar #toolbar-dropdown-arrow.dropdown-visible:before {
background-position: right 0, 0 0 !important;
background-size: 2px 100%, 1px 100% !important;
left: 0;
right: auto;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-label {
color: inherit !important;
line-height: 24px !important;
margin: 0 !important;
opacity: 1 !important;
padding: 0 !important;
text-shadow: inherit !important;
top: auto !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-label {
margin-left: 0px !important;
margin-right: 0px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar .toolbar-item .toolbar-icon {
display: none !important;
}
#-webkit-web-inspector:not(.undocked).inactive #toolbar .toolbar-item.toggleable.toggled-on,
#-webkit-web-inspector:not(.undocked).inactive #toolbar #toolbar-dropdown-arrow.dropdown-visible {
background-color: rgba(0, 0, 0, 0.3) !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown {
border: 1px solid rgba(128, 128, 128, 0.5);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5) !important;
left: auto !important;
right: 8px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown .toolbar-item {
border-radius: 3px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar, #-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-track:horizontal {
width: 8px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-thumb {
background-color: #8c8c8c !important;
background-image: none !important;
border-radius: 3px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-thumb:vertical, #-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-thumb:vertical:hover, #-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-thumb:vertical:active {
min-height: 20px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-track {
background: transparent none !important;
border: none !important;
border-radius: 3px !important;
}
#-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-track:hover, #-webkit-web-inspector:not(.undocked) #toolbar-dropdown .scrollable-content::-webkit-scrollbar-track:active {
background-color: rgba(100, 100, 100, 0.15) !important;
}
#-webkit-web-inspector:not(.undocked) #main, #-webkit-web-inspector:not(.undocked) .help-window-outer {
top: 25px !important;
}
/** Main */
#-webkit-web-inspector .inspector-footer.status-bar {
border-top: 1px solid silver !important;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
}
#-webkit-web-inspector.inactive .inspector-footer.status-bar {
border-top-color: #cacaca !important;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
}
#-webkit-web-inspector .toolbar-search {
border-spacing: 0 !important;
box-sizing: border-box !important;
display: block !important;
height: 24px !important;
padding: 2px 4px !important;
width: 100% !important;
}
#-webkit-web-inspector .toolbar-search tr {
display: inline-block !important;
float: left !important;
}
#-webkit-web-inspector .toolbar-search tr.hidden {
display: none !important;
}
#-webkit-web-inspector .toolbar-search td {
border: 0 !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
#-webkit-web-inspector .toolbar-search button {
border-radius: 4px !important;
margin: 0 0 0 4px !important;
width: auto !important;
}
#-webkit-web-inspector .toolbar-search > tr:first-child > td:first-child + td > button, #-webkit-web-inspector .toolbar-search > tr:first-child > td:first-child + td + td > button, #-webkit-web-inspector .toolbar-search > tr:first-child > td:last-child > button {
display: none;
}
#-webkit-web-inspector .toolbar-search .search-replace {
-webkit-appearance: none !important;
background-clip: padding-box !important;
background-color: white !important;
border-radius: 2px !important;
border: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 0 1px 1px rgba(0, 0, 0, 0.35) inset, 0 1px 0 rgba(255, 255, 255, 0.4) !important;
box-sizing: border-box !important;
height: 20px !important;
left: 0 !important;
line-height: 14px !important;
margin: 0 !important;
outline: none !important;
padding: 0 4px !important;
position: relative !important;
top: 0 !important;
width: 100% !important;
z-index: 0 !important;
}
#-webkit-web-inspector .toolbar-search .toolbar-search-control:active .search-replace,
#-webkit-web-inspector .toolbar-search .search-replace:focus {
box-shadow: 0 0 2px 1px rgba(39, 149, 244, 0.8) inset, 0 0 1px 1px rgba(39, 149, 244, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 0 1px 1px rgba(0, 0, 0, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
#-webkit-web-inspector .toolbar-search .toolbar-search-control {
background: none !important;
border: 0 !important;
margin: 0 !important;
min-width: 265px !important;
padding: 0 !important;
}
#-webkit-web-inspector .toolbar-search .search-results-matches {
line-height: 20px !important;
margin: 0 !important;
min-width: 0 !important;
padding: 0 !important;
position: absolute !important;
right: 42px;
top: 0 !important;
z-index: 2 !important;
}
#-webkit-web-inspector .toolbar-search .toolbar-search-navigation-controls {
height: 18px !important;
position: absolute !important;
right: 1px !important;
top: 1px !important;
}
#-webkit-web-inspector .toolbar-search .toolbar-search-navigation-controls .toolbar-search-navigation-prev,
#-webkit-web-inspector .toolbar-search .toolbar-search-navigation-controls .toolbar-search-navigation-next {
border-left-color: rgba(0, 0, 0, 0.15) !important;
box-sizing: content-box !important;
}
#-webkit-web-inspector .toolbar-search .search-replace:focus ~ .toolbar-search-navigation-controls {
box-shadow: 0 1px 2px -1px rgba(33, 127, 204, 0.9) inset, -1px 0 2px -1px rgba(39, 149, 244, 0.4) inset, 0 -1px 2px -1px rgba(39, 149, 244, 0.7) inset !important;
}
#-webkit-web-inspector .toolbar-search input[type="checkbox"] {
margin: 0 0 0 6px !important;
top: 0 !important;
}
#-webkit-web-inspector .toolbar-search input[type="checkbox"] + label {
margin: 0 6px 0 4px !important;
}
#-webkit-web-inspector.inactive table.toolbar-search .search-replace {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset, 0 0 1px 1px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
/** Console */
#-webkit-web-inspector #console-prompt::before,
#-webkit-web-inspector .console-group-title::before,
#-webkit-web-inspector .console-message::before,
#-webkit-web-inspector .console-user-command::before {
margin-top: -6px !important;
}
#-webkit-web-inspector .console-group-messages .outline-disclosure, #-webkit-web-inspector .console-group-messages .outline-disclosure ol {
line-height: normal !important;
}
#-webkit-web-inspector .outline-disclosure li {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/** Icons */
#-webkit-web-inspector #error-count-img {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAA8ElEQVQYV42QIWvCURTF3xcwqMEgIgaD0WgSBLHbtFgsK/oZbLa1pSXDBMGiiJrkL4LlCYPBBhajCuPPS1s8O+fOaPDBj3vuPec9eNcBcBPnamRG/B00rzkF39hc2+3w2+9D7KtV/PR6xqXVCvItOOLN724Xx2YT63IZOqrqz50O5FvwlULDqFLBtFhEOJ0wzmaxoN5zJt+CLxTvjQZWhQLGySS891YXZJPPQ74FnykOpRIiGkuyrddNi10mA/kWHFJ85HI40JiTOI6tqhfyLTjgr3apVPhKp/F5e1VVRIlEkG/BJ+6JzIi/g+b/e3yEPwLA0D8dm+euAAAAAElFTkSuQmCC") !important;
}
#-webkit-web-inspector .console-error-level::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAA8ElEQVQYV42QIWvCURTF3xcwqMEgIgaD0WgSBLHbtFgsK/oZbLa1pSXDBMGiiJrkL4LlCYPBBhajCuPPS1s8O+fOaPDBj3vuPec9eNcBcBPnamRG/B00rzkF39hc2+3w2+9D7KtV/PR6xqXVCvItOOLN724Xx2YT63IZOqrqz50O5FvwlULDqFLBtFhEOJ0wzmaxoN5zJt+CLxTvjQZWhQLGySS891YXZJPPQ74FnykOpRIiGkuyrddNi10mA/kWHFJ85HI40JiTOI6tqhfyLTjgr3apVPhKp/F5e1VVRIlEkG/BJ+6JzIi/g+b/e3yEPwLA0D8dm+euAAAAAElFTkSuQmCC") !important;
}
#-webkit-web-inspector #warning-count-img {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABBElEQVQYV2P4//8/w5nNjMg4EYhXQ2m4OANI4elNjDDMcXYL68Ivb+e+ANEgPkwOrPD4ekYwPrGB0ffuGY9Tf76u/n/3tOspEB8mB1Z4ZDUjCLMcW8s09+Pzzg+hoaH/Pzxp+ADig8RB8mCF+5czMhxYweh8cZ/BiY9Pav4zAIWf38j4f2aH8gmQOEgerHDXIkbGPUsYZzy8Gvvm+mW3/1u3lP6/dMHh/8VT1m9A4iB5sMJt8xitDq0TPf7gptP/u1eNwSaC6LtXTf4fXMN7HCQPVrhxJuOcWyeVX768rfn/5S2N/1/fVoJpEL55XOYlSB6scFE3w5QFnQzHcGGQPFghMRgAoznikHH1G/AAAAAASUVORK5CYII=") !important;
}
#-webkit-web-inspector .console-warning-level::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABBElEQVQYV2P4//8/w5nNjMg4EYhXQ2m4OANI4elNjDDMcXYL68Ivb+e+ANEgPkwOrPD4ekYwPrGB0ffuGY9Tf76u/n/3tOspEB8mB1Z4ZDUjCLMcW8s09+Pzzg+hoaH/Pzxp+ADig8RB8mCF+5czMhxYweh8cZ/BiY9Pav4zAIWf38j4f2aH8gmQOEgerHDXIkbGPUsYZzy8Gvvm+mW3/1u3lP6/dMHh/8VT1m9A4iB5sMJt8xitDq0TPf7gptP/u1eNwSaC6LtXTf4fXMN7HCQPVrhxJuOcWyeVX768rfn/5S2N/1/fVoJpEL55XOYlSB6scFE3w5QFnQzHcGGQPFghMRgAoznikHH1G/AAAAAASUVORK5CYII=") !important;
}
Raw
Custom.scss
/**
* Custom.css
* WebKit Inspector styles for Google Chrome
*
* by Scott Buchanan <[email protected]>
* http://wafflesnatcha.github.com
*
* Fugue Icons by Yusuke Kamiyamane
* http://p.yusukekamiyamane.com
*/
$code_font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, Courier, monospace;
$code_tab-size: 4;
$toolbar_height_compact: 25px;
$statusbar_height: 24px;
@import "_images";
#-webkit-web-inspector {
.monospace, .source-code {
font-family: $code_font-family !important;
tab-size: $code_tab-size !important;
}
}
// Mac-specific styles
#-webkit-web-inspector.platform-mac {
#toolbar {
background-image: -webkit-linear-gradient(top, #e2e2e2, #c6c6c6) !important;
border-bottom: 1px solid #5a5a5a !important;
border-top: none !important;
box-sizing: border-box !important;
text-shadow: 0 1px 0 rgba(255,255,255,.4) !important;
}
&.inactive #toolbar {
background-image: -webkit-linear-gradient(top, #f2f2f2, #e3e3e3) !important;
border-bottom-color: #a3a3a3 !important;
box-shadow: 0 1px 0 rgba(0,0,0,.05) !important;
}
&.undocked #toolbar {
background-image: -webkit-linear-gradient(top, rgba(212,212,212,.85), rgba(170,170,170,.8)), $img_noise !important;
}
&.undocked.inactive #toolbar {
background-image: -webkit-linear-gradient(top, rgba(244,244,244,.85), rgba(218,218,218,.8)), $img_noise !important;
}
&.compact #toolbar {
border-bottom-color: #5c5c5c !important;
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 0 rgba(0,0,0,.1) !important;
}
&.compact.inactive #toolbar {
border-bottom-color: #8e8e8e !important;
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 0 rgba(0,0,0,.05) !important;
}
// Close button
#toolbar .toolbar-item.close-left {
margin: 0 !important;
padding: 2px 6px !important;
button {
height: 100% !important;
margin: 0 !important;
position: relative !important;
background: none !important;
width: 16px !important;
&::before {
-webkit-text-stroke: 1px #fff;
background-color: rgba(0,0,0,.2);
border-radius: 100%;
bottom: 0;
box-shadow: 0 1px 2px rgba(0,0,0,.2) inset, 0 18px 18px -10px rgba(0,0,0,.08) inset, 0 1px 0 rgba(255,255,255,.3);
box-sizing: border-box;
color: rgba(255,255,255,.8);
content: '\2DF';
font-family: "Courier New", Courier, monospace;
font-size: 17px;
height: 15px;
left: 0;
line-height: 22px;
margin: 3px 0;
padding: 0;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 2px 1px rgba(0,0,0,.3);
top: 0;
width: 15px;
-webkit-font-smoothing: antialiased;
}
&:hover::before {
background-color: rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.4) inset, 0 18px 18px -10px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.3);
color: rgba(255,255,255,1);
}
&:active:hover::before {
background-color: rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.6) inset, 0 18px 18px -10px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.3);
}
}
}
&.undocked #toolbar .toolbar-item.close-left {
display: none !important;
}
#main-panels {
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
}
// Compact
#-webkit-web-inspector:not(.undocked) {
// Compact > Toolbar
#toolbar {
height: $toolbar_height_compact !important;
padding: 0 !important;
// Toolbar > Compact > Toolbar items
.toolbar-item,
#toolbar-dropdown-arrow {
border-radius: 0 !important;
border: none !important;
height: 100% !important;
margin: 0 !important;
padding: {
bottom: 0px !important;
top: 0px !important;
left: 6px !important;
right: 6px !important;
};
position: relative !important;
text-shadow: inherit !important;
}
.toolbar-item.toggleable {
padding: {
left: 11px !important;
right: 11px !important;
};
}
.toolbar-item.toggleable.toggled-on,
.toolbar-item.toggleable:active,
#toolbar-dropdown-arrow.dropdown-visible,
#toolbar-dropdown-arrow:active {
background: {
color: rgba(0,0,0,.55) !important;
image: -webkit-linear-gradient(top, rgba(50,50,50,.3), rgba(100,100,100,.3)) !important;
};
color: #fff !important;
text-shadow: 0 1px 0 rgba(0,0,0,.4) !important;
}
.toolbar-item.toggleable:not(.toggled-on):active,
#toolbar-dropdown-arrow:not(.dropdown-visible):hover,
#toolbar-dropdown-arrow:not(.dropdown-visible):active {
background-color: rgba(0,0,0,.1) !important;
}
.toolbar-item.toggleable.toggled-on:before,
.toolbar-item.toggleable.toggled-on:after,
#toolbar-dropdown-arrow.dropdown-visible:before,
#toolbar-dropdown-arrow.dropdown-visible:after {
background: {
image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 15%,rgba(0,0,0,.17) 50%,rgba(0,0,0,.05) 85%,rgba(0,0,0,0) 100%), -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 10%,rgba(0,0,0,.23) 50%,rgba(0,0,0,.1) 90%,rgba(0,0,0,0) 100%) !important;
position: 0 0, 1px 0 !important;
repeat: no-repeat !important;
size: 2px 100%, 1px 100% !important;
};
bottom: 0;
content: ' ';
margin: 0 !important;
overflow: hidden;
position: absolute;
right: 0;
text-indent: -1000000px;
top: 0;
width: 2px;
}
.toolbar-item.toggleable.toggled-on:before,
#toolbar-dropdown-arrow.dropdown-visible:before {
background: {
position: right 0, 0 0 !important;
size: 2px 100%, 1px 100% !important;
};
left: 0;
right: auto;
}
.toolbar-label {
color: inherit !important;
line-height: $toolbar_height_compact - 1 !important;
margin: 0 !important;
opacity: 1 !important;
padding: 0 !important;
text-shadow: inherit !important;
top: auto !important;
}
.toolbar-label {
margin: {
left: 0px !important;
right: 0px !important;
};
}
// Toolbar > Compact > Icons
.toolbar-item .toolbar-icon {
display: none !important;
}
}
// Compact > Toolbar (inactive)
&.inactive #toolbar {
.toolbar-item.toggleable.toggled-on,
#toolbar-dropdown-arrow.dropdown-visible {
background-color: rgba(0,0,0,.3) !important;
}
}
// Compact > Toolbar > Dropdown
#toolbar-dropdown {
border: 1px solid rgba(128,128,128,.5);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.5) !important;
left: auto !important;
right: 8px !important;
.toolbar-item {
border-radius: 3px !important;
}
.scrollable-content {
&::-webkit-scrollbar,
&::-webkit-scrollbar-track:horizontal {
width: 8px !important;
}
&::-webkit-scrollbar-thumb {
background-color: #8c8c8c !important;
background-image: none !important;
border-radius: 3px !important;
}
&::-webkit-scrollbar-thumb:vertical,
&::-webkit-scrollbar-thumb:vertical:hover,
&::-webkit-scrollbar-thumb:vertical:active {
min-height: 20px !important;
}
&::-webkit-scrollbar-track {
background: transparent none !important;
border: none !important;
border-radius: 3px !important;
}
&::-webkit-scrollbar-track:hover,
&::-webkit-scrollbar-track:active {
background-color: rgba(100,100,100,.15) !important;
}
}
}
// Adjust body elements for shorter toolbar
#main, .help-window-outer {
top: $toolbar_height_compact !important;
}
}
/** Main */
#-webkit-web-inspector {
// Main > Status Bar
.inspector-footer.status-bar {
border-top: 1px solid #c0c0c0 !important;
box-shadow: 0 -1px 0 rgba(0,0,0,.03) !important;
}
&.inactive .inspector-footer.status-bar {
border-top-color: #cacaca !important;
box-shadow: 0 -1px 0 rgba(0,0,0,.05) !important;
}
// Main > Status Bar > Search
.toolbar-search {
border-spacing: 0 !important;
box-sizing: border-box !important;
display: block !important;
height: $statusbar_height !important;
padding: 2px 4px !important;
width: 100% !important;
tr {
display: inline-block !important;
float: left !important;
&.hidden {
display: none !important;
}
}
td {
border: 0 !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
button {
border-radius: 4px !important;
margin: 0 0 0 4px !important;
width: auto !important;
}
& > tr:first-child > td:first-child + td > button,
& > tr:first-child > td:first-child + td + td > button,
& > tr:first-child > td:last-child > button {
display: none;
}
.search-replace {
-webkit-appearance: none !important;
background-clip: padding-box !important;
background-color: #fff !important;
border-radius: 2px !important;
border: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,.3) inset, 0 0 1px 1px rgba(0,0,0,.35) inset, 0 1px 0 rgba(255,255,255,.4) !important;
box-sizing: border-box !important;
height: $statusbar_height - 4 !important;
left: 0 !important;
line-height: 14px !important;
margin: 0 !important;
outline: none !important;
padding: 0 4px !important;
position: relative !important;
top: 0 !important;
width: 100% !important;
z-index: 0 !important;
}
.toolbar-search-control:active .search-replace,
.search-replace:focus {
box-shadow: 0 0 2px 1px rgba(39,149,244,.8) inset, 0 0 1px 1px rgba(39,149,244,.4), 0 1px 3px rgba(0,0,0,.3) inset, 0 0 1px 1px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.4) !important;
}
.toolbar-search-control {
background: none !important;
border: 0 !important;
margin: 0 !important;
min-width: 265px !important;
padding: 0 !important;
}
.search-results-matches {
line-height: $statusbar_height - 4 !important;
margin: 0 !important;
min-width: 0 !important;
padding: 0 !important;
position: absolute !important;
right: 42px;
top: 0 !important;
z-index: 2 !important;
}
.toolbar-search-navigation-controls {
height: $statusbar_height - 6 !important;
position: absolute !important;
right: 1px !important;
top: 1px !important;
.toolbar-search-navigation-prev,
.toolbar-search-navigation-next {
border-left-color: rgba(0,0,0,.15) !important;
box-sizing: content-box !important;
}
}
.search-replace:focus ~ .toolbar-search-navigation-controls {
box-shadow: 0 1px 2px -1px rgba(33,127,204,.9) inset, -1px 0 2px -1px rgba(39,149,244,.4) inset, 0 -1px 2px -1px rgba(39,149,244,.7) inset !important;
}
input[type="checkbox"] {
margin: 0 0 0 6px !important;
top: 0 !important;
& + label {
margin: 0 6px 0 4px !important;
}
}
}
&.inactive table.toolbar-search .search-replace {
box-shadow: 0 1px 3px rgba(0,0,0,.2) inset, 0 0 1px 1px rgba(0,0,0,.3) inset, 0 1px 0 rgba(255,255,255,.4) !important;
}
}
/** Console */
#-webkit-web-inspector {
#console-prompt,
.console-group-title,
.console-message,
.console-user-command {
&::before {
margin-top: -6px !important;
}
}
.console-group-messages .outline-disclosure {
&, & ol {
line-height: normal !important;
}
}
.outline-disclosure li {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/** Icons */
#-webkit-web-inspector {
// Icons > Console
#error-count-img { content: $icon_error !important; }
.console-error-level::before { background-image: $icon_error !important; }
#warning-count-img { content: $icon_warning !important; }
.console-warning-level::before { background-image: $icon_warning !important; }
}
Raw
Rakefile
sass_parameters = "--scss -texpanded --compass scss/Custom.scss:Custom.css"
task :default do
exec "rake -sf '#{__FILE__}' -T"
end
desc "Remove generated files and the sass cache"
task :clean do
system "[[ -d .sass-cache ]] && rm -r .sass-cache"
end
desc "Compile SCSS to CSS (using sass)"
task :compile => ["clean"] do
system "sass #{sass_parameters}"
end
desc "Watch for changes and compile"
task :watch => ["clean"] do
exec "sass --watch #{sass_parameters}"
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment