MediaWiki:Common.css: Difference between revisions
SuperAdmin1 (talk | contribs) Add modern registration page styling with clean hCaptcha integration |
Add version display and ensure footer disclaimer is visible (v7) |
||
| Line 615: | Line 615: | ||
justify-content: center; | justify-content: center; | ||
margin: 24px 0; | margin: 24px 0; | ||
} | |||
/* ============================================ | |||
VERSION DISPLAY & WIKIPEDIA DISCLAIMER | |||
Added: 2025-10-21-v7 | |||
============================================ */ | |||
/* Version display in top right corner */ | |||
#mw-page-base::after { | |||
content: "Version: 2025-10-21-v7"; | |||
position: fixed; | |||
top: 10px; | |||
right: 10px; | |||
background: #f0f0f0; | |||
border: 1px solid #ccc; | |||
padding: 3px 8px; | |||
font-size: 0.7em; | |||
color: #666; | |||
z-index: 1000; | |||
border-radius: 3px; | |||
} | |||
/* Ensure footer copyright section is visible */ | |||
#footer-info { | |||
display: block !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
} | |||
/* Make copyright text stand out slightly */ | |||
#footer-info-copyright { | |||
font-size: 0.85em !important; | |||
line-height: 1.6 !important; | |||
color: #202122 !important; | |||
display: block !important; | |||
} | |||
/* Responsive version display */ | |||
@media (max-width: 768px) { | |||
#mw-page-base::after { | |||
font-size: 0.6em; | |||
padding: 2px 6px; | |||
top: 5px; | |||
right: 5px; | |||
} | |||
} | } | ||
Revision as of 09:04, 21 October 2025
/* ============================================
ARTICLE TEXT JUSTIFICATION - CEO PAGES ONLY
Justify text only in CEO biography articles (pages with infoboxes)
Excludes Main Page, Special pages, and Project pages
============================================ */
/* Apply justification only to main namespace articles (not Main Page) */
body.ns-0:not(.page-Main_Page) .mw-parser-output p {
text-align: justify;
text-justify: inter-word;
}
body.ns-0:not(.page-Main_Page) .mw-parser-output li {
text-align: justify;
text-justify: inter-word;
}
/* Explicitly keep Main Page left-aligned */
body.page-Main_Page .mw-parser-output * {
text-align: left !important;
}
/* Keep special pages left-aligned */
body.ns-special .mw-parser-output p,
body.ns-special .mw-parser-output li {
text-align: left !important;
}
/* Keep project namespace (CEO.wiki:) pages left-aligned */
body.ns-4 .mw-parser-output p,
body.ns-4 .mw-parser-output li {
text-align: left !important;
}
/* Keep headings left-aligned everywhere */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
text-align: left !important;
}
/* Keep infobox content left-aligned */
.infobox,
.infobox * {
text-align: left !important;
}
/* Keep navigation elements left-aligned */
.mw-navigation,
.mw-navigation * {
text-align: left !important;
}
/* Keep tables left-aligned */
.wikitable,
.wikitable * {
text-align: left !important;
}
/* ============================================
ACCOUNT CREATION PAGE STYLING
Center all form elements
============================================ */
/* Center the entire create account form */
.mw-special-Userlogin #userloginForm {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
/* Center all form rows */
text-align: center;
margin: 0 auto;
}
/* Center labels */
display: block;
text-align: center;
margin: 10px auto 5px auto;
font-weight: 600;
}
/* Center input fields */
display: block;
margin: 5px auto 15px auto;
width: 100%;
max-width: 400px;
padding: 10px;
border: 1px solid #a2a9b1;
border-radius: 4px;
font-size: 14px;
}
/* Center help text */
text-align: center;
margin: 5px auto 15px auto;
font-size: 0.9em;
color: #54595d;
max-width: 400px;
}
/* Center checkboxes */
text-align: center;
}
margin-right: 5px;
}
/* Center CAPTCHA */
text-align: center;
margin: 20px auto;
}
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
/* Center submit button */
text-align: center;
margin: 25px auto;
}
padding: 12px 40px;
font-size: 16px;
font-weight: 600;
background-color: #2c5aa0;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
background-color: #1e3a6b;
}
/* Statistics box at top */
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a6b 100%);
color: white;
padding: 30px 20px;
margin: 0 auto 30px auto;
max-width: 600px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
font-size: 1.4em;
font-weight: 600;
margin-bottom: 20px;
}
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 15px;
}
text-align: center;
}
font-size: 2.5em;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
}
font-size: 0.9em;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Center page title */
text-align: center;
}
/* Responsive design */
@media (max-width: 600px) {
grid-template-columns: 1fr;
gap: 15px;
}
max-width: 100%;
}
/* Infobox Shadow Styling */
.infobox {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
border-radius: 4px;
}
/* Enhanced Infobox Executive Styling */
.infobox.executive,
table.infobox {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 6px;
overflow: hidden;
}
/* ============================================================================
SPECIAL:CREATEACCOUNT - CENTERED LAYOUT
============================================================================ */
/* Center the entire create account form */
.mw-special-CreateAccount #bodyContent {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
/* Center the page title */
.mw-special-CreateAccount .firstHeading {
text-align: center;
}
/* Center all form elements */
.mw-special-CreateAccount .mw-htmlform-field-HTMLFormFieldWithButton,
.mw-special-CreateAccount .mw-htmlform-field-HTMLTextField,
.mw-special-CreateAccount .mw-htmlform-field-HTMLEmailField,
.mw-special-CreateAccount .mw-htmlform-field-HTMLCheckField,
.mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Center labels */
.mw-special-CreateAccount label {
display: block;
text-align: center;
margin: 15px auto 5px;
font-weight: 600;
}
/* Center input fields */
.mw-special-CreateAccount input[type="text"],
.mw-special-CreateAccount input[type="password"],
.mw-special-CreateAccount input[type="email"] {
display: block;
margin: 0 auto;
text-align: center;
max-width: 400px;
width: 100%;
}
/* Center help text */
.mw-special-CreateAccount .htmlform-tip,
.mw-special-CreateAccount .mw-htmlform-help-message {
text-align: center;
margin: 5px auto 15px;
display: block;
}
/* Center checkboxes */
.mw-special-CreateAccount .mw-htmlform-field-HTMLCheckField label {
display: inline-block;
}
/* Center submit button */
.mw-special-CreateAccount .mw-htmlform-submit-buttons {
text-align: center;
margin-top: 20px;
}
.mw-special-CreateAccount button[type="submit"] {
margin: 0 auto;
}
/* Statistics Banner at Top */
.createaccount-statistics-banner {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
color: white;
padding: 30px 20px;
margin: -20px -20px 30px -20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.createaccount-statistics-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 20px;
opacity: 0.95;
}
.createaccount-statistics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 500px;
margin: 0 auto;
}
.createaccount-stat-item {
text-align: center;
}
.createaccount-stat-number {
font-size: 2.5em;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
color: #fff;
}
.createaccount-stat-label {
font-size: 0.9em;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive design */
@media (max-width: 600px) {
.createaccount-statistics-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.mw-special-CreateAccount input[type="text"],
.mw-special-CreateAccount input[type="password"],
.mw-special-CreateAccount input[type="email"] {
max-width: 100%;
}
}/* ========================================
REGISTRATION PAGE IMPROVEMENTS - CEO.wiki
Clean, modern design for account creation
======================================== */
/* Registration form container */
#userlogin, #userloginForm {
max-width: 480px;
margin: 40px auto;
padding: 30px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Form header */
.mw-ui-container h1,
.mw-createaccount-header {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
text-align: center;
}
/* Form description */
.mw-form-related-link-container {
text-align: center;
margin-bottom: 24px;
color: #666;
}
/* Input fields */
.mw-ui-input,
input[type="text"],
input[type="password"],
input[type="email"] {
width: 100%;
padding: 12px 16px;
font-size: 15px;
border: 1px solid #d1d5db;
border-radius: 6px;
background-color: #ffffff;
transition: all 0.2s ease;
margin-bottom: 4px;
}
.mw-ui-input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Field labels */
.mw-ui-vform-field > label {
font-weight: 500;
color: #374151;
margin-bottom: 6px;
display: block;
}
/* hCaptcha container - clean integration */
.mw-confirmedit-captcha-and-reload,
.h-captcha {
margin: 24px 0 !important;
padding: 16px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
/* Hide redundant CAPTCHA labels/text */
.fancycaptcha-captcha-container .mw-label,
.mw-confirmedit-captcha .mw-label {
display: none !important;
}
/* CAPTCHA help text - make it subtle */
.mw-confirmedit-captcha-fail {
background-color: #fef2f2;
border-color: #fecaca;
padding: 12px;
border-radius: 6px;
margin: 12px 0;
color: #991b1b;
font-size: 14px;
}
/* Submit button - modern design */
.mw-ui-button,
#wpCreateaccount,
button[type="submit"] {
width: 100%;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 20px;
}
.mw-ui-button:hover,
#wpCreateaccount:hover,
button[type="submit"]:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.mw-ui-button:active,
#wpCreateaccount:active {
transform: translateY(0);
}
/* Help text / hints */
.mw-helptext,
.mw-form-help {
font-size: 13px;
color: #6b7280;
margin-top: 4px;
line-height: 1.5;
}
/* Already have account link */
.mw-form-related-link {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.mw-form-related-link a {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}
.mw-form-related-link a:hover {
color: #2563eb;
text-decoration: underline;
}
/* Error messages */
.errorbox,
.mw-message-box-error {
background-color: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 20px;
}
/* Success messages */
.successbox,
.mw-message-box-success {
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 20px;
}
/* Checkbox styling (remember me, etc) */
input[type="checkbox"] {
width: 18px;
height: 18px;
margin-right: 8px;
cursor: pointer;
}
/* Privacy/Terms links */
.mw-createacct-benefits-container,
.mw-createacct-policy-container {
font-size: 13px;
color: #6b7280;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
line-height: 1.6;
}
.mw-createacct-benefits-container a,
.mw-createacct-policy-container a {
color: #3b82f6;
text-decoration: none;
}
.mw-createacct-benefits-container a:hover,
.mw-createacct-policy-container a:hover {
text-decoration: underline;
}
/* Loading state for form submission */
.mw-ui-button:disabled,
#wpCreateaccount:disabled {
opacity: 0.6;
cursor: not-allowed;
background: #9ca3af;
}
/* Responsive design */
@media (max-width: 768px) {
#userlogin, #userloginForm {
margin: 20px auto;
padding: 20px;
max-width: 100%;
}
.mw-ui-container h1 {
font-size: 24px;
}
}
/* Clean form field spacing */
.mw-ui-vform .mw-ui-vform-field {
margin-bottom: 20px;
}
/* Remove unnecessary borders and backgrounds */
#userloginForm fieldset {
border: none;
padding: 0;
margin: 0;
}
/* Make password requirements more visible */
.mw-createacct-password-validity {
font-size: 13px;
margin-top: 8px;
padding: 8px 12px;
background: #f9fafb;
border-radius: 4px;
border-left: 3px solid #3b82f6;
}
/* Clean checkbox container */
.mw-ui-checkbox {
display: flex;
align-items: center;
margin: 16px 0;
}
.mw-ui-checkbox label {
margin: 0;
font-weight: normal;
color: #374151;
}
/* Add subtle hover effect to form */
#userlogin:hover, #userloginForm:hover {
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Hide "Anti-Bot Protection" heading if it still appears */
h3:contains("Security Verification"),
h3:contains("Anti-Bot Protection") {
display: none !important;
}
/* Style any remaining CAPTCHA wrapper cleanly */
.mw-htmlform-field-HTMLHCaptchaField {
border: none !important;
padding: 0 !important;
background: transparent !important;
}
/* Center the hCaptcha widget nicely */
.mw-htmlform-field-HTMLHCaptchaField > .mw-input {
display: flex;
justify-content: center;
margin: 24px 0;
}
/* ============================================
VERSION DISPLAY & WIKIPEDIA DISCLAIMER
Added: 2025-10-21-v7
============================================ */
/* Version display in top right corner */
#mw-page-base::after {
content: "Version: 2025-10-21-v7";
position: fixed;
top: 10px;
right: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
padding: 3px 8px;
font-size: 0.7em;
color: #666;
z-index: 1000;
border-radius: 3px;
}
/* Ensure footer copyright section is visible */
#footer-info {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Make copyright text stand out slightly */
#footer-info-copyright {
font-size: 0.85em !important;
line-height: 1.6 !important;
color: #202122 !important;
display: block !important;
}
/* Responsive version display */
@media (max-width: 768px) {
#mw-page-base::after {
font-size: 0.6em;
padding: 2px 6px;
top: 5px;
right: 5px;
}
}