Improve sign-up portion of the login form

Following up patch I2cc642ddc78f1b436e47261568601be592fe1fa4 and
fixing selector specifity issue and open design request on making sign-up label bold.
Also making login button following `ButtonWidget (progressive)` from OOjs UI. As
this is about this specific button only, we're staying with styles on specific selector
for now.

Bug: T89860
Change-Id: I565cab504be40e8a97695f1416437348d39695fc

diff --git a/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css b/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css
index fd907ac..9da6c83 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css
+++ b/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css
@@ -1,5 +1,5 @@
-/* Styles for user login and signup forms */
-.mw-form-related-link-container {
+/* User login and signup forms */
+.mw-ui-vform .mw-form-related-link-container {
        margin-bottom: 0.5em;
        text-align: center;
 }

diff --git a/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css b/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css
index 42d5693..620c83a 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css
+++ b/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css
@@ -5,4 +5,29 @@
        background: url( images/glyph-people-large.png ) no-repeat 50%;
        margin: 0 auto;
        padding-top: 7.8em;
+       font-weight: bold;
+}
+
+/* Login Button, following `ButtonWidget (progressive)‎` from OOjs UI */
+#mw-createaccount-join {
+       color: #347bff;
+}
+#mw-createaccount-join:hover {
+       background-color: #ebf2ff; /* rgba(52, 123, 255, 0.1); */
+       border-color: #859ecc;
+       box-shadow: none;
+}
+#mw-createaccount-join:active {
+       background-color: #ebf2ff;
+       color: #1f4999;
+       border-color: #1f4999;
+}
+#mw-createaccount-join:focus {
+       background-color: #fff;
+       color: #1f4999;
+       border-color: #1f4999;
+       box-shadow: inset 0 0 0 1px #1f4999;
+}
+#mw-createaccount-join:active:focus {
+       background-color: #ebf2ff;
 }