From b809d516dbb7bbf3b2017e8436b4f26477355f79 Mon Sep 17 00:00:00 2001 From: S Page Date: Mon, 4 Mar 2013 19:13:39 -0800 Subject: [PATCH] Revised design of Special:Userlogin If a global variable is set or if you add ?useNew=1 to the query string, Special:Userlogin loads a different login template (UserloginVForm.php) with the new Vertical Form appearance and different messaging. Otherwise the current unchanged template renders so that wikis can cut over to the new look when ready (with messages and links). Once they do so, the variable and flag will be retired. The new template applies mw-ui-vform and mw-ui-button styles defined in a new 'mediawiki.ui' CSS module in core to create a compact vertical form. The mw-ui styles specify a Helvetica font stack (that we tested in the Account creation experiment) in the form area, but NOT if the user is using some other skin than Vector. The CSS code is developed using Sass. The patch includes the Sass scss files, along with a Makefile that uses their Compass build configuration (config.rb). The redesigned Special:Userlogin also: * Displays a "secure login" link if HTTPS is available. * Loads additional CSS for its form features (e.g. more attractive errorbox, "Join wiki" messaging). * Defines new "userlogin-xx" messages; many are the same as existing messages but without ':' on the end. * Uses a distinct title for Login instead of generic "Log in / Create account". * Removes the [mailmypassword] code branch from its login template as it is never executed. Bug: 44628 Change-Id: I489042c50aa060c90ca18b05097dbe25c4ae6395 --- RELEASE-NOTES-1.22 | 4 + includes/AutoLoader.php | 1 + includes/DefaultSettings.php | 7 + includes/specials/SpecialUserlogin.php | 99 ++++- includes/templates/UserloginVForm.php | 206 +++++++++ languages/messages/MessagesEn.php | 10 + languages/messages/MessagesQqq.php | 14 +- maintenance/language/messages.inc | 10 + resources/Resources.php | 14 + .../images/glyph-people-large.png | Bin 0 -> 5048 bytes .../mediawiki.special/images/icon-lock.png | Bin 0 -> 2964 bytes .../mediawiki.special.userLogin.vform.css | 36 ++ .../mediawiki.special.vforms.css | 37 ++ .../mediawiki.ui/mediawiki.ui.default.css | 254 ++++++++++++ .../mediawiki.ui/mediawiki.ui.vector.css | 392 ++++++++++++++++++ resources/mediawiki.ui/sourcefiles/Makefile | 24 ++ resources/mediawiki.ui/sourcefiles/config.rb | 27 ++ .../sourcefiles/scss/components/_default.scss | 3 + .../scss/components/_utilities.scss | 17 + .../sourcefiles/scss/components/_vector.scss | 3 + .../scss/components/default/_buttons.scss | 61 +++ .../scss/components/default/_forms.scss | 82 ++++ .../scss/components/vector/_buttons.scss | 19 + .../scss/components/vector/_forms.scss | 7 + .../scss/mediawiki.ui.default.scss | 16 + .../sourcefiles/scss/mediawiki.ui.vector.scss | 15 + .../sourcefiles/scss/mixins/_all.scss | 4 + .../sourcefiles/scss/mixins/_effects.scss | 62 +++ .../sourcefiles/scss/mixins/_forms.scss | 62 +++ .../sourcefiles/scss/mixins/_type.scss | 7 + .../sourcefiles/scss/mixins/_utilities.scss | 19 + .../sourcefiles/scss/settings/_all.scss | 2 + .../sourcefiles/scss/settings/_colors.scss | 17 + .../scss/settings/_typography.scss | 6 + 34 files changed, 1519 insertions(+), 18 deletions(-) create mode 100644 includes/templates/UserloginVForm.php create mode 100644 resources/mediawiki.special/images/glyph-people-large.png create mode 100644 resources/mediawiki.special/images/icon-lock.png create mode 100644 resources/mediawiki.special/mediawiki.special.userLogin.vform.css create mode 100644 resources/mediawiki.special/mediawiki.special.vforms.css create mode 100644 resources/mediawiki.ui/mediawiki.ui.default.css create mode 100644 resources/mediawiki.ui/mediawiki.ui.vector.css create mode 100644 resources/mediawiki.ui/sourcefiles/Makefile create mode 100644 resources/mediawiki.ui/sourcefiles/config.rb create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/_default.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss create mode 100644 resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22 index c24cd7d201..c6c35c690a 100644 --- a/RELEASE-NOTES-1.22 +++ b/RELEASE-NOTES-1.22 @@ -11,6 +11,8 @@ production. === Configuration changes in 1.22 === * $wgRedirectScript was removed. It was unused. * Removed $wgLocalMessageCacheSerialized, it is now always true. +* When $wgUseVFormUserLogin is true, the redesign of Special:UserLogin is + activated. === New features in 1.22 === * (bug 44525) mediawiki.jqueryMsg can now parse (whitelisted) HTML elements and attributes. @@ -21,6 +23,8 @@ production. preference). This feature was moved from the Vector extension, and is now part of core for all skins. Take care when upgrading that you don't use an older version of the Vector extension as this feature may conflict. +* New version of Special:UserLogin form. It is opt-in for now, controlled by + the $wgUseVFormUserLogin setting or a 'useNew' URL parameter trigger. === Bug fixes in 1.22 === diff --git a/includes/AutoLoader.php b/includes/AutoLoader.php index 33a244bee9..6bc713289d 100644 --- a/includes/AutoLoader.php +++ b/includes/AutoLoader.php @@ -1001,6 +1001,7 @@ $wgAutoloadLocalClasses = array( # includes/templates 'UserloginTemplate' => 'includes/templates/Userlogin.php', + 'UserloginTemplateVForm' => 'includes/templates/UserloginVForm.php', 'UsercreateTemplate' => 'includes/templates/Usercreate.php', # includes/upload diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php index 7b6e9a7d5c..bade4027fb 100644 --- a/includes/DefaultSettings.php +++ b/includes/DefaultSettings.php @@ -2828,6 +2828,13 @@ $wgVectorUseSimpleSearch = true; */ $wgVectorUseIconWatch = true; +/** + * Use VForm design for Special:Userlogin. This can be overridden by + * a useNew bool in the query string. For instance, if it is globally + * false, you can try it with useNew=1. + */ +$wgUseVFormUserLogin = false; + /** * Display user edit counts in various prominent places. */ diff --git a/includes/specials/SpecialUserlogin.php b/includes/specials/SpecialUserlogin.php index 17c8ec9122..a86c3567f2 100644 --- a/includes/specials/SpecialUserlogin.php +++ b/includes/specials/SpecialUserlogin.php @@ -50,12 +50,23 @@ class LoginForm extends SpecialPage { var $mType, $mReason, $mRealName; var $mAbortLoginErrorMsg = 'login-abort-generic'; private $mLoaded = false; + private $mSecureLoginUrl; + // TODO Remove old forms and mShowVForm gating after all WMF wikis have + // adapted messages and help links to new versions. + private $mShowVForm; /** * @ var WebRequest */ private $mOverrideRequest = null; + /** + * Effective request; set at the beginning of load + * + * @var WebRequest $mRequest + */ + private $mRequest = null; + /** * @param WebRequest $request */ @@ -81,6 +92,7 @@ class LoginForm extends SpecialPage { } else { $request = $this->mOverrideRequest; } + $this->mRequest = $request; $this->mType = $request->getText( 'type' ); $this->mUsername = $request->getText( 'wpName' ); @@ -129,11 +141,23 @@ class LoginForm extends SpecialPage { $this->mReturnTo = ''; $this->mReturnToQuery = ''; } + + $this->mShowVForm = $this->shouldShowVForm(); } function getDescription() { - return $this->msg( $this->getUser()->isAllowed( 'createaccount' ) ? - 'userlogin' : 'userloginnocreate' )->text(); + if ( !$this->getUser()->isAllowed( 'createaccount' ) ) { + return $this->msg( 'userloginnocreate' )->text(); + } + if ( $this->mShowVForm ) { + if ( $this->mType === 'signup' ) { + return $this->msg( 'createaccount' )->text(); + } else { + return $this->msg( 'login' )->text(); + } + } else { + return $this->msg( 'userlogin' )->text(); + } } public function execute( $par ) { @@ -144,10 +168,14 @@ class LoginForm extends SpecialPage { $this->load(); $this->setHeaders(); + if ( $par == 'signup' ) { # Check for [[Special:Userlogin/signup]] + $this->mType = 'signup'; + } + + // If logging in and not on HTTPS, either redirect to it or offer a link. global $wgSecureLogin; if ( $this->mType !== 'signup' && - $wgSecureLogin && WebRequest::detectProtocol() !== 'https' ) { $title = $this->getFullTitle(); @@ -157,12 +185,17 @@ class LoginForm extends SpecialPage { 'wpStickHTTPS' => $this->mStickHTTPS ); $url = $title->getFullURL( $query, false, PROTO_HTTPS ); - $this->getOutput()->redirect( $url ); - return; - } - - if ( $par == 'signup' ) { # Check for [[Special:Userlogin/signup]] - $this->mType = 'signup'; + if ( $wgSecureLogin ) { + $this->getOutput()->redirect( $url ); + return; + } else { + // A wiki without HTTPS login support should set $wgServer to + // http://somehost, in which case the secure URL generated + // above won't actually start with https:// + if ( substr( $url, 0, 8 ) === 'https://' ) { + $this->mSecureLoginUrl = $url; + } + } } if ( !is_null( $this->mCookieCheck ) ) { @@ -978,6 +1011,22 @@ class LoginForm extends SpecialPage { } } + /** + * Whether to show new vertically laid out login form. + * ?useNew=1 forces new style, ?useNew=0 forces old style, + * otherwise consult $wgUseVFormUserLogin. + * @return Boolean + */ + private function shouldShowVForm() { + global $wgUseVFormUserLogin; + + if ( $this->mType == 'signup' ) { + return false; + } else { + return $this->mRequest->getBool( 'useNew', $wgUseVFormUserLogin ); + } + } + /** * @private */ @@ -989,6 +1038,7 @@ class LoginForm extends SpecialPage { $titleObj = $this->getTitle(); $user = $this->getUser(); + $out = $this->getOutput(); if ( $this->mType == 'signup' ) { // Block signup here if in readonly. Keeps user from @@ -1019,9 +1069,17 @@ class LoginForm extends SpecialPage { $q = 'action=submitlogin&type=signup'; $linkq = 'type=login'; $linkmsg = 'gotaccount'; - $this->getOutput()->addModules( 'mediawiki.special.userlogin.signup' ); + $out->addModules( 'mediawiki.special.userlogin.signup' ); } else { - $template = new UserloginTemplate(); + if ( $this->mShowVForm ) { + $template = new UserloginTemplateVForm(); + $out->addModuleStyles( array( + 'mediawiki.ui', + 'mediawiki.special.userlogin.vform' + ) ); + } else { + $template = new UserloginTemplate(); + } $q = 'action=submitlogin&type=login'; $linkq = 'type=signup'; $linkmsg = 'nologin'; @@ -1037,16 +1095,23 @@ class LoginForm extends SpecialPage { $linkq .= $returnto; } - # Don't show a "create account" link if the user can't + # Don't show a "create account" link if the user can't. if( $this->showCreateOrLoginLink( $user ) ) { # Pass any language selection on to the mode switch link if( $wgLoginLanguageSelector && $this->mLanguage ) { $linkq .= '&uselang=' . $this->mLanguage; } - $link = Html::element( 'a', array( 'href' => $titleObj->getLocalURL( $linkq ) ), - $this->msg( $linkmsg . 'link' )->text() ); # Calling either 'gotaccountlink' or 'nologinlink' + if ( !$this->mShowVForm ) { + $link = Html::element( 'a', array( 'href' => $titleObj->getLocalURL( $linkq ) ), + $this->msg( $linkmsg . 'link' )->text() ); # Calling either 'gotaccountlink' or 'nologinlink' + + $template->set( 'link', $this->msg( $linkmsg )->rawParams( $link )->parse() ); - $template->set( 'link', $this->msg( $linkmsg )->rawParams( $link )->parse() ); + } else { + // Supply URL, login template creates the button. + // (The template 'link' key, passed above, is obsolete in the VForm design.) + $template->set( 'createOrLoginHref', $titleObj->getLocalURL( $linkq ) ); + } } else { $template->set( 'link', '' ); } @@ -1106,8 +1171,9 @@ class LoginForm extends SpecialPage { } } + $template->set( 'secureLoginUrl', $this->mSecureLoginUrl ); // Use loginend-https for HTTPS requests if it's not blank, loginend otherwise - // Ditto for signupend + // Ditto for signupend. New forms use neither. $usingHTTPS = WebRequest::detectProtocol() == 'https'; $loginendHTTPS = $this->msg( 'loginend-https' ); $signupendHTTPS = $this->msg( 'signupend-https' ); @@ -1130,7 +1196,6 @@ class LoginForm extends SpecialPage { wfRunHooks( 'UserLoginForm', array( &$template ) ); } - $out = $this->getOutput(); $out->disallowUserJs(); // just in case... $out->addTemplate( $template ); } diff --git a/includes/templates/UserloginVForm.php b/includes/templates/UserloginVForm.php new file mode 100644 index 0000000000..132a7c1cb1 --- /dev/null +++ b/includes/templates/UserloginVForm.php @@ -0,0 +1,206 @@ +getSkin(); + } + + function execute() { + global $wgCookieExpiration; + $expirationDays = ceil( $wgCookieExpiration / ( 3600 * 24 ) ); +?> +
+ html('header'); + if( $this->haveData( 'languages' ) ) { + ?> + + +
+
+ data['message'] ) { + ?> +
+ data['messagetype'] == 'error' ) { + ?> + msg( 'loginerror' )?>
+ html('message') + ?> +
+ +
+ + data['name'] ) { + $extraAttrs['autofocus'] = ''; + } + echo Html::input( 'wpName', $this->data['name'], 'text', array( + 'class' => 'loginText', + 'id' => 'wpName1', + 'tabindex' => '1', + 'size' => '20', + // 'required' is blacklisted for now in Html.php due to browser issues. + // Keeping here in case that changes + 'required', + 'placeholder' => $this->getMsg( 'userlogin-yourname-ph' )->text() + ) + $extraAttrs ); + ?> +
+
+ + data['name'] ) { + $extraAttrs['autofocus'] = ''; + } + echo Html::input( 'wpPassword', null, 'password', array( + 'class' => 'loginPassword', + 'id' => 'wpPassword1', + 'tabindex' => '2', + 'size' => '20', + 'placeholder' => $this->getMsg( 'userlogin-yourpassword-ph' )->text() + ) + $extraAttrs ); + ?> +
+ data['usedomain'] ) && $this->data['usedomain'] ) { + $doms = ""; + foreach( $this->data['domainnames'] as $dom ) { + $doms .= ""; + } + ?> +
+ + +
+ haveData( 'extrafields' ) ) { + echo $this->data['extrafields']; + } ?> + +
+ + data['canremember'] ) { ?> + + +
+ + data['cansecurelogin'] ) { ?> +
+ +
+ +
+ getMsg( 'login' )->text(), 'submit', array( + 'id' => 'wpLoginAttempt', + 'tabindex' => '6', + 'class' => 'mw-ui-button mw-ui-big mw-ui-block mw-ui-primary' + ) ); + ?> +
+
+ getMsg( 'userlogin-helplink' )->parse() ?> +
+ haveData( 'createOrLoginHref' ) ) { ?> +
+ +
+ + +haveData( 'uselang' ) ) { ?> +haveData( 'token' ) ) { ?> +
+
+
+ 'Your account has been created. Do not forget to change your [[Special:Preferences|{{SITENAME}} preferences]].', 'yourname' => 'Username:', +'userlogin-yourname' => 'Username', +'userlogin-yourname-ph' => 'Enter your username', 'yourpassword' => 'Password:', +'userlogin-yourpassword' => 'Password', +'userlogin-yourpassword-ph' => 'Enter your password', 'yourpasswordagain' => 'Retype password:', 'remembermypassword' => 'Remember my login on this browser (for a maximum of $1 {{PLURAL:$1|day|days}})', +'userlogin-remembermypassword' => 'Remember me', +'userlogin-signwithsecure' => 'Sign in with secure server', 'securelogin-stick-https' => 'Stay connected to HTTPS after login', 'yourdomainname' => 'Your domain:', 'password-change-forbidden' => 'You cannot change passwords on this wiki.', @@ -1091,12 +1097,16 @@ Do not forget to change your [[Special:Preferences|{{SITENAME}} preferences]].', 'userlogout' => 'Log out', 'userlogout-summary' => '', # do not translate or duplicate this message to other languages 'notloggedin' => 'Not logged in', +'userlogin-noaccount' => "Don't have an account?", +'userlogin-joinproject' => 'Join {{SITENAME}}', 'nologin' => "Don't have an account? $1.", 'nologinlink' => 'Create an account', 'createaccount' => 'Create account', 'gotaccount' => 'Already have an account? $1.', 'gotaccountlink' => 'Log in', 'userlogin-resetlink' => 'Forgotten your login details?', +'helplogin-url' => 'Help:Logging in', +'userlogin-helplink' => '[[{{MediaWiki:helplogin-url}}|Help with logging in]]', 'createaccountmail' => 'Use a temporary random password and send it to the email address specified below', 'createaccountreason' => 'Reason:', 'badretype' => 'The passwords you entered do not match.', diff --git a/languages/messages/MessagesQqq.php b/languages/messages/MessagesQqq.php index e003569d45..aae243bff9 100644 --- a/languages/messages/MessagesQqq.php +++ b/languages/messages/MessagesQqq.php @@ -1043,18 +1043,24 @@ Parameters: 'yourname' => "{{doc-important|{{[[Gender|GENDER]]}} is '''NOT''' supported.}} In user preferences. {{Identical|Username}}", +'userlogin-yourname' => "In new vertical user login & create account forms, label for username field", +'userlogin-yourname-ph' => "Placeholder text in new userlogin/create account form field.", 'yourpassword' => 'In user preferences {{Identical|Password}}', +'userlogin-yourpassword' => "In new vertical user login & create account forms, label for password field", +'userlogin-yourpassword-ph' => "Placeholder text in new userlogin form for password field.", 'yourpasswordagain' => 'In user preferences', 'remembermypassword' => 'A check box in [[Special:UserLogin]] {{Identical|Remember my login on this computer}}', +'userlogin-remembermypassword' => 'The text for a check box in the new-style [[Special:UserLogin]]', +'userlogin-signwithsecure' => 'Text of link to HTTPS login form', 'securelogin-stick-https' => 'Used as label for checkbox.', 'yourdomainname' => 'Used as label for listbox.', 'password-change-forbidden' => 'Error message shown when an external authentication source does not allow the password to be changed.', 'externaldberror' => 'This message is thrown when a valid attempt to change the wiki password for a user fails because of a database error or an error from an external system.', -'login' => "Shown as the caption of the button at [[Special:UserLogin]], and also to anonymous users in the upper right corner of the page when they can't create an account (otherwise the message {{msg-mw|nav-login-createaccount}} is shown there). +'login' => "Shown as the caption of the button at [[Special:UserLogin]], and also to anonymous users in the upper right corner of the page when they can't create an account (otherwise the message {{msg-mw|nav-login-createaccount}} is shown there). Also the title of the new login special page, which does not combine Log in & Create account. See also: * {{msg-mw|Login}} @@ -1082,6 +1088,8 @@ See also: 'notloggedin' => 'This message is displayed in the standard skin when not logged in. The message is placed above the login link in the top right corner of pages. {{Identical|Not logged in}}', +'userlogin-noaccount' => 'In the new-style [[Special:Userlogin]] form, this is the text prior to button inviting user to join project', +'userlogin-joinproject' => 'Text of button inviting user to create an account', 'nologin' => 'A message shown in the log in form. Parameters: * $1 - a link to the account creation form, and the text of it is {{msg-mw|Nologinlink}}', 'nologinlink' => 'Text of the link to the account creation form. Before that link, the message {{msg-mw|Nologin}} appears. @@ -1098,6 +1106,8 @@ It is also used on the top of the page for logged out users, where it appears ne 'gotaccountlink' => 'Text of the link to the log in form. Before that link, the message {{msg-mw|Gotaccount}} appears. {{Identical|Log in}}', 'userlogin-resetlink' => 'Used on the login page.', +'helplogin-url' => 'Page that provides information about logging into the wiki.', +'userlogin-helplink' => 'Wikitext linking to login help.', 'createaccountmail' => 'Button text for creating a new account and sending the new password to the specified e-mail address directly, as used on [[Special:UserLogin/signup]] if creating accounts by e-mail is allowed.', 'createaccountreason' => '{{Identical|Reason}}', 'badretype' => 'Used as error message when the new password and its retype do not match.', @@ -2462,6 +2472,8 @@ This option lets your time zone setting use the one that is used on the wiki (of 'prefs-emailconfirm-label' => 'Sub-heading in [[Special:Preferences]] > {{int:prefs-personal}} > {{int:email}}.', 'prefs-textboxsize' => "Header for the box specifying the size of the editing window, displayed on the 'editing' tab of the [[Special:Preferences|user preferences]] special page.", 'youremail' => 'Label of the e-mail text box of the "E-mail options" section of [[Special:Preferences]]. +Also used on create account form. + {{Identical|E-mail}}', 'username' => 'Username field in [[Special:Preferences]]. $1 is the current user name for GENDER distinction (depends on sex setting). diff --git a/maintenance/language/messages.inc b/maintenance/language/messages.inc index 1a0ff8abeb..c8d26c9771 100644 --- a/maintenance/language/messages.inc +++ b/maintenance/language/messages.inc @@ -431,9 +431,15 @@ $wgMessageStructure = array( 'welcomeuser', 'welcomecreation-msg', 'yourname', + 'userlogin-yourname', + 'userlogin-yourname-ph', 'yourpassword', + 'userlogin-yourpassword', + 'userlogin-yourpassword-ph', 'yourpasswordagain', 'remembermypassword', + 'userlogin-remembermypassword', + 'userlogin-signwithsecure', 'securelogin-stick-https', 'yourdomainname', 'password-change-forbidden', @@ -447,12 +453,16 @@ $wgMessageStructure = array( 'userlogout', 'userlogout-summary', 'notloggedin', + 'userlogin-noaccount', + 'userlogin-joinproject', 'nologin', 'nologinlink', 'createaccount', 'gotaccount', 'gotaccountlink', 'userlogin-resetlink', + 'helplogin-url', + 'userlogin-helplink', 'createaccountmail', 'createaccountreason', 'badretype', diff --git a/resources/Resources.php b/resources/Resources.php index 5332b26035..7e1e3a3aa4 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -937,6 +937,13 @@ return array( 'mediawiki.special.userlogin.signup' => array( 'scripts' => 'resources/mediawiki.special/mediawiki.special.userLogin.signup.js', ), + 'mediawiki.special.userlogin.vform' => array( + 'styles' => array( + 'resources/mediawiki.special/mediawiki.special.vforms.css', + 'resources/mediawiki.special/mediawiki.special.userLogin.vform.css', + ), + 'position' => 'top', + ), 'mediawiki.special.javaScriptTest' => array( 'scripts' => 'resources/mediawiki.special/mediawiki.special.javaScriptTest.js', 'messages' => array_merge( Skin::getSkinNameMessages(), array( @@ -1036,4 +1043,11 @@ return array( 'remoteBasePath' => $GLOBALS['wgStylePath'], 'localBasePath' => $GLOBALS['wgStyleDirectory'], ), + 'mediawiki.ui' => array( + 'skinStyles' => array( + 'default' => 'resources/mediawiki.ui/mediawiki.ui.default.css', + 'vector' => 'resources/mediawiki.ui/mediawiki.ui.vector.css', + ), + 'position' => 'top', + ), ); diff --git a/resources/mediawiki.special/images/glyph-people-large.png b/resources/mediawiki.special/images/glyph-people-large.png new file mode 100644 index 0000000000000000000000000000000000000000..2c251d7924f2f091bbcb3830da1d360556aaf732 GIT binary patch literal 5048 zcmV;p6G!ZcP)KLZ*U+nw*gwCFdX@8B8=y4sF{65zI0;f@45M1Wf3th=OAPWDJNXra>_00T~p- zIv6mavJWgcTf6(PRr|81>Q?>g)V=5X?%M&_9Rjg9iOr5e6VJDMy$M5Jv$5La`(lAddp* zo}Vku1t`S;c#_z-cz{v~fR{SP2LSLA$G8muPZAmK1yF7POtwHENd=^P0r2yMsks0f z04zjF=^}t_0l-z5CP)IjTsb`1c-#J}XE{!?b+M5aKHI>BRq0RS+)({sdG zf(7_rD?2N1e1-x5wkRtk7=SW>!6boq&^U{;!Y2G=QB=e@ixNXZ$2mpf8$NMA*YhtN z7CFv^XX_qUNT6T2mQPxvY6z5(N$o*OVRD|2qp z#18O=4}uX4K73#W3)mwDz6i@rF31G{uess{lJwNHT)u}`oRw_K4-g5>P5D+9mX`Q` zQfyp2e~jK<1p$CiPWjUo!F(*lGL)bU>#zw`*p6M;hl4nbW}Lto zoX2H!<0kH-7Xx^KA-u;3K@bdrLvRTdLX*%VOb9E&fp8^!h+ra|h$9k+R6<1L5etbG zL>W;|R1rIgI^q}NIB|x!Nc0eQi9X^P@rL+JQb;z*Bh^WLati4{dXPb6Bsq&rCFhZa zWHGshtR!p617s6i(*D`pm7gJYLtEl^^P1FwRb!s1Vi29Ajp{dbK zXil^MS}ZM5cR@dJnyy zKFnY+R2U`<7e**Uz{q8kFt#ubFitbBF$NePnbJ&6rWMnd8P60kmoqDv`mc!xbbKE)coLtTtP95hg z=Mm?l3|GcnCO{@hW{FI-Oq0wtnOCw>vU;)}va@9iWh-Ql$X=CwDJLbTFXtsEkXtNQ zEq7e*w%o8hSKd-SR6bjNwfuhhi}HgC3c5rqA2Mr1t?`HtyMa#bW7>;B=t!i zlaeQ`n$$4q+N2N4la<|-la))A8N(Yy zlX;V!CkrQ+PCh*Oo*JoUtQM|Tq_#`#irTQchPt1+SbdB7S@oA1N*eAO85$ckPH8;T zPSaheTd#XhPfE{0FHLW=UZ>s%eFOa%{gwL7`hy0_1_1_z2K5FH3^|5w zhVu+-4R09HjU0?JjkX$f896FZZ1ldUE_rZiJWQ;}({>1{K%nTJ`v zS-n}GxsrLX`Ev7S^H)=Jr^HWLKc#cZHw#;fEQ{S1_bnAH11*y9T>w_PX{7_BHmm9e5654yzq5 zIMN(F9hW$saQx(C=alPo*y&GaGv`d_{mz3^4W=ef-95G6McYN-veTv4mG7G1y2G{C zP0LN-R_pfIUB^AieUJN748&mdUyFK_(b_s z`8@K~_D%Jz_Z{-H^(*pg^QZX-`LFlC9iSc{45$kj3bYSg6xb2O4vGk>3VIxD94rZL zokmUzoVH=wgAlzCQAl$rLIXlKggy*22%8u7>va0`u<6y)pM+b6FAVRD;6}`e*dOse z(lc^xwon6F)q|XU3)( z12b)Bmdw00%V1W)tc$Z%XJ^emIY)MmV9t>QT0%_1{)8`rP(iI=I58lxCUHpUCEP50 zk>sAVG3i;dOLBSg(-fDK@|3|;m(&fZ&(hq|D$-u2d!<*Uzs~T_*q-qrGcX@rBw_t9M*hE|+?w#i}Z_~UXNsweu4v{k}rzMw{E6%-=XPEax zUSGazes%uG`O))_6v!8d3a%_LUa)Gx(?Z|EpNptP!lL$tS__vg>|5lqXy;;LapL0k zB|1xrmkccRTe@!*(u5>u#-gTfeVd zzPzx!f5Ws5O&j?eOEIh?kU^z zb+2e|@4oPT9d-6~b^F!!udOHR^Xi`+n0cW4p!dO+2D65pjY^GWhj1wG(DPpsez|ox z=y3ZHha(L~^^VpY;~pz*BAOO74K=4V_qN2f^c)X7-rnlmdhA#8U-zESI#GR6@#NZ5 ztW(9OMo$->9&Qu2y*!h8roVko`~9=AXK!>&@8~)gbne1=-}7fXJvvWcaJg{eqSM9W zmmDrNU$(p4bj9|{vEOWeJJw~_)pXVVYD>3ccWckoo>SM{uARB=ef|86fE$-@hTQDA z6?N;*?U}cG?**zzgw7*AF`u7~%>TmpQu)>B zYwNe5Zx2SZM@Pj1i2wjV0YIjt0B`mJoH&5n4Y1nA`Y-^180+xBSO@v{Jl2^30Cqs_ zQXmpQU>i{54(KffM8Rw#Z=}&(LGa={Up}oAa0000WV@Og>003=m0045` z008sw004iw003>7008Fh001yt000(`ukAHR000QbNklEkJ&Do`U`X0R#k6WJj`M#iqIMJN?i#GEF%2h|}G7nePMU zjhyc3I=5~wRn-Mj6nXE5f!n|bzzi@6bbw)?us=Hmj)5KftO6^}xowSLe=0NteZgA* zOTa^55oq1;tG0pHz)R=co<>$6=LGmM@D!Mc_|+E%^go?*I~r+$oD$+$;A>z$VKZmI zGvJwX?n0w3kYhu<4Ez}w%GBhKz(1UGhZ=o>91G&7z!xPny$k$ZQ;qA@(hyV{VhFn* zfAijVWC?-X55x~jgt)5?@K^7BTNV+>H-UJ{=EPOd4Dgk#B9L#QuYoFg!H3@aMVUn) zzmGRw2JTd_YhQWqhh!mv+zZ47@MT52Hw8SBl>~Ax`p6boRn;HuVUq;%^`KO|f0Mui znMojDH?5er9fGP$(+h#z2te+7@5f~>f&Bj#c}q3vZUNkv)dccyX%-l(QGd0kERcWu zbzQUm-qG%bKyCuaBQ;r=3gpb1QJ)2J-4}WzRQnJ_APeN4bW8mf$W72hP5Z5Ydx88b zjjP`Rxd|GpYrnns0$Kdl9^`_s4JVK#AYY1q3JGNK+X#>~wa^eWVl0MbJgF1&GfuG-3W~FY&tRsXIwl-m3x3Jgd znau+aopY!1YIz<&yBB4Qu)Wu{$Hf(UoCxGFSVM&B@ALGqAL_k7AY3A|8M&H!UF#3; zM7Bo@m@|8f_VD*dW{>qUtLwK)hIkryLP#;{byI(wkUjj^dml4CqOLb9ZAY}n1n>!P zuNR0-qriv26Z`+c0@-_i8(8k+tuO|B?7g3i)TKSb^$q6D$j+*A9(kH{sX6oJUHZ`v zgzcre=xv0zW2)rU>72Fca)W$3;ddAGd5NR#iLTTLT@gA_zhdo-PFC{Q-?KH|G=UB;hPX_zZ>zaW4%63|As>uxYZ&^Ey0(r6y?KtQ5 z30LPS%gE7+)3Xkx zK($W#Udt+j1@d_V;n{W0t;-(ef}As5{UY+~_q&R~5VIe-lU2`}0&>pPf7G^YdQk;W z_@<`zXcWlDbp_c}b|BFq5o4w8jg<@L;~WdrEFjwtInHSG*m_$s$loV`;i$&;D0Q*7 zU*mSxGQU->Dn$@eu7WfNO#^wauI-pN+$<5~J=vo=Am=E6a%3lRDOAUUi0ibQ;WwQ( z4rBu?^=oDmsaJcPlfEd;R<4uC+y^2XHUIvmsWJ8_1LRbPBijk56;0Jn!bR+%b8feh zAY1v|ai0y+%_c{k!B{EU2uE$>v6HFDnj zC&bCHU3JdAP0&9GrEfna6tXT;KM~Td-lW=>_1=F3OvUiV&bjO{++|+9a1;sT!vyw-0dgq`ySlda*VBh5z$2=Aw{r*h9Qe$8{|b2S zoLiIi1{`Fox9}mq+?!Dswd}3&(0ji|C|&S+kgq9g4=BJRz{dvgWX*rhJn$FbOYi+l z;Kd;Bska9V;5nN=9yWvW0OL82}#Qmzy+GSLEz&#oe_PDx)W^Mnw~ zv6k@a<+LE%MJNk|^8Tq$5Zl0PriZ0TUV7a;XX?G*3&OGWYN~~35gFbBm@%Mo9O+J& zx1W*s?MvGR^$zLNpAPKd*|aQ`>VRyEg?aOesTYt#mmZceF&KR+utrFLNbRN1tew>u zu`)#;@IpA!oF~swZrA(fn5qoAx}lvLnY{F_JwV$xT^trS0Jv>H&1IO6w$1y_$@`Y- zrPu9qlA)~)VEui)bkQTcm%Z;);`wM{ZOoYW)!er_+A*NFGkEEDZS~@%i{Alw%;vo_ zqz|O&SX;MHFjLiaMhM2=Abka?({5Wss6n4!^Izz4GNz^HrHki$7rSa8qd#ElITLMn%3-+|HvAs#w)b^I6I z?XT2Y6vP9mBGVLOqDA^RiH_#Q1FgvnjE%NPA1`r7wj6k+W?(pV6xkSg4p*dVYn-%O zyU9VGmklLT${mcMlpq(H8%vjzGLF2J666WAQz2b~jdaCul7g(cv2<0bKu$Wf7?<6o zD@vA-oO+HdNm+PP5~rjmM3MxuBnf0m63CK3mL!2JNdj4t1hUk4{X77l;baf?IlG1c O00009u$O literal 0 HcmV?d00001 diff --git a/resources/mediawiki.special/images/icon-lock.png b/resources/mediawiki.special/images/icon-lock.png new file mode 100644 index 0000000000000000000000000000000000000000..306f1f1bc30047f3e71166718ac2a7af646ec361 GIT binary patch literal 2964 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 KMNUMnLSTaCLy6u1 literal 0 HcmV?d00001 diff --git a/resources/mediawiki.special/mediawiki.special.userLogin.vform.css b/resources/mediawiki.special/mediawiki.special.userLogin.vform.css new file mode 100644 index 0000000000..312f8118b6 --- /dev/null +++ b/resources/mediawiki.special/mediawiki.special.userLogin.vform.css @@ -0,0 +1,36 @@ +/* Styles just for VForm user login */ +#mw-userlogin-help { + text-align: center; +} + +.mw-ui-vform .mw-secure { + /* @embed */ + background: url(images/icon-lock.png) no-repeat scroll left center transparent; + margin: 0 0 0 1px; + padding: 0 0 0 11px; +} + +/* The login form invites users to create an account */ +#mw-createaccount-cta { + width: 20em; + height: 10em; + text-align: center; + /* @embed */ + background: url(images/glyph-people-large.png) no-repeat 50%; + margin: 0 auto; +} + +#mw-createaccount-cta h3 { + font-size: 0.9em; + font-weight: normal; + text-align: center; + padding-top: 4em; +} + +#mw-createaccount-join { + margin-left: 0.75em; + /* Separate from background image */ + box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 1); + width: auto; + display: inline-block; +} diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css b/resources/mediawiki.special/mediawiki.special.vforms.css new file mode 100644 index 0000000000..4ae06dfc74 --- /dev/null +++ b/resources/mediawiki.special/mediawiki.special.vforms.css @@ -0,0 +1,37 @@ +/* + * When inside the VForm style, disable the border that Vector puts on the div + * surrounding the login/create account form. + * Also disable the margin and padding that Vector puts around the form. + */ +.mw-ui-container #userloginForm, +.mw-ui-container #userlogin { + border: 0; + margin: 0; + padding: 0; +} + +/* Reposition and resize language links, which appear on a per-wiki basis */ +.mw-ui-container #languagelinks { + margin-bottom: 3em; + font-size: 0.8em; +} + +/* + * Besides errorbox there could be warningbox, successbox, msgbox, though + * spage has never seen these in practice. + * Vector has styles coloring warningbox cream and successbox green. + */ +.mw-ui-vform .errorbox, +.mw-ui-vform .warningbox, +.mw-ui-vform .successbox { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0.9em; + margin: 0 0 1em 0; + padding: 0.5em; + color: #cc0000; + border: 1px solid #fac5c5; + background-color: #fae3e3; + text-shadow: 0 1px #fae3e3; +} diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css b/resources/mediawiki.ui/mediawiki.ui.default.css new file mode 100644 index 0000000000..0e0b40e8b4 --- /dev/null +++ b/resources/mediawiki.ui/mediawiki.ui.default.css @@ -0,0 +1,254 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using a skin other than + * Vector. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ +/* _effects.scss */ +/* Mixins for visual effects in CSS3 */ +/* line 7, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +/* line 11, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +/* line 15, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* line 4, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + padding: 0.4em 1em 0.4em 1em; + margin: 0; + background-color: #c9c9c9; + *background-color: #c9c9c9; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9)); + background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: linear-gradient(top, #dcdcdc, #c9c9c9); + color: #4a4a4a; + text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3); + border: 1px solid #c4c4c4; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + vertical-align: middle; + text-align: center; + text-decoration: none; + font-weight: bold; + cursor: pointer; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:hover, .mw-ui-button.mw-ui-hover { + background-color: gainsboro; + *background-color: gainsboro; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc)); + background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: linear-gradient(top, #e9e9e9, #dcdcdc); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:active, .mw-ui-button.mw-ui-active { + background-image: none; + background-color: #c1c1c1; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + background-image: none; + background-color: #c9c9c9; + opacity: 0.5; + text-shadow: none; +} +/* line 30, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + cursor: default; +} +/* line 36, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-big { + font-size: 1.3em; +} +/* line 41, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-block { + display: block; + width: 100%; +} + +/* line 48, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > * { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + float: left; +} +/* line 52, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:first-child { + -moz-border-radius-topleft: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; +} +/* line 57, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:last-child { + -moz-border-radius-topright: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +/* line 12, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 290px; +} +/* line 17, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} +/* line 26, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input, +.mw-ui-vform > div label, +.mw-ui-vform > div .mw-ui-button { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 100%; +} +/* line 33, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input { + outline: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 12, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div input:focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} +/* line 37, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div label { + font-size: 0.9em; + color: #7d7d7d; + width: auto; + margin: 0 0 0.2em 0; + padding: 0; +} +/* line 34, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div label * { + font-weight: normal; +} +/* line 44, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div label.mw-ui-radio-label { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + font-weight: normal; +} +/* line 50, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} +/* line 51, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input[type="checkbox"], +.mw-ui-vform > div input[type="radio"] { + display: inline; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + width: auto; +} + +/* line 66, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-input { + outline: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 12, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-input:focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} + +/* line 71, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-block-label, .mw-ui-formlist div label { + font-size: 0.9em; + color: #7d7d7d; +} +/* line 34, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-block-label *, .mw-ui-formlist div label * { + font-weight: normal; +} + +/* line 80, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-checkbox-label, .mw-ui-radio-label { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + font-weight: normal; +} +/* line 50, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css b/resources/mediawiki.ui/mediawiki.ui.vector.css new file mode 100644 index 0000000000..4849fb42f6 --- /dev/null +++ b/resources/mediawiki.ui/mediawiki.ui.vector.css @@ -0,0 +1,392 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using the Vector skin. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ +/* _effects.scss */ +/* Mixins for visual effects in CSS3 */ +/* line 7, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +/* line 11, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +/* line 15, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* line 4, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + padding: 0.4em 1em 0.4em 1em; + margin: 0; + background-color: #c9c9c9; + *background-color: #c9c9c9; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9)); + background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: linear-gradient(top, #dcdcdc, #c9c9c9); + color: #4a4a4a; + text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3); + border: 1px solid #c4c4c4; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + vertical-align: middle; + text-align: center; + text-decoration: none; + font-weight: bold; + cursor: pointer; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:hover, .mw-ui-button.mw-ui-hover { + background-color: gainsboro; + *background-color: gainsboro; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc)); + background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: linear-gradient(top, #e9e9e9, #dcdcdc); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:active, .mw-ui-button.mw-ui-active { + background-image: none; + background-color: #c1c1c1; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + background-image: none; + background-color: #c9c9c9; + opacity: 0.5; + text-shadow: none; +} +/* line 30, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + cursor: default; +} +/* line 36, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-big { + font-size: 1.3em; +} +/* line 41, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-block { + display: block; + width: 100%; +} + +/* line 48, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > * { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + float: left; +} +/* line 52, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:first-child { + -moz-border-radius-topleft: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; +} +/* line 57, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:last-child { + -moz-border-radius-topright: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +/* line 3, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button { + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 1em; + line-height: 1.4em; +} +/* line 6, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button.mw-ui-primary { + background-color: #3366bb; + *background-color: #3366bb; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4779CD', endColorstr='#FF3366BB'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4779cd), color-stop(100%, #3366bb)); + background-image: -webkit-linear-gradient(top, #4779cd, #3366bb); + background-image: -moz-linear-gradient(top, #4779cd, #3366bb); + background-image: -o-linear-gradient(top, #4779cd, #3366bb); + background-image: linear-gradient(top, #4779cd, #3366bb); + color: white; + text-shadow: 0 1px 1px rgba(51, 102, 187, 0.75); + border: 1px solid #3162b3; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-primary:hover, .mw-ui-button.mw-ui-primary.mw-ui-hover { + background-color: #4779cd; + *background-color: #4779cd; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5B88D2', endColorstr='#FF4779CD'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b88d2), color-stop(100%, #4779cd)); + background-image: -webkit-linear-gradient(top, #5b88d2, #4779cd); + background-image: -moz-linear-gradient(top, #5b88d2, #4779cd); + background-image: -o-linear-gradient(top, #5b88d2, #4779cd); + background-image: linear-gradient(top, #5b88d2, #4779cd); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-primary:active, .mw-ui-button.mw-ui-primary.mw-ui-active { + background-image: none; + background-color: #305faf; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-primary:disabled, .mw-ui-button.mw-ui-primary.mw-ui-disabled { + background-image: none; + background-color: #3366bb; + opacity: 0.5; + text-shadow: none; +} +/* line 10, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button.mw-ui-constructive { + background-color: #27aa65; + *background-color: #27aa65; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2EC977', endColorstr='#FF27AA65'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ec977), color-stop(100%, #27aa65)); + background-image: -webkit-linear-gradient(top, #2ec977, #27aa65); + background-image: -moz-linear-gradient(top, #2ec977, #27aa65); + background-image: -o-linear-gradient(top, #2ec977, #27aa65); + background-image: linear-gradient(top, #2ec977, #27aa65); + color: white; + text-shadow: 0 1px 1px rgba(39, 170, 101, 0.75); + border: 1px solid #25a260; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-constructive:hover, .mw-ui-button.mw-ui-constructive.mw-ui-hover { + background-color: #2ec977; + *background-color: #2ec977; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF3ED384', endColorstr='#FF2EC977'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ed384), color-stop(100%, #2ec977)); + background-image: -webkit-linear-gradient(top, #3ed384, #2ec977); + background-image: -moz-linear-gradient(top, #3ed384, #2ec977); + background-image: -o-linear-gradient(top, #3ed384, #2ec977); + background-image: linear-gradient(top, #3ed384, #2ec977); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-constructive:active, .mw-ui-button.mw-ui-constructive.mw-ui-active { + background-image: none; + background-color: #249e5e; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-constructive:disabled, .mw-ui-button.mw-ui-constructive.mw-ui-disabled { + background-image: none; + background-color: #27aa65; + opacity: 0.5; + text-shadow: none; +} +/* line 14, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button.mw-ui-destructive { + background-color: #cc0000; + *background-color: #cc0000; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF20000', endColorstr='#FFCC0000'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f20000), color-stop(100%, #cc0000)); + background-image: -webkit-linear-gradient(top, #f20000, #cc0000); + background-image: -moz-linear-gradient(top, #f20000, #cc0000); + background-image: -o-linear-gradient(top, #f20000, #cc0000); + background-image: linear-gradient(top, #f20000, #cc0000); + color: white; + text-shadow: 0 1px 1px rgba(204, 0, 0, 0.75); + border: 1px solid #c20000; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-destructive:hover, .mw-ui-button.mw-ui-destructive.mw-ui-hover { + background-color: #f20000; + *background-color: #f20000; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0D0D', endColorstr='#FFF20000'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0d0d), color-stop(100%, #f20000)); + background-image: -webkit-linear-gradient(top, #ff0d0d, #f20000); + background-image: -moz-linear-gradient(top, #ff0d0d, #f20000); + background-image: -o-linear-gradient(top, #ff0d0d, #f20000); + background-image: linear-gradient(top, #ff0d0d, #f20000); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-destructive:active, .mw-ui-button.mw-ui-destructive.mw-ui-active { + background-image: none; + background-color: #bd0000; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-destructive:disabled, .mw-ui-button.mw-ui-destructive.mw-ui-disabled { + background-image: none; + background-color: #cc0000; + opacity: 0.5; + text-shadow: none; +} + +/* line 12, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 290px; +} +/* line 17, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} +/* line 26, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input, +.mw-ui-vform > div label, +.mw-ui-vform > div .mw-ui-button { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 100%; +} +/* line 33, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input { + outline: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 12, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div input:focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} +/* line 37, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div label { + font-size: 0.9em; + color: #7d7d7d; + width: auto; + margin: 0 0 0.2em 0; + padding: 0; +} +/* line 34, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div label * { + font-weight: normal; +} +/* line 44, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div label.mw-ui-radio-label { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + font-weight: normal; +} +/* line 50, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} +/* line 51, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input[type="checkbox"], +.mw-ui-vform > div input[type="radio"] { + display: inline; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + width: auto; +} + +/* line 66, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-input { + outline: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 12, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-input:focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} + +/* line 71, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-block-label, .mw-ui-formlist div label { + font-size: 0.9em; + color: #7d7d7d; +} +/* line 34, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-block-label *, .mw-ui-formlist div label * { + font-weight: normal; +} + +/* line 80, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-checkbox-label, .mw-ui-radio-label { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + font-weight: normal; +} +/* line 50, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} + +/* line 5, sourcefiles/scss/components/vector/_forms.scss */ +.mw-ui-vform, +.mw-ui-vform > div input, +.mw-ui-input { + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 1em; + line-height: 1.4em; +} diff --git a/resources/mediawiki.ui/sourcefiles/Makefile b/resources/mediawiki.ui/sourcefiles/Makefile new file mode 100644 index 0000000000..dea901395a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/Makefile @@ -0,0 +1,24 @@ +DATE=$(shell date +%I:%M%p) +CHECK=\033[32m✔\033[39m +HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# + +build: + @echo "\n${HR}" + @echo "Building Agora..." + @echo "${HR}\n" + @compass compile + @echo "Compiling Compass project... ${CHECK} Done" + @rm -rf .sass-cache + @echo "Removing .sass-cache... ${CHECK} Done" + @echo "\n${HR}" + @echo "Agora successfully built at ${DATE}." + @echo "${HR}\n" + +all: build + +watch: + @echo "\n${HR}" + @echo "Watching SCSS files for Agora..." + @echo "${HR}\n" + @compass watch + @echo "Started watching modules/scss at ${DATE}..." diff --git a/resources/mediawiki.ui/sourcefiles/config.rb b/resources/mediawiki.ui/sourcefiles/config.rb new file mode 100644 index 0000000000..be96e64759 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/config.rb @@ -0,0 +1,27 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +# (unused so far): http_path = "/" + +# Output to parent of build directory +css_dir = ".." +sass_dir = "scss" +# (unused so far): images_dir = "modules/img" +# (unused so far): javascripts_dir = "modules/js" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +line_comments = true + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss new file mode 100644 index 0000000000..e7090ebcf3 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss @@ -0,0 +1,3 @@ +@import "utilities"; +@import "default/buttons"; +@import "default/forms"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss new file mode 100644 index 0000000000..4f1dba2f0a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss @@ -0,0 +1,17 @@ +// Generic helper classes that could be used in many elements/layouts + +// -------------------------------------------------------------------------- +// Positioning +// -------------------------------------------------------------------------- + +.mw-ui-flush-left { + @include agora-flush-left; +} + +.mw-ui-flush-right { + @include agora-flush-right; +} + +.mw-ui-center-block { + @include agora-center-block; +} \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss new file mode 100644 index 0000000000..e52a1ed28c --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss @@ -0,0 +1,3 @@ +@import "utilities"; +@import "vector/buttons"; +@import "vector/forms"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss new file mode 100644 index 0000000000..1ea9a1814c --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss @@ -0,0 +1,61 @@ +$buttonBorderRadius: 3px; + +// Button styling +.mw-ui-button { + // Container layout + @include inline-block; + padding: 0.4em 1em 0.4em 1em; + margin: 0; + + // Container styling + @include buttonColors($agoraGray); + @include border-radius($buttonBorderRadius); + + // Content styling + vertical-align: middle; + + text: { + align: center; + decoration: none; + } + + font: { + weight: bold; + } + + // Interaction styling + cursor: pointer; + + &:disabled, + &.mw-ui-disabled { + cursor: default; + } + + // Button sizes and displays + // ----------------------------------------- + &.mw-ui-big { + font: { + size: $baseFontSize * 1.3; + } + } + &.mw-ui-block { + display: block; + width: 100%; + } +} + +// Button groups +.mw-ui-button-group > * { + @include border-radius(0); + float: left; + + &:first-child{ + @include border-top-left-radius($buttonBorderRadius); + @include border-bottom-left-radius($buttonBorderRadius); + } + + &:last-child{ + @include border-top-right-radius($buttonBorderRadius); + @include border-bottom-right-radius($buttonBorderRadius); + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss new file mode 100644 index 0000000000..440669ecb0 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss @@ -0,0 +1,82 @@ +// Form elements and layouts + +// -------------------------------------------------------------------------- +// Layouts +// -------------------------------------------------------------------------- + +// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the +// 'vform' stacked div design, the form can't be narrower than this. +$captchaContainerWidth: 290px; +$defaultFormWidth: $captchaContainerWidth; + +.mw-ui-vform { + @include box-sizing(border-box); + + width: $defaultFormWidth; + + & > div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; + + // MW currently doesn't use the type attribute everywhere on inputs + input, + label, + .mw-ui-button { + display: block; + @include box-sizing(border-box); + margin: 0; + width: 100%; + } + + input { + @include agora-field-styling; // mixins/_forms.scss + } + + label { + @include agora-label-styling; + + width: auto; + margin: 0 0 0.2em 0; + padding: 0; + + &.mw-ui-checkbox-label, &.mw-ui-radio-label { + @include agora-inline-label-styling; + } + } + + // Override the above styling just for checkboxes and radio inputs + input[type="checkbox"], + input[type="radio"] { + display: inline; + @include box-sizing(content-box); + width: auto; + } + + } +} + +// -------------------------------------------------------------------------- +// Elements +// -------------------------------------------------------------------------- + +// Apply mw-ui-input to fields individually to style them +// You don't need to use this if is within a Agora form container +.mw-ui-input { + @include agora-field-styling; // mixins/_forms.scss +} + +// Default label styling is mw-ui-block-label +.mw-ui-block-label, .mw-ui-formlist div label { + @include agora-label-styling; // mixins/_forms.scss +} + +// Checkbox and radio button label alignment hack +// + +.mw-ui-checkbox-label, .mw-ui-radio-label { + @include agora-inline-label-styling; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss new file mode 100644 index 0000000000..8d5f0b6acb --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss @@ -0,0 +1,19 @@ +@import "../default/buttons"; // Layer Vector on top of the default settings. + +.mw-ui-button { + // Button colors determined by function. + // ----------------------------------------- + &.mw-ui-primary { + @include buttonColors($agoraBlue); + } + + &.mw-ui-constructive { + @include buttonColors($agoraGreen); + } + + &.mw-ui-destructive { + @include buttonColors($agoraRed); + } + + @include vector-type; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss new file mode 100644 index 0000000000..73ea24e227 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss @@ -0,0 +1,7 @@ +@import "../default/forms"; // Layer Vector on top of the default settings. + +.mw-ui-vform, +.mw-ui-vform > div input, +.mw-ui-input { + @include vector-type; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss new file mode 100644 index 0000000000..e6db523790 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss @@ -0,0 +1,16 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using a skin other than + * Vector. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ + +@charset "UTF-8"; + +@import "compass"; + +@import "settings/all"; + +@import "mixins/all"; + +@import "components/default"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss new file mode 100644 index 0000000000..ac113eec67 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss @@ -0,0 +1,15 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using the Vector skin. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ + +@charset "UTF-8"; + +@import "compass"; + +@import "settings/all"; + +@import "mixins/all"; + +@import "components/vector"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss new file mode 100644 index 0000000000..adc48cd812 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss @@ -0,0 +1,4 @@ +@import "utilities"; +@import "type"; +@import "effects"; +@import "forms"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss new file mode 100644 index 0000000000..03fae1b19f --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss @@ -0,0 +1,62 @@ +/* _effects.scss */ + +/* Mixins for visual effects in CSS3 */ + +// ---------------------------------------------------------------------------- +// Gradients +// ---------------------------------------------------------------------------- +@mixin vertical-gradient ($startColor: lighten($agoraGray, 95%), $endColor: $agoraGray) { + // Fallback + background-color: $endColor; + *background-color: $endColor; // IE7 + + // IE6-8 + @include filter-gradient($startColor, $endColor, vertical); + + // IE9+, Opera, Gecko, WebKit + @include background-image(linear-gradient(top, $startColor, $endColor)); +} + +// ---------------------------------------------------------------------------- +// Button styling +// ---------------------------------------------------------------------------- +@mixin buttonColors ($baseColor: $agoraGray) { + // Background color + @include vertical-gradient(lighten($baseColor, 7.5%), $baseColor); + + @if $baseColor == $agoraGray { + color: darken($baseColor, 50%); + @include text-shadow(0 1px 1px rgba($baseColor, 0.3)); + } @else { + color: white; + @include text-shadow(0 1px 1px rgba($baseColor, 0.75)); + } + + border: 1px solid darken($baseColor, 2%); + + &:hover, + &.mw-ui-hover { + @include vertical-gradient(lighten($baseColor, 12.5%), lighten($baseColor, 7.5%)); + text-decoration: none; + } + + &:active, + &.mw-ui-active { + background: { + image: none; + color: darken($baseColor, 3%); + } + + text-shadow: none; + } + + &:disabled, + &.mw-ui-disabled { + background: { + image: none; + color: $baseColor; + } + opacity: 0.5; + text-shadow: none; + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss new file mode 100644 index 0000000000..6316232e8f --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss @@ -0,0 +1,62 @@ +// Font is not included. +// For Vector, that should be layered on top with vector-type +@mixin agora-field-styling() { + @include reset-focus; // Removes OS field focus + + border: { + style: solid; + width: 1px; + color: $agoraGray; + }; + + &:focus { + // @include box-shadow generates unneeded prefixes + // https://github.com/chriseppstein/compass/issues/1054 , so specify + // directly. + box-shadow: $agoraBlueShadow 0px 0px 5px; + + border: { + color: $agoraBlueShadow; + }; + } + + color: $agoraTextColor; + padding: 0.35em 0 0.35em 0.5em; +} + +@mixin agora-label-styling() { + font: { + //weight: bold; + size: 0.9em; + }; + color: darken($agoraGray, 30%); + + & * { + font-weight: normal; + } +} + +@mixin agora-inline-label-styling() { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + + font: { + weight: normal; + }; + + & > input[type="checkbox"], + & > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border: { + style: solid; + width: 1px; + color: $agoraGray; + } + cursor: pointer; + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss new file mode 100644 index 0000000000..964d590471 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss @@ -0,0 +1,7 @@ +@mixin vector-type { + font: { + family: $baseFontFamily; + size: $baseFontSize; + } + line-height: $baseLineHeight; +} \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss new file mode 100644 index 0000000000..71a93b60a1 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss @@ -0,0 +1,19 @@ +@mixin agora-flush-left() { + float: left; + margin-left: 0; + padding-left: 0; +} + +@mixin agora-flush-right() { + float: right; + margin-right: 0; + padding-right: 0; +} + +@mixin agora-center-block() { + display: block; + margin: { + left: auto; + right: auto; + }; +} \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss new file mode 100644 index 0000000000..21ac292f70 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss @@ -0,0 +1,2 @@ +@import "colors"; +@import "typography"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss new file mode 100644 index 0000000000..0c18bdb45a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss @@ -0,0 +1,17 @@ +// Grays +// ----------------------------------------- +$agoraGray: #c9c9c9; +$agoraTextColor: #252525; + +// Blues +// ----------------------------------------- +$agoraBlue: #3366bb; +$agoraBlueShadow: #4091ed; + +// Greens +// ----------------------------------------- +$agoraGreen: #27aa65; + +// Reds +// ----------------------------------------- +$agoraRed: #cc0000; diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss new file mode 100644 index 0000000000..5f0cea2829 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss @@ -0,0 +1,6 @@ +$baseFontSize: 1em; +$baseFontFamily: "Helvetica Neue", "Helvetica", "Arial", sans-serif; +$baseLineHeight: 1.4 * $baseFontSize; +$baseFontColor: $agoraTextColor; + +$smallFontSize: 0.75em; \ No newline at end of file -- 2.20.1