639 lines
12 KiB
CSS
639 lines
12 KiB
CSS
/**
|
|
* PC Changelog Manager - Admin Styles
|
|
*
|
|
* @package PCChangelogManager
|
|
*/
|
|
|
|
/* CSS Variables for WordPress Admin Color Scheme Compatibility */
|
|
:root {
|
|
--pc-clm-admin-primary: #2271b1;
|
|
--pc-clm-admin-primary-hover: #135e96;
|
|
--pc-clm-admin-secondary: #f6f7f7;
|
|
--pc-clm-admin-text: #3c434a;
|
|
--pc-clm-admin-text-muted: #646970;
|
|
--pc-clm-admin-border: #dcdcde;
|
|
--pc-clm-admin-bg: #ffffff;
|
|
--pc-clm-admin-bg-alt: #f0f0f1;
|
|
--pc-clm-success: #00a32a;
|
|
--pc-clm-warning: #dba617;
|
|
--pc-clm-error: #dc3232;
|
|
--pc-clm-info: #72aee6;
|
|
}
|
|
|
|
/* Dark Mode Support */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--pc-clm-admin-primary: #2271b1;
|
|
--pc-clm-admin-secondary: #1d2327;
|
|
--pc-clm-admin-text: #f0f0f1;
|
|
--pc-clm-admin-text-muted: #a7aaad;
|
|
--pc-clm-admin-border: #3c434a;
|
|
--pc-clm-admin-bg: #1d2327;
|
|
--pc-clm-admin-bg-alt: #2c3338;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Meta Box Styles
|
|
======================================== */
|
|
|
|
/* Entry Details Meta Box */
|
|
#pc_clm_entry_details {
|
|
background: var(--pc-clm-admin-bg);
|
|
}
|
|
|
|
#pc_clm_entry_details .inside {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.pc-clm-meta-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.pc-clm-field-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pc-clm-field-group label {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--pc-clm-admin-text);
|
|
margin: 0;
|
|
}
|
|
|
|
.pc-clm-field-group input[type="text"],
|
|
.pc-clm-field-group input[type="date"],
|
|
.pc-clm-field-group select {
|
|
max-width: 400px;
|
|
width: 100%;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
border: 1px solid var(--pc-clm-admin-border);
|
|
border-radius: 4px;
|
|
background-color: var(--pc-clm-admin-bg);
|
|
color: var(--pc-clm-admin-text);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.pc-clm-field-group input[type="text"]:focus,
|
|
.pc-clm-field-group input[type="date"]:focus,
|
|
.pc-clm-field-group select:focus {
|
|
border-color: var(--pc-clm-admin-primary);
|
|
box-shadow: 0 0 0 1px var(--pc-clm-admin-primary);
|
|
outline: none;
|
|
}
|
|
|
|
.pc-clm-field-group .description {
|
|
font-size: 12px;
|
|
color: var(--pc-clm-admin-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Preview Meta Box */
|
|
#pc_clm_preview .inside {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.pc-clm-preview-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.pc-clm-preview-box p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--pc-clm-admin-text-muted);
|
|
}
|
|
|
|
.pc-clm-preview-box .button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* ========================================
|
|
Category Badges
|
|
======================================== */
|
|
|
|
.pc-clm-category-badge {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-radius: 12px;
|
|
background-color: var(--pc-clm-admin-bg-alt);
|
|
color: var(--pc-clm-admin-text);
|
|
}
|
|
|
|
.pc-clm-category-new-features {
|
|
background-color: #e3fcef;
|
|
color: #006d26;
|
|
}
|
|
|
|
.pc-clm-category-bug-fixes {
|
|
background-color: #fbe4e4;
|
|
color: #c01e1e;
|
|
}
|
|
|
|
.pc-clm-category-improvements {
|
|
background-color: #e3f2fd;
|
|
color: #0d4fdd;
|
|
}
|
|
|
|
.pc-clm-category-security {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.pc-clm-category-deprecated {
|
|
background-color: #f5f5f5;
|
|
color: #616161;
|
|
}
|
|
|
|
.pc-clm-category-removed {
|
|
background-color: #e8e8e8;
|
|
color: #424242;
|
|
}
|
|
|
|
/* Dark mode category badges */
|
|
@media (prefers-color-scheme: dark) {
|
|
.pc-clm-category-new-features {
|
|
background-color: #004d26;
|
|
color: #a7ebc3;
|
|
}
|
|
|
|
.pc-clm-category-bug-fixes {
|
|
background-color: #4d1a1a;
|
|
color: #f5b5b5;
|
|
}
|
|
|
|
.pc-clm-category-improvements {
|
|
background-color: #1a3659;
|
|
color: #a5c8ff;
|
|
}
|
|
|
|
.pc-clm-category-security {
|
|
background-color: #4d4200;
|
|
color: #ffecb3;
|
|
}
|
|
|
|
.pc-clm-category-deprecated {
|
|
background-color: #424242;
|
|
color: #bdbdbd;
|
|
}
|
|
|
|
.pc-clm-category-removed {
|
|
background-color: #616161;
|
|
color: #e0e0e0;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Admin List Table Styles
|
|
======================================== */
|
|
|
|
.fixed .column-version {
|
|
width: 100px;
|
|
}
|
|
|
|
.fixed .column-release_date {
|
|
width: 120px;
|
|
}
|
|
|
|
.fixed .column-category {
|
|
width: 120px;
|
|
}
|
|
|
|
/* Version column styling */
|
|
.column-version {
|
|
font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ========================================
|
|
Post Editor Styles
|
|
======================================== */
|
|
|
|
/* Editor title styling for changelog entries */
|
|
#title-prompt-text {
|
|
color: var(--pc-clm-admin-text-muted);
|
|
}
|
|
|
|
#post-body-content {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ========================================
|
|
Notices and Messages
|
|
======================================== */
|
|
|
|
.pc-clm-notice {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
margin: 16px 0;
|
|
border-radius: 4px;
|
|
background-color: var(--pc-clm-admin-bg-alt);
|
|
border-left: 4px solid var(--pc-clm-admin-info);
|
|
}
|
|
|
|
.pc-clm-notice.success {
|
|
border-left-color: var(--pc-clm-success);
|
|
}
|
|
|
|
.pc-clm-notice.warning {
|
|
border-left-color: var(--pc-clm-warning);
|
|
}
|
|
|
|
.pc-clm-notice.error {
|
|
border-left-color: var(--pc-clm-error);
|
|
}
|
|
|
|
.pc-clm-notice-icon {
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.pc-clm-notice-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.pc-clm-notice-title {
|
|
font-weight: 600;
|
|
margin: 0 0 4px 0;
|
|
font-size: 14px;
|
|
color: var(--pc-clm-admin-text);
|
|
}
|
|
|
|
.pc-clm-notice-message {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--pc-clm-admin-text-muted);
|
|
}
|
|
|
|
/* ========================================
|
|
Responsive Design
|
|
======================================== */
|
|
|
|
@media screen and (max-width: 782px) {
|
|
/* Stack meta fields on mobile */
|
|
.pc-clm-meta-fields {
|
|
gap: 16px;
|
|
}
|
|
|
|
.pc-clm-field-group input[type="text"],
|
|
.pc-clm-field-group input[type="date"],
|
|
.pc-clm-field-group select {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Adjust column widths on mobile */
|
|
.fixed .column-version,
|
|
.fixed .column-release_date,
|
|
.fixed .column-category {
|
|
width: auto;
|
|
}
|
|
|
|
/* Hide some columns on mobile */
|
|
.column-release_date,
|
|
.column-category {
|
|
display: none;
|
|
}
|
|
|
|
/* Category badges wrap properly */
|
|
.pc-clm-category-badge {
|
|
display: inline-flex;
|
|
margin: 2px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
#pc_clm_entry_details .inside {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.pc-clm-preview-box {
|
|
gap: 10px;
|
|
}
|
|
|
|
.pc-clm-preview-box .button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Print Styles
|
|
======================================== */
|
|
|
|
@media print {
|
|
.pc-clm-meta-fields {
|
|
display: block;
|
|
}
|
|
|
|
.pc-clm-field-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.pc-clm-field-group input,
|
|
.pc-clm-field-group select {
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
.pc-clm-preview-box {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Accessibility Enhancements
|
|
======================================== */
|
|
|
|
.pc-clm-field-group input:focus,
|
|
.pc-clm-field-group select:focus {
|
|
outline: 2px solid var(--pc-clm-admin-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.pc-clm-field-group input,
|
|
.pc-clm-field-group select {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.pc-clm-category-badge {
|
|
border: 1px solid currentColor;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pc-clm-field-group input,
|
|
.pc-clm-field-group select,
|
|
.pc-clm-category-badge {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Tooltip Styles for Help Text
|
|
======================================== */
|
|
|
|
.pc-clm-tooltip {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--pc-clm-admin-text-muted);
|
|
background-color: var(--pc-clm-admin-bg-alt);
|
|
border-radius: 50%;
|
|
cursor: help;
|
|
}
|
|
|
|
.pc-clm-tooltip:hover::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 8px 12px;
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
color: #fff;
|
|
background-color: #1d2327;
|
|
border-radius: 4px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.pc-clm-tooltip::after {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ========================================
|
|
Animation for Loading States
|
|
======================================== */
|
|
|
|
@keyframes pc-clm-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pc-clm-loading {
|
|
animation: pc-clm-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
/* ========================================
|
|
Empty State Styling
|
|
======================================== */
|
|
|
|
.pc-clm-empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--pc-clm-admin-text-muted);
|
|
}
|
|
|
|
.pc-clm-empty-state-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.pc-clm-empty-state-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 0 0 8px 0;
|
|
color: var(--pc-clm-admin-text);
|
|
}
|
|
|
|
.pc-clm-empty-state-description {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ========================================
|
|
Admin View Changelog Page
|
|
======================================== */
|
|
|
|
.pc-clm-admin-view-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pc-clm-admin-entry {
|
|
padding: 20px;
|
|
background: #ffffff;
|
|
border: 1px solid #dcdcde;
|
|
border-radius: 4px;
|
|
transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
|
|
.pc-clm-admin-entry:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
border-color: #2271b1;
|
|
}
|
|
|
|
.pc-clm-admin-entry-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.pc-clm-admin-version {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #2271b1;
|
|
background-color: #f0f0f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pc-clm-admin-date {
|
|
font-size: 13px;
|
|
color: #646970;
|
|
}
|
|
|
|
.pc-clm-admin-entry-title {
|
|
margin: 0 0 12px 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.pc-clm-admin-entry-title a {
|
|
color: #1d2327;
|
|
text-decoration: none;
|
|
transition: color 0.15s ease-in-out;
|
|
}
|
|
|
|
.pc-clm-admin-entry-title a:hover {
|
|
color: #2271b1;
|
|
}
|
|
|
|
.pc-clm-admin-entry-content {
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #3c434a;
|
|
}
|
|
|
|
.pc-clm-admin-entry-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #dcdcde;
|
|
}
|
|
|
|
/* ========================================
|
|
Admin Add New Page
|
|
======================================== */
|
|
|
|
.pc-clm-admin-add-form {
|
|
margin-top: 20px;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.pc-clm-admin-add-form .form-table th {
|
|
width: 200px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pc-clm-admin-add-form .required {
|
|
color: var(--pc-clm-error);
|
|
}
|
|
|
|
/* ========================================
|
|
Admin Empty State
|
|
======================================== */
|
|
|
|
.pc-clm-admin-empty {
|
|
text-align: center;
|
|
padding: 80px 20px;
|
|
background: var(--pc-clm-admin-bg-alt);
|
|
border: 2px dashed var(--pc-clm-admin-border);
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pc-clm-admin-empty p {
|
|
margin: 0 0 20px 0;
|
|
font-size: 16px;
|
|
color: var(--pc-clm-admin-text-muted);
|
|
}
|
|
|
|
/* ========================================
|
|
Dark Mode for Admin Pages
|
|
======================================== */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.pc-clm-admin-entry {
|
|
background: #1d2327;
|
|
border-color: #3c434a;
|
|
}
|
|
|
|
.pc-clm-admin-entry:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
border-color: #2271b1;
|
|
}
|
|
|
|
.pc-clm-admin-version {
|
|
background-color: #2c3338;
|
|
color: #72aee6;
|
|
}
|
|
|
|
.pc-clm-admin-entry-title a {
|
|
color: #f0f0f1;
|
|
}
|
|
|
|
.pc-clm-admin-entry-title a:hover {
|
|
color: #72aee6;
|
|
}
|
|
|
|
.pc-clm-admin-entry-content {
|
|
color: #a7aaad;
|
|
}
|
|
|
|
.pc-clm-admin-entry-actions {
|
|
border-top-color: #3c434a;
|
|
}
|
|
|
|
.pc-clm-admin-empty {
|
|
background-color: #1d2327;
|
|
border-color: #3c434a;
|
|
}
|
|
|
|
.pc-clm-admin-empty p {
|
|
color: #a7aaad;
|
|
}
|
|
}
|