Fossil Forum

Skin tweaks for disabled submit button
Login

Skin tweaks for disabled submit button

Skin tweaks for disabled submit button

(1) By brickviking on 2023-03-15 22:03:24 [source]

Okay, here's what I managed to roughly work out for the Blitz skin. Could you poke this into life if it needs poking? I'll get patches in for the other two skins in a few.

Index: skins/blitz/css.txt
==================================================================
--- skins/blitz/css.txt
+++ skins/blitz/css.txt
@@ -563,10 +563,14 @@
   color: white !important;
   background-color: #648898;
   border-color: #648898;
 }
 
+input[type="submit"]:disabled {
+  color: #808080;
+  background-color: #999;
+}
 
 

The Ardoise skin will take a little more work, as the hover still happens, even though the button does appear obviously disabled. Once again, could someone tweak this if it needs it?

Index: skins/ardoise/css.txt
==================================================================
--- skins/ardoise/css.txt
+++ skins/ardoise/css.txt
@@ -306,10 +306,14 @@
   box-sizing: border-box;
   text-decoration: none;
   text-align: center;
   white-space: nowrap;
   cursor: pointer
+}
+input[type=submit]:disabled {
+  color: #808080;
+  background-color: #999;
 }
 @media (min-width:550px) {
   .container {
     width: 95%
   }

Cheers, brickviking

(Post 16)

(2) By Stephan Beal (stephan) on 2023-03-16 12:41:55 in reply to 1 [link] [source]

Okay, here's what I managed to roughly work out for the Blitz skin.

Before applying these, just one question: are these specific to the forum or do they also apply in pages such as the checkin and ticket editors? (The answer changes the CSS formulation a bit.)

(3) By brickviking on 2023-03-16 21:24:57 in reply to 2 [link] [source]

I only noticed the visual ambiguity by pure accident, but ideally, I was concentrating on the forum post interface. I don't know what happens in regard to ticket and checkin editors, as I haven't used either of those. I'm sort of counting on the good judgement of the greybeards around here to know where it best applies.

On my part, it's a first try, which appears to work well enough here that I can try to extend it elsewhere. Frankly I was surprised to see the hover effect still work on a disabled button, though I can't obviously click through it. In the case of a Cancel button, that's obviously not going to be disabled, but in the case of a Submit button that's been disabled, it should behave as if it were disabled.

Anyhow, I've sent a waiver off to Richard, he'll get to it when he gets to it, I guess.

Thanks for looking at this for me. I was trying to think of a witty definition for greybeard, but I can't make one up that doesn't sound decidedly un-wittish.

Regards, brickviking

(Post 17)

(4) By Stephan Beal (stephan) on 2023-03-17 11:40:22 in reply to 3 [link] [source]

I'm sort of counting on the good judgement of the greybeards around here to know where it best applies. ... I was trying to think of a witty definition for greybeard, but I can't make one up that doesn't sound decidedly un-wittish.

To the best of my knowledge, most of the of active developers here who are old enough to be grey are clean-shaven1, quite possible in order to hide the grey hairs :).

i'll get your suggestions applied to just the forum for the time being and we can easily change that to apply globally if the need comes up.


  1. ^ Only two exceptions readily come to mind. No, Mark, you're not yet in that age group.

(5) By mark on 2023-03-17 11:46:53 in reply to 4 [link] [source]

Only two exceptions readily come to mind. No, Mark, you're not yet in that age group.

:D

CSS and web ui are not in my wheelhouse but I'm more than happy with what you deem best, and appreciate the Viking's work here too!

(6) By Stephan Beal (stephan) on 2023-03-17 11:55:20 in reply to 4 [link] [source]

i'll get your suggestions applied to just the forum for the time being

Scratch that - they're applied globally. i took the liberty of making the text a tick darker for the Ardoise button to increase contrast and to reformulate the #RGB color codes to rgb(...) so the patch differs slightly from the forum post (same semantics, different licensing implications!).

Thank you for the continued feedback!

(7) By brickviking on 2023-03-17 22:41:37 in reply to 6 [link] [source]

Yup. As I said, the waiver is in Richard's Inbox already, so licencing shouldn't be an issue. In addition, I'd stuck with #aabbcc to stick stylistically with what was already in the css source, but rgb() works for me too. I guess there's not much point reworking every source text to rgb() standards, given that both are currently accepted.

Rework looks good, I was really trying to target the hover effect and disable it for the disabled submit button.

Regards, brickviking

(Post 18)

(8) By brickviking on 2023-03-18 11:19:50 in reply to 1 [link] [source]

As promised, here's the darkmode version, sorry it took me so long to get back to this. It's much like the rework for ardoise that stefan reworked for me. If y'all can think of better matches for the theme, then fire away, but I think this is the best I can come up with.

Index: skins/darkmode/css.txt
==================================================================
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -126,10 +126,14 @@
 input[type=submit]:hover {
   background-color: #FF4500f0;
   color: rgba(24,24,24,0.8);
   outline: 0
 }
+input[type=submit]:disabled {
+  color: rgb(70, 70, 70);
+  background-color: rgb(112, 112, 112);
+}
 .button:focus,
 button:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
 input[type=submit]:focus {

Cheers, brickviking

(Post 19)