jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/342286 )
Change subject: Re-arrange CSS, clean up when required, add FIXMEs
......................................................................
Re-arrange CSS, clean up when required, add FIXMEs
This is a first step to cleaning up wikimedia portals CSS.
* Split _wm-portal.css and move pieces into corresponding sections.
* Created _central-textlogo and _central-featured sections.
* Avoids duplication of CSS classes. Move to their unique section.
* _localized_topten is renamed to _localization.css and cleaned to
contain only l10n code.
* _lang-dropdown is renamed to _other-languages, and bookshelf
code is re-arranged into _other-languages.bookshelf
* Add FIXMEs to some places that need further review/clean up.
* The indentation is changed from spaces to tabs. Will require another
large patch to convert the entire code.
* Removes invalid Opera hack, may be reintroduced by phab T161062
Bug: T160131
Change-Id: I1f583201fd108ca29e0a83fc9794333e12170839
---
M dev/wikipedia.org/assets/postcss/_app-badge.css
A dev/wikipedia.org/assets/postcss/_base-portal.css
A dev/wikipedia.org/assets/postcss/_central-featured.css
A dev/wikipedia.org/assets/postcss/_central-textlogo.css
M dev/wikipedia.org/assets/postcss/_footer.css
A dev/wikipedia.org/assets/postcss/_localization.css
D dev/wikipedia.org/assets/postcss/_localized_topten.css
A dev/wikipedia.org/assets/postcss/_media-print.css
A dev/wikipedia.org/assets/postcss/_other-languages-bookshelf.css
R dev/wikipedia.org/assets/postcss/_other-languages.css
A dev/wikipedia.org/assets/postcss/_other-projects.css
D dev/wikipedia.org/assets/postcss/_search-box.css
M dev/wikipedia.org/assets/postcss/_search-language-picker.css
A dev/wikipedia.org/assets/postcss/_search-suggestions.css
A dev/wikipedia.org/assets/postcss/_search.css
M dev/wikipedia.org/assets/postcss/_wm-portal.css
D dev/wikipedia.org/assets/postcss/_wm-typeahead.css
M dev/wikipedia.org/assets/postcss/style.css
18 files changed, 868 insertions(+), 852 deletions(-)
Approvals:
Jdrewniak: Looks good to me, approved
jenkins-bot: Verified
diff --git a/dev/wikipedia.org/assets/postcss/_app-badge.css
b/dev/wikipedia.org/assets/postcss/_app-badge.css
index 3286e3b..1a39e0e 100644
--- a/dev/wikipedia.org/assets/postcss/_app-badge.css
+++ b/dev/wikipedia.org/assets/postcss/_app-badge.css
@@ -1,3 +1,7 @@
+/* ::: App badges ::: */
+
+/* Section containing the links to download native mobile apps */
+
.app-badges {
background-color: var( --background-color-code );
}
@@ -49,6 +53,7 @@
.app-badge-fulllist {
width: 100%;
+ /* FIXME replace em with rem? */
margin: 1.5em 0 0.5em 0;
}
}
diff --git a/dev/wikipedia.org/assets/postcss/_base-portal.css
b/dev/wikipedia.org/assets/postcss/_base-portal.css
new file mode 100644
index 0000000..5b94db8
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_base-portal.css
@@ -0,0 +1,37 @@
+/* ::: Portal's base css ::: */
+
+body {
+ background-color: #fff;
+ font: 13px/1.5 sans-serif;
+ margin: 0.3em 0;
+}
+
+a,
+a:active,
+a:focus {
+ unicode-bidi: embed;
+ outline: 0;
+ color: var( --color-primary );
+ text-decoration: none;
+}
+
+a:focus {
+ outline: 1px solid var( --color-primary );
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+img {
+ border: 0;
+ vertical-align: middle;
+}
+
+hr {
+ clear: both;
+ height: 0;
+ border: 0;
+ border-bottom: 1px solid var( --border-color-heading );
+ margin: 0.2em 1em;
+}
diff --git a/dev/wikipedia.org/assets/postcss/_central-featured.css
b/dev/wikipedia.org/assets/postcss/_central-featured.css
new file mode 100644
index 0000000..9e35157
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_central-featured.css
@@ -0,0 +1,170 @@
+/* ::: Central Features ::: */
+
+/* Section containing the top 10 Wikis and the Wikipedia logo */
+
+.central-featured {
+ position: relative;
+ /* FIXME replace em with rem? */
+ height: 25em;
+ width: 42em;
+ max-width: 100%;
+ margin: 0 auto;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.central-featured-logo-wrapper {
+ /* FIXME replace with rem */
+ line-height: 24em;
+ vertical-align: middle;
+}
+
+.central-featured-lang {
+ position: absolute;
+ /* FIXME replace em with rem? */
+ width: 12em;
+}
+
+/* Make entire block clickable, surpress hover underline */
+.central-featured-lang .link-box {
+ display: block;
+ padding: 0;
+ text-decoration: none;
+ white-space: normal;
+}
+
+/* Restore underline on main label */
+.central-featured-lang .link-box:hover strong {
+ text-decoration: underline;
+}
+
+/* Surpress blue color */
+.central-featured-lang .link-box em,
+.central-featured-lang .link-box small {
+ color: #000;
+ text-decoration: none;
+}
+
+.central-featured-lang strong {
+ display: block;
+ font-size: larger;
+}
+
+.central-featured-lang em {
+ font-style: italic;
+}
+
+.central-featured-lang .emNonItalicLang {
+ font-style: normal;
+}
+
+.lang1 {
+ top: 0;
+ right: 60%;
+}
+
+.lang2 {
+ top: 0;
+ left: 60%;
+}
+
+.lang3 {
+ top: 20%;
+ right: 70%;
+}
+
+.lang4 {
+ top: 20%;
+ left: 70%;
+}
+
+.lang5 {
+ top: 40%;
+ right: 72%;
+}
+
+.lang6 {
+ top: 40%;
+ left: 72%;
+}
+
+.lang7 {
+ top: 60%;
+ right: 70%;
+}
+
+.lang8 {
+ top: 60%;
+ left: 70%;
+}
+
+.lang9 {
+ top: 80%;
+ right: 60%;
+}
+
+.lang10 {
+ top: 80%;
+ left: 60%;
+}
+
+@media all and ( max-width: 480px ) {
+ .central-featured {
+ width: auto;
+ height: auto;
+ margin-top: 4em;
+ padding-top: 2em;
+ font-size: 0.8em;
+ text-align: left;
+ }
+
+ .central-featured:after {
+ content: ' ';
+ display: block;
+ visibility: hidden;
+ clear: both;
+ height: 0;
+ font-size: 0;
+ }
+
+ .central-featured-logo {
+ position: absolute;
+ top: -70px;
+ left: 0.8em;
+ right: 0;
+ width: 70px;
+ margin-top: -4em;
+ }
+
+ .central-featured-lang {
+ display: block;
+ float: left;
+ position: relative;
+ top: auto;
+ left: auto;
+ right: auto;
+ box-sizing: border-box;
+ height: 5em;
+ width: 33%;
+ margin: 0;
+ padding: 0 1rem;
+ font-size: 0.8rem;
+ text-align: center;
+ }
+
+ .central-featured-lang strong {
+ font-size: 0.8rem;
+ }
+}
+
+@media all and ( max-width: 375px ) {
+ .central-featured-lang {
+ font-size: 0.7rem;
+ }
+}
+
+@media all and ( max-width: 240px ) {
+ .central-featured-lang {
+ width: 100%;
+ }
+}
diff --git a/dev/wikipedia.org/assets/postcss/_central-textlogo.css
b/dev/wikipedia.org/assets/postcss/_central-textlogo.css
new file mode 100644
index 0000000..d3ad894
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_central-textlogo.css
@@ -0,0 +1,68 @@
+/* ::: Central Logo ::: */
+
+/* Section containing the central Wikipedia header */
+
+.central-textlogo {
+ /* FIXME replace em with rem? */
+ margin: 1em 0 0.5em 0;
+ padding: 10px 0;
+ font-family: 'Linux Libertine', 'Hoefler Text', Georgia, 'Times New
Roman', Times, serif;
+ font-size: 30px;
+ font-weight: normal;
+ line-height: 110%;
+ text-align: center;
+ /* Crossed W in Linux Libertine */
+ -moz-font-feature-settings: "ss05=1";
+ -moz-font-feature-settings: "ss05";
+ -webkit-font-feature-settings: "ss05";
+ -ms-font-feature-settings: "ss05";
+ font-feature-settings: "ss05";
+}
+
+.localized-slogan {
+ display: block;
+ margin-bottom: -20px;
+ /* FIXME replace with var() */
+ font-family: 'Linux Libertine', 'Times New Roman', serif;
+ font-size: 16px;
+ font-variant: normal;
+ font-weight: normal;
+}
+
+@media all and ( max-width: 480px ) {
+ .central-textlogo {
+ position: relative;
+ height: 70px;
+ margin: 0;
+ padding: 0;
+ line-height: normal;
+ text-align: center;
+ }
+
+ .central-textlogo img {
+ height: 35px;
+ width: auto;
+ /* FIXME replace with rem */
+ margin-top: 8px;
+ }
+
+ .localized-slogan {
+ /* FIXME replace with rem? */
+ margin-left: 18px;
+ }
+}
+
+@media all and ( max-width: 375px ) {
+ .central-textlogo {
+ display: inline-block;
+ left: 84px;
+ }
+}
+
+@media all and ( max-width: 240px ) {
+
+ .central-textlogo img {
+ height: auto;
+ width: 100px;
+ }
+}
diff --git a/dev/wikipedia.org/assets/postcss/_footer.css
b/dev/wikipedia.org/assets/postcss/_footer.css
index ee26d2d..4e0ed58 100644
--- a/dev/wikipedia.org/assets/postcss/_footer.css
+++ b/dev/wikipedia.org/assets/postcss/_footer.css
@@ -1,15 +1,14 @@
-/**
-* new portal footer
-* https://phabricator.wikimedia.org/T131238
-*/
+/* ::: Footer ::: */
.footer {
+ overflow: hidden;
+ max-width: 100%;
margin: 0 auto;
+ /* FIXME why mixing em and rem ? */
padding: 2.6rem 1em 1em 1em;
font-size: 0.8rem;
- overflow: hidden;
- max-width: 100%;
}
+
.footer:before,
.footer:after {
content: ' ';
@@ -42,10 +41,11 @@
.footer-sidebar-text {
position: relative;
- color: var( --ss-c-grey );
margin: 0;
+ /* FIXME replace px with rem? */
padding-left: 60px;
padding-right: 20px;
+ color: var( --ss-c-grey );
}
.privacy-policy-links {
@@ -56,58 +56,18 @@
display: block;
}
-.other-projects {
- width: 70%;
- display: inline-block;
-}
-
-.other-project {
- position: relative;
- width: 33%;
- height: 90px;
- float: left;
-}
-
-.other-project-link {
- display: inline-block;
- min-height: 50px;
- white-space: nowrap;
- max-width: 100%;
-}
-
-.other-project-icon {
- display: inline-block;
- width: 50px;
- text-align: center;
-}
-
-.other-project .sprite-project-logos {
- display: inline-block;
-}
-
-.other-project-text {
- display: inline-block;
- vertical-align: top;
- white-space: normal;
- max-width: 65%; /* approximating the 50px width of the icon */
-}
-
-.other-project-title,
-.other-project-tagline {
- display: block;
-}
-
-.other-project-tagline {
- color: var( --ss-c-grey );
- font-size: 0.95em;
+.site-license {
+ margin: 0;
+ color: var( --ss-c-grey );
+ text-align: center;
}
@media screen and ( max-width: 768px ) {
.footer {
+ display: flex;
+ flex-direction: column;
padding-top: 1em;
- display: flex;
- flex-direction: column;
}
.footer .footer-sidebar {
@@ -136,10 +96,11 @@
}
.footer-sidebar-icon {
+ display: block;
position: relative;
- display: block;
+ left: 0;
+ /* FIXME replace em with rem? */
margin: 0 auto 1em auto;
- left: 0;
}
.footer-sidebar-content {
@@ -153,37 +114,14 @@
}
.privacy-policy-links a {
display: inline-block;
+ /* FIXME replace em with rem? */
margin: 0 0.5em;
}
-
- .other-projects {
- width: 100%;
- }
-
- .other-project {
- width: 33%;
- }
-}
-
-.site-license {
- margin: 0;
- text-align: center;
- color: var( --ss-c-grey );
}
@media screen and ( max-width: 480px ) {
.footer {
+ /* FIXME why mixing em and rem? */
padding: 0.6rem 0.5em 1em 0.5em;
}
- .other-project {
- width: 50%;
- }
}
-
-@media screen and ( max-width: 320px ) {
- .other-project-text {
- margin-right: 5px;
- font-size: 0.9em;
- }
-}
-
diff --git a/dev/wikipedia.org/assets/postcss/_localization.css
b/dev/wikipedia.org/assets/postcss/_localization.css
new file mode 100644
index 0000000..ce93a20
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_localization.css
@@ -0,0 +1,18 @@
+/**
+ * This code was used to localize the top-ten language links
+ * for the A/B test titled "A/B test: browser language detection"
+ *
+ * A/B test documented here:
+ * https://www.mediawiki.org/wiki/Wikipedia.org_Portal_A/B_testing
+ */
+
+.js-enabled .jsl10n,
+.js-enabled .central-featured {
+ visibility: hidden;
+}
+
+.jsl10n-visible .jsl10n,
+.jsl10n-visible .central-featured {
+ visibility: visible;
+}
+
diff --git a/dev/wikipedia.org/assets/postcss/_localized_topten.css
b/dev/wikipedia.org/assets/postcss/_localized_topten.css
deleted file mode 100644
index 6ef1374..0000000
--- a/dev/wikipedia.org/assets/postcss/_localized_topten.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * This code was used to localize the top-ten language links
- * for the A/B test titled "A/B test: browser language detection"
- *
- * A/B test documented here:
- * https://www.mediawiki.org/wiki/Wikipedia.org_Portal_A/B_testing
- */
-
-.js-enabled .jsl10n,
-.js-enabled .central-featured {
- visibility: hidden;
-}
-
-.jsl10n-visible .jsl10n,
-.jsl10n-visible .central-featured {
- visibility: visible;
-}
-
-.search-container {
- margin-top: 0;
-}
-
-.central-featured {
- height: 25em;
-}
-
-.central-featured-logo-wrapper {
- line-height: 24em;
-}
-
-.central-featured-lang strong {
- display: block;
-}
-
-.localized-slogan {
- font-size: 16px;
- display: block;
- font-variant: normal;
- font-weight: normal;
- margin-bottom: -20px;
- font-family: 'Linux Libertine', 'Times New Roman', serif;
-}
-
-@media all and ( max-width: 480px ) {
- .central-textlogo img {
- margin-top: 8px;
- }
-
- .localized-slogan {
- margin-left: 18px;
- }
-
- .search-container {
- margin-top: 0;
- }
-}
diff --git a/dev/wikipedia.org/assets/postcss/_media-print.css
b/dev/wikipedia.org/assets/postcss/_media-print.css
new file mode 100644
index 0000000..7c6eacc
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_media-print.css
@@ -0,0 +1,25 @@
+/* ::: Print stylesheet ::: */
+
+@media print {
+
+ body {
+ background-color: transparent;
+ }
+
+ a {
+ color: #000 !important;
+ background: none !important;
+ padding: 0 !important;
+ }
+
+ a:link,
+ a:visited {
+ color: #520;
+ background: transparent;
+ }
+
+ img {
+ border: 0;
+ }
+
+}
diff --git a/dev/wikipedia.org/assets/postcss/_other-languages-bookshelf.css
b/dev/wikipedia.org/assets/postcss/_other-languages-bookshelf.css
new file mode 100644
index 0000000..bfe37e9
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_other-languages-bookshelf.css
@@ -0,0 +1,71 @@
+/* ::: Language lists, bookshelves ::: */
+
+.bookshelf {
+ display: block;
+ border-top: 1px solid var( --border-color-heading );
+ box-shadow: 0 -1px 0 #fff;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.bookshelf span {
+ background-color: var( --background-color-framed );
+ position: relative;
+ top: -0.7rem;
+ font-weight: normal;
+}
+
+.bookshelf-container {
+ display: block;
+ overflow: visible;
+ height: 1px;
+ width: 100%;
+ margin: 1.5rem 0 1rem;
+ font-size: 13px;
+ font-weight: bold;
+ line-height: 20px;
+}
+
+.bookshelf-container .text {
+ padding: 0 0.5em;
+}
+
+.bookshelf-container .bookend {
+ display: inline-block;
+ vertical-align: top;
+
+}
+
+@media all and ( max-width: 480px ) {
+
+ .bookshelf {
+ width: auto;
+ left: auto;
+ }
+
+ .bookshelf-container {
+ text-align: left;
+ width: auto;
+ }
+
+ .bookshelf-container .bookend {
+ width: 40px !important;
+ }
+
+ .bookshelf-container .bookend:last-child {
+ display: none;
+ }
+}
+
+/* stylelint-disable media-feature-name-no-vendor-prefix,
media-feature-name-no-unknown */
+@media ( -webkit-min-device-pixel-ratio: 1.5 ), ( min--moz-device-pixel-ratio:
1.5 ), ( -o-min-device-pixel-ratio: 3/2 ), ( min-resolution: 1.5dppx ), (
min-resolution: 144dpi ) {
+ .bookshelf-container .bookend {
+ background-size: 40px auto;
+ }
+}
+
+@media ( -webkit-min-device-pixel-ratio: 2 ), ( min--moz-device-pixel-ratio: 2
), ( -o-min-device-pixel-ratio: 2 ), ( min-resolution: 2dppx ), (
min-resolution: 192dpi ) {
+ .bookshelf-container .bookend {
+ background-size: 40px auto;
+ }
+}
diff --git a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
b/dev/wikipedia.org/assets/postcss/_other-languages.css
similarity index 64%
rename from dev/wikipedia.org/assets/postcss/_lang-dropdown.css
rename to dev/wikipedia.org/assets/postcss/_other-languages.css
index 4fb35c8..93fdd8b 100644
--- a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
+++ b/dev/wikipedia.org/assets/postcss/_other-languages.css
@@ -7,18 +7,14 @@
* ".lang-list-active" is also appended to body to toggles the language list.
*/
-hr {
- border-color: var( --border-color-heading );
-}
-
.lang-list-container {
- position: relative;
+ background-color: var( --background-color-framed );
+ overflow: hidden;
+ position: relative;
+ box-sizing: border-box;
+ max-height: 0;
+ width: 80%;
margin: -1rem auto 3rem;
- box-sizing: border-box;
- overflow: hidden;
- max-height: 0;
- width: 80%;
- background-color: var( --background-color-framed );
transition: max-height 0.5s ease-out, visibility 0.5s ease-in 1s;
}
@@ -43,19 +39,20 @@
}
.lang-list-button {
+ background-color: var( --background-color-framed );
display: inline;
position: relative;
- padding: 0.5em 1em;
+ z-index: 1;
margin: 0 auto;
+ /* FIXME replace em with rem? */
+ padding: 0.5em 1em;
+ outline: 1rem solid #fff;
+ border: var( --border-base );
+ border-radius: var( --border-radius-base );
color: var( --color-primary );
font-size: 0.8rem;
+ font-weight: normal;
line-height: 1;
- font-weight: normal;
- z-index: 1;
- background-color: var( --background-color-framed );
- border: var( --border-base );
- border-radius: var( --border-radius-base );
- outline: 1rem solid #fff;
transition: outline-width 100ms ease-in 500ms;
}
@@ -71,14 +68,15 @@
.lang-list-active .lang-list-button {
background-color: var( --background-color-framed--hover );
- border-color: var( --border-color-base--active );
outline: 1px solid #fff;
+ border-color: var( --border-color-base--active );
transition-delay: 0s;
}
.lang-list-button-text {
- vertical-align: middle;
+ /* FIXME replace em with rem? */
padding: 0 0.5em;
+ vertical-align: middle;
}
.lang-list-button i {
@@ -92,13 +90,13 @@
}
.lang-list-border {
+ background-color: var( --border-color-heading );
display: block;
+ position: relative;
+ max-width: 460px;
+ width: 80%;
margin: -1rem auto 1rem;
- position: relative;
- max-width: 460px;
- width: 80%;
height: 1px;
- background-color: var( --border-color-heading );
transition: max-width 0.2s ease-out 0.4s;
}
@@ -113,9 +111,9 @@
.lang-list-content {
position: relative;
+ box-sizing: border-box;
width: 100%;
- box-sizing: border-box;
- padding: 1rem 1rem 0;
+ padding: 1rem 1rem 0;
}
.sprite-icons-arrow-down-blue {
@@ -126,34 +124,66 @@
transform: rotate( 180deg );
}
-.bookshelf-container {
- margin: 1.5rem 0 1rem;
- display: block;
- overflow: visible;
- height: 1px;
-}
-
-.bookshelf {
- text-align: center;
- white-space: normal;
- border-top: 1px solid var( --border-color-heading );
- box-shadow: 0 -1px 0 #fff;
-}
-.bookshelf span {
- background-color: var( --background-color-framed );
- position: relative;
- top: -0.7rem;
- font-weight: normal;
-}
-
.langlist {
+ width: auto;
+ margin: 1rem 0;
text-align: left;
- width: auto;
- margin: 1rem 0;
+}
+
+.langlist-tiny {
+ margin: 0.5em 3em 3em 3em;
+}
+
+.langlist-others {
+ margin: 0 3em 2em 3em;
+ font-weight: bold;
}
.langlist-large {
font-size: inherit;
+}
+
+/**
+ * Style for horizontal lists (separator following item).
+ * @note Support for unused tags like <dt> has been stripped out, and the
+ * dependency on :last-child and JavaScript has been removed in favor of
+ * :before.
+ * @source mediawiki.org/wiki/Snippets/Horizontal_lists
+ * @revision 6 (2014-05-09)
+ * @author [[User:Edokter]]
+ */
+.hlist ul {
+ margin: 0;
+ padding: 0;
+}
+
+/* Display list items inline */
+.hlist li {
+ display: inline;
+}
+
+/* Display nested lists inline */
+.hlist ul ul {
+ display: inline;
+}
+
+/* Generate interpuncts */
+.hlist li:before {
+ content: " · ";
+ font-weight: bold;
+}
+
+.hlist li:first-child:before {
+ content: none;
+}
+
+/* Add parentheses around nested lists */
+.hlist li > ul:before {
+ content: "\00a0(";
+}
+
+.hlist li > ul:after {
+ content: ") ";
}
.langlist > ul {
@@ -186,9 +216,8 @@
}
.langlist-others > ul {
+ text-align: center;
column-count: 1;
- text-align: center;
-
}
.langlist-others > ul li {
@@ -196,7 +225,7 @@
}
.langlist-others > ul li:before {
- content: " · ";
+ content: ' · ';
}
.langlist-others > ul li:first-child:before {
@@ -208,6 +237,12 @@
.langlist {
font-size: inherit;
}
+
+ .langlist a {
+ word-wrap: break-word;
+ white-space: normal;
+ }
+
.lang-list-container {
width: auto;
margin-left: 0.5rem;
@@ -216,37 +251,5 @@
}
.bookshelf {
overflow: visible;
- }
-
- .central-featured {
- height: auto;
- }
-
- .central-featured:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
-
- .central-featured-lang {
- font-size: 0.8rem;
- width: 33%;
- box-sizing: border-box;
- margin: 0;
- padding: 0 1rem;
- text-align: center;
- }
-
- .central-featured-lang strong {
- font-size: 0.8rem;
- }
-}
-
-@media all and ( max-width: 375px ) {
- .central-featured-lang {
- font-size: 0.7rem;
}
}
diff --git a/dev/wikipedia.org/assets/postcss/_other-projects.css
b/dev/wikipedia.org/assets/postcss/_other-projects.css
new file mode 100644
index 0000000..c5072f7
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_other-projects.css
@@ -0,0 +1,72 @@
+/* ::: Other projects ::: */
+
+.other-projects {
+ display: inline-block;
+ width: 70%;
+}
+
+.other-project {
+ float: left;
+ position: relative;
+ width: 33%;
+ height: 90px;
+}
+
+.other-project-link {
+ display: inline-block;
+ min-height: 50px;
+ max-width: 100%;
+ white-space: nowrap;
+}
+
+.other-project-icon {
+ display: inline-block;
+ width: 50px;
+ text-align: center;
+}
+
+.other-project .sprite-project-logos {
+ display: inline-block;
+}
+
+.other-project-text {
+ display: inline-block;
+ max-width: 65%; /* approximating the 50px width of the icon */
+ vertical-align: top;
+ white-space: normal;
+}
+
+.other-project-title,
+.other-project-tagline {
+ display: block;
+}
+
+.other-project-tagline {
+ color: var( --ss-c-grey );
+ /* FIXME use rem */
+ font-size: 0.95em;
+}
+
+@media screen and ( max-width: 768px ) {
+
+ .other-projects {
+ width: 100%;
+ }
+
+ .other-project {
+ width: 33%;
+ }
+}
+
+@media screen and ( max-width: 480px ) {
+ .other-project {
+ width: 50%;
+ }
+}
+
+@media screen and ( max-width: 320px ) {
+ .other-project-text {
+ margin-right: 5px;
+ font-size: 0.9em;
+ }
+}
diff --git a/dev/wikipedia.org/assets/postcss/_search-box.css
b/dev/wikipedia.org/assets/postcss/_search-box.css
deleted file mode 100644
index c1a5148..0000000
--- a/dev/wikipedia.org/assets/postcss/_search-box.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Search bar below the central logo area
- */
-.search-container {
- float: none;
- margin: 2.2rem auto 1.5em auto;
- max-width: 95%;
- padding: 0.3em;
- text-align: center;
- vertical-align: middle;
- width: 540px;
- }
-
-#searchInput {
- padding: 0.5rem;
- font-size: 1rem;
- line-height: 1.6rem;
- width: 100%;
- padding-right: 6.4rem;
- height: 2.7rem;
- }
-
-.search-container button {
- padding: 0.5rem 1rem;
- vertical-align: middle;
- margin: 0;
- line-height: 1.6rem;
- font-size: 1rem;
- z-index: var( --ss-button-z-index );
-}
-
-.search-container .sprite-icons-search-icon {
- display: inline-block;
- vertical-align: middle;
-}
-
-/*--- CSS tricks to make the search input a simple input */
-.search-container input[type="search"]::-webkit-search-decoration,
-.search-container input[type="search"]::-webkit-search-cancel-button,
-.search-container input[type="search"]::-webkit-search-results-button,
-.search-container input[type="search"]::-webkit-search-results-decoration {
- -webkit-appearance: none;
- }
-.search-container input::-webkit-calendar-picker-indicator {
- display: none;
- }
-#search {
- -webkit-appearance: none;
- border-radius: 0;
- }
-
-/* Language picker */
-.search-container .search-input {
- display: inline-block;
- width: 73%;
- position: relative;
- vertical-align: top;
- margin-right: 0.5rem;
- }
-
-.search-container .sprite-icons-arrow-down {
- display: inline-block;
- vertical-align: middle;
- position: absolute;
- top: 6px;
- right: 6.5px;
- margin: 0;
-}
-
-/* Responsive mode */
-@media only screen and ( max-width: 480px ) {
-
- .search-container .pure-form fieldset {
- margin-left: 5px;
- margin-right: 80px;
- }
-
- .search-container .search-input {
- margin-left: 5px;
- margin-right: -70px;
- margin-bottom: 0;
- width: 100%;
- }
- .search-container .pure-form button {
- float: right;
- padding: 0.5rem 1rem;
- right: -70px;
- margin: 0;
- }
- .search-container {
- margin-top: 0.2em;
- }
-}
diff --git a/dev/wikipedia.org/assets/postcss/_search-language-picker.css
b/dev/wikipedia.org/assets/postcss/_search-language-picker.css
index ab7f11f..fbb46b0 100644
--- a/dev/wikipedia.org/assets/postcss/_search-language-picker.css
+++ b/dev/wikipedia.org/assets/postcss/_search-language-picker.css
@@ -1,70 +1,61 @@
-/* Common to JS and non JS versions */
+/* ::: Language picker style (common to JS and non JS version) ::: */
+
.styled-select {
- display: none;
- position: absolute;
-
- top: var( --ss-pos-top );
- bottom: var( --ss-pos-bottom );
- right: var( --ss-pos-right );
-
- height: var( --ss-height );
-
- max-width: var( --ss-width );
-
- padding: 0;
- margin: 0;
-
- border-radius: 3px;
+ display: none;
+ position: absolute;
+ top: var( --ss-pos-top );
+ bottom: var( --ss-pos-bottom );
+ right: var( --ss-pos-right );
+ max-width: var( --ss-width );
+ height: var( --ss-height );
+ margin: 0;
+ padding: 0;
+ border-radius: 3px;
}
.styled-select:hover {
- background-color: var( --ss-c-grey-hover );
+ background-color: var( --ss-c-grey-hover );
}
+
.styled-select .hide-arrow {
- right: 32px;
- max-width: 68px;
+ right: 32px;
+ max-width: 68px;
- height: var( --ss-height );
- padding: 0;
+ height: var( --ss-height );
+ padding: 0;
- overflow: hidden;
- text-align: right;
+ overflow: hidden;
+ text-align: right;
}
.styled-select select {
- border: 0;
- box-sizing: border-box;
+ background: transparent;
+ display: inline;
+ overflow: hidden;
+ height: var( --ss-height );
+ min-width: var( --ss-select-width );
+ max-width: var( --ss-select-width );
+ width: var( --ss-select-width );
+ outline: 0;
+ box-sizing: border-box;
+ border: 0;
+ line-height: 19.5px;
- overflow: hidden;
+ /*hide default down arrow in webkit */
+ -webkit-appearance: none;
- display: inline;
+ /* Firefox */
+ -moz-appearance: window;
+ text-indent: 0.01px;
+ text-overflow: '';
- height: var( --ss-height );
- max-width: var( --ss-select-width );
- min-width: var( --ss-select-width );
- width: var( --ss-select-width );
+ /* Opera */
+ -o-appearance: none !important;
+ opacity: 0;
- line-height: 19.5px;
-
- background: transparent;
-
- /*hide default down arrow in webkit */
- -webkit-appearance: none;
-
- /* Firefox */
- -moz-appearance: window;
- text-indent: 0.01px;
- text-overflow: '';
-
- /* Opera */
- -o-appearance: none !important;
- opacity: 0;
-
- /* All browsers */
- appearance: none;
-
- outline: 0;
- cursor: pointer;
+ /* All browsers */
+ appearance: none;
+ cursor: pointer;
}
/*
@@ -73,12 +64,12 @@
.styled-select.no-js {
width: var( --ss-width );
}
-.styled-select.no-js select {
- margin: 0;
- padding: 0 24px 0 8px;
- color: var( --ss-c-grey );
- opacity: 1;
+.styled-select.no-js select {
+ opacity: 1;
+ margin: 0;
+ padding: 0 24px 0 8px;
+ color: var( --ss-c-grey );
}
.styled-select.no-js .hide-arrow {
@@ -99,21 +90,20 @@
}
.styled-select.js-enabled select {
- position: absolute;
- width: 100%;
- height: 100%;
- background: transparent;
- border: 0;
- left: 0;
- top: 0;
- z-index: var( --ss-select-z-index );
-
- margin: 0;
- padding: 0 24px 0 0;
-
- color: transparent;
- color: rgba( 255, 255, 255, 0 );
+ background: transparent;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ z-index: var( --ss-select-z-index );
+ width: 100%;
+ border: 0;
+ margin: 0;
+ padding: 0 24px 0 0;
+ color: transparent;
+ color: rgba( 255, 255, 255, 0 );
}
+
.styled-select.js-enabled select option {
color: var( --ss-c-grey );
}
@@ -126,23 +116,23 @@
}
.styled-select.js-enabled select:focus + .styled-select-active-helper {
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 0;
- outline: 1px solid var( --color-primary--focus );
- top: 0;
- left: 0;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ width: 100%;
+ height: 100%;
+ outline: 1px solid var( --color-primary--focus );
}
.search-container .js-langpicker-label {
- display: inline-block;
- color: var( --ss-c-grey );
- line-height: var( --ss-height );
- font-size: 0.8rem;
- text-transform: uppercase;
- margin: 0;
+ display: inline-block;
+ margin: 0;
+ color: var( --ss-c-grey );
+ font-size: 0.8rem;
+ line-height: var( --ss-height );
+ text-transform: uppercase;
}
/* END JS only lang selector idea */
@@ -163,14 +153,5 @@
@-moz-document url-prefix() {
.styled-select select {
width: 110%;
- }
-}
-
-/* hack to fall back in opera */
-/* stylelint-disable-next-line selector-type-no-unknown */
-_:-o-prefocus,
-.selector {
- .styled-select select {
- background: none;
}
}
diff --git a/dev/wikipedia.org/assets/postcss/_search-suggestions.css
b/dev/wikipedia.org/assets/postcss/_search-suggestions.css
new file mode 100644
index 0000000..53e4500
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_search-suggestions.css
@@ -0,0 +1,101 @@
+/* ::: Search suggestions dropdown ::: */
+
+.suggestions-dropdown {
+ /* FIXME should use a var() */
+ background-color: #fff;
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ z-index: 2;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ /* FIXME should use a var() */
+ border: 1px solid #ccc;
+ border-top: 0;
+ text-align: left;
+ list-style-type: none;
+}
+
+.suggestion-link {
+ /* FIXME can we use rem? */
+ display: block;
+ position: relative;
+ box-sizing: border-box;
+ min-height: 70px;
+ width: 100%;
+ padding: 10px 10px 10px 85px;
+ /* FIXME should use a var() */
+ border-bottom: 1px solid #eee;
+ color: inherit;
+ text-decoration: none;
+ text-align: initial;
+ white-space: normal;
+}
+
+.suggestion-link.active {
+ /* FIXME should use a var() */
+ background-color: #eee;
+}
+
+/* using element selector to override default anchor styles */
+a.suggestion-link:hover {
+ /* FIXME should use a var() */
+ color: #0645ad;
+ text-decoration: none;
+}
+
+a.suggestion-link:active,
+a.suggestion-link:focus {
+ outline: 0;
+ white-space: normal;
+}
+
+.suggestion-thumbnail {
+ /* FIXME should use a var() */
+ background-color: #eee;
+ background-image: url( portal/wikipedia.org/assets/img/noimage.png );
+ background-image: -webkit-linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0,
0, 0, 0 ) ), url(
data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%20enable-background%3D%22new%200%200%2056%2056%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M0%200h56v56h-56z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23999%22%20d%3D%22M36.4%2013.5h-18.6v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2%203.5h5.1v6.4h-5.1v-6.4zm-8.8%200h6v1.8h-6v-1.8zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A
);
+ background-image: -webkit-linear-gradient( transparent, transparent ),
url( portal/wikipedia.org/assets/img/noimage.svg ) !ie;
+ background-image: linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0
) ), url(
data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%20enable-background%3D%22new%200%200%2056%2056%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M0%200h56v56h-56z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23999%22%20d%3D%22M36.4%2013.5h-18.6v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2%203.5h5.1v6.4h-5.1v-6.4zm-8.8%200h6v1.8h-6v-1.8zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A
);
+ background-image: linear-gradient( transparent, transparent ), url(
portal/wikipedia.org/assets/img/noimage.svg ) !ie;
+ background-image: -o-linear-gradient( transparent, transparent ), url(
portal/wikipedia.org/assets/img/noimage.png );
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 100% auto;
+ background-size: cover;
+ height: 100%;
+ width: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.suggestion-title {
+ /* FIXME can we use rem ? */
+ margin: 0 0 0.5em 0;
+ /* FIXME should use a var() */
+ color: #555;
+ font-size: 1.2em;
+ line-height: 1.2em;
+}
+
+.suggestion-highlight {
+ font-style: normal;
+ text-decoration: underline;
+}
+
+.suggestion-description {
+ /* FIXME can we use rem ? */
+ /* FIXME color should use a var() */
+ color: #666;
+ margin: 0;
+ font-size: 1em;
+ line-height: 1.1em;
+}
+
+/* FIXME there is no .search-form class */
+.search-form {
+ position: relative;
+}
diff --git a/dev/wikipedia.org/assets/postcss/_search.css
b/dev/wikipedia.org/assets/postcss/_search.css
new file mode 100644
index 0000000..a817b35
--- /dev/null
+++ b/dev/wikipedia.org/assets/postcss/_search.css
@@ -0,0 +1,101 @@
+/* ::: Search bar below the central logo area ::: */
+
+.search-container {
+ /* FIXME why mixing em, rem, % and px ? */
+ float: none;
+ max-width: 95%;
+ width: 540px;
+ margin: 0 auto 1.5em auto;
+ padding: 0.3em;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.search-container button {
+ margin: 0;
+ padding: 0.5rem 1rem;
+ z-index: var( --ss-button-z-index );
+ font-size: 1rem;
+ line-height: 1.6rem;
+ vertical-align: middle;
+}
+
+.search-container .sprite-icons-search-icon {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+/*--- CSS tricks to make the search input a simple input */
+.search-container input[type="search"]::-webkit-search-decoration,
+.search-container input[type="search"]::-webkit-search-cancel-button,
+.search-container input[type="search"]::-webkit-search-results-button,
+.search-container input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance: none;
+}
+
+.search-container input::-webkit-calendar-picker-indicator {
+ display: none;
+}
+
+/* FIXME verify that we have a #search element */
+#search {
+ border-radius: 0;
+ -webkit-appearance: none;
+}
+
+.search-container .sprite-icons-arrow-down {
+ display: inline-block;
+ position: absolute;
+ top: 6px;
+ right: 6.5px;
+ margin: 0;
+ vertical-align: middle;
+}
+
+#searchInput {
+ height: 2.7rem;
+ width: 100%;
+ padding: 0.5rem;
+ padding-right: 6.4rem;
+ font-size: 1rem;
+ line-height: 1.6rem;
+}
+
+/* FIXME why should we have a class and an id ? */
+/* Language picker */
+.search-container .search-input {
+ display: inline-block;
+ position: relative;
+ width: 73%;
+ margin-right: 0.5rem;
+ vertical-align: top;
+}
+
+/* Responsive mode */
+@media only screen and ( max-width: 480px ) {
+
+ .search-container {
+ margin-top: 0;
+ }
+
+ .search-container .pure-form fieldset {
+ /* FIXME can we use rem? */
+ margin-left: 5px;
+ margin-right: 80px;
+ }
+
+ /* FIXME why should we have a class and an id ? */
+ .search-container .search-input {
+ margin-left: 5px;
+ margin-right: -70px;
+ margin-bottom: 0;
+ width: 100%;
+ }
+
+ .search-container .pure-form button {
+ float: right;
+ right: -70px;
+ margin: 0;
+ padding: 0.5rem 1rem;
+ }
+}
diff --git a/dev/wikipedia.org/assets/postcss/_wm-portal.css
b/dev/wikipedia.org/assets/postcss/_wm-portal.css
index 2d475d8..f73775c 100644
--- a/dev/wikipedia.org/assets/postcss/_wm-portal.css
+++ b/dev/wikipedia.org/assets/postcss/_wm-portal.css
@@ -8,110 +8,7 @@
*
*/
-body {
- background-color: #fff;
- font: 13px/1.5 sans-serif;
- margin: 0.3em 0;
-}
-
-a,
-a:active,
-a:focus {
- unicode-bidi: embed;
- outline: 0;
- color: var( --color-primary );
- text-decoration: none;
-}
-a:focus {
- outline: 1px solid var( --color-primary );
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-img {
- border: 0;
- vertical-align: middle;
-}
-
-hr {
- clear: both;
- height: 0;
- border: 0;
- border-bottom: 1px solid #aaa;
- margin: 0.2em 1em;
-}
-
-/**
- * Central logo area for wiki-project portals
- * (e.g. where the globe is on www.wikipedia.org)
- */
-.central-textlogo {
- margin: 1em 0 0.5em 0;
- text-align: center;
- font-size: 30px;
- line-height: 110%;
- font-family: 'Linux Libertine', 'Hoefler Text', Georgia, 'Times New
Roman', Times, serif;
- font-weight: normal;
- padding: 10px 0;
- /* Crossed W in Linux Libertine */
- -moz-font-feature-settings: "ss05=1";
- -moz-font-feature-settings: "ss05";
- -webkit-font-feature-settings: "ss05";
- -ms-font-feature-settings: "ss05";
- font-feature-settings: "ss05";
-}
-
-.central-featured {
- position: relative;
- text-align: center;
- vertical-align: middle;
- max-width: 100%;
- width: 42em;
- margin: 0 auto;
- height: 26em;
-}
-
-.central-featured-logo-wrapper {
- vertical-align: middle;
- line-height: 26em;
-}
-
-.central-featured-lang {
- position: absolute;
- width: 12em;
-}
-
-/* Make entire block clickable, surpress hover underline */
-.central-featured-lang .link-box {
- display: block;
- padding: 0;
- text-decoration: none;
- white-space: normal;
-}
-/* Restore underline on main label */
-.central-featured-lang .link-box:hover strong {
- text-decoration: underline;
-}
-/* Surpress blue color */
-.central-featured-lang .link-box em,
-.central-featured-lang .link-box small {
- color: #000;
- text-decoration: none;
-}
-
-.central-featured-lang strong {
- font-size: larger;
-}
-
-.central-featured-lang em {
- font-style: italic;
-}
-
-.central-featured-lang .emNonItalicLang {
- font-style: normal;
-}
+/* FIXME investigate if this might be needed */
/* Serbo-Croatian is dual-script, so it needs some tweaking to fit in the top
10 ring. */
/* .digraphic strong {
@@ -123,199 +20,7 @@
display: none;
} */
-.lang1 {
- top: 0;
- right: 60%;
-}
-.lang2 {
- top: 0;
- left: 60%;
-}
-.lang3 {
- top: 20%;
- right: 70%;
-}
-.lang4 {
- top: 20%;
- left: 70%;
-}
-.lang5 {
- top: 40%;
- right: 72%;
-}
-.lang6 {
- top: 40%;
- left: 72%;
-}
-.lang7 {
- top: 60%;
- right: 70%;
-}
-.lang8 {
- top: 60%;
- left: 70%;
-}
-.lang9 {
- top: 80%;
- right: 60%;
-}
-.lang10 {
- top: 80%;
- left: 60%;
-}
-
-/**
- * Language lists, bookshelves, etc.
- */
-.bookshelf-container {
- width: 100%;
- overflow: hidden;
- margin: 2em 0 0.5em 0;
- font-size: 13px;
- font-weight: bold;
- line-height: 20px;
-}
-
-.bookshelf-container .text {
- padding: 0 0.5em;
-}
-
-.bookshelf {
- display: block;
- text-align: center;
- white-space: nowrap;
-}
-
-.bookshelf-container .bookend {
- display: inline-block;
- vertical-align: top;
-
-}
-
-.langlist {
- text-align: center;
- margin: 0.5em 3em 2.5em 3em;
-}
-
-.langlist-large {
- font-size: larger;
-}
-
-.langlist-tiny {
- margin: 0.5em 3em 3em 3em;
-}
-
-.langlist-others {
- margin: 0 3em 2em 3em;
- font-weight: bold;
-}
-
-/**
- * Style for horizontal lists (separator following item).
- * @note Support for unused tags like <dt> has been stripped out, and the
- * dependency on :last-child and JavaScript has been removed in favor of
- * :before.
- * @source mediawiki.org/wiki/Snippets/Horizontal_lists
- * @revision 6 (2014-05-09)
- * @author [[User:Edokter]]
- */
-.hlist ul {
- margin: 0;
- padding: 0;
-}
-/* Display list items inline */
-.hlist li {
- display: inline;
-}
-/* Display nested lists inline */
-.hlist ul ul {
- display: inline;
-}
-/* Generate interpuncts */
-.hlist li:before {
- content: " · ";
- font-weight: bold;
-}
-.hlist li:first-child:before {
- content: none;
-}
-/* Add parentheses around nested lists */
-.hlist li > ul:before {
- content: "\00a0(";
-}
-.hlist li > ul:after {
- content: ") ";
-}
-
-/**
- * Print stylesheet
- */
-@media print {
-
- body {
- background-color: transparent;
- }
-
- a {
- color: #000 !important;
- background: none !important;
- padding: 0 !important;
- }
-
- a:link,
- a:visited {
- color: #520;
- background: transparent;
- }
-
- img {
- border: 0;
- }
-
-}
-
@media all and ( max-width: 480px ) {
- .central-textlogo {
- line-height: normal;
- padding: 0;
- margin: 0;
- height: 70px;
- text-align: center;
- position: relative;
- }
- .central-textlogo img {
- height: 35px;
- width: auto;
- margin-top: 22.5px;
- }
- .central-featured {
- width: auto;
- height: auto;
- padding-top: 2em;
- text-align: left;
- font-size: 0.8em;
- margin-top: 4em;
- }
- .central-featured-logo {
- right: 0;
- left: 0.8em;
- top: -70px;
- margin-top: -4em;
- width: 70px;
- position: absolute;
- }
- .central-featured-lang {
- right: auto;
- top: auto;
- position: relative;
- left: auto;
- text-align: left;
- margin-left: 1em;
- display: block;
- float: left;
- width: 40%;
- height: 5em;
- }
.search-container {
margin-top: 0;
height: 6em;
@@ -347,67 +52,13 @@
.language-search {
display: none;
}
- .bookshelf {
- width: auto;
- left: auto;
- overflow: hidden;
- text-align: left;
- }
- .bookshelf-container .bookend {
- width: 40px !important;
- }
- .bookshelf-container .bookend:last-child {
- display: none;
- }
- .langlist a {
- word-wrap: break-word;
- white-space: normal;
- }
- .langlist {
- font-size: 0.7em;
- }
- .bookshelf-container,
- .langlist {
- margin: 1em 1em 0 1em;
- text-align: left;
- width: auto;
- }
hr {
margin-top: 0.5em;
}
}
-@media all and ( max-width: 375px ) {
- .central-textlogo {
- left: 84px;
- display: inline-block;
- }
-}
-
-@media all and ( max-width: 240px ) {
- .central-featured-lang {
- width: 100%;
- }
- .central-textlogo img {
- width: 100px;
- height: auto;
- }
-}
-
-/* stylelint-disable media-feature-name-no-vendor-prefix,
media-feature-name-no-unknown */
-@media ( -webkit-min-device-pixel-ratio: 1.5 ), ( min--moz-device-pixel-ratio:
1.5 ), ( -o-min-device-pixel-ratio: 3/2 ), ( min-resolution: 1.5dppx ), (
min-resolution: 144dpi ) {
- .bookshelf-container .bookend {
- background-size: 40px auto;
- }
-}
-
-@media ( -webkit-min-device-pixel-ratio: 2 ), ( min--moz-device-pixel-ratio: 2
), ( -o-min-device-pixel-ratio: 2 ), ( min-resolution: 2dppx ), (
min-resolution: 192dpi ) {
- .bookshelf-container .bookend {
- background-size: 40px auto;
- }
-}
-
+/* stylelint-disable media-feature-name-no-unknown */
/* Subpixel borders supported in Gecko, Trident */
@media ( min--moz-device-pixel-ratio: 2 ), ( min-resolution: 2dppx ), (
min-resolution: 192dpi ) {
#footer,
@@ -419,7 +70,7 @@
border-bottom-width: 0.5px;
}
}
-/* stylelint-enable media-feature-name-no-vendor-prefix,
media-feature-name-no-unknown */
+/* stylelint-enable media-feature-name-no-unknown */
/* Subpixel borders not supported in older releases of Blink, WebKit */
@supports ( -webkit-marquee-style: slide ) {
@@ -433,6 +84,7 @@
}
}
+/* FIXME remove .formBtn ? it's not in wikipedia.org anymore */
/* Gives the button its previous native look */
.formBtn {
background-color: #fff;
@@ -457,6 +109,7 @@
background-color: #b0b0b0;
}
+/* FIXME remove #langsearch-input ? it's not in wikipedia.org anymore */
/*
Gives the inputs their previous look
*/
diff --git a/dev/wikipedia.org/assets/postcss/_wm-typeahead.css
b/dev/wikipedia.org/assets/postcss/_wm-typeahead.css
deleted file mode 100644
index 0e9f2a2..0000000
--- a/dev/wikipedia.org/assets/postcss/_wm-typeahead.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/*suggestion dropdown*/
-
-.suggestions-dropdown {
- position: absolute;
- left: 0;
- z-index: 2;
- background-color: #fff;
- width: 100%;
- padding: 0;
- margin: 0;
- list-style-type: none;
- text-align: left;
- border: 1px solid #ccc;
- border-top: 0;
- box-sizing: border-box;
- display: inline-block;
-}
-
-.suggestion-link {
- color: inherit;
- display: block;
- position: relative;
- width: 100%;
- min-height: 70px;
- box-sizing: border-box;
- border-bottom: 1px solid #eee;
- padding: 10px 10px 10px 85px;
- text-decoration: none;
- white-space: normal;
- text-align: initial;
-}
-
-.suggestion-link.active {
- background-color: #eee;
-}
-
-/* using element selector to override default anchor styles */
-a.suggestion-link:hover {
- color: #0645ad;
- text-decoration: none;
-}
-
-a.suggestion-link:active,
-a.suggestion-link:focus {
- white-space: normal;
- outline: 0;
-}
-
-.suggestion-thumbnail {
- width: 70px;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- background-size: 100% auto;
- background-size: cover;
- background-position: center center;
- background-repeat: no-repeat;
- background-color: #eee;
- background-image: url( portal/wikipedia.org/assets/img/noimage.png );
- background-image: -webkit-linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0,
0, 0 ) ), url(
data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%20enable-background%3D%22new%200%200%2056%2056%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M0%200h56v56h-56z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23999%22%20d%3D%22M36.4%2013.5h-18.6v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2%203.5h5.1v6.4h-5.1v-6.4zm-8.8%200h6v1.8h-6v-1.8zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A
);
- background-image: -webkit-linear-gradient( transparent, transparent ),
url( portal/wikipedia.org/assets/img/noimage.svg ) !ie;
- background-image: linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0 )
), url(
data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%20enable-background%3D%22new%200%200%2056%2056%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M0%200h56v56h-56z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23999%22%20d%3D%22M36.4%2013.5h-18.6v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2%203.5h5.1v6.4h-5.1v-6.4zm-8.8%200h6v1.8h-6v-1.8zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A
);
- background-image: linear-gradient( transparent, transparent ), url(
portal/wikipedia.org/assets/img/noimage.svg ) !ie;
- background-image: -o-linear-gradient( transparent, transparent ), url(
portal/wikipedia.org/assets/img/noimage.png );
-}
-
-.suggestion-title {
- font-size: 1.2em;
- line-height: 1.2em;
- margin: 0 0 0.5em 0;
- color: #555;
-}
-
-.suggestion-highlight {
- font-style: normal;
- text-decoration: underline;
-}
-
-.suggestion-description {
- font-size: 1em;
- line-height: 1.1em;
- margin: 0;
- color: #666;
-}
-
-.search-form {
- position: relative;
-}
diff --git a/dev/wikipedia.org/assets/postcss/style.css
b/dev/wikipedia.org/assets/postcss/style.css
index f950976..f68a5b5 100644
--- a/dev/wikipedia.org/assets/postcss/style.css
+++ b/dev/wikipedia.org/assets/postcss/style.css
@@ -1,13 +1,24 @@
+/* ::: Base ::: */
@import '_vars.css';
@import '_base.css';
+@import '_base-portal.css';
@import '_buttons.css';
@import '_forms.css';
-@import '_search-box.css';
-@import '_wm-typeahead.css';
+
+/* ::: Sections ::: */
+@import '_central-textlogo.css';
+@import '_central-featured.css';
+@import '_search.css';
+@import '_search-suggestions.css';
@import '_search-language-picker.css';
-@import '_footer.css';
-@import '_wm-portal.css';
-@import '_localized_topten.css';
-@import '_lang-dropdown.css';
+@import '_other-projects.css';
+@import '_other-languages.css';
+@import '_other-languages-bookshelf.css';
@import '_app-badge.css';
+@import '_footer.css';
+
+/* ::: Special ::: */
+@import '_wm-portal.css';
+@import '_localization.css';
@import '_ie.css';
+@import '_media-print.css';
--
To view, visit https://gerrit.wikimedia.org/r/342286
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1f583201fd108ca29e0a83fc9794333e12170839
Gerrit-PatchSet: 7
Gerrit-Project: wikimedia/portals
Gerrit-Branch: master
Gerrit-Owner: JGirault <jgira...@wikimedia.org>
Gerrit-Reviewer: JGirault <jgira...@wikimedia.org>
Gerrit-Reviewer: Jdrewniak <jdrewn...@wikimedia.org>
Gerrit-Reviewer: MarcoAurelio <strig...@gmail.com>
Gerrit-Reviewer: Mxn <m...@1ec5.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
