First Commit
This commit is contained in:
@@ -0,0 +1,267 @@
|
||||
/**
|
||||
* WP to HTML Admin Styles
|
||||
*/
|
||||
|
||||
.wp-to-html-admin-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.wp-to-html-main {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wp-to-html-sidebar {
|
||||
width: 350px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wp-to-html-card {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-to-html-card h3 {
|
||||
margin-top: 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.wp-to-html-bulk-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wp-to-html-bulk-actions .button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-to-html-progress-bar {
|
||||
height: 20px;
|
||||
background: #f0f0f1;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.wp-to-html-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #2271b1, #135e96);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.wp-to-html-progress-text {
|
||||
text-align: center;
|
||||
color: #50575e;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-to-html-stats {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.wp-to-html-stats th,
|
||||
.wp-to-html-stats td {
|
||||
padding: 8px 0;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f0f0f1;
|
||||
}
|
||||
|
||||
.wp-to-html-stats th {
|
||||
color: #50575e;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.wp-to-html-stats td {
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wp-to-html-stats code {
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.wp-to-html-code {
|
||||
background: #f6f7f7;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
}
|
||||
|
||||
#wp-to-html-results {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: #f6f7f7;
|
||||
border-radius: 4px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-summary {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-stat .number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-stat.converted .number {
|
||||
color: #00a32a;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-stat.skipped .number {
|
||||
color: #dba617;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-stat.errors .number {
|
||||
color: #d63638;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-details {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-item {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-item .dashicons {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-item.converted .dashicons {
|
||||
color: #00a32a;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-item.skipped .dashicons {
|
||||
color: #dba617;
|
||||
}
|
||||
|
||||
#wp-to-html-results .result-item.error .dashicons {
|
||||
color: #d63638;
|
||||
}
|
||||
|
||||
/* Meta box styles */
|
||||
.wp-to-html-meta-box hr {
|
||||
margin: 12px 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wp-to-html-meta-box .description {
|
||||
color: #646970;
|
||||
font-style: italic;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.wp-to-html-status {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media screen and (max-width: 1200px) {
|
||||
.wp-to-html-admin-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wp-to-html-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Regeneration Status Card */
|
||||
#wp-to-html-live-status {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
#wp-to-html-live-status .dashicons {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#wp-to-html-live-status .status-text {
|
||||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#wp-to-html-live-status .status-source {
|
||||
color: #646970;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#wp-to-html-live-status .status-progress,
|
||||
#wp-to-html-live-status .status-details {
|
||||
margin-top: 8px;
|
||||
padding-left: 28px;
|
||||
color: #646970;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.status-running .dashicons {
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.status-complete .dashicons {
|
||||
color: #00a32a;
|
||||
}
|
||||
|
||||
.status-idle .dashicons {
|
||||
color: #72777c;
|
||||
}
|
||||
|
||||
/* Spinning animation */
|
||||
.dashicons.spin {
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user