MediaWiki talk:Common.css

This is the discussion page of MediaWiki:Common.css. To add a comment, use the Edit button near the headline of the appropriate section. To create a new section, you can use the Add topic button at the top of this page.
Comments on talk pages should be signed with "~~~~", which will be converted into your signature and a timestamp.

Is there any way someone could get to work? --TheLazyPanda (talk) 01:47, 19 Jan 2010 (UTC)

or the user styles --Karl-police (talk) 19:06, 13 Oct 2023

Fix the category block

As stated on the Project:Necessary Features#Bugs_needed_to_fix, it is worth removing the height property from .catlinks block which causes the text to go out of bounds if there are more categories than can fit on one line.

As I understand it, common.css can only add new styles, so here is a simple code that should work:

Common.css (this code has property user-select:all)

1.  
2.  
3.  

.catlinks { height: auto; }

This problem becomes most noticeable when the hidden categories mode is enabled.

Personally, I would like to suggest also adding the border-radius: 4px; property, but whether to add this or not is up to you. --Max34 (talk) 00:45, 18 June 2024 (PDT)

Purple links

This change isn't going to stay, I hope? Cvoxalury (talk) 16:31, 19 June 2024 (PDT)

They were purple before, just darker. I'm currently trying to make text more readable; I've removed it for now. PabloS (talk) 16:44, 19 June 2024 (PDT)

External ones were, but for a brief time when I wrote that, the in-wiki ones were purple, at least on my end. Anyway, thanks, sorry for bothering you. Cvoxalury (talk) 16:45, 19 June 2024 (PDT)

Since the site upgrade, would it be better to change the external links color now? Some of them that are on a different background color are hard to read, so maybe changing to this color would work "#884488" instead of this one "#663366"? --N0one (talk) 02:29, 11 April 2025 (PDT)

Example for reference. I concur on N0one's suggestion.
— SirYodaJedi (talk) 07:31, 11 April 2025 (PDT)

.mw-highlight should have an invert and hue rotate filter applied.

Syntax highlighting isn't currently inverted and hue rotated in some contexts, such as on the documentation page for {{CodeBlock}}. ―Pee (talk) 18:27, 19 June 2024 (PDT)

Difference table

When I was working on my extension, I tried fixing the diff table (the one that appears when you click on the “Show changes” button when editing or the one when you compare versions of a page).

I don’t pretend that this will be added, but I would like to write this code here in case someone needs it.

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  

table.diff { background-color: #202020; color: white; border: 1px solid #666666; border-radius: 4px; } td.diff-otitle, td.diff-ntitle { background-color: #3A3A3A; color: #D8D7D6; border-radius: 4px; } td.diff-deletedline, td.diff-addedline { color: #D8D7D6; background-color: #303030; border-color: #666; } td.diff-context { background: #303030; color: #D8D7D6; border-color: transparent; } .diffchange { color: white; } .diff-addedline .diffchange { background: #194C7D; } .diff-deletedline .diffchange { background: #B78100; }

--Max34 (talk) 23:43, 19 June 2024 (PDT)

Please keep light background for code/source boxes

With the 'dark theme' the text becomes unpleasantly sharper and is harder to follow. The previous version was quite fine.

I mean things like

things like "" this ""

Cvoxalury (talk) 04:08, 20 June 2024 (PDT)

Add support for dropdown menus

There are enough languages that some pages titles can be covered by the flags (such as SDK Docs). Replacing the menu with a dropdown would fix this. some CSS can be used to make a dropdown menu:

/* Dropdown menus */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #393939;
    align-items: center;
    padding: 4px;

    border: 1px solid #454545;
    border-radius: 3px;
}

.dropdown-content {
    display: none;
    padding: 4px;
    background-color: #393939;
    border: 1px solid #454545;
    border-radius: 3px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

here is an example of what it might look like. I'm not the best at CSS, so it might need some tweaking later. ―Pee (talk) 11:45, 25 June 2024 (PDT)

Show changes colors

The previous show changes were a lot easier to read and look better imo -Nescius (talk) 12:27, 25 June 2024 (PDT)

Highlighting talk namespace links in recent changes suggestion

This is how it would look. Not suggesting for it to be exactly this color or way of highlighting but would be nice to have talk namespace edits highlighted in recent changes

.mw-changeslist-title[title ^= 'Talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'User talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'Category talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'Valve Developer Community talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'Help talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'File talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'MediaWiki talk:'] {
  color: orange;
}
.mw-changeslist-title[title ^= 'Template talk:'] {
  color: orange;
}

--Nescius (talk) 14:23, 1 August 2024 (PDT)

css to hide (en) part of language links

This one would be very useful css to have. Template {{L}} is widely used on translated pages and adds (en) at the end of the links that links to english page because many links are red. Problem is it happens even for blue links. css would solve that issue and hide the (en) link automatically if the linked translated page exists. The class is already set in Template:L so it's now only a matter of adding the following to common.css. For an example see Zh/List_of_L4D2_Entities.

.hideifnotnew {
	display: none;
}	
.new + .hideifnotnew {
	display: initial;
}

Dark theme for scrollbars

I noticed that the scrollbars were showing in light theme, so I quickly made a dark theme with this style: scrollbar-color: #686868 #424242 !important;.

I added the code to the body tag (body { ... }). --N0one (talk) 13:07, 22 March 2025 (PDT)