piroor
commented
2 years ago Sorry I couldn't understand what is the problem. Could you paste both expected and actual cases screenshots to describe what is the difference?
Closed Bert-Proesmans closed 2 years ago
piroor
commented
2 years ago Sorry I couldn't understand what is the problem. Could you paste both expected and actual cases screenshots to describe what is the difference?
piroor
commented
2 years ago By the way TST 3.9.0 includes changes around the method to apply custom CSS. The change possibly affects to your case.
Bert-Proesmans
commented
2 years ago Sorry I couldn't understand what is the problem. Could you paste both expected and actual cases screenshots to describe what is the difference?
I've exported my config and downgraded my extension through the "Temporary add-in" functionality (learned something new today).
What I'm encountering is this (same config, TST version 3.9.0)
Where I'm expecting this (same config, TST version 3.8.1 -- I notice now that there are no Github releases for versions >3.8.2)
By the way TST 3.9.0 includes changes around the method to apply custom CSS. The change possibly affects to your case.
"Apply" as in html entity identifiers changed, or html structure changed? AKA can I expect to fix this myself with some element inspection?
Or do you mean there is some programmatic automation that changed in the extension code that requires workarounds for my case?
irvinm
commented
2 years ago @Bert-Proesmans this is definitely self-solvable. I took your CSS and just removed the first block of ":root" CSS items and I got it to look like this:
Now, I don't know what you might be missing by doing this, but it is hard to know as there is:
All of this to say, obviously the "specificity" of the CSS items you have are being selected differently based on some TST changes. I think you just need to make changes on your end to get it to where you want it to look.
If I were to guess, maybe one of the @media sections are not being used now and leaving the default :root overwritten values in place which are "light" in nature.
Bert-Proesmans
commented
2 years ago Hi @irvinm Thanks for taking a look!
I'm currently figuring out how TST is built and custom CSS styling is applied.
You're right that removing the top :root {} section is almost a complete fix! There are a few visual inconsistencies, but it's a good pointer for me to continue on.
For future reference because I had to dig in memory, the theme is a straight up copy from the old Vertigo (https://github.com/piroor/treestyletab/wiki/Vertigo-theme-%28patch-for-the-theme-%22Photon%22%29). That's the main chunk of the custom CSS I posted, the other fragments tweak visibility or positioning.
irvinm
commented
2 years ago @Bert-Proesmans ah, that explains why there are so many selectors to handle different environments and options. :)
There isn't a TST issue here. Can you close this item? If you have additional questions, you can still post them into this issue for people to review.
@piroor you do have some of the old themes documented ... did you want to update them or maybe place a comment that they might require some modification to support new versions of TST?
Bert-Proesmans
commented
2 years ago OK, so I guess I'm running into an effect caused by https://github.com/piroor/treestyletab/commit/48347b1512e8188cf26b8a89d99e20a8a3b38cdc
This is in line with irvinm's suggestion and I can confirm with the inspector that :root {} becomes :root:not(#NEVER#USED#ID) {}. The end result being that selectors not guarded by a @media query are applied before others. This effectively turns around the rule application order that my custom CSS is built around.
I'm not sure how I would approach changing the custom CSS robustly, given the new ordering. The first step would be getting rid of that :root {} element by creating non-duplicate key-values underneath each @media query, and seeing from there.
piroor
commented
2 years ago Thank you for investigation @irvinm ! Finally I've understood that TST failed to increase specificity of CSS selectors under @media. The commit d770679 should fix this.
Bert-Proesmans
commented
2 years ago Thanks for helping out guys! Much appreciated!
EDIT; Sorry, this is related to my custom CSS
Abstract
After updating TST to version 3.9.0 just now, the sidebar doesn't render in dark theme. The dark theme worked as expected under version 3.8.26 until the sidebar reloaded/flashed because of the updated extension. I've checked the release notes and there isn't anything specific to dark theme mentioned that I should change.
I've tried switching the TST settings, and toggling light/dark mode in OS, and restarting Firefox which didn't change the outcome.
Steps to reproduce
Expected result
The toolbar is dark themed.
Actual result
The toolbar is white themed.
Environment
EDIT; I have some custom styling enabled on top of the Photon theme. I'm gonna check what changed and try to provide an updated custom styling tomorrow.
Without this custom CSS the dark theme is back.
Custom CSS
```css /* Make the new tab button stick to the bottom of the window */ #tabbar:not(.overflow) .after-tabs { margin-top: auto; } /* Change styling of pending (unloaded) tabs */ .tab.discarded { opacity: 0.45; } /* Add private browsing indicator per tab */ .tab.private-browsing .label:before { content: "🕶"; } /* ***** BEGIN LICENSE BLOCK ***** * Version: MPL 1.1 * * The contents of this file are subject to the Mozilla Public License Version * 1.1 (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * http://www.mozilla.org/MPL/ * * Software distributed under the License is distributed on an "AS IS" basis, * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License * for the specific language governing rights and limitations under the * License. * * The Original Code is the Tree Style Tab. * * The Initial Developer of the Original Code is YUKI "Piro" Hiroshi. * Portions created by the Initial Developer are Copyright (C) 2007-2019 * the Initial Developer. All Rights Reserved. * * Contributor(s): YUKI "Piro" Hiroshi