Target visual order:
Articles & Issues | About | Publish | Order journal | Search in this journal | Submit your article | Guide for authors
*/
body.pkp_page_index #navigationPrimary.pkp_navigation_primary {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
/* reset ordering */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li {
order: 0;
}
/* 1) Articles & Issues (li 1) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(1) { order: 1; }
/* 2) About (li 4) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(4) { order: 2; }
/* 3) Publish (li 2) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(2) { order: 3; }
/* 4) Order journal (li 3) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(3) { order: 4; }
/* 5) Search in this journal (li 5) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(5) { order: 5; }
/* 6) Submit your article (li 7) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(7) { order: 6; }
/* 7) Guide for authors (li 6) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(6) { order: 7; }
/* Hide Home item (li 8) completely on home page */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(8) {
display: none !important;
}
/* --- ICON CLEANUP & STYLING --- */
/* Remove any old icons first */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li > a::before,
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li > a::after {
content: none;
}
/* Add magnifying glass before 'Search in this journal' (li 5) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(5) > a::before {
content: "\1F50D";
font-size: 13px;
margin-right: 6px;
}
/* Add external-link arrow after 'Order journal' (li 3) and 'Submit your article' (li 7) */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(3) > a::after,
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:nth-child(7) > a::after {
content: "\2197";
font-size: 11px;
margin-left: 4px;
}
/* Basic hover & cell look similar to ECM */
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li {
border-left: 1px solid #e0e0e0;
}
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li:last-child {
border-right: 1px solid #e0e0e0;
}
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li > a {
padding: 10px 20px;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
text-decoration: none;
color: #000;
}
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li > a:hover,
body.pkp_page_index #navigationPrimary.pkp_navigation_primary > li > a:focus {
background-color: #f2f2f2;
text-decoration: none;
}
/* === ECM-LIKE NAVBAR ON ALL NON-HOME PAGES (MATCH HOME ORDER) === */
/* This keeps the special layout on the home page (body.pkp_page_index)
and applies the same item order to all other journal pages. */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
/* Reset any previous ordering from older rules */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li {
order: 0;
display: flex;
align-items: stretch;
}
/* UL structure on all journal pages (non-home):
1: Articles & Issues
2: Publish
3: Order journal
4: About
5: Search in this journal
6: Guide for authors
7: Submit your article
8: Home
Target visual order (like home page):
Articles & Issues | About | Publish | Order journal | Search in this journal | Submit your article | Guide for authors | Home
*/
/* 1) Articles & Issues (li 1) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(1) {
order: 1;
}
/* 2) About (li 4) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(4) {
order: 2;
}
/* 3) Publish (li 2) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(2) {
order: 3;
}
/* 4) Order journal (li 3) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(3) {
order: 4;
}
/* 5) Search in this journal (li 5) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(5) {
order: 5;
}
/* 6) Submit your article (li 7) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(7) {
order: 6;
}
/* 7) Guide for authors (li 6) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(6) {
order: 7;
}
/* 8) Home (li 8) stays at the far right */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(8) {
order: 8;
}
/* Make the links look similar to the home page cells */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li > a {
padding: 10px 20px;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
text-decoration: none;
color: #000;
}
/* Hover effect like home */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li > a:hover,
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li > a:focus {
background-color: #f2f2f2;
text-decoration: none;
}
/* External-link arrow after "Order journal" (li 3) and "Submit your article" (li 7) */
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(3) > a::after,
body:not(.pkp_page_index) #navigationPrimary.pkp_navigation_primary > li:nth-child(7) > a::after {
content: "\2197";
font-size: 11px;
margin-left: 4px;
position: relative;
top: -1px;
}
/* =====================================================================
REGISTER PAGE (Pre-registration style like Editorial Manager)
Target: https://energyconversions.org/index.php/ecm/user/register
Body classes in OJS are usually: pkp_page_user pkp_op_register
===================================================================== */
/* Overall content layout: leave space on the left for the description panel */
body.pkp_page_user.pkp_op_register .pkp_page_content {
position: relative;
max-width: 1100px;
margin: 40px auto 60px;
padding-left: 320px; /* space for the left text column */
min-height: 420px;
}
/* Left text column: "Pre-registration Page" + description */
body.pkp_page_user.pkp_op_register .pkp_page_content::before {
content: "Pre-registration Page\A\ATo register to use the Editorial Manager system, please enter the requested information or use your ORCID record if this option is available. Upon successful registration, you will be sent an e-mail with instructions to verify your registration. For more details see Registration Help.";
white-space: pre-wrap;
position: absolute;
top: 0;
left: 0;
width: 280px;
padding-right: 20px;
margin-right: 20px;
border-right: 1px solid #cccccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.45;
color: #000000;
}
/* Grey registration box on the right */
body.pkp_page_user.pkp_op_register form#register {
position: relative;
top: -50px !important;
transform: translateX(-60px) !important;
background-color: #f5f5f5;
border: 1px solid #cccccc;
padding: 26px 32px 30px;
max-width: 650px;
margin: 10px auto 0;
box-shadow: none;
}
/* Top tab: "Choose a Registration Method" */
body.pkp_page_user.pkp_op_register .pkp_page_content::before {
content: "Choose a Registration Method";
position: absolute;
top: -20px; /* moved up */
left: 338px; /* 320px left column + a bit of padding */
padding: 3px 12px;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-bottom: none;
border-radius: 4px 4px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
z-index: 5;
}
/* Insert Special Character link on the top-right (similar to screenshot) */
body.pkp_page_user.pkp_op_register .pkp_page_content::after {
content: "Insert Special Character";
position: absolute;
top: -60px;
right: -10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000ee;
cursor: pointer;
pointer-events: auto;
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
/* Basic two-column alignment for labels and fields inside register form */
body.pkp_page_user.pkp_op_register form#register .form-group,
body.pkp_page_user.pkp_op_register form#register .fields,
body.pkp_page_user.pkp_op_register form#register .pkp_form_field {
display: flex;
align-items: center;
margin-bottom: 6px;
}
/* Labels on the left */
body.pkp_page_user.pkp_op_register form#register label,
body.pkp_page_user.pkp_op_register form#register .label {
width: 185px;
text-align: right;
padding-right: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
/* Inputs on the right */
body.pkp_page_user.pkp_op_register form#register input[type="text"],
body.pkp_page_user.pkp_op_register form#register input[type="password"],
body.pkp_page_user.pkp_op_register form#register input[type="email"],
body.pkp_page_user.pkp_op_register form#register select,
body.pkp_page_user.pkp_op_register form#register textarea {
min-width: 240px;
padding: 2px 4px;
border: 1px solid #a6a6a6;
font-size: 12px;
}
/* Buttons row (e.g., Register/Cancel) */
body.pkp_page_user.pkp_op_register form#register .buttons,
body.pkp_page_user.pkp_op_register form#register .formButtons {
margin-top: 12px;
}
/* Put buttons slightly to the right similar to screenshot */
body.pkp_page_user.pkp_op_register form#register .buttons input,
body.pkp_page_user.pkp_op_register form#register .formButtons button,
body.pkp_page_user.pkp_op_register form#register .formButtons input {
margin-left: 190px;
}
/* Re-use the same top decorative images from the login page on the register page */
/* Banner image at the very top */
body.pkp_page_user.pkp_op_register .pkp_structure_page::before {
content: url("https://i.imgur.com/32Bt37r.png");
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
display: block;
z-index: 1000;
pointer-events: none;
}
/* Center image under the header (same as login) */
body.pkp_page_user.pkp_op_register .pkp_structure_page::after {
content: url("https://i.imgur.com/gC4yZfh.png");
position: fixed;
top: 120px;
left: 50%;
transform: translateX(-50%);
z-index: 950;
pointer-events: none;
}
/* Make sure main content has some top margin so it doesn't clash visually with the fixed images */
body.pkp_page_user.pkp_op_register .pkp_structure_content {
margin-top: 180px;
}
/* =========================================================
REGISTER PAGE ONLY (pkp_op_register)
Hide logo + green header area + text on green
Hide upper navigation bar (user nav)
Hide lower navigation bar (primary nav)
Hide footer (same as before)
========================================================= */
body.pkp_op_register header#headerNavigationContainer,
body.pkp_op_register .pkp_structure_head,
body.pkp_op_register .pkp_site_name_wrapper,
body.pkp_op_register .pkp_site_name {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Upper navigation bar (user nav) */
body.pkp_op_register .pkp_navigation_user_wrapper,
body.pkp_op_register .pkp_navigation_user {
display: none !important;
visibility: hidden !important;
}
/* Lower navigation bar (primary nav) */
body.pkp_op_register #navigationPrimary,
body.pkp_op_register .pkp_navigation_primary_wrapper,
body.pkp_op_register .pkp_navigation_primary {
display: none !important;
visibility: hidden !important;
}
/* Footer and PKP branding on register page only */
body.pkp_op_register .pkp_structure_footer,
body.pkp_op_register .pkp_brand_footer {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Pull main content up now that header/footer are hidden */
body.pkp_op_register .pkp_structure_page,
body.pkp_op_register .pkp_structure_content,
body.pkp_op_register .pkp_structure_main,
body.pkp_op_register #main-content {
margin-top: 10px !important;
padding-top: 0 !important;
}
/* =========================================================
REGISTER PAGE ONLY: floating image (original size)
Using the image from https://imgur.com/a/FBR2vWW#FRlqtd1
========================================================= */
body.pkp_op_register::after {
content: url("https://i.imgur.com/FRlqtd1.png");
position: fixed;
bottom: 520px;
right: -10px;
z-index: 9999;
pointer-events: none; /* doesn't block clicks */
}
/* Push the gray register box down on REGISTER page */
body.pkp_op_register form#register {
margin-top: 60px !important;
}
/* Text line directly under "Choose a Registration Method" tab on REGISTER page */
body.pkp_op_register form#register::after {
content: "Retrieve your details from the ORCID registry:\A\A\A\A\A\AOr type in your details and continue to register without using ORCID:";
white-space: pre-wrap;
line-height: 1.2;
position: absolute;
top: 12px;
left: 52px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
/* Make all text on REGISTER page use #000033 */
body.pkp_op_register,
body.pkp_op_register * {
color: #000033 !important;
}
/* Ensure tab and ORCID text also use #000033 */
body.pkp_op_register form#register::before,
body.pkp_op_register form#register::after {
color: #000033 !important;
}
/* Fine-tune font size for tab + ORCID line */
body.pkp_op_register form#register::before,
body.pkp_op_register form#register::after {
font-size: 12.5px !important;
}
/* Hide legends "Profile" and "Login" on REGISTER page (hide all legends in the register form) */
body.pkp_op_register form#register legend {
display: none !important;
}
/* =========================================================
REGISTER PAGE: stack labels and fields vertically
(each label above its input box)
========================================================= */
body.pkp_op_register form#register .form-group,
body.pkp_op_register form#register .fields,
body.pkp_op_register form#register .pkp_form_field {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}
/* Labels above inputs, left-aligned */
body.pkp_op_register form#register label,
body.pkp_op_register form#register .label {
width: auto;
text-align: left;
padding-right: 0;
margin-bottom: 3px;
}
/* Inputs full-width under labels */
body.pkp_op_register form#register input[type="text"],
body.pkp_op_register form#register input[type="password"],
body.pkp_op_register form#register input[type="email"],
body.pkp_op_register form#register select,
body.pkp_op_register form#register textarea {
min-width: 260px;
width: 100%;
max-width: 100%;
}
/* Buttons row aligned with left edge of fields */
body.pkp_op_register form#register .buttons input,
body.pkp_op_register form#register .formButtons button,
body.pkp_op_register form#register .formButtons input {
margin-left: 0 !important;
}
/* === REGISTER PAGE: labels + inputs inline and centered in gray box === */
/* 1) Each field row as a paragraph, centered */
body.pkp_page_user.pkp_op_register form#register p {
width: 230px;
max-width: 100%;
margin: 10px auto;
text-align: left;
}
/* 2) Label inline-block, fixed width */
body.pkp_page_user.pkp_op_register form#register label[for="givenName"],
body.pkp_page_user.pkp_op_register form#register label[for="familyName"],
body.pkp_page_user.pkp_op_register form#register label[for="affiliation"],
body.pkp_page_user.pkp_op_register form#register label[for="country"],
body.pkp_page_user.pkp_op_register form#register label[for="email"],
body.pkp_page_user.pkp_op_register form#register label[for="username"],
body.pkp_page_user.pkp_op_register form#register label[for="password"],
body.pkp_page_user.pkp_op_register form#register label[for="password2"] {
display: block;
width: 100%;
text-align: left;
margin: 0 0 4px 0;
vertical-align: baseline;
}
/* 3) Hide BR between label and input if it exists */
body.pkp_page_user.pkp_op_register form#register label[for="givenName"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="familyName"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="affiliation"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="country"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="email"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="username"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="password"] + br,
body.pkp_page_user.pkp_op_register form#register label[for="password2"] + br {
display: none;
}
/* 4) Inputs smaller and inline, so الزوج كله يتوسّط في السطر */
body.pkp_page_user.pkp_op_register form#register #givenName,
body.pkp_page_user.pkp_op_register form#register #familyName,
body.pkp_page_user.pkp_op_register form#register #affiliation,
body.pkp_page_user.pkp_op_register form#register #country,
body.pkp_page_user.pkp_op_register form#register #email,
body.pkp_page_user.pkp_op_register form#register #username,
body.pkp_page_user.pkp_op_register form#register #password,
body.pkp_page_user.pkp_op_register form#register #password2 {
display: block;
width: 230px;
max-width: 100%;
margin: 0;
}
/* Push all register fields down inside the gray box */
body.pkp_page_user.pkp_op_register form#register {
padding-top: 130px;
}
/* === Dummy ORCID button above register fields (register page only) === */
body.pkp_page_user.pkp_op_register form#register {
position: relative; /* allow absolutely positioned pseudo-element */
}
/* ORCID-like dummy button */
body.pkp_page_user.pkp_op_register form#register::before {
content: "Use My ORCID Record";
position: absolute;
top: 48px; /* button position inside gray box (slightly higher) */
left: 50%;
transform: translateX(-50%);
display: inline-block;
height: 32px;
line-height: 32px;
padding: 0 16px 0 52px; /* space for icon */
border-radius: 4px;
border: 1px solid #b5b5b5;
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%20viewBox%3D%270%200%2026%2026%27%3E%0A%3Ccircle%20cx%3D%2713%27%20cy%3D%2713%27%20r%3D%2712%27%20fill%3D%27%23A6CE39%27%20stroke%3D%27%237FAE2B%27%20stroke-width%3D%271%27%2F%3E%0A%3Ctext%20x%3D%2713%27%20y%3D%2717%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2C%20Helvetica%2C%20sans-serif%27%20font-size%3D%2711%27%20font-weight%3D%27700%27%20fill%3D%27%23FFFFFF%27%3EiD%3C%2Ftext%3E%0A%3C%2Fsvg%3E"),
linear-gradient(#f7f7f7, #e6e6e6);
background-repeat: no-repeat, no-repeat;
background-position: 12px center, 0 0;
background-size: 24px 24px, 100% 100%;
color: rgb(0, 51, 101) !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 9.52px !important;
font-weight: 600 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
cursor: pointer;
pointer-events: auto;
text-decoration: none;
transition: box-shadow 0.2s ease;
}
/* Hover effect to make dummy ORCID button feel like a real button */
body.pkp_page_user.pkp_op_register form#register:hover::before {
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* === v48 FIX: force register field labels above inputs (left-aligned) === */
body.pkp_op_register form#register .pkp_form_field,
body.pkp_op_register form#register .form-group,
body.pkp_op_register form#register .fields,
body.pkp_op_register form#register p {
display: block !important;
width: 240px !important;
max-width: 100% !important;
margin: 10px auto !important; /* center the whole field block */
text-align: left !important;
}
body.pkp_op_register form#register .pkp_form_field label,
body.pkp_op_register form#register label,
body.pkp_op_register form#register .label {
display: block !important;
width: 100% !important;
text-align: left !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
float: none !important;
position: static !important;
}
/* Hide stray
between label and input if present */
body.pkp_op_register form#register label + br {
display: none !important;
}
body.pkp_op_register form#register input[type="text"],
body.pkp_op_register form#register input[type="password"],
body.pkp_op_register form#register input[type="email"],
body.pkp_op_register form#register select,
body.pkp_op_register form#register textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* === v49 UPDATE: place register field labels NEXT TO inputs (two-column) === */
body.pkp_op_register form#register .pkp_form_field,
body.pkp_op_register form#register .form-group,
body.pkp_op_register form#register .pkp_form_group,
body.pkp_op_register form#register p {
/* keep block stacking but allow floats inside */
position: relative !important;
clear: both !important;
}
/* Clearfix for any container that holds label + input */
body.pkp_op_register form#register .pkp_form_field::after,
body.pkp_op_register form#register .form-group::after,
body.pkp_op_register form#register .pkp_form_group::after,
body.pkp_op_register form#register p::after {
content: "" !important;
display: block !important;
clear: both !important;
}
/* Labels on the LEFT */
body.pkp_op_register form#register label {
display: block !important; /* block so float works consistently */
float: left !important;
width: 160px !important;
margin: 0 !important;
padding: 6px 10px 0 0 !important;
text-align: left !important;
line-height: 1.2 !important;
}
/* Inputs on the RIGHT of the label */
body.pkp_op_register form#register label + input[type="text"],
body.pkp_op_register form#register label + input[type="password"],
body.pkp_op_register form#register label + input[type="email"],
body.pkp_op_register form#register label + select,
body.pkp_op_register form#register label + textarea {
display: block !important;
float: left !important;
width: calc(100% - 170px) !important;
max-width: calc(100% - 170px) !important;
margin: 0 !important;
}
/* If there is a wrapper span/div between label and input, make it behave */
body.pkp_op_register form#register label + span,
body.pkp_op_register form#register label + div {
float: left !important;
width: calc(100% - 170px) !important;
max-width: calc(100% - 170px) !important;
}
/* Make nested inputs inside wrapper spans/divs take full wrapper width */
body.pkp_op_register form#register label + span input,
body.pkp_op_register form#register label + div input,
body.pkp_op_register form#register label + span select,
body.pkp_op_register form#register label + div select,
body.pkp_op_register form#register label + span textarea,
body.pkp_op_register form#register label + div textarea {
width: 100% !important;
max-width: 100% !important;
}
/* Keep the "required" asterisk inline with label text */
body.pkp_op_register form#register label .req,
body.pkp_op_register form#register label .required {
float: none !important;
display: inline !important;
}
/* === v55 UPDATE: make REGISTER form labels red (override global text color) === */
body.pkp_op_register form#register label,
body.pkp_op_register form#register .label,
body.pkp_page_user.pkp_op_register form#register label,
body.pkp_page_user.pkp_op_register form#register .label {
color: rgb(204, 0, 0) !important;
}
/* === v56 UPDATE: set REGISTER required asterisk color to match labels === */
body.pkp_op_register form#register label .req,
body.pkp_op_register form#register label .required,
body.pkp_page_user form#register label .req,
body.pkp_page_user form#register label .required {
color: rgb(204, 0, 0) !important;
}
/* =========================================================
REGISTER PAGE: Add top texts inside the gray box
- Left: "Choose a Registration Method"
- Right: "Insert Special Character"
(Uses pkp_structure_main pseudo-elements to avoid clashing
with the ORCID button pseudo-element on form#register::before)
========================================================= */
body.pkp_page_user.pkp_op_register .pkp_structure_main {
position: relative !important;
padding-top: 34px !important; /* make room for the top texts */
}
body.pkp_page_user.pkp_op_register .pkp_structure_main::before {
content: "Choose a Registration Method";
position: absolute;
top: -4px;
left: 12px;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #000000 !important;
background: transparent !important;
padding: 0 !important;
z-index: 50 !important;
}
body.pkp_page_user.pkp_op_register .pkp_structure_main::after {
content: "Insert Special Character";
position: absolute;
top: -4px;
right: 12px;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
font-weight: normal !important;
color: #0000ee !important;
text-decoration: underline !important;
cursor: pointer !important;
background: transparent !important;
padding: 0 !important;
z-index: 50 !important;
}
/* === Register page: add top-left + top-right helper texts inside grey box (robust) === */
body.pkp_page_user.pkp_op_register form#register { overflow: visible !important; }
/* Use the FIRST fieldset (or form itself) as anchor so we don't conflict with form#register::before (ORCID button) */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type { position: relative !important; }
/* Top-left: Choose a Registration Method */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type::before {
content: "Choose a Registration Method";
position: absolute;
top: -154px !important;
left: 0;
padding: 3px 12px;
background: #ffffff;
border: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
color: #000033;
z-index: 900;
}
/* Top-right: Insert Special Character */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type::after {
content: "Insert Special Character";
position: absolute;
top: -160px;
right: 0;
padding: 3px 12px;
background: #ffffff;
border: 1px solid transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
color: rgb(0, 51, 101);
z-index: 900;
cursor: pointer;
}
/* Fallback if the register form has NO fieldset */
body.pkp_page_user.pkp_op_register form#register:not(:has(fieldset)) { position: relative !important; }
body.pkp_page_user.pkp_op_register form#register:not(:has(fieldset))::after {
content: "Insert Special Character";
position: absolute;
top: -4px;
right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: rgb(0, 51, 101);
z-index: 9999;
}
/* === v75: Shift the whole register box up by 50px (including tabs + ORCID block) === */
body.page_register form#register,
body.page_register #register {
position: relative !important;
top: -50px !important;
left: -30px !important;
}
/* === v135: Move the gray register box 40px to the right ONLY on /user/register (no ?source=...) === */
body.page_register form#register:not([action*="source="]) {
left: 10px !important; /* was -30px in v75, now -30 + 40 = 10 */
}
/* ===================== REGISTER: decorative vertical line (left of grey box) ===================== */
/* Put the line OUTSIDE the grey fieldset by drawing it with a pseudo-element shifted to the left */
body.page_register form#register fieldset:first-of-type{
position: relative !important;
border-left: none !important;
padding-left: 0 !important;
}
body.page_register form#register fieldset:first-of-type::before{
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: -18px !important; /* outside the grey box */
width: 3px !important;
background: #e5e5e5 !important;
}
/* === v82 fix: ensure outside-left decorative line is visible === */
/* Anchor: first fieldset in register form (the grey box wrapper) */
.pkp_page_register form#register fieldset:first-of-type{
position: relative !important;
overflow: visible !important; /* allow the outside line to show */
}
/* Draw the vertical line OUTSIDE the grey box (left side) */
.pkp_page_register form#register fieldset:first-of-type::before{
content: "" !important;
position: absolute !important;
left: -22px !important; /* outside the grey border */
top: 84px !important; /* start below the tabs */
height: calc(100% - 160px) !important;
width: 3px !important;
background: rgba(0,0,0,0.12) !important;
border-radius: 3px !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* ===================== v83 FIX: Vertical line outside grey box WITHOUT breaking tabs ===================== */
/* The fieldset ::before is already used for "Choose a Registration Method".
So we draw the outside-left vertical line using the fieldset's LEGEND pseudo-element instead. */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type{
position: relative !important;
overflow: visible !important; /* allow the outside line to show */
}
/* Make legend a full-height absolute anchor (doesn't affect layout) */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type > legend{
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: -22px !important; /* push outside the grey box */
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: visible !important;
pointer-events: none !important;
font-size: 0 !important; /* avoid any visible legend text */
}
/* The actual vertical decorative line */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type > legend::before{
content: "" !important;
position: absolute !important;
top: 18px !important; /* a little breathing room */
bottom: 18px !important;
left: 0 !important;
width: 3px !important;
background: #e5e5e5 !important;
}
/* Safety: if some earlier rule overwrote the tabs, force them back */
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type::before{
content: "Choose a Registration Method" !important;
}
body.pkp_page_user.pkp_op_register form#register fieldset:first-of-type::after{
content: "Insert Special Character" !important;
}
/* ===================== LEFT SIDE DECORATIVE IMAGE ===================== */
/* Fixed (not floating) image on the left side; keeps intrinsic size; REGISTER ONLY */
body.pkp_page_user.pkp_op_register .pkp_structure_page,
.pkp_page_register .pkp_structure_page,
body[class*="pkp_page_user"][class*="pkp_op_register"] .pkp_structure_page{
position: relative !important;
}
body.pkp_page_user.pkp_op_register .pkp_structure_page::after,
.pkp_page_register .pkp_structure_page::after,
body[class*="pkp_page_user"][class*="pkp_op_register"] .pkp_structure_page::after{
content: url("https://i.imgur.com/pg2oR6W.png") !important;
position: absolute !important;
left: 20px !important;
top: 180px !important;
transform: translateX(30px) !important;
display: block !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Safety: never show this register decoration on login */
body.pkp_page_user.pkp_op_login .pkp_structure_page::after,
body[class*="pkp_op_login"] .pkp_structure_page::after{
content: none !important;
display: none !important;
}
/* ===================== LEFT FIXED IMAGE (Imgur) - Reliable Version ===================== */
/* Uses direct i.imgur.com asset URL so it can render as an actual image (intrinsic size). */
/* fallback in case png isn't correct; uncomment ONE if needed */
/* */
/* */
/* ===================== FIX: Inputs not clickable (overlay blocking) ===================== */
/* Decorative pseudo-elements (tabs/lines/images) must not capture mouse events */
body[class*="pkp_page_user"][class*="pkp_op_register"]::before,
body[class*="pkp_page_user"][class*="pkp_op_register"]::after,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register::before,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register::after,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register fieldset::before,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register fieldset::after,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register legend::before,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register legend::after,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register *::before,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register *::after {
pointer-events: none !important;
}
/* Ensure the actual form controls sit above any decorations */
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register fieldset,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register .pkp_form_field {
position: relative;
z-index: 5;
}
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register input,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register select,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register textarea,
body[class*="pkp_page_user"][class*="pkp_op_register"] form#register button {
position: relative;
z-index: 6;
pointer-events: auto !important;
}
/* ============================================================
LOST PASSWORD PAGE (ONLY): mimic Editorial Manager layout
URL: /index.php/ecm/login/lostPassword
Scope: body.pkp_page_login.pkp_op_lostPassword
============================================================ */
/* Remove the "third image" injected in content area on lostPassword only */
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content::before,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content::after {
content: none !important;
display: none !important;
}
/* Keep other pages unaffected: also neutralize any accidental background images inside lostPassword content */
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content img.pkp_site_logo,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_head img {
/* do not hide header images */
display: inline-block !important;
}
/* Page spacing (lostPassword only) */
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main {
padding-top: 40px !important;
}
/* Two-column layout like Editorial Manager: left info + right form */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content {
display: grid !important;
grid-template-columns: 260px 520px !important;
column-gap: 80px !important;
justify-content: center !important;
align-items: start !important;
}
/* Left title: "Account Finder" */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content > h2 {
grid-column: 1 !important;
margin: 20px 0 10px 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
color: #003a8c !important;
}
/* Left description paragraph */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content > p {
grid-column: 1 !important;
margin: 0 !important;
max-width: 240px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
line-height: 1.35 !important;
transform: translateX(-150px) !important;
color: #003a8c !important;
}
/* Right form box (Reset Password form) */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form {
grid-column: 2 !important;
max-width: 520px !important;
margin: 0 !important;
padding: 18px 24px 24px 24px !important;
border: 1px solid #cccccc !important;
background: #f7f7f7 !important;
box-shadow: 0 0 4px rgba(0,0,0,0.15) !important;
position: relative !important;
font-family: Arial, Helvetica, sans-serif !important;
}
/* "Please Enter The Following" tab heading */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form::before {
content: "Please Enter The Following" !important;
position: absolute !important;
top: -13px !important;
left: 12px !important;
padding: 3px 10px !important;
background: #f4f4f4 !important;
border: 1px solid #cccccc !important;
font-weight: bold !important;
font-size: 11px !important;
color: #003a8c !important;
}
/* Align label + input in one row (best-effort for OJS markup) */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form .fields,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form fieldset {
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Labels (make "E-mail*" red like EM) */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form label {
display: inline-block !important;
width: 90px !important;
text-align: right !important;
margin-right: 10px !important;
font-size: 11px !important;
font-weight: bold !important;
color: #cc0000 !important;
}
/* Inputs */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form input[type="text"],
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form input[type="email"],
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form input[type="password"] {
width: 210px !important;
padding: 2px 4px !important;
border: 1px solid #a6a6a6 !important;
background: #f4f4f4 !important;
line-height: 18px !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) !important;
}
/* Buttons row */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form .buttons,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form .formButtons {
margin-top: 12px !important;
display: flex !important;
gap: 10px !important;
justify-content: center !important;
}
/* Buttons style (Cancel / Send Login Details) */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form button,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form input[type="submit"],
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form a.pkp_button {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
padding: 2px 10px !important;
border: 1px solid #9a9a9a !important;
background: #e6e6e6 !important;
color: #003a8c !important;
border-radius: 3px !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset !important;
cursor: pointer !important;
text-decoration: none !important;
}
/* Hover */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form button:hover,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form input[type="submit"]:hover,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content form a.pkp_button:hover {
background: #f0f0f0 !important;
}
/* "Go to Login Page" link (centered, blue) */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content a[href*="/login"] {
display: block !important;
text-align: center !important;
margin-top: 12px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
color: #0000ee !important;
text-decoration: none !important;
}
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content a[href*="/login"]:hover {
text-decoration: underline !important;
}
/* Rename the page title to "Account Finder" (visual only) */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content > h2 {
font-size: 0 !important;
}
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content > h2::before {
content: "Account Finder" !important;
font-size: 22px !important;
font-weight: bold !important;
color: #003a8c !important;
}
/* === Lost Password (Reset Password) page: hide instruction paragraph === */
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content > h2 + p,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content > p:first-of-type {
display: none !important;
}
/* STRONG hide (lostPassword only): hide the instruction paragraph.
The text is rendered as a , but in some templates it is not the first sibling.
So we hide all
inside the lostPassword content area, then re-enable any
paragraphs inside form error/notification blocks (if they appear).
*/
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content p {
display: none !important;
}
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content .pkp_form_error p,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content .pkp_notification p,
body.pkp_page_login.pkp_op_lostPassword .pkp_page_content .pkpError p {
display: block !important;
}
/* =============================
LOST PASSWORD: Hide the instruction paragraph (ULTRA)
Page: /index.php/ecm/login/lostPassword
Scope: body.pkp_page_login.pkp_op_lostPassword
============================= */
/* Hide any paragraph inside the main content area on lostPassword (covers nested wrappers) */
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .pkp_page_content p,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .pkp_structure_content p,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .page p {
display: none !important;
}
/* But keep system/error/notification messages visible */
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .cmp_notification,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .cmp_notification p,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .pkp_form_error,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .pkp_form_error p,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .error,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_main .error p {
display: block !important;
}
/* ============================
LOST PASSWORD - Editorial Manager style (page-only)
============================ */
body.pp_lostPassword .pkp_structure_main,
body.pp_lostPassword .pkp_structure_content{
display: flex;
justify-content: center;
align-items: flex-start;
}
body.pp_lostPassword .pkp_structure_content{
position: relative;
padding-top: 70px !important;
}
/* Center the form box */
body.pp_lostPassword .pkp_structure_content form,
body.pp_lostPassword .pkp_structure_content .cmp_form,
body.pp_lostPassword .pkp_structure_content .pkp_form{
width: min(760px, 92vw);
margin: 0 auto !important;
}
/* Fieldset box like the screenshot */
body.pp_lostPassword .pkp_structure_content fieldset{
border: 1px solid #cfcfcf !important;
background: #f5f5f5 !important;
padding: 28px 28px 18px 28px !important;
}
/* Legend: "Please Enter The Following" */
body.pp_lostPassword .pkp_structure_content legend{
font-weight: 700 !important;
font-size: 11px !important;
padding: 2px 10px !important;
border: 1px solid #cfcfcf !important;
background: #f4f4f4 !important;
}
/* "Insert Special Character" link (only if it exists) */
body.pp_lostPassword .pkp_structure_content a[href*="insert"],
body.pp_lostPassword .pkp_structure_content a[href*="special"]{
position: absolute !important;
top: 36px !important;
right: 18px !important;
font-size: 11px !important;
color: #0000ee !important;
text-decoration: none !important;
}
body.pp_lostPassword .pkp_structure_content a[href*="insert"]:hover,
body.pp_lostPassword .pkp_structure_content a[href*="special"]:hover{
text-decoration: underline !important;
}
/* Form row alignment */
body.pp_lostPassword .pkp_structure_content .form-group,
body.pp_lostPassword .pkp_structure_content .fields,
body.pp_lostPassword .pkp_structure_content .pkp_form .fields{
display: grid !important;
grid-template-columns: 120px 1fr !important;
gap: 10px 16px !important;
align-items: center !important;
}
/* Label: red "E-mail*" */
body.pp_lostPassword .pkp_structure_content label{
color: #b30000 !important;
font-weight: 700 !important;
font-size: 11px !important;
white-space: nowrap !important;
margin: 0 !important;
}
/* Input */
body.pp_lostPassword .pkp_structure_content input[type="text"],
body.pp_lostPassword .pkp_structure_content input[type="email"],
body.pp_lostPassword .pkp_structure_content input[type="password"]{
width: 260px !important;
max-width: 100% !important;
height: 24px !important;
border: 1px solid #bfbfbf !important;
background: #f4f4f4 !important;
padding: 2px 6px !important;
}
/* Buttons row */
body.pp_lostPassword .pkp_structure_content .buttons,
body.pp_lostPassword .pkp_structure_content .formButtons,
body.pp_lostPassword .pkp_structure_content .pkp_form .buttons{
display: flex !important;
justify-content: center !important;
gap: 16px !important;
margin-top: 14px !important;
}
/* Buttons look */
body.pp_lostPassword .pkp_structure_content button,
body.pp_lostPassword .pkp_structure_content input[type="submit"],
body.pp_lostPassword .pkp_structure_content input[type="button"]{
background: #e6e6e6 !important;
border: 1px solid #9e9e9e !important;
border-radius: 6px !important;
padding: 4px 14px !important;
font-size: 11px !important;
cursor: pointer !important;
}
/* "Go to Login Page" link centered under buttons */
body.pp_lostPassword .pkp_structure_content a[href*="/login"],
body.pp_lostPassword .pkp_structure_content a[href*="login"]{
display: block !important;
text-align: center !important;
margin-top: 16px !important;
color: #0000ee !important;
font-size: 11px !important;
}
/* ============================
LOST PASSWORD - Force EditorialManager-like layout (page-only, stronger)
Notes: Text changes below are VISUAL via CSS only.
============================ */
/* Center container */
body.pp_lostPassword .pkp_structure_content,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content{
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
}
/* Gray outer box */
body.pp_lostPassword .pkp_structure_content fieldset,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content fieldset{
border: 1px solid #cfcfcf !important;
background: #efefef !important;
padding: 26px 26px 18px 26px !important;
max-width: 720px !important;
margin: 0 auto !important;
box-shadow: none !important;
}
/* Legend strip */
body.pp_lostPassword .pkp_structure_content legend,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content legend{
background: #f4f4f4 !important;
border: 1px solid #cfcfcf !important;
padding: 2px 10px !important;
font-weight: 700 !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
/* "Insert Special Character" link appearance (if present) */
body.pp_lostPassword .pkp_structure_content a[href*="insertSpecialCharacter"],
body.pp_lostPassword .pkp_structure_content a[href*="special"],
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content a[href*="insertSpecialCharacter"],
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content a[href*="special"]{
display: block !important;
text-align: center !important;
margin: 0 0 10px 0 !important;
font-size: 11px !important;
text-decoration: none !important;
}
/* Form row alignment */
body.pp_lostPassword .pkp_form .form-group,
body.pkp_page_login.pkp_op_lostPassword .pkp_form .form-group{
display: flex !important;
align-items: center !important;
gap: 12px !important;
justify-content: center !important;
}
/* Label style (red E-mail*) */
body.pp_lostPassword .pkp_form label,
body.pkp_page_login.pkp_op_lostPassword .pkp_form label{
color: #b10000 !important;
font-weight: 700 !important;
min-width: 90px !important;
text-align: right !important;
}
/* Input width like EM */
body.pp_lostPassword .pkp_form input[type="text"],
body.pp_lostPassword .pkp_form input[type="email"],
body.pkp_page_login.pkp_op_lostPassword .pkp_form input[type="text"],
body.pkp_page_login.pkp_op_lostPassword .pkp_form input[type="email"]{
width: 320px !important;
max-width: 320px !important;
}
/* Actions centered */
body.pp_lostPassword .pkp_form .buttons,
body.pp_lostPassword .pkp_form .formButtons,
body.pp_lostPassword .pkp_form .pkp_form_actions,
body.pkp_page_login.pkp_op_lostPassword .pkp_form .buttons,
body.pkp_page_login.pkp_op_lostPassword .pkp_form .formButtons,
body.pkp_page_login.pkp_op_lostPassword .pkp_form .pkp_form_actions{
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
margin-top: 12px !important;
}
/* Make primary submit look like EM button */
body.pp_lostPassword .pkp_form button[type="submit"],
body.pp_lostPassword .pkp_form input[type="submit"],
body.pkp_page_login.pkp_op_lostPassword .pkp_form button[type="submit"],
body.pkp_page_login.pkp_op_lostPassword .pkp_form input[type="submit"]{
padding: 4px 14px !important;
border: 1px solid #a9a9a9 !important;
border-radius: 4px !important;
background: linear-gradient(#ffffff, #dcdcdc) !important;
color: #003a8c !important;
font-size: 0 !important; /* hide original text visually */
line-height: 1 !important;
}
/* VISUAL rename: "Reset Password" -> "Send Login Details" */
body.pp_lostPassword .pkp_form button[type="submit"]::after,
body.pkp_page_login.pkp_op_lostPassword .pkp_form button[type="submit"]::after{
content: "Send Login Details" !important;
font-size: 11px !important;
}
body.pp_lostPassword .pkp_form input[type="submit"]{
color: transparent !important; /* for input buttons */
text-shadow: none !important;
}
body.pp_lostPassword .pkp_form input[type="submit"]::after,
body.pkp_page_login.pkp_op_lostPassword .pkp_form input[type="submit"]::after{
content: "Send Login Details" !important;
font-size: 11px !important;
color: #003a8c !important;
position: relative !important;
display: inline-block !important;
transform: translateY(-1px) !important;
}
/* Turn the "Go to Login Page" / register-ish link into a Cancel button (visual) */
body.pp_lostPassword .pkp_structure_content a[href*="/login"],
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content a[href*="/login"]{
display: inline-block !important;
padding: 4px 14px !important;
border: 1px solid #a9a9a9 !important;
border-radius: 4px !important;
background: linear-gradient(#ffffff, #dcdcdc) !important;
color: transparent !important; /* hide original link text */
text-decoration: none !important;
font-size: 0 !important;
}
/* VISUAL rename link text to Cancel */
body.pp_lostPassword .pkp_structure_content a[href*="/login"]::after,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content a[href*="/login"]::after{
content: "Cancel" !important;
font-size: 11px !important;
color: #003a8c !important;
}
/* If there are multiple login links (top nav), only style the one inside the fieldset */
body.pp_lostPassword .pkp_structure_content fieldset a[href*="/login"],
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content fieldset a[href*="/login"]{
color: transparent !important;
font-size: 0 !important;
}
body.pp_lostPassword .pkp_structure_content fieldset a[href*="/login"]::after,
body.pkp_page_login.pkp_op_lostPassword .pkp_structure_content fieldset a[href*="/login"]::after{
content: "Cancel" !important;
font-size: 11px !important;
color: #003a8c !important;
}
/* =========================
LOST PASSWORD (ONLY) - Editorial Manager look
Robust selectors: any body class containing 'lostPassword'
========================= */
body[class*="lostPassword"] h1.page_title,
body[class*="lostPassword"] h1{
display:none !important;
}
/* Center the content area */
body[class*="lostPassword"] .pkp_structure_main,
body[class*="lostPassword"] .pkp_structure_content{
display:flex !important;
justify-content:center !important;
}
/* The main form wrapper */
body[class*="lostPassword"] form,
body[class*="lostPassword"] .pkp_structure_content form{
background:#f2f2f2 !important;
border:1px solid #c7c7c7 !important;
padding:28px 28px 22px !important;
width:min(760px, 92vw) !important;
box-sizing:border-box !important;
position:relative !important;
margin:28px auto 0 !important;
}
/* "Please Enter The Following" legend */
body[class*="lostPassword"] form::before{
content:"Please Enter The Following" !important;
position:absolute !important;
top:-12px !important;
left:18px !important;
background:#f2f2f2 !important;
padding:0 8px !important;
border:1px solid #c7c7c7 !important;
font-weight:700 !important;
font-size:13px !important;
line-height:20px !important;
}
/* "Insert Special Character" (visual only) */
body[class*="lostPassword"] form::after{
content:"Insert Special Character" !important;
position:absolute !important;
top:-22px !important;
right:18px !important;
font-size:12px !important;
color:#0000ee !important;
text-decoration:underline !important;
font-weight:400 !important;
}
/* Hide the long instruction paragraph if present */
body[class*="lostPassword"] form p{
display:none !important;
}
/* Make the label + input align like EM */
body[class*="lostPassword"] form .fields,
body[class*="lostPassword"] form .pkp_formRow,
body[class*="lostPassword"] form .form-group,
body[class*="lostPassword"] form .cmp_form_field{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:14px !important;
margin:8px 0 14px !important;
}
/* Force label to look like 'E-mail*' in red */
body[class*="lostPassword"] form label{
margin:0 !important;
white-space:nowrap !important;
font-size:0 !important;
}
body[class*="lostPassword"] form label::after{
content:"E-mail*" !important;
font-size:13px !important;
font-weight:700 !important;
color:#c00000 !important;
}
/* Input size */
body[class*="lostPassword"] form input[type="text"],
body[class*="lostPassword"] form input[type="email"],
body[class*="lostPassword"] form input[type="password"]{
width:220px !important;
height:22px !important;
padding:2px 6px !important;
box-sizing:border-box !important;
border:1px solid #9a9a9a !important;
border-radius:0 !important;
}
/* Buttons row */
body[class*="lostPassword"] form .buttons,
body[class*="lostPassword"] form .pkp_form_buttons,
body[class*="lostPassword"] form .formButtons,
body[class*="lostPassword"] form .cmp_form_buttons{
display:flex !important;
justify-content:center !important;
gap:14px !important;
margin-top:8px !important;
}
/* Submit button text -> "Send Login Details" (works for