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)

.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)

.hidenew idea

If we had this defined in common.css then we could use it to hide red links which automatically have class new on them if I understand correctly.

.hidenew > .new {
    display: none;
}

So doing <span class="hidenew">[[this will be redlink]]</span> would automatically hide the link if it's red. I am thinking this would be useful for list of languages where currently lot of #ifexist are used.