zer09 · October 20, 2017 14:14 · May 2, 2012 · May 2, 2012 · May 2, 2012 · May 2, 2012
diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,69 @@
+/**
+ * Like, basically PERFECT scrollbars
+ */
+
+/* 
+   It's pure CSS. 
+   Since a quick google search will confirm people going crazy about Mac OS Lion scrollbars...
+   this has no fade-out effect.
+  
+   In Mac OS Lion, the lowest common denominator is always showing scrollbars by a setting.
+   So, this fits that lowest common denominator.
+
+   Facebook, lifehacker, and Google have all basically taken this approach. Of course Google uses incredibly ugly square scrollbars, but so be it.
+   Also, in regards to the fade in/out effect, this may just be one reason why soo many people outraged (and still hide) the ticker.
+
+   Ending note: I recommend this for non-lion users. As a lion user, I prefer my fading out scrollbars. If you sniff a UA of mac os lion, don't add this css.
+*/
+
+
+/* Turn on custom 8px wide scrollbar */
+::-webkit-scrollbar {
+  width: 8px; /* 1px wider than Lion. */
+  /* This is more usable for users trying to click it. */
+  background-color: rgba(0,0,0,0);
+  -webkit-border-radius: 100px;
+}
+/* hover effect for both scrollbar area, and scrollbar 'thumb' */
+::-webkit-scrollbar:hover {
+  background-color: rgba(0, 0, 0, 0.09);
+}
+
+/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+::-webkit-scrollbar-thumb:vertical {
+  /* This is the EXACT color of Mac OS scrollbars. 
+     Yes, I pulled out digital color meter */
+  background: rgba(0,0,0,0.5);
+  -webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
+  -webkit-border-radius: 100px;
+}
+
+/*
+  After doing my first post here on Dabblet, I dug into their custom 
+  scrollbar css.
+  
+  here that is, I starred the box-shadow css for the nice pop.
+  
+section.page:not(.focus):not(:hover)::-webkit-scrollbar {
+  display: none;
+}
+::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
+  border: 5px solid transparent;
+  border-radius: 999px;
+}
+::-webkit-scrollbar-track {
+  ** box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; **
+}
+::-webkit-scrollbar-thumb {
+  background: url(/img/noise.png);
+  background-clip: content-box;
+  ** box-shadow: 0 0 0 5px hsla(24, 20%, 50%,.4) inset; **
+  min-height: 20px;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+*/
diff --git a/settings.json b/settings.json
@@ -1 +1 @@
-{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
+{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
diff --git a/dabblet.css → clean-scrollbar.css b/dabblet.css → clean-scrollbar.css
diff --git a/dabblet.html b/dabblet.html
@@ -12,6 +12,14 @@
 <p> lorem ipsum baller filler text </p>
 <p> lorem ipsum baller filler text </p>
 <p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
 
 
 

diff --git a/settings.json b/settings.json
@@ -1 +1 @@
-{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
+{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,45 @@
+/**
+ * Like, basically PERFECT scrollbars
+ */
+
+/* 
+   It's pure CSS. 
+   Since a quick google search will confirm people going crazy about Mac OS Lion scrollbars...
+   this has no fade-out effect.
+  
+   In Mac OS Lion, the lowest common denominator is always showing scrollbars by a setting.
+   So, this fits that lowest common denominator.
+
+   Facebook, lifehacker, and Google have all basically taken this approach. Of course Google uses incredibly ugly square scrollbars, but so be it.
+   Also, in regards to the fade in/out effect, this may just be one reason why soo many people outraged (and still hide) the ticker.
+
+   Ending note: I recommend this for non-lion users. As a lion user, I prefer my fading out scrollbars. If you sniff a UA of mac os lion, don't add this css.
+*/
+
+
+/* Turn on custom 8px wide scrollbar */
+::-webkit-scrollbar {
+  width: 8px; /* 1px wider than Lion. */
+  /* This is more usable for users trying to click it. */
+  background-color: rgba(0,0,0,0);
+  -webkit-border-radius: 100px;
+}
+/* hover effect for both scrollbar area, and scrollbar 'thumb' */
+::-webkit-scrollbar:hover {
+  background-color: rgba(0, 0, 0, 0.09);
+}
+
+/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+::-webkit-scrollbar-thumb:vertical {
+  /* This is the EXACT color of Mac OS scrollbars. 
+     Yes, I pulled out digital color meter */
+  background: rgba(0,0,0,0.5);
+  -webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
+  -webkit-border-radius: 100px;
+}
+
+background: linear-gradient(45deg, white, silver);
+min-height: 100%;
diff --git a/dabblet.html b/dabblet.html
@@ -0,0 +1,34 @@
+<!-- content to be placed inside <body>…</body> -->
+What what? Checkout the scrollbar to the right -->
+
+
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+<p> lorem ipsum baller filler text </p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/settings.json b/settings.json
@@ -0,0 +1 @@
+{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
		{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
		{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}