Skin talk:Citizen/2020

Manually switching between light and dark mode

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hi! First, let me tell you that I really like your skin. It looks very modern and is by far the best looking one in my opinion. However, I wondered if it was possible to manually switch between light and dark mode. Both look nice to me, but there are certainly users that strongly prefer either one of them and I also would appreciate the possibility in picking which color scheme I want to use instead of letting my OS or app decide.

So is there a possibility to set a variable in the settings or skin files to disable the auto choosing? Or even better: Is there a way to let every user decide in the respective user settings or even side bar? Robohendl (talk) 20:02, 22 July 2020 (UTC)

Glad that you like it!

Manually switching color scheme is not possible at the moment but it is a planned feature that I am looking into. I don't have an ETA at the moment since it requires some refactor and will take a while to rework it. Alistair3149 (talk) 18:59, 25 July 2020 (UTC)

Hey there! Manual theme switching is added in the latest version. You can toggle the theme using the toggle button on the header or in Special:Preferences if you're logged in. Alistair3149 (talk) 22:48, 15 January 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

ToC in Print View

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hey there! First of all, thanks a lot for creating this skin. It's so much better than Vector :P

Just want to quickly point out, it seems like the ToC on the left is visible in the printable version, covering some contents. Maybe a @media block will fix it?

Thanks again! Leranjun (talk) 10:02, 17 October 2020 (UTC)

Thanks and thanks for letting me know! It'll be fixed tomorrow! Alistair3149 (talk) 03:50, 19 October 2020 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Page Forms extension issues

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hi, I have this skin installed on a Miraheze wiki and using the Page Forms extension. I am having and issue with certain form elements not functioning (for example input types “combo box” and “tokens”) and thought it might be skin related. I just wanted to see if that rings any bells as a known issue or not before going much further. Thanks! GrapheneBob (talk) 03:33, 20 October 2020 (UTC)

I'm not sure if it is skin-related. Do you have a live example that I can take a look at? Alistair3149 (talk) 04:22, 26 October 2020 (UTC)

I have the same suspicion as GrapheneBob. Have you found a solution? Josua Koenig (talk) 09:11, 31 August 2021 (UTC)

Sorry, it wasn't a bug. Now it works for me, I had syntax errors. Josua Koenig (talk) 11:30, 2 September 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Invalid media query

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hi, I'm trying to change some styles using parameter:

@media (prefers-color-scheme: dark) in my styles.css

but MediaWiki doesn't allow me to do this and it doesn't saves my changes.

Is that possible to use media query params like this? Tim1mike (talk) 07:11, 7 November 2020 (UTC)

any help pls? Tim1mike (talk) 18:37, 14 November 2020 (UTC)

It is because the CSS sanitizer does not allow prefers-color-scheme, the issue is being tracked here: https://phabricator.wikimedia.org/T241946 Alistair3149 (talk) 20:08, 24 November 2020 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Problem with menu failing to retract completely

First off let me say that this skin is a home run. Exactly what I was looking for. 1) automatically adjusts to the user device 2) automatically displays the user preference of light or dark theme and 3) slick and well-done, obviously put together by someone who knows something about design.

However I have noticed one problem that is potentially a deal-breaker on my wiki. For very long pages with a long table of contents, the menu screen fails to retract completely. It obscures some of the text. Buster2223 (talk) 14:27, 9 November 2020 (UTC)

Do you have a screenshot or live demo of the issue? Alistair3149 (talk) 20:09, 24 November 2020 (UTC)

I think I know what he means.

1. the related-pages-part goes over the toc. See for example here
2. The wiki-name goes over the content on special-pages at certain widths. example
3. on long articles with many headings the toc doesn't scroll along when going to a heading that is at the bottom. so when you are at the bottom you don't see the heading in the toc without scrolling also the toc to the bottom.
   I think it would make sense for the toc to scroll along. maybe keep the current heading in the middle of vertical hight of the toc?
   example-site
