mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-02-24 05:43:28 +01:00
Code Issues Releases Wiki Activity

add scrollbar stylings to code segments

Browse Source
This commit is contained in:
Daniel Biegler 2019-04-07 06:06:33 +02:00
parent be7c578056
commit 4aac7ed620
4 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/dark.css vendored
View File

@ -1 +1 @@
body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#324759}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px}table,th,td{border:1px solid #dbdbdb}
body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#324759}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto;scrollbar-color:#3b5469 #2c3f4f;scrollbar-width:thin}pre>code::-webkit-scrollbar{height:10px}pre>code::-webkit-scrollbar-track{background:#2c3f4f;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb{background:#3b5469;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb:hover{background:#1c2832}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px}table,th,td{border:1px solid #dbdbdb}

2
dist/light.css vendored
View File

@ -1 +1 @@
body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#ddd}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px}table,th,td{border:1px solid #dbdbdb}
body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#ddd}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto;scrollbar-color:#eaeaea #d5d5d5;scrollbar-width:thin}pre>code::-webkit-scrollbar{height:10px}pre>code::-webkit-scrollbar-track{background:#d5d5d5;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb{background:#eaeaea;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb:hover{background:#bebebe}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px}table,th,td{border:1px solid #dbdbdb}

2
index.html
View File

@ -74,7 +74,7 @@
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>

24
src/parts/_code.scss
View File

@ -9,4 +9,26 @@ pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}
scrollbar-color: lighten($button-hover, 5%) darken($button-hover, 3%); /* Firefox see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars */
scrollbar-width: thin; /* Firefox see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars */
}
pre > code::-webkit-scrollbar {
height: 10px;
}
pre > code::-webkit-scrollbar-track {
background: darken($button-hover, 3%);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
pre > code::-webkit-scrollbar-thumb {
background: lighten($button-hover, 5%);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
pre > code::-webkit-scrollbar-thumb:hover {
background: darken($button-hover, 12%);
}