Commit graph

365 commits

Author SHA1 Message Date
alistair3149 3162e19a2c
feat(core): use CSS variables for x-small font sizes 2024-02-26 17:14:19 -05:00
alistair3149 a9acc08e27
feat(core)!: 💥 rework font-size CSS variables
To align with Codex tokens, the old --font-size-hN CSS variables are renamed.
Introduced new font size variables (x-small, small)
2024-02-26 16:54:58 -05:00
alistair3149 5e575f4c20
feat(core): use CSS variable to define default Citizen font 2023-12-15 15:07:43 -05:00
alistair3149 eee044d145
feat(core): use CSS variable for language-specific fonts 2023-12-13 17:09:57 -05:00
alistair3149 60999eb1d9
feat(core): replace breakpoint LESS variables with Codex tokens
Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem.
We have to keep a copy for now as they are introduced in 1.41.

Related: #735
2023-11-16 17:55:59 -05:00
AlιAѕѕaѕѕιN 456b75c1b1
fix(core): RTL flipping of the progressbar animation keyframe (#723) 2023-10-10 19:31:44 -04:00
alistair3149 0afb40fc86
feat(core): adapt typography to user preferences
* Add reduced gradation for dark mode
* Bolder font for prefer high contrast
* Thinner font for prefer low contrast
2023-08-03 17:41:54 -04:00
alistair3149 ba5bea704e
style: 🎨 apply recess order to styles 2023-07-27 21:19:27 -04:00
github-actions 8bfa8b5e6a ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-07-20 22:18:16 +00:00
alistair3149 fab4d27273
feat(core): add overflow handling for citizen inner header 2023-07-20 18:17:14 -04:00
github-actions 099b239267 ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-07-19 10:01:52 +00:00
github-actions 9796560793 ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-07-19 09:58:48 +00:00
alistair3149 a6bc1a8d4b
feat(core): sync input styles with Codex and OOUI 2023-07-16 20:48:37 -04:00
alistair3149 85f036c2f8
feat(core): remove expensive CSS animation
Avoid paint and layout triggering transitions
2023-07-16 15:32:13 -04:00
alistair3149 7ea3b94d23
feat(core): tweak sitestats font size 2023-07-14 21:48:25 -04:00
alistair3149 2bf20397e1
feat(core): use filter-invert CSS variable to flip color
This decouple the filter style from the  class.
Instead, filter-invert can be redefined if needed (e.g. :root.skin-citizen-dark)
2023-07-10 16:56:56 -04:00
alistair3149 6cddf85131
feat(search): add clear button to search box 2023-07-10 16:23:48 -04:00
alistair3149 c7e45177cd
feat(core): update menu transition styles and implementation
Same as the previous commit, the transition is now accessible as a CSS variable (transition-menu)
2023-07-07 17:02:27 -04:00
alistair3149 a7f9c55c88
feat(core): update hover transition styles and implementation
The timing and easing function are defined separately than the property.
It is now accessible as a CSS variable (transition-hover)
2023-07-07 16:36:38 -04:00
沈澄心 2891d042cc
fix(core): skin preference support for Safari on iOS < 12.2 (#680)
* Update skins.citizen.preferences.js

* Update skins.citizen.preferences.js

* Update inline.js

* Update SkinHooks.php

* Update skins.citizen.preferences.less

* Update variables.less

* Update theme.less

* Update theme.less

* Update skins.citizen.preferences.js

* Update skins.citizen.preferences.js

* Update skins.citizen.preferences.js

* Update skin.js
2023-07-03 08:48:41 -04:00
沈澄心 32ffa7cc23
feat(core): update MediaWiki notification style (#673)
* Update variables.less

* Update cssvariables.less

* Update mediawiki.notification.less

* Update cssvariables.less

* Update variables.less

* Update mediawiki.notification.less

* Update mediawiki.notification.less

* Update mediawiki.notification.less

* Update theme.less
2023-06-26 15:25:12 -04:00
沈澄心 914b81010e
fix(ooui): fix max-width of OOUI TextInputWidget (#666)
* Update mediawiki.special.search.styles.less

* Update hacks.less

* Update mediawiki.special.search.styles.less
2023-06-20 14:12:15 -04:00
alistair3149 434d2688fc
refactor(core): ♻️ less specific link underline selector 2023-06-15 14:37:07 -04:00
沈澄心 e69160de2f
feat(WikiHiero): add WikiHiero color (#653)
Also update Math color

---------

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
2023-06-08 15:44:22 -04:00
沈澄心 90d69720f6
feat(core): underline content links on hover and focus (#659)
* Update elements.less

* Update elements.less

* Update content.less

* Update elements.less

* Update elements.less

---------

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
2023-06-08 15:30:00 -04:00
alistair3149 8a618a6a9d
feat(core): update state background color
Switch to a semi-transparent color so it blends with the background.
Fix #639
2023-06-01 19:00:33 -04:00
github-actions b537776dab ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-06-01 22:48:25 +00:00
沈澄心 ba825daa9a
feat(core): update state text color (#642)
* Update variables.less

* Update cssvariables.less

* Update content.body.less

* Update mediawiki.special.changeslist.less

* Update mediawiki.special.changeslist.less

* Update ext.scribunto.edit.less

* Update ext.echo.ui.less

* Create mediawiki.interface.helpers.styles.less

* Update skin.json

* Update oojs-ui-core.less

* Update oojs-ui-core.less

* Update variables.less

* Update cssvariables.less

* Update variables.less

* Update mediawiki.special.changeslist.less

* Update cssvariables.less

* Update variables.less

* Update variables.less

* Update README.md

* Update README.md

* Update mediawiki.special.changeslist.less
2023-06-01 18:47:40 -04:00
沈澄心 efd02548a6
feat(Scribunto): add support for Scribunto debug console (#629)
* add support for Scribunto debug console

* Update ext.scribunto.edit.less

* Update README.md
2023-05-23 12:27:54 -04:00
alistair3149 35821b62ae
feat(core): more saturated base text color 2023-05-05 10:22:32 -04:00
alistair3149 8c888a7e1f
feat(core): make tables responsive without breaking table layout
Instead of a CSS solution used previously, switch to a JS solution to wrap tables.
This should ensure the table renders correctly and also scrollable.
This lays the groundwork for making table more user-friendly in the future.
2023-04-30 17:01:29 -04:00
alistair3149 68313123e9
feat(core): apply box-sizing: border-box by default 2023-03-01 16:08:07 -05:00
alistair3149 235a76c2bd
feat(core): add border to Citizen cards 2023-03-01 15:02:34 -05:00
github-actions 9e15415835 ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-02-28 21:59:36 +00:00
alistair3149 19ddd61e19
feat(core): clean up print styles 2023-02-28 16:58:35 -05:00
alistair3149 65aff44e1c
Revert "feat(core): do not synthesize font styles through browser"
It is not ready for current usage yet, see #591
2023-02-16 23:30:14 -05:00
alistair3149 83f7fc5db2
feat(core): update font stacks 2023-02-16 13:00:10 -05:00
alistair3149 af41f98935
feat(core): use same font family instead of serif for blockquote
Since it is the only place that use serif, the serif variable is also removed
2023-02-16 12:13:21 -05:00
alistair3149 907206854b
feat(core): do not synthesize font styles through browser 2023-02-16 12:10:46 -05:00
alistair3149 084a886866
refactor(core): ♻️ group contentheader styles 2023-01-31 15:01:03 -05:00
alistair3149 d14ddd99e6
refactor(core): ♻️ simplify page title implementation 2023-01-31 14:54:20 -05:00
alistair3149 afcf37d529
fix(core): 🐛 checkboxHack buttons should be focusable
So that users can use keyboard to navigate to such button.
Previously they all have a display:none property, which makes it
impossible to reach with keyboard
2023-01-25 20:20:46 -05:00
alistair3149 5ebd7ad025
feat(core): remove plainlist styles
It should not be a part of the skin as it belongs to a template
2023-01-23 00:17:32 -05:00
alistair3149 023ee9427a
feat(core): more colorful emphasized text color 2022-12-20 21:50:49 -08:00
alistair3149 3414d59643
feat(core): dynamic dark theme color based on primary hue 2022-12-14 14:06:06 -05:00
alistair3149 37cdf91257
feat(core): deprecate background-color-framed and input
background-color-framed can be replaced with color-surface-2 most of the time.
input is not used.
They are both deprecated in favor of the simpler color-surface system
2022-12-14 12:56:17 -05:00
alistair3149 3d1ca8b2ad
feat(core): reduce the click event delay on touch devices 2022-12-08 13:51:22 -05:00
alistair3149 75ab097ba1
feat(core): update MW datatable styles 2022-12-06 15:06:22 -05:00
alistair3149 ca7dd9fe86
feat(ooui): redo OOUI styles 2022-11-30 21:42:28 -05:00
alistair3149 f64f1a2d5e
fix(core): 🐛 input focus state should use hover background color 2022-11-30 16:10:48 -05:00
alistair3149 f041b2cbea
feat(core): only apply letter spacing to text field labels 2022-11-26 17:59:03 -05:00
github-actions c634a934bd ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2022-11-26 08:41:34 +00:00
alistair3149 bf9a4850f6
feat(core): add underglow to progress indicator 2022-11-26 03:40:43 -05:00
alistair3149 5e14891088
feat(typography): add label styles 2022-11-23 20:52:44 -05:00
alistair3149 027e298e1e
feat(typography): do not change GRAD axis
It seems that browsers don't have a standard for GRAD.
Sometimes it is too thin  and sometimes it is too thick
2022-11-23 18:37:00 -05:00
alistair3149 7ffe7fdb79
refactor(core): ♻️ remove redundant patrollink styles 2022-11-21 17:47:30 -05:00
alistair3149 4bdad41f8a
feat(core): add Parsoid media styles 2022-11-21 17:47:27 -05:00
alistair3149 8eebf6806d
feat(core): revamp thumbnail styles 2022-11-21 17:47:25 -05:00
alistair3149 7b33d7e2f1
feat(core): responsive page padding 2022-11-21 17:47:14 -05:00
alistair3149 d8b2c73e6e
refactor(core): ♻️ only use padding-page when nessecary 2022-11-21 17:47:13 -05:00
alistair3149 9eda536420
refactor(core): ♻️ clean up legacy LESS variables 2022-11-21 17:47:11 -05:00
alistair3149 85e69f5a6b
refactor(core): ♻️ deprecate old font variables 2022-11-21 17:47:09 -05:00
alistair3149 f611ac9eef
feat(typography): same font weight for strong and bold 2022-11-21 17:46:46 -05:00
alistair3149 20d8d0d0d4
feat(core): clean up elements styles 2022-11-21 17:46:44 -05:00
alistair3149 2d5246a8a6
feat(core): update wikitable styles
When the wikitable style is first implemented, it didn't take consideration
of different usage out there. For example, it doesn't work well with complex
table or table cell background. This should make it more usable for wikis
out there.
2022-11-21 17:46:37 -05:00
alistair3149 2e9f9067af
feat(core): update edit section styles 2022-11-21 17:46:35 -05:00
alistair3149 74fe35e31a
feat(core): clean up subtitle styles 2022-11-21 17:46:32 -05:00
alistair3149 d238e932a1
feat(core): add pill and circle border radius variables 2022-11-21 17:46:31 -05:00
alistair3149 0c4562f235
feat(core): update list styles 2022-11-21 17:46:27 -05:00
alistair3149 be11883f3d
refactor(core): ♻️ move external link styles to skinning folder 2022-11-21 17:46:26 -05:00
alistair3149 da3b3e4228
refactor(core): ♻️ remove styles covered by interface-core 2022-11-21 17:46:23 -05:00
alistair3149 6ac8bfb646
refactor(core): ♻️ use mediawiki.skinning.content.links in core 2022-11-21 17:46:18 -05:00
alistair3149 67535a8067
refactor(core): ♻️ use mediawiki.skinning.content.body in core 2022-11-21 17:46:16 -05:00
alistair3149 8af7357f06
feat(core): update external link styles 2022-11-21 17:44:45 -05:00
alistair3149 35ee8619cb
feat(core): responsive heading font sizes 2022-11-21 17:43:20 -05:00
alistair3149 2d014694a6
feat(core): migrate misc icons to use RIL icon module 2022-11-21 17:43:03 -05:00
alistair3149 ea68ce0d25
feat(core): migrate user menu to use RL icon module 2022-11-21 17:42:46 -05:00
alistair3149 f2d1ab3d23
feat(core): migrate user menu to use RL icon module 2022-11-21 17:42:45 -05:00
alistair3149 fd40b1b855
feat(core): more granular spacing units 2022-11-21 17:42:43 -05:00
alistair3149 07d39c17dc
feat(font): use GRAD instead of font-weight to adjust contrast
font-weight have the issue of changing the width of text, while GRAD does not
2022-11-21 17:42:34 -05:00
alistair3149 034d5c4b02
feat(core): standardize line height 2022-11-21 17:42:33 -05:00
alistair3149 8dcb1f37fb
refactor(core): ♻️ replace reducemotion with core accessiblity module 2022-11-21 17:42:30 -05:00
alistair3149 969cd787d6
feat(core): use different font weight in different themes
The same font weight do not provide the same contrast in different themes.
We should be able to change the scaling
2022-11-21 17:42:26 -05:00
alistair3149 c03308ad59
feat(core): style namespace differently in page title
Thanks to T306440, it is finally possible without parsing the title
2022-11-21 17:42:14 -05:00
alistair3149 a1ce408e43
feat(core): re-implement responsive toc 2022-11-21 17:42:05 -05:00
alistair3149 2bf1c27d46
chore(ci): 🔧 👷 remove unnessecary stylelint declarations 2022-11-21 17:41:49 -05:00
alistair3149 8793a243c3
feat(core): rewrite body layout into flex and grid 2022-11-21 17:41:42 -05:00
github-actions 15f13d9ebe ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2022-11-08 15:44:57 +00:00
alistair3149 029361b066
feat(core): scroll instead of wrap pre block
It makes code blocks more readable and more inline with other sites
2022-11-08 10:44:27 -05:00
alistair3149 88be5ba08b
fix(core): 🐛 keep inline style for a.image 2022-10-30 21:25:21 -04:00
alistair3149 9b9b3613c3
feat(core): reduce scroll top padding
This should place the scroll target close to content header
2022-10-25 16:05:01 -04:00
alistair3149 bc8d1a320f
feat(pwa): use standalone mode
Now with the loading indicator back in, we can use standalone mode
2022-10-23 14:00:51 -04:00
alistair3149 911f21420f
feat(core): increase scroll padding (#533)
This should stop anchor hidding behind sticky header,
also makes anchor more readable in the viewport
2022-10-21 14:40:55 -04:00
alistair3149 55f7bcffad
feat(core): use flex layout for mw-indicators 2022-10-20 17:32:22 -04:00
alistair3149 ac2559ed8b
feat(core): use 100vh instead of 100% for min-height
Viewport height also takes the browser elements on mobile into account
2022-10-03 13:20:46 -04:00
alistair3149 4902ae76ab
feat(core): redesign site footer
last modified and copyright message are not implemented yet.
they will be integrated into body content since they are not global.
2022-10-01 15:06:57 -04:00
alistair3149 6de95d4fec
feat(core): redesign site header (#521)
Change header into vertical header for large screen and bottom header for small screen.
2022-09-29 19:12:56 -04:00
github-actions 0d63257e86 ci: lint code to MediaWiki standards
Check commit and GitHub actions for more details
2022-09-28 21:02:56 +00:00
alistair3149 34c300d69c
fix(core): center class on thumbnails should center (#476)
Hide the overflow so the thumbnail will be at the center of avaliable space
instead of the whole page. Also have to remove hover shadow as overflow clip it.
2022-06-07 19:06:06 -04:00
alistair3149 0ffc78ce9e
fix(core): add missing plainlinks styles 2022-06-02 16:13:45 -04:00
alistair3149 47069b613c
feat(skinStyles): do not lazyload OOUI font size with skinStyles
Changing the OOUI font size in skinStyles would cause a significant layout shift
because the styles are lazyloaded. OOUI is designed around a based font size of 14px
in mind, so we should obey that. Hopefully WMF will revisit OOUI during T254055, then
this hack can be removed.
2022-06-02 12:13:48 -04:00
alistair3149 6f7f548680
feat(core): only use overflow when needed for mw-body
Assigning overflow property that is not clip will block position:sticky from working.
Instead, Citizen will only apply overflow:clip with a fallback to hidden in smaller viewport.
2022-05-23 18:18:53 -04:00
alistair3149 1b7217457a feat(core): do not override blockquote font size 2022-05-19 14:26:56 -04:00
alistair3149 95a4609c17
feat(core): use standard external link icon fo external links
Have to polyfill because it is still a long way to go until being standardized in core
Related: T261391
2022-05-17 22:10:26 -04:00
alistair3149 c69f2927ef
feat(core): set accent-color as primary color 2022-05-11 21:40:27 -04:00
alistair3149 0e3ecf1415
feat(core): use relative units for text and spacing 2022-05-11 19:04:52 -04:00
alistair3149 000643ad36
refactor(core): clean up personal menu
This is a part of the header refactor
* Clean up DOM strcture
* Clean up unnessecary styles
* Clean up HTML classes
* Add active state to button
2022-05-10 13:36:52 -04:00
alistair3149 5ccfbcfdeb refactor(core): clean up drawer implementation
This is a part of the site header refactor
* Use relative units
* Add title to toggle button
* Remove unnessecary CSS
* Rewrite HTML classes
* Temporary remove drawer subsearch, it will be re-explored in a later patch
2022-05-10 10:52:36 -04:00
alistair3149 44f9bc0a7c
feat(core): style parenthesis text in FirstHeading differently
Parenthesis text in FirstHeading are commonly used for disambiguation purposes
Therefore it does not have to be as prominent as the title
2022-05-07 00:45:51 -04:00
alistair3149 56a869b3d9
refactor(core): clean up transition variable names 2022-05-01 19:14:17 -04:00
alistair3149 709a89d399
perf(core): remove box-shadow transition for thumbnails
It is not nessecary and expensive to run. If it is needed, a pseudo element should be used instead
2022-05-01 18:57:59 -04:00
alistair3149 b39452d3b5
refactor(core): remove unnessecary style overrides for links
* Visited link styles are removed from MW already,
there are no need to use important to override those rules.
* Citizen should not override text-decoration setting if users
want to have underline links.
2022-05-01 18:45:48 -04:00
alistair3149 571704f3a9
feat(core): tweak code block styles
* Add rounded corner
* Update background color
2022-04-27 19:38:12 -04:00
alistair3149 7e068dd4b1
refactor: simplify unnessecary selectors 2022-04-27 14:43:02 -04:00
alistair3149 96013bb126
feat: deprecate --background-color-dp-XX in favor of --color-surface-X
--background-color-dp-XX is now fully deprecated in favor of a simpler 4 color surface system. It can be accessed through the --color-surface-X CSS var.
2022-04-25 22:27:52 -04:00
alistair3149 47e1259bc3
feat: implement a more adaptive smooth shadow
* Looks more natural
* Can be customized through the surface-shadow and shadow-strength CSS var
* Light mode and dark mode have been different shadow now, it should be more visible in dark mode
* Box-shadow is a CSS var, which can be used in templates and wiki CSS
2022-04-24 15:24:09 -04:00
alistair3149 a2dffec7eb
feat: remove letter spacing from wordmark 2022-04-17 18:07:56 -04:00
alistair3149 e03647eef6 fix: plainlist styles should not be overriden 2021-08-05 11:36:25 -04:00
alistair3149 f5a2a831d1
feat: add user customizable line height 2021-08-05 11:24:52 -04:00
alistair3149 79b61cd24a
fix: also apply typography styles to ciitzen-body 2021-07-30 22:57:38 -04:00
alistair3149 6acd4d23df
fix: use mw-body-content for content styles as VE preview ignores citizen-body 2021-07-30 22:42:27 -04:00
alistair3149 8bca28662b
feat: remove mw-body-content from HTML
T279388
mw-body-content is used within body content in 1.37. The original mw-body-content container will use the class citizen-body instead.
2021-07-30 11:44:02 -04:00
alistair3149 cff27d972c
feat: remove color-link LESS variable and scope the CSS variable 2021-07-27 17:33:59 -04:00
alistair3149 020d05c253
feat: improve contrast for primary color in dark theme 2021-07-27 17:18:23 -04:00
alistair3149 07484ee190
fix: remove unused less variables 2021-07-27 16:02:45 -04:00
alistair3149 f8a26fe6ea
feat: tweak input field color 2021-07-27 15:58:55 -04:00
alistair3149 1746440bf7
feat: use primary color as outline color 2021-07-27 15:57:35 -04:00
alistair3149 7460442580
feat: calculate primary hover state color based on HSL 2021-07-27 15:49:12 -04:00
alistair3149 aae08f0a73
feat: rewrite OOUI skinstyles to the new system 2021-07-27 02:13:22 -04:00
alistair3149 7dc0d14c70
feat: simplify background color variables in core styles
--background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 19:16:05 -04:00
alistair3149 81d5296249
refactor: update loading animation delay to 500ms 2021-06-27 00:55:09 -04:00
alistair3149 e0b188ed6b
fix: duplicated CSS selector 2021-06-21 20:53:47 -04:00
alistair3149 4d3e18898e
feat: tweak p element margin 2021-06-21 20:51:50 -04:00
alistair3149 5f168f03ee
feat: add page load progress bar 2021-06-12 09:54:47 -04:00
alistair3149 f21e19c5d8
feat: set sub, sup line-height to 1 2021-06-10 19:26:05 -04:00
alistair3149 f60e4b2626 fix: remove empty line in stylesheet 2021-05-27 11:20:12 -04:00
alistair3149 08987c9215 feat: add rounded corner to thumbnails
also merge thumbnail styles into one file
2021-05-27 11:20:12 -04:00
alistair3149 5c6408d766 feat: convert border radius to CSS variable 2021-05-27 11:20:12 -04:00
alistair3149 5d1af2ccb4
fix: inconsistent cursor in header button 2021-05-17 18:58:12 -04:00
alistair3149 9a610b8485
fix: tweak indicator link text color (#363) 2021-05-04 11:56:32 -04:00
alistair3149 293d748771
feat: switch to circle list style 2021-05-02 17:33:40 -04:00
alistair3149 bf8d9274fa
feat: tweak wikitable styles
move text-align left from th to table so it can be easily overriden
2021-04-28 10:37:36 -04:00
alistair3149 00277609f5
feat: don't hide horizontal lines 2021-04-28 10:29:26 -04:00
alistair3149 16b4ae90e0 feat: use color-scheme: dark for dark mode 2021-04-27 13:51:03 -04:00
alistair3149 15ffff3aa4
fix: remove extra bracket in css var definition 2021-04-19 12:42:08 -04:00
alistair3149 76d5daa956
refactor: simplify body margin styles 2021-04-19 12:38:39 -04:00
alistair3149 0f2412c930
feat: don't capitalize wiki name 2021-04-17 01:51:15 -04:00
alistair3149 9fc6639d8c
feat: tweak wordmark styles 2021-04-16 21:22:09 -04:00
alistair3149 ed1b55ce45
feat: hide overflow on screen smaller than 720px 2021-04-12 14:13:28 -04:00
alistair3149 0a0a4a0849
feat: add scrollbar styles 2021-04-12 14:00:43 -04:00