feat(osrs-wiki): init #1981
feat(osrs-wiki): init #1981
Conversation
| @-moz-document domain("oldschool.runescape.wiki") { | ||
| :root { | ||
| body { | ||
| @media (prefers-color-scheme: light) { |
There was a problem hiding this comment.
Are these being used for theming?
There was a problem hiding this comment.
removed, left only themes from switching theme on-site
| --ajaxpoll-answerbar-border:var(--body-border); | ||
| --rc-negative-color:@red; | ||
| --rc-positive-color:@green; | ||
| --filter-black-to-link:invert(63%) sepia(67%) saturate(242%) hue-rotate(182deg) brightness(93%) contrast(94%); |
There was a problem hiding this comment.
I'm not exactly sure what this filters to, but there's built-in filters as part of the library. You can use them like @-filter
There was a problem hiding this comment.
this one is variable from original site, left it for future reference as for now I didn't catch single use case in the code
| --vector-tab-background:@mantle; | ||
| --vector-tab-background--hover:@crust; | ||
| --vector-tab-link-color:@text; | ||
| --lighttable-bg-hover:rgba(@accent, 0.5); |
There was a problem hiding this comment.
This won't work, either the fade() function needs to be used or the variable has to be destructed from hex using #lib.rgbify
There was a problem hiding this comment.
changed to fade() function, done in the other places also
|
|
||
| #p-logo { | ||
| a { | ||
| filter: hue-rotate(300deg); |
There was a problem hiding this comment.
If you want to tint this a certain Catppuccin colour, you can use a setup like this to diff the hues like this example. https://gist.github.com/WalkQuackBack/3e77ad9c8ecfa0211d4bc9065b1e06dd#file-ctp-docs-full-user-less-L66 googleBrand should be the original colour of the logo
There was a problem hiding this comment.
Implemented, it's not perfect because OSRS Wiki's logo isn't single colored, but definitely better - thanks for suggestion!
| background-color: @accent; | ||
| color: @base; | ||
| border-color: @accent; | ||
| box-shadow: 0px 0px 1px 1px rgba(@accent, 0.5); |
There was a problem hiding this comment.
Linter didn't catch this, but use fade() here as well
| #lib.defaults(); | ||
|
|
||
| & { | ||
| --body-background-image:url('/images/Old_School_RuneScape_Wiki_background_darkmode.png'); |
There was a problem hiding this comment.
Is this being edited in some way? This being hardcoded doesn't seem like it would work well in light mode.
There was a problem hiding this comment.
this is the background, it's JPG with fade effect in the original background color, left it as a variable, but it is overwritten below for cleaner look
- variable removed
2 participants
🎉 Theme for Old School RuneScape Wiki🎉
Old School RuneScape Wiki is wikipedia for Old School RuneScape.
🗒 Checklist 🗒