Difference between revisions of "MediaWiki talk:Common.css"

From NetHackWiki
Jump to navigation Jump to search
(When background is explicitly set, foreground must also be: new section)
m (More color contrast on skill tables)
 
(5 intermediate revisions by 3 users not shown)
Line 29: Line 29:
 
: I would like this idea. (Back when [[Wikinfo:Main Page|Wikinfo]] used [[Wikinfo:GetWiki|GetWiki]], the TOCs floated right and that was nice.) But I think there might be problems on pages that already have infoboxes (especially the enormous [[Template:Monster]]) at top and right. These infobox templates might occupy the space that the TOC would use.
 
: I would like this idea. (Back when [[Wikinfo:Main Page|Wikinfo]] used [[Wikinfo:GetWiki|GetWiki]], the TOCs floated right and that was nice.) But I think there might be problems on pages that already have infoboxes (especially the enormous [[Template:Monster]]) at top and right. These infobox templates might occupy the space that the TOC would use.
 
: So instead I suggest that editors use <tt><nowiki><div class="floatright">__TOC__</div></nowiki></tt> on individual pages when they want the TOC to float right. This borrows the CSS that MediaWiki normally uses to float images right. --[[User:Kernigh|Kernigh]] 22:39, 3 March 2008 (UTC)
 
: So instead I suggest that editors use <tt><nowiki><div class="floatright">__TOC__</div></nowiki></tt> on individual pages when they want the TOC to float right. This borrows the CSS that MediaWiki normally uses to float images right. --[[User:Kernigh|Kernigh]] 22:39, 3 March 2008 (UTC)
 +
 +
:: Don't know how long this has existed, but we do have <nowiki>{{tocright}}</nowiki> which means you don't have to use custom HTML. --[[User:Phol ende wodan|Phol ende wodan]] ([[User talk:Phol ende wodan|talk]]) 16:05, 7 October 2017 (UTC)
  
 
== Better formatting of Template:ASCII ==
 
== Better formatting of Template:ASCII ==
Line 72: Line 74:
  
 
So like this thing?
 
So like this thing?
/* [[Template:Bugstatus]] */
+
 
 +
<nowiki>/* [[Template:Bugstatus]] */
 
.bugstatus.open { background:red; }
 
.bugstatus.open { background:red; }
 
.bugstatus.fixed { background:lightgreen; }
 
.bugstatus.fixed { background:lightgreen; }
Line 82: Line 85:
 
.table-yes { background: lightgreen; }
 
.table-yes { background: lightgreen; }
 
.table-no { background: pink; }
 
