Phuedx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/113459
Change subject: Convert CSS to LESS
......................................................................
Convert CSS to LESS
* Rename all .css files to .less
* Start using some LESS language features to tidy up
ext.gettingstarted.return.less and
ext.gettingstarted.taskToolbar.less
* Remove the unused ext.gettingstarted.css file
Change-Id: I09e81df3a945213727a5c212bf001d728e7a3141
---
M GettingStarted.php
D resources/ext.gettingstarted.css
R resources/ext.gettingstarted.return.less
R resources/ext.gettingstarted.taskToolbar.hidden.less
R resources/ext.gettingstarted.taskToolbar.less
R resources/ext.gettingstarted.taskToolbar.lowWidth.less
6 files changed, 46 insertions(+), 152 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted
refs/changes/59/113459/1
diff --git a/GettingStarted.php b/GettingStarted.php
index 4cc9157..2cdfcb2 100644
--- a/GettingStarted.php
+++ b/GettingStarted.php
@@ -180,15 +180,15 @@
$wgResourceModules[ 'ext.gettingstarted.taskToolbar' ] = array(
'scripts' => 'ext.gettingstarted.taskToolbar.js',
'styles' => array(
- 'ext.gettingstarted.taskToolbar.css' => array( 'media' =>
'screen ' ),
- 'ext.gettingstarted.taskToolbar.lowWidth.css' =>
+ 'ext.gettingstarted.taskToolbar.less' => array( 'media' =>
'screen ' ),
+ 'ext.gettingstarted.taskToolbar.lowWidth.less' =>
array( 'media' => 'only screen and (min-width: 851px)
and (max-width: 1150px)' ),
// Requires fix for
https://bugzilla.wikimedia.org/show_bug.cgi?id=49722 and
// https://bugzilla.wikimedia.org/show_bug.cgi?id=49851 to work
on printable=yes view.
//
// But works for small screens and actual printouts now. Keep
print before screen.
- 'ext.gettingstarted.taskToolbar.hidden.css' =>
+ 'ext.gettingstarted.taskToolbar.hidden.less' =>
array( 'media' =>'print, only screen and (max-width:
850px)' ),
),
'dependencies' => array(
@@ -219,7 +219,7 @@
// special behavior), possibly displaying a Call To Action.
$wgResourceModules[ 'ext.gettingstarted.return' ] = array(
'scripts' => 'ext.gettingstarted.return.js',
- 'styles' => 'ext.gettingstarted.return.css',
+ 'styles' => 'ext.gettingstarted.return.less',
'messages' => array(
'gettingstarted-cta-close',
'gettingstarted-cta-heading',
diff --git a/resources/ext.gettingstarted.css b/resources/ext.gettingstarted.css
deleted file mode 100644
index 6afc338..0000000
--- a/resources/ext.gettingstarted.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/********************* Root Onboarding Container *********************/
-.mw-gettingstarted-container {
- width: 60em;
- margin: 1em 0;
-}
-
-/********************* Header Banner *********************/
-.mw-gettingstarted-header {
- font-weight: normal;
- font-size: 132%;
-}
-
-/********************* Task Choice *********************/
-.mw-gettingstarted-tasks {
- margin: 0 auto;
- margin-top: 30px;
- width: 100%;
-}
-
-.mw-gettingstarted-tasks a {
- display: block;
- width: 25em;
- min-height: 5em;
- padding: 1em;
- margin: 1.5em 0;
- background-color: #eee;
- background: #f4f4f4; /* Old browsers */
- background: -moz-linear-gradient(top, #f4f4f4 0%, #eaeaea 100%); /*
FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#f4f4f4), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #f4f4f4 0%,#eaeaea 100%); /*
Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #f4f4f4 0%,#eaeaea 100%); /* Opera
11.10+ */
- background: -ms-linear-gradient(top, #f4f4f4 0%,#eaeaea 100%); /*
IE10+ */
- background: linear-gradient(to bottom, #f4f4f4 0%,#eaeaea 100%); /*
W3C */
- filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f4f4f4', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
-
- border-radius: 3px;
- border: 1px solid #dedede;
-}
-
-.mw-gettingstarted-tasks a:hover {
- background: #e5e5e5; /* Old browsers */
- background: -moz-linear-gradient(top, #e5e5e5 0%, #d6d6d6 100%); /*
FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#e5e5e5), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #e5e5e5 0%,#d6d6d6 100%); /*
Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #e5e5e5 0%,#d6d6d6 100%); /* Opera
11.10+ */
- background: -ms-linear-gradient(top, #e5e5e5 0%,#d6d6d6 100%); /*
IE10+ */
- background: linear-gradient(to bottom, #e5e5e5 0%,#d6d6d6 100%); /*
W3C */
- filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#e5e5e5', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
-}
-
-/* TODO (mattflaschen, 2013-04-16): Is there a less verbose way to do this? */
-.mw-gettingstarted-tasks a:link,
-.mw-gettingstarted-tasks a:visited,
-.mw-gettingstarted-tasks a:hover,
-.mw-gettingstarted-tasks a:active {
- color: inherit;
-}
-
-.mw-gettingstarted-task-icon {
- display: inline-block;
- float: left;
- width: 20%;
-}
-
-.mw-gettingstarted-task-text {
- display: inline-block;
- float: right;
- width: 75%;
-}
-
-/********************* CentralAuth *********************/
-
-.centralauth-login-box {
- visibility: hidden;
- color: gray;
- font-size: 0.75em;
- margin-top: 8em;
-}
-.centralauth-login-box img {
- border: 0;
- opacity: 0.5;
- -webkit-filter: grayscale(100%);
- -moz-filter: grayscale(100%);
- -o-filter: grayscale(100%);
-}
-.centralauth-login-box img:hover {
- opacity: 1;
- -webkit-filter: grayscale(0%);
- -moz-filter: grayscale(0%);
- -o-filter: grayscale(0%);
-}
-
-/********************* Notifications *********************/
-/*
- Core currently doesn't offer a stable selector.
- We add this class ourselves.
-*/
-.mw-gettingstarted-notice {
- font-size: 0.8em;
- color: gray;
- float: left;
- clear: both;
- margin-left: 6px;
-}
diff --git a/resources/ext.gettingstarted.return.css
b/resources/ext.gettingstarted.return.less
similarity index 81%
rename from resources/ext.gettingstarted.return.css
rename to resources/ext.gettingstarted.return.less
index 6a288db..d3554bc 100644
--- a/resources/ext.gettingstarted.return.css
+++ b/resources/ext.gettingstarted.return.less
@@ -72,6 +72,30 @@
overflow: auto;
/* One z-index above overlay above */
z-index: 100000007;
+
+ .mw-ui-button {
+ display: table;
+ float: left;
+ text-align: left;
+ margin-right: 20px;
+ margin-bottom: 0px;
+ margin-top: 15px;
+
+ &.mw-gettingstarted-cta-secondary {
+ background-color: #F5F5F5;
+ border: 1px solid #D3D3D3;
+ color: #444444;
+
+ &:hover {
+ /*
+ TODO (mattflaschen, 2013-10-03): This is
inconsistent with
+ normal mw.ui secondary buttons. We should
make them match.
+ */
+ background-color: #fbfbfb;
+ border-color: #cccccc;
+ }
+ }
+ }
}
.mw-gettingstarted-cta-body {
@@ -87,29 +111,6 @@
.mw-gettingstarted-cta-heading {
font-size: 25px;
margin-bottom: 10px;
-}
-
-.mw-gettingstarted-cta .mw-ui-button {
- display: table;
- float: left;
- text-align: left;
- margin-right: 20px;
- margin-bottom: 0px;
- margin-top: 15px;
-}
-
-.mw-ui-button.mw-gettingstarted-cta-secondary:hover {
- /*
- TODO (mattflaschen, 2013-10-03): This is inconsistent with
- normal mw.ui secondary buttons. We should make them match.
- */
- background-color: #fbfbfb;
- border-color: #cccccc;
-}
-.mw-ui-button.mw-gettingstarted-cta-secondary {
- background-color: #F5F5F5;
- border: 1px solid #D3D3D3;
- color: #444444;
}
.mw-gettingstarted-cta-button-contents {
diff --git a/resources/ext.gettingstarted.taskToolbar.hidden.css
b/resources/ext.gettingstarted.taskToolbar.hidden.less
similarity index 100%
rename from resources/ext.gettingstarted.taskToolbar.hidden.css
rename to resources/ext.gettingstarted.taskToolbar.hidden.less
diff --git a/resources/ext.gettingstarted.taskToolbar.css
b/resources/ext.gettingstarted.taskToolbar.less
similarity index 60%
rename from resources/ext.gettingstarted.taskToolbar.css
rename to resources/ext.gettingstarted.taskToolbar.less
index 041fc14..510626e 100644
--- a/resources/ext.gettingstarted.taskToolbar.css
+++ b/resources/ext.gettingstarted.taskToolbar.less
@@ -1,3 +1,11 @@
+@import 'mediawiki.mixins';
+
+.box-shadow( ... ) {
+ -moz-box-shadow: @arguments;
+ -webkit-box-shadow: @arguments;
+ box-shadow: @arguments;
+}
+
/* These are hack/helper classes to shift the content down
below the onboarding toolbar.
TODO (mattflaschen, 2013-04-18): This can probably be done in a better way.
*/
@@ -24,26 +32,15 @@
width: 100%;
height: 39px;
max-height: 39px;
-
- /* generated by a gradient generator */
- background: #7d7e7d; /* Old browsers */
- background: -moz-linear-gradient(top, #7d7e7d 0%, #333333 100%); /*
FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#7d7e7d), color-stop(100%,#333333)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #7d7e7d 0%,#333333 100%); /*
Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #7d7e7d 0%,#333333 100%); /* Opera
11.10+ */
- background: -ms-linear-gradient(top, #7d7e7d 0%,#333333 100%); /*
IE10+ */
- background: linear-gradient(to bottom, #7d7e7d 0%,#333333 100%); /*
W3C */
- filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#7d7e7d', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
-
- -moz-box-shadow: inset 0px 1px #999, 0px 3px 3px #bbb;
- -webkit-box-shadow: inset 0px 1px #999, 0px 3px 3px #bbb;
- box-shadow: inset 0px 1px #999, 0px 3px 3px #bbb;
-
+
+ .vertical-gradient( #7d7e7d, #333333 );
+
+ .box-shadow( inset 0px 1px #999, 0px 3px 3px #bbb );
+
padding-top: 12px;
font-size: 0.8em;
color: white;
text-shadow: 0 -1px #444;
-
}
/* center region */
@@ -81,9 +78,9 @@
color: #aaa;
margin-top: -5px;
margin-right: 5px;
-}
-a.mw-gettingstarted-toolbar-dismiss:hover {
- color: white;
- text-decoration: none;
-}
\ No newline at end of file
+ &:hover {
+ color: white;
+ text-decoration: none;
+ }
+}
diff --git a/resources/ext.gettingstarted.taskToolbar.lowWidth.css
b/resources/ext.gettingstarted.taskToolbar.lowWidth.less
similarity index 100%
rename from resources/ext.gettingstarted.taskToolbar.lowWidth.css
rename to resources/ext.gettingstarted.taskToolbar.lowWidth.less
--
To view, visit https://gerrit.wikimedia.org/r/113459
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I09e81df3a945213727a5c212bf001d728e7a3141
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Phuedx <g...@samsmith.io>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
