5f7a14fde8cdb24b01fc0e5eadba145bfd9ecb04
max
  Sat Jul 25 23:16:06 2026 -0700
hgLogin: social login (Google/ORCID), email login link, change email. refs #37929

diff --git src/hg/htdocs/style/userAccounts.css src/hg/htdocs/style/userAccounts.css
index b4a058fc739..605cd48009e 100644
--- src/hg/htdocs/style/userAccounts.css
+++ src/hg/htdocs/style/userAccounts.css
@@ -1,77 +1,112 @@
 /* Styles for the login, signup, etc pages */
 
 body.accountScreen {background-color: #fffee8;}
 
 .formBox a {text-decoration: none}
 
 .formBox a:hover {text-decoration: underline;}
 
 .centeredContainer {margin: 0 auto;}
 
 .formBox {
     width: 400px;
     border: 2px solid #eed5b7;
     margin-top: 2.5em;
     padding: 0 30px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     background-color: #fff9d2;
 }
 
 .formBox input {font-size: 1.04em;}
 
 .formBox label {display: block; margin-top: 10px;}
 
 .formBox label.radioLabel {display: inline; margin: 0;}
 
 .formControls {
 	margin: 1em 0;
 }
 
 #helpBox {
     margin-top: 20px;
     padding: 20px 0 10px 0; 
     border-top: 1px solid #eed5b7;
 }
 
 label small {
     font-style: italic;
     font-size: 0.9em;
 }
 
 .topBarContainer { /* only needed for login screens */
     padding: 6px 0;    
 }
 
 .highlightBox { /* combine with classes error, alert, or highlight */
 	border: 2px solid;
     padding: 10px;
 }
 
 .error { /* for use with highlightBox, when used for error msgs */
     border-color: #f00;
     background-color: #ffeded;
     color: #f00;
 }
 
 .confirmationTxt {
     font-size: 1.2em;
     font-weight: normal;
 }
 
 .error {color: #bb2525;}
 label.error {
     margin: 0;
     background-color: #FFF9D2;
     padding: 2px 5px;
     width: 321px;
 }
 
 input.error {
     border: 1px solid #bb2525;
     -moz-box-shadow:    inset 0 1px 1px #b0b0b0;
     -webkit-box-shadow: inset 0 1px 1px #b0b0b0;
     box-shadow:         inset 0 1px 1px #b0b0b0;
     padding: 3px 2px;
 }
+
+/* Social login (Google/ORCID) buttons and the "or" divider. */
+.socialLogin {margin: 0.5em 0;}
+
+.orDivider {
+    text-align: center;
+    border-top: 1px solid #eed5b7;
+    line-height: 0.1em;
+    margin: 1.2em 0;
+}
+
+.orDivider span {
+    background: #fff9d2;
+    padding: 0 10px;
+}
+
+a.socialButton {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 8px 0;
+    padding: 9px 12px;
+    text-align: center;
+    font-weight: 700;
+    color: #222 !important;
+    background: #e0e0e0;
+    border: 1px solid #999;
+    border-radius: 3px;
+    text-decoration: none !important;
+}
+
+a.socialButton:hover {
+    background: #d5d5d5;
+    border-color: #666;
+}
\ No newline at end of file