.table-no { background: pink; }
.table-partial { background: #FFF68F; } /* yellowish */
+
.table-partial { background: #FFF68F; } /* yellowish */</nowiki>
  
 
All those backgrounds need to also have a foreground set. Probably to black, or #252525 which seems to be the default "black" used on the wiki.
 
All those backgrounds need to also have a foreground set. Probably to black, or #252525 which seems to be the default "black" used on the wiki.
 +
 +
http://sprunge.us/Dcij two users who have poor eyesight and use a dark theme to improve readability, but are both continually stymied by the fact that the wiki CSS frequently sets a background color for an element without explicitly setting a foreground color that can be caught and inverted. --[[User:Testbutt|Testbutt]] ([[User talk:Testbutt|talk]]) 17:34, 2 December 2017 (UTC)
 +
 +
== More color contrast on skill tables ==
 +
 +
Can I propose the following CSS change to increase the color contrast on the [[Skill#Skill tables|skill tables]]?
 +
 +
[https://i.imgur.com/US59WkB.png Here's a comparison of the before-and-after.]
 +
 +
<pre>
 +
 +
/* Skill tables, [[NetHackWiki:Skill_table_generator]] */
 +
.Spell-skilltable .restricted,
 +
.Combat-skilltable .restricted,
 +
.Weapon-skilltable .restricted    { /* default */ }
 +
.Spell-skilltable .basic,
 +
.Combat-skilltable .basic,
 +
.Weapon-skilltable .basic        { background-color: #FFA74F; color: #000000; }
 +
.Spell-skilltable .skilled,
 +
.Combat-skilltable .skilled,
 +
.Weapon-skilltable .skilled      { background-color: #FAFA00; color: #000000; }
 +
.Spell-skilltable .expert,
 +
.Combat-skilltable .expert,
 +
.Weapon-skilltable .expert        { background-color: #7BFF7B; color: #000000; }
 +
.Spell-skilltable .master,
 +
.Combat-skilltable .master,
 +
.Weapon-skilltable .master        { background-color: #006800; color: #FFFFFF; }
 +
.Spell-skilltable .grandmaster,
 +
.Combat-skilltable .grandmaster,
 +
.Weapon-skilltable .grandmaster  { background-color: #006800; color: #FFFFFF; }
 +
.Spell-skilltable .unknown_skill,
 +
.Combat-skilltable .unknown_skill,
 +
.Weapon-skilltable .unknown_skill { background-color: #00FAFA; color: #000000; }
 +
 +
</pre>
 +
 +
[[User:Infinigon|Infinigon]] ([[User talk:Infinigon|talk]]) 03:18, 17 January 2021 (UTC)
 +
 +
:Changed to those colors. Thanks! ——[[User:Paxed|paxed]] ([[User talk:Paxed|talk]]) 08:14, 17 January 2021 (UTC)

Latest revision as of 08:14, 17 January 2021

Someone who can edit protected pages needs to edit the color templates to use css and move the style stuff into common.css. This'll reduce bandwidth on pageloads. --Paxed 21:16, 27 February 2008 (UTC) For example, instead of having

<span style="color:#FFFF55; background-color:#000000; font-family: monospace; padding: 2px; font-weight: bold; font-size: large;">

we'd have

<span class="nhsym-yellow">

--Paxed 21:28, 27 February 2008 (UTC)

  • I might be willing to put all but the foreground color into common.css, so that we get most of the benefit of your idea but the color remains publicly editable.--Ray Chason 03:51, 28 February 2008 (UTC)
Why should the foreground color stay out of the css? If the user wishes to override the 16 symbol colors (which are standard colors anyway), he can set up his own css file in his userspace, afaik. Anon users have no reason to edit the colors without talking it over in the talk pages... --Paxed 07:00, 28 February 2008 (UTC)
As an example, see my User:Paxed/monobook.css, which definitely works when used like this in the color templates:
<span class="nhsym clr-yellow">d</span>

--Paxed 08:23, 28 February 2008 (UTC)

I see no reason to not do this. The 16 standard colors aren't likely to change. If people want to use custom colors, the style attribute would of course remain available. Eidolos 21:59, 29 February 2008 (UTC)
I like how Ray Chason inserted a single "nhsym" into common.css, instead of using the first idea from Paxed for multiple "nhsym-foo" classes. But I think that it is okay to have "clr-foo" classes, because as Eidolos suggests, anyone can edit class="nhsym clr-foo" into class="nhysm" style="color: #foo". So I am copying the clr-foo stuff from User:Paxed/monobook.css to MediaWiki:Monobook.css. --Kernigh 22:39, 3 March 2008 (UTC)

nhsym has lost all black backgrounds and formatting on my rendering

I have noticed that the use of nhsym has removed the black background and uniform character spacing from in-game glyphs! This now looks awful, and white characters disappear on the white background of a default page rendering. -- Kalon 04:44, 28 February 2008 (UTC)

I've reverted the template edits, and left class nhsym standing for further testing. All should be well now.--Ray Chason 05:21, 28 February 2008 (UTC)
I'd be willing to bet Kalon's browser was using an old, cached version of common.css --Paxed 07:00, 28 February 2008 (UTC)

Floating TOCs

We might want to put the following in common.css to make all TOCs float to right; I think it looks much better than the normal behaviour where the Table of Contents is in the normal page flow

#toc { float: right; }

--Paxed 11:40, 28 February 2008 (UTC)

A purple spellbook that floats to the right of this page.
I would like this idea. (Back when Wikinfo used GetWiki, the TOCs floated right and that was nice.) But I think there might be problems on pages that already have infoboxes (especially the enormous Template:Monster) at top and right. These infobox templates might occupy the space that the TOC would use.
So instead I suggest that editors use <div class="floatright">__TOC__</div> on individual pages when they want the TOC to float right. This borrows the CSS that MediaWiki normally uses to float images right. --Kernigh 22:39, 3 March 2008 (UTC)
Don't know how long this has existed, but we do have {{tocright}} which means you don't have to use custom HTML. --Phol ende wodan (talk) 16:05, 7 October 2017 (UTC)

Better formatting of Template:ASCII

[Template:ASCII]] looks better if the table elements are in a monospace font; this makes all characters equally clickable, and naturally makes the columns even width.

Rather than add style="font-family: monospace;" to each cell, I would like to use CSS to do this.

I have added the style "asciitable" to the template. Adding the following to my local CSS achieves the desired effect:

table.asciitable td {font-family: monospace;}

Please could this be added to the global CSS, unless someone has a better method to achieve this?

Many thanks,

--82.43.209.193 16:38, 21 June 2008 (UTC)

Oops I was logged out. That was me. --Rogerb-on-NAO 16:42, 21 June 2008 (UTC)

Never mind, I worked out how to do it.
--Rogerb-on-NAO 17:30, 21 June 2008 (UTC)

Interline gaps in ttymaps

There's a small problem with the line spacing in ttymaps: it leaves gaps between line drawing characters on one line and those on the next. See, for example, Template:Random_ttymap/ttymap2:

Do you want an account of creatures vanquished? [ynq] (n)                       
                                  #                                             
                         ##############   ┌────┐                                
                        ┌─#    #  ###   ┌┘····│┌──┐                            
                      ┌─┘··│    ######   │·····└┘··│                            
                      │····│    ##*###   └┐········│           └┐               
                    ┌─┘·┌──┘  #   ####─┐ │···──···└┐         ··│               
            ┌──┐    │···###########··#··└─┘·│·······│┌──┐ ─┘····│               
          ┌─┘<·└────┘·┌─┘        #··········├──·····└┘··└┘·····┌                
          │··)········│          │······#####··^···············└                
      ┌─┬─┘)··)┌──┐··─┴┐         └──┐··*└┐###···#·┌┐·─··········└               
     ┌┘·│····│·└┐ │····│          ┌─┘*···│#··│^┌┴─┘│····┌┐ ┌─┐  ···┌            
     │·)··┌──┤··└┐│····└──┬─┐     │···┌┐·└┘··├─┘   └─┐·─┴┐         │            
 ┌──┬┘····│  │···││·······│·└──┐┌─┘·[#┘│···┌─┼──┐  ┌─┘···│                      
 │··│····┌┘┌─┘··┌┘│···········'└┘···##*└##·└─┤··└┐ │·····│                      
 │·······│┌┘····│ │··········rrr··┌#┘#####···│···│ │·^··>··┌                    
 └┐·┌─┐··││····┌┘┌┘^·········r@r··│  ###········┌┘ │·┌┐···┌┘                    
  └─┘ └┐·└┤···┌┘┌┘·······%···rrr%┌┘ ###········└┐ └─ └┐·┌┘                     
      ┌┴─·├───┘┌┘···············┌#####···········│     └─┘                      
      │···│    │·····│········┌─┘   #└#·····┌─┐·┌┘                              
      │··┌┘    │·│··┌┴┐·│·│·┌─┘      #└─┐·┌─┘ └─┘                               
      └──┘     └─┴──┘ └─┴─┴─┘           └─┘                                     
Dudefella the Skirmisher    St:18/06 Dx:13 Co:18 In:7 Wi:9 Ch:7  Lawful S:1545  
Dlvl:3  $:185 HP:0(52) Pw:15(15) AC:6  Xp:5/315 T:1750                          

I'm seeing this in both Google Chrome version "11.0.696.44 beta" and Internet Explorer 8; I expect Firefox is the same, but I've already got 2.5x stuff loaded as can fit in RAM, so I haven't actually tried it.

I tried disabling all the applicable "line-height" rules, but that doesn't seem to actually help, and with some combinations of enabledness I even get white bands between lines! I begin to doubt that there is a way to fix this within current CSS standards. —SamB 22:45, 31 May 2011 (UTC)

When background is explicitly set, foreground must also be

For compatibility with user CSS or browser-plugins that enable "night mode" or other browser-plugins for users with poor vision, this kind of css is bad: http://i.imgur.com/1tGxc5R.png

It results in things that look like this: http://i.imgur.com/lOZmXuw.png

So like this thing?

/* [[Template:Bugstatus]] */ .bugstatus.open { background:red; } .bugstatus.fixed { background:lightgreen; } .bugstatus.nextversion { background:green; } .bugstatus.help { background:yellow; } .bugstatus.not_a_bug { background:lightblue; } .bugstatus.superseded {} .table-yes { background: lightgreen; } .table-no { background: pink; } .table-partial { background: #FFF68F; } /* yellowish */

All those backgrounds need to also have a foreground set. Probably to black, or #252525 which seems to be the default "black" used on the wiki.

http://sprunge.us/Dcij two users who have poor eyesight and use a dark theme to improve readability, but are both continually stymied by the fact that the wiki CSS frequently sets a background color for an element without explicitly setting a foreground color that can be caught and inverted. --Testbutt (talk) 17:34, 2 December 2017 (UTC)

More color contrast on skill tables

Can I propose the following CSS change to increase the color contrast on the skill tables?

Here's a comparison of the before-and-after.


/* Skill tables, [[NetHackWiki:Skill_table_generator]] */
.Spell-skilltable .restricted,
.Combat-skilltable .restricted,
.Weapon-skilltable .restricted    { /* default */ }
.Spell-skilltable .basic,
.Combat-skilltable .basic,
.Weapon-skilltable .basic         { background-color: #FFA74F; color: #000000; }
.Spell-skilltable .skilled,
.Combat-skilltable .skilled,
.Weapon-skilltable .skilled       { background-color: #FAFA00; color: #000000; }
.Spell-skilltable .expert,
.Combat-skilltable .expert,
.Weapon-skilltable .expert        { background-color: #7BFF7B; color: #000000; }
.Spell-skilltable .master,
.Combat-skilltable .master,
.Weapon-skilltable .master        { background-color: #006800; color: #FFFFFF; }
.Spell-skilltable .grandmaster,
.Combat-skilltable .grandmaster,
.Weapon-skilltable .grandmaster   { background-color: #006800; color: #FFFFFF; }
.Spell-skilltable .unknown_skill,
.Combat-skilltable .unknown_skill,
.Weapon-skilltable .unknown_skill { background-color: #00FAFA; color: #000000; }

Infinigon (talk) 03:18, 17 January 2021 (UTC)

Changed to those colors. Thanks! ——paxed (talk) 08:14, 17 January 2021 (UTC)