mirror of
https://gh.wpcy.net/https://github.com/soulsites/wp-git-installer.git
synced 2026-05-26 18:08:07 +08:00
701 lines
17 KiB
CSS
701 lines
17 KiB
CSS
/**
|
|
* GitHub Plugin Installer - Admin Styles
|
|
* Material Design 3 - Light Theme with Pastel Blue Accents
|
|
*/
|
|
|
|
:root {
|
|
/* Cyan Blue Color Palette */
|
|
--primary-blue: #4ABBD5;
|
|
--primary-blue-light: #7DD1E3;
|
|
--primary-blue-dark: #2A9FB8;
|
|
--primary-blue-hover: #3BAEC7;
|
|
|
|
/* Light Surface Colors */
|
|
--surface-bg: #f0f2f5;
|
|
--surface-card: #ffffff;
|
|
--surface-elevation: #f7f8fa;
|
|
|
|
/* Light Text Colors */
|
|
--text-primary: rgba(0, 0, 0, 0.8);
|
|
--text-secondary: rgba(0, 0, 0, 0.7);
|
|
--text-tertiary: rgba(0, 0, 0, 0.5);
|
|
--text-on-primary: #ffffff;
|
|
|
|
/* Semantic Colors */
|
|
--success-green: #81c995;
|
|
--error-red: #e89393;
|
|
--warning-amber: #f5c27a;
|
|
|
|
/* Spacing Scale */
|
|
--spacing-xs: 8px;
|
|
--spacing-sm: 16px;
|
|
--spacing-md: 24px;
|
|
--spacing-lg: 32px;
|
|
--spacing-xl: 48px;
|
|
--spacing-2xl: 64px;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 12px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 24px;
|
|
|
|
/* Typography */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--letter-spacing-tight: -0.02em;
|
|
--letter-spacing-normal: 0;
|
|
--letter-spacing-wide: 0.02em;
|
|
--letter-spacing-wider: 0.05em;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ========================================
|
|
Global Styles
|
|
======================================== */
|
|
|
|
.plugins_page_github-plugin-installer {
|
|
background: var(--surface-bg) !important;
|
|
color: var(--text-primary) !important;
|
|
min-height: 100vh;
|
|
font-family: var(--font-sans) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Container & Cards
|
|
======================================== */
|
|
|
|
.github-installer-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.github-card {
|
|
background: var(--surface-card) !important;
|
|
border: none !important;
|
|
border-radius: var(--radius-lg) !important;
|
|
padding: var(--spacing-2xl) !important;
|
|
margin-bottom: var(--spacing-lg) !important;
|
|
transition: transform var(--transition-normal) !important;
|
|
}
|
|
|
|
.github-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.github-card h2 {
|
|
margin: 0 0 var(--spacing-lg) 0 !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
color: var(--text-primary) !important;
|
|
font-size: 28px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: var(--letter-spacing-tight) !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Form Elements
|
|
======================================== */
|
|
|
|
.form-section {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.form-section label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: var(--spacing-xs);
|
|
color: var(--text-primary);
|
|
font-size: 15px;
|
|
letter-spacing: var(--letter-spacing-wide);
|
|
}
|
|
|
|
.form-section input[type="text"],
|
|
.form-section input[type="password"],
|
|
.form-section select {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 15px;
|
|
transition: all var(--transition-normal);
|
|
background: var(--surface-elevation) !important;
|
|
color: var(--text-primary) !important;
|
|
font-family: var(--font-sans);
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
.form-section input[type="text"]:focus,
|
|
.form-section input[type="password"]:focus,
|
|
.form-section select:focus,
|
|
.form-section input[type="text"]:hover,
|
|
.form-section input[type="password"]:hover,
|
|
.form-section select:hover {
|
|
outline: none;
|
|
background: var(--primary-blue-light) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.form-section .description {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
margin-top: var(--spacing-xs);
|
|
line-height: 1.6;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
/* ========================================
|
|
Toggle Switch (Checkbox)
|
|
======================================== */
|
|
|
|
.checkbox-label {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: var(--spacing-sm) !important;
|
|
font-weight: 500 !important;
|
|
cursor: pointer !important;
|
|
padding: var(--spacing-sm) !important;
|
|
border-radius: var(--radius-sm) !important;
|
|
transition: background-color var(--transition-fast) !important;
|
|
letter-spacing: var(--letter-spacing-wide) !important;
|
|
}
|
|
|
|
.checkbox-label:hover {
|
|
background-color: var(--surface-elevation) !important;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] {
|
|
position: absolute !important;
|
|
opacity: 0 !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
.checkbox-label {
|
|
position: relative !important;
|
|
padding-left: 70px !important;
|
|
}
|
|
|
|
.checkbox-label::before {
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
left: var(--spacing-xs) !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
width: 54px !important;
|
|
height: 28px !important;
|
|
background: var(--surface-elevation) !important;
|
|
border: none !important;
|
|
border-radius: 28px !important;
|
|
transition: all var(--transition-normal) !important;
|
|
}
|
|
|
|
.checkbox-label::after {
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
left: 12px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
width: 22px !important;
|
|
height: 22px !important;
|
|
background: var(--text-tertiary) !important;
|
|
border-radius: 50% !important;
|
|
transition: all var(--transition-normal) !important;
|
|
}
|
|
|
|
.checkbox-label:has(input[type="checkbox"]:checked)::before {
|
|
background: var(--primary-blue) !important;
|
|
}
|
|
|
|
.checkbox-label:has(input[type="checkbox"]:checked)::after {
|
|
transform: translateY(-50%) translateX(26px) !important;
|
|
background: var(--text-on-primary) !important;
|
|
}
|
|
|
|
.checkbox-label:hover::before {
|
|
background: var(--primary-blue-light) !important;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"]:focus-visible + *,
|
|
.checkbox-label:has(input[type="checkbox"]:focus-visible)::before {
|
|
outline: 2px solid var(--primary-blue);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ========================================
|
|
Buttons
|
|
======================================== */
|
|
|
|
.plugins_page_github-plugin-installer .button {
|
|
border-radius: var(--radius-sm) !important;
|
|
font-weight: 500 !important;
|
|
transition: all var(--transition-normal) !important;
|
|
border: none !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
gap: var(--spacing-xs) !important;
|
|
cursor: pointer !important;
|
|
padding: 12px var(--spacing-lg) !important;
|
|
letter-spacing: var(--letter-spacing-wide) !important;
|
|
font-size: 15px !important;
|
|
height: 45px !important;
|
|
max-height: 45px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer .button-primary {
|
|
background: var(--primary-blue) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer .button-primary:hover {
|
|
background: var(--primary-blue-hover) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer .button-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer .button-small {
|
|
padding: 8px var(--spacing-md) !important;
|
|
font-size: 14px !important;
|
|
height: 38px !important;
|
|
max-height: 38px !important;
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer .button-large {
|
|
padding: 12px var(--spacing-xl) !important;
|
|
font-size: 15px !important;
|
|
height: 45px !important;
|
|
max-height: 45px !important;
|
|
}
|
|
|
|
.github-edit-btn {
|
|
background: var(--primary-blue-light) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.github-edit-btn:hover {
|
|
background: var(--primary-blue) !important;
|
|
color: var(--text-on-primary) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.github-sync-btn {
|
|
background: var(--primary-blue) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
.github-sync-btn:hover {
|
|
background: var(--primary-blue-dark) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.github-sync-btn:disabled {
|
|
opacity: 0.5 !important;
|
|
cursor: not-allowed !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.github-delete-btn {
|
|
background: var(--surface-elevation) !important;
|
|
color: var(--error-red) !important;
|
|
}
|
|
|
|
.github-delete-btn:hover {
|
|
background: var(--error-red) !important;
|
|
color: var(--text-on-primary) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.button-group {
|
|
margin-top: var(--spacing-lg);
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ========================================
|
|
Projects Table
|
|
======================================== */
|
|
|
|
.projects-table {
|
|
margin-top: var(--spacing-lg) !important;
|
|
border-radius: var(--radius-md) !important;
|
|
overflow: hidden !important;
|
|
border: none !important;
|
|
background: var(--surface-card) !important;
|
|
}
|
|
|
|
.projects-table thead {
|
|
background: var(--primary-blue) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
.projects-table thead th {
|
|
padding: var(--spacing-md) var(--spacing-sm) !important;
|
|
font-weight: 600 !important;
|
|
text-align: left !important;
|
|
border: none !important;
|
|
color: var(--text-on-primary) !important;
|
|
letter-spacing: var(--letter-spacing-wider) !important;
|
|
text-transform: uppercase !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.projects-table tbody tr {
|
|
transition: all var(--transition-normal) !important;
|
|
border-bottom: 1px solid var(--surface-elevation) !important;
|
|
background: var(--surface-card) !important;
|
|
}
|
|
|
|
.projects-table tbody tr:hover {
|
|
background: var(--surface-bg) !important;
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
.projects-table td {
|
|
padding: var(--spacing-md) var(--spacing-sm) !important;
|
|
vertical-align: middle !important;
|
|
color: var(--text-primary) !important;
|
|
letter-spacing: var(--letter-spacing-normal) !important;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.projects-table td code {
|
|
background: var(--surface-elevation) !important;
|
|
padding: 6px var(--spacing-sm) !important;
|
|
border-radius: var(--spacing-xs) !important;
|
|
font-size: 13px !important;
|
|
color: var(--text-secondary) !important;
|
|
border: none !important;
|
|
letter-spacing: var(--letter-spacing-normal) !important;
|
|
text-wrap-mode: nowrap;
|
|
}
|
|
|
|
.project-actions {
|
|
white-space: nowrap !important;
|
|
display: flex !important;
|
|
gap: var(--spacing-xs) !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Status Messages
|
|
======================================== */
|
|
|
|
.github-sync-status {
|
|
font-size: 14px;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
border-radius: var(--radius-sm);
|
|
margin-top: var(--spacing-sm);
|
|
display: none;
|
|
font-weight: 500;
|
|
border: none;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
.github-sync-status.success {
|
|
background: var(--success-green);
|
|
color: var(--text-on-primary);
|
|
display: block;
|
|
}
|
|
|
|
.github-sync-status.error {
|
|
background: var(--error-red);
|
|
color: var(--text-on-primary);
|
|
display: block;
|
|
}
|
|
|
|
.github-sync-status.loading {
|
|
background: var(--primary-blue);
|
|
color: var(--text-on-primary);
|
|
display: block;
|
|
}
|
|
|
|
/* ========================================
|
|
Info Box
|
|
======================================== */
|
|
|
|
.info-box {
|
|
background: var(--surface-elevation);
|
|
border: none;
|
|
padding: var(--spacing-lg);
|
|
margin-top: var(--spacing-lg);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.info-box p {
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
line-height: 1.7;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
.info-box strong {
|
|
color: var(--primary-blue-dark);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ========================================
|
|
Loading Indicator
|
|
======================================== */
|
|
|
|
.loading-indicator {
|
|
display: none;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
/* ========================================
|
|
Modal Styles
|
|
======================================== */
|
|
|
|
.github-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.github-modal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(8px);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.github-modal-content {
|
|
position: relative;
|
|
background: var(--surface-card);
|
|
border-radius: var(--radius-xl);
|
|
max-width: 600px;
|
|
width: 90%;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
border: none;
|
|
}
|
|
|
|
.github-modal-header {
|
|
padding: var(--spacing-lg);
|
|
border-bottom: 1px solid var(--surface-elevation);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.github-modal-header h2 {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
font-size: 24px !important;
|
|
font-weight: 600 !important;
|
|
color: var(--text-primary) !important;
|
|
letter-spacing: var(--letter-spacing-tight) !important;
|
|
}
|
|
|
|
.github-modal-close {
|
|
background: var(--surface-elevation);
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--spacing-sm);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--transition-normal);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.github-modal-close:hover {
|
|
background: var(--primary-blue) !important;
|
|
color: var(--text-on-primary) !important;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.github-modal-close .dashicons {
|
|
font-size: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.github-modal-body {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.github-modal-footer {
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-lg);
|
|
border-top: 1px solid var(--surface-elevation);
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.github-modal-footer .button {
|
|
background: var(--primary-blue);
|
|
color: var(--text-on-primary);
|
|
}
|
|
|
|
.github-modal-footer .button:hover {
|
|
background: var(--primary-blue-dark) !important;
|
|
}
|
|
|
|
.github-modal-footer .button.button-secondary {
|
|
background: var(--surface-elevation) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.github-modal-footer .button.button-secondary:hover {
|
|
background: var(--primary-blue-light) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Dashicons Enhancements
|
|
======================================== */
|
|
|
|
.plugins_page_github-plugin-installer .dashicons {
|
|
transition: all var(--transition-normal);
|
|
margin-left: -5px !important;
|
|
}
|
|
|
|
.github-sync-btn .dashicons-update {
|
|
animation: rotate 2s linear infinite paused;
|
|
}
|
|
|
|
.github-sync-btn:disabled .dashicons-update,
|
|
.github-sync-btn.syncing .dashicons-update {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Typography Hierarchy
|
|
======================================== */
|
|
|
|
.plugins_page_github-plugin-installer h1 {
|
|
font-size: 36px !important;
|
|
font-weight: 700 !important;
|
|
color: var(--text-primary) !important;
|
|
letter-spacing: var(--letter-spacing-tight) !important;
|
|
margin-bottom: var(--spacing-xl) !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer p {
|
|
line-height: 1.7 !important;
|
|
letter-spacing: var(--letter-spacing-normal) !important;
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer strong {
|
|
font-weight: 600 !important;
|
|
letter-spacing: var(--letter-spacing-wide) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Responsive Design
|
|
======================================== */
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.github-installer-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.github-card {
|
|
padding: var(--spacing-lg) !important;
|
|
}
|
|
|
|
.form-section input[type="text"],
|
|
.form-section input[type="password"],
|
|
.form-section select {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.project-actions {
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.project-actions .button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.github-modal-content {
|
|
width: 95%;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.button-group .button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Accessibility
|
|
======================================== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
.plugins_page_github-plugin-installer button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible {
|
|
outline: 2px solid var(--primary-blue);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ========================================
|
|
Utilities
|
|
======================================== */
|
|
|
|
.description a {
|
|
color: var(--primary-blue-dark);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
.description a:hover {
|
|
text-decoration: underline;
|
|
}
|
