StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-15 02:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/skins.citizen.search/skins.citizen.search.less

124 lines
2.3 KiB
Plaintext
Raw Normal View History

feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
@import '../variables.less';
@import '../mixins.less';
.citizen-typeahead {
position: absolute;
top: 100%;
fix: search suggestion height overflow
2021-05-17 21:58:48 +00:00
overflow: auto;
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
width: 100%;
refactor(core): ♻️ clean up header card mixins and var
2022-09-30 20:52:13 +00:00
max-height: var( --header-card-maxheight );
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
box-sizing: border-box;
feat(core): use relative unit for search suggestion
2022-05-11 02:05:42 +00:00
padding-top: 0.75rem;
margin-top: -0.75rem;
feat: unify modal styles All modals should follow the same styles
2022-04-28 19:18:41 +00:00
//border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
.citizen-card;
refactor(core): merge card content fade animation into mixin
2022-05-12 02:06:33 +00:00
.citizen-card-hide( 50% 0, Y, false );
feat(core): switch searchbox transitions to scale
2022-05-02 01:35:33 +00:00
// Well this won't be loaded before .citizen-animation-ready anyways
.citizen-card-transition();
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
&-suggestion {
feat(core): use relative unit for search suggestion
2022-05-11 02:05:42 +00:00
padding-top: 0.375rem;
padding-bottom: 0.375rem;
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
&__thumbnail {
overflow: hidden;
height: 60px;
feat: unify modal styles All modals should follow the same styles
2022-04-28 19:18:41 +00:00
border-radius: var( --border-radius--medium );
ci: lint code to MediaWiki standards Check commit and GitHub actions for more details
2022-09-28 21:02:56 +00:00
background-color: #eaecf0;
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
img,
source {
object-fit: cover;
}
}
&__text {
overflow: hidden;
white-space: nowrap;
}
&__title {
color: var( --color-base--emphasized );
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-10-23 23:40:19 +00:00
font-weight: var( --font-weight-semibold );
feat(core): indicate when search results are from redirects For REST API, search results will now indicate if they are from redirects. The current implementation is that it will always show up, the logic to trim redundant info will come later Related: T303013
2022-05-20 23:10:36 +00:00
}
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
feat(core): indicate when search results are from redirects For REST API, search results will now indicate if they are from redirects. The current implementation is that it will always show up, the logic to trim redundant info will come later Related: T303013
2022-05-20 23:10:36 +00:00
&__highlight {
color: var( --color-base--subtle );
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-10-23 23:40:19 +00:00
font-weight: var( --font-weight-medium );
feat(core): indicate when search results are from redirects For REST API, search results will now indicate if they are from redirects. The current implementation is that it will always show up, the logic to trim redundant info will come later Related: T303013
2022-05-20 23:10:36 +00:00
}
&__redirect {
feat(core): hide redirect message in search results when not needed If either the title or redirect title is a substring of the other, hide the redirect. Related: T303013
2022-05-20 23:48:07 +00:00
margin-left: 0.25rem;
feat(core): indicate when search results are from redirects For REST API, search results will now indicate if they are from redirects. The current implementation is that it will always show up, the logic to trim redundant info will come later Related: T303013
2022-05-20 23:10:36 +00:00
color: var( --color-base );
font-size: 0.8125rem;
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
}
&__description {
margin-top: 0.1rem;
color: var( --color-base--subtle );
font-size: @content-caption-size;
}
&__title,
&__description {
overflow: hidden;
text-overflow: ellipsis;
}
}
&-footer {
feat: convert border radius to CSS variable
2021-05-27 14:35:21 +00:00
padding-top: var( --border-radius--large );
padding-bottom: var( --border-radius--large );
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
ci: lint code to MediaWiki standards Check commit and GitHub actions for more details
2022-09-28 21:02:56 +00:00
border-top: 1px solid var( --border-color-base );
feat(core): use relative unit for search suggestion
2022-05-11 02:05:42 +00:00
font-size: 0.8125rem;
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-10-23 23:40:19 +00:00
font-weight: var( --font-weight-medium );
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
&__icon {
height: var( --size-icon );
}
ci: lint code to MediaWiki standards Check commit and GitHub actions for more details
2021-05-17 21:55:52 +00:00
feat: tweak search suggestion styles
2021-05-17 21:55:00 +00:00
&__text {
strong {
color: var( --color-base--emphasized );
}
}
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
}
&-option {
&--active {
background-color: var( --background-color-primary--hover );
}
}
a {
display: flex;
align-items: center;
feat(core): use relative unit for search suggestion
2022-05-11 02:05:42 +00:00
padding-right: 0.75rem;
padding-left: 0.75rem;
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
color: var( --color-base );
}
picture {
width: 100%;
max-width: 70px;
feat(core): use relative unit for search suggestion
2022-05-11 02:05:42 +00:00
margin-right: 0.75rem;
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
img,
source {
width: inherit;
height: inherit;
}
}
&--expanded {
refactor(core): merge duplicating mixins together
2022-05-02 02:53:41 +00:00
.citizen-card-show( false );
feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes
2021-05-17 20:34:14 +00:00
}
}
fix(core): hide double MW search suggestion In rare scenario such as #520, default MW search suggestions will load regardless of the settings. This simple CSS hack is used to hide in case if it loaded. This will not be needed when vue search is implemented.
2022-09-28 21:02:15 +00:00
// HACK: Hide default MW search suggestion if it somehow loaded
// This should be removed when we switch to vue search
.suggestions {
fix(search): hide default MW search suggestion Sometimes the JS is not able to stop the search module from loading. We can use CSS to hide the suggestion for now.
2022-11-08 05:25:40 +00:00
display: none !important;
fix(core): hide double MW search suggestion In rare scenario such as #520, default MW search suggestions will load regardless of the settings. This simple CSS hack is used to hide in case if it loaded. This will not be needed when vue search is implemented.
2022-09-28 21:02:15 +00:00
}
Reference in a new issue Copy permalink