Topics

off-topic -scrollbars

Cliff
 

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Eric Selje
 

Very cool.

I get a cert error on hawkrdge.com btw.  Time for some Let'sEncrypt?

E


On Tue, May 5, 2020 at 1:13 PM Cliff <cliff@...> wrote:

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Cliff
 

that's hawkrdg.com and I am still redoing my letsencrypt cert to include hawkrdg.com, www.hawkrdg.com as well as my .org domain - chrome worked just fine but firefox threw the untrusted cert error - should be done by tomorrow. Also took a little diddling to get apache to redirect properly to https. I was going to install an express server but as long as I can get apache, which came with my vps, to work its OK.

The scrollbars open up a much better front-end experience without much work at all - having them filter through the selects, etc is great...

Took me an hour or so to figure out the sass mixin to export css variables - after all, I'm a stylus user. However, once I got a handle on that I was able to node-sass all my different theme css files, way cool.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/5/2020 7:43 PM, Eric Selje wrote:
Very cool.

I get a cert error on hawkrdge.com btw.  Time for some Let'sEncrypt?

E


On Tue, May 5, 2020 at 1:13 PM Cliff <cliff@...> wrote:

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Cliff
 

Hey Eric:

If you would do me the favor of checking hawkrdg.com again. I think I've got all the cert stuff redone properly. Lot of time ssh'd into the server with putty and a lot of sudo apt-get. BUT... firefox did not complain about the new cert and chrome worked fine - I don't do safari, but assume it will be OK too.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/5/2020 7:43 PM, Eric Selje wrote:
Very cool.

I get a cert error on hawkrdge.com btw.  Time for some Let'sEncrypt?

E


On Tue, May 5, 2020 at 1:13 PM Cliff <cliff@...> wrote:

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Stein Goering
 

The site comes up for me, but all I can see is the Ubuntu default page…

 

From: MadFox@groups.io On Behalf Of Cliff
Sent: Tuesday, May 05, 2020 11:37 PM
To: MadFox@groups.io
Subject: Re: [MadFox] off-topic -scrollbars

 

Hey Eric:

If you would do me the favor of checking hawkrdg.com again. I think I've got all the cert stuff redone properly. Lot of time ssh'd into the server with putty and a lot of sudo apt-get. BUT... firefox did not complain about the new cert and chrome worked fine - I don't do safari, but assume it will be OK too.

 

--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/5/2020 7:43 PM, Eric Selje wrote:

Very cool.

 

I get a cert error on hawkrdge.com btw.  Time for some Let'sEncrypt?

 

E

 

 

On Tue, May 5, 2020 at 1:13 PM Cliff <cliff@...> wrote:

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}
 

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.

 

--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Eric Selje
 

Looks great!

Coincidentally I had cert issues too which was making it impossible to leave comments on my blog (not that anyone tried). Fixed.

E


On Tue, May 5, 2020 at 11:36 PM Cliff <cliff@...> wrote:

Hey Eric:

If you would do me the favor of checking hawkrdg.com again. I think I've got all the cert stuff redone properly. Lot of time ssh'd into the server with putty and a lot of sudo apt-get. BUT... firefox did not complain about the new cert and chrome worked fine - I don't do safari, but assume it will be OK too.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/5/2020 7:43 PM, Eric Selje wrote:
Very cool.

I get a cert error on hawkrdge.com btw.  Time for some Let'sEncrypt?

E


On Tue, May 5, 2020 at 1:13 PM Cliff <cliff@...> wrote:

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Cliff
 

try again - I was rebuilding everything late last night - should be fine now and fully redirected to https



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/6/2020 12:17 AM, Stein Goering wrote:

The site comes up for me, but all I can see is the Ubuntu default page…

 

From: MadFox@groups.io On Behalf Of Cliff
Sent: Tuesday, May 05, 2020 11:37 PM
To: MadFox@groups.io
Subject: Re: [MadFox] off-topic -scrollbars

 

Hey Eric:

If you would do me the favor of checking hawkrdg.com again. I think I've got all the cert stuff redone properly. Lot of time ssh'd into the server with putty and a lot of sudo apt-get. BUT... firefox did not complain about the new cert and chrome worked fine - I don't do safari, but assume it will be OK too.

 

--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/5/2020 7:43 PM, Eric Selje wrote:

Very cool.

 

I get a cert error on hawkrdge.com btw.  Time for some Let'sEncrypt?

 

E

 

 

On Tue, May 5, 2020 at 1:13 PM Cliff <cliff@...> wrote:

 this is not VFP but most of us are involved in writing for the web.  I have always hated the standard scrollbar and for a long time styling them has been a real PITA, especially trying to get selects and lists styled. So I like to include various 'themes' for my apps and have finally got a very easy way to style all the scrollbars including selects and lists with only a tiny bit of CSS. Here's the code:

* {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.25); //thumb-color track-color
  scrollbar-width: thin; //right now you only get auto, inherit, or thin
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
}
 

put this in your overall CSS and every scrollbar will be styled. Firefox uses the new CSS scrollbar-color/width and Chrome/Edge/Safari use the webkit prefix.

I am using a CSS variable --primary-color to allow transparent theme switching in my apps. I added a sass mixin to my angular material theme generator to export various colors to CSS but if you are not switching themes just hard code the color. -webkit allows a bit more control at this time, but that will change as the CSS standard gets finalized. hawkrdg.com will give you a quick example (chord tool selects and chord tool stringsets). Chrome & Firefox look a little different, but not much.

 

--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

Cliff
 

FWIW - I originally setup my cert for hawkrdg.com - chrome was fine, but firefox choked on www.hawkrdg.com not being hawkrdg.com. I destroyed the cert and redid it with both hawkrdg.com & www.hawkrdg.com. My cert now contains hawkrdg.com & www.hawkrdg.com as alternate names. My Apache ssl-vhost.conf now has a ServerAlias as well as a ServerName in it.

This is, of course, a Let'sEncrypt cert. I installed certbot on my server and it setup a cron job to automatically renew the cert every quarter - sweet. Certbot also did most of the configuration on apache2. The first time through I let certbot do the auto-redirect. Certbot added some 'rewrite' lines to http-vhost.conf and that did not work, second time I did it myself  and added a 'redirect permanent' line to http-vhost.conf - that did the trick.

Hopefully this will help someone else - Firefox is much more anal on security stuff. AND, BTW, if you have to manage a linux server there is nothing like apt-get install webmin, a great web-based gui tool to do most anything you want. I still use Putty as the terminal responds quicker than the one in webmin, but everything else is great.



--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 5/6/2020 5:47 AM, Eric Selje wrote:
Looks great!

Coincidentally I had cert issues too which was making it impossible to leave comments on my blog (not that anyone tried). Fixed.

E

_,_