4. when being at the bottom, the footer moves over the toc. I think (at least for me) it would make more sense to let the footer also push the bottom of the toc up, so that you always see the last heading in the toc.
   This behaviour can be seen on all sites actually.
5. when clicking on a heading, the heading isn't highlighted anymore after it scrolled to it. instead the previous heading is highlighted in the toc.
   and for sub-heading in the toc: after clicking on a sub-heading and after the scroll is done, the highlighted heading in the toc is not the one that was clicked on, but the previous heading.
   
   Also when scrolling through the page, when getting to a new heading, only after passing the heading the heading in the toc is highlighted. Probably there is simply something set wrong at the top?
   
   This all should be changed to that the heading of the toc is always the same as the current heading-section.

But besides that, of course, is Citizen my number one skin. If this could be fixed I would not hesitate to make it a default everywhere. Thank you for your hard work @Alistair3149 ! Berot3 (talk) 14:18, 24 February 2021 (UTC)

I just realised, should I add all that to the GitHub-issue-tracker? Berot3 (talk) 14:53, 24 February 2021 (UTC)

1. Yeah it is normal, there is no clean way to access the ToC currently in 1.35 and it was done with some CSS hack to preserve no script functionality. Though it is possible to create a scripted version for JS client, but it is not a priority at the moment since MW will introduce a hook soon to access ToC.

2. Special pages are set to have more width and the wiki name behavior will be revisited when we implement adjustable page width.

3. That's a good idea will look into it.

4. That is the same issue as 1, can't promise anything for now.

5. There was an offset to accomodate the fixed header, it's an oversight and it'll be fixed.

Lastly thanks for letting me know! It is easier to track if you can put it on GH since there are multiple contributors and the issues will get a better visibility on GH. Alistair3149 (talk) 16:22, 24 February 2021 (UTC)

Help adjusting the skin

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hi! Wonderful skin! Thank you very much for developing and making it available. I have been really glad since I've found it. .

I would like help changing a few things in order to use the skin for my personal wiki. I am a total novice to css, less, json etc. I thought could I could understand my way through the files in the skin folder but I could not.

The following items are what I would like to achieve.

1. Make the dark mode always enabled (I've read it is not possible to toggle it).
2. Make the logout button in the side panel with the same color as the rest of the menu (the red distracts me a bit when I open the panel).
3. Change the values of the colors of dark mode to be closer to the ones I already use on my editor.
4. Change the style of headings and text (font, size, color etc.).

Are there trivial ways to make such changes? If not, could you give me some guidance as to what should I do. Thank you again very much for creating this skin and thank you in advance for the help. (Sorry if my wording is confuse at any point. Brazilian here.) TeraSinube (talk) 13:33, 27 November 2020 (UTC)

We made a lot of progress recently on making the skin more customizable, and to answer your question:

1. You can now set the default theme of the skin in LocalSettings.php, users are able edit their default option in Special:Preferences, and there is also a toggle button in the header

2. Add the following line onto your MediaWiki:Citizen.css page

#p-personal #pt-logout a {
  background-color: transparent;
}

3. You should be able to change the dark mode color scheme by only the :root selector with CSS. Just define the color that you want to override in MediaWiki:Citizen.css

4. You can manually define the individual styles with CSS in MediaWiki:Citizen.css, but with that you need to find the exact style to override.

I would say that you need some knowledge on CSS to make changes like this. It is a pretty easy language to learn and I am sure you will get the hang of it soon :) Alistair3149 (talk) 00:31, 16 January 2021 (UTC)

Maybe you can tell me what exactly I have to do to get rid of that white (or dark) gradient at the top?

I really don't like it, especially on top of images it just doesn't look good at all. I would maybe make it solid and transparent. But the gradient is a no-go :D

Thanks in advance for any help! Berot3 (talk) 14:36, 24 February 2021 (UTC)

The header selector would be .mw-header:before. You can change it to a solid color or transparent by using the background rule. Alistair3149 (talk) 16:12, 24 February 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.