202 lines
4.2 KiB
CSS
202 lines
4.2 KiB
CSS
/**
|
|
* GitHub Code Viewer Block Frontend Styles
|
|
*/
|
|
|
|
/* Block Wrapper */
|
|
.mcb-block-wrapper {
|
|
margin: 30px auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Alignment Support */
|
|
.mcb-block-wrapper.alignleft {
|
|
float: left;
|
|
margin-right: 20px;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.mcb-block-wrapper.alignright {
|
|
float: right;
|
|
margin-left: 20px;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.mcb-block-wrapper.aligncenter {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.mcb-block-wrapper.aligncenter .maple-code-blocks {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.mcb-block-wrapper.alignwide {
|
|
max-width: 1280px;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.mcb-block-wrapper.alignfull {
|
|
max-width: none;
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
}
|
|
|
|
/* Ensure the viewer respects container width */
|
|
.mcb-block-wrapper .maple-code-blocks {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Custom Classes Support */
|
|
.mcb-block-wrapper.is-style-minimal {
|
|
box-shadow: none;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.mcb-block-wrapper.is-style-rounded .maple-code-blocks {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mcb-block-wrapper.is-style-shadowed .maple-code-blocks {
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.mcb-block-wrapper.alignleft,
|
|
.mcb-block-wrapper.alignright {
|
|
float: none;
|
|
max-width: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mcb-block-wrapper.alignfull {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Loading State for Frontend */
|
|
.mcb-block-wrapper.is-loading {
|
|
min-height: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mcb-block-wrapper.is-loading::after {
|
|
content: 'Loading repository...';
|
|
color: #666;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
/* Error State */
|
|
.mcb-block-wrapper .mcb-error {
|
|
padding: 20px;
|
|
background: #fee;
|
|
border: 1px solid #fcc;
|
|
border-radius: 4px;
|
|
color: #c00;
|
|
text-align: center;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
/* Integration with theme styles */
|
|
.entry-content .mcb-block-wrapper {
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.entry-content .mcb-block-wrapper:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.entry-content .mcb-block-wrapper:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.mcb-block-wrapper .mcb-controls,
|
|
.mcb-block-wrapper .mcb-status-bar {
|
|
display: none;
|
|
}
|
|
|
|
.mcb-block-wrapper .maple-code-blocks {
|
|
box-shadow: none;
|
|
border: 1px solid #ccc;
|
|
}
|
|
}
|
|
|
|
/* Accessibility Improvements */
|
|
.mcb-block-wrapper .maple-code-blocks:focus-within {
|
|
outline: 2px solid #007cba;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* High Contrast Mode Support */
|
|
@media (prefers-contrast: high) {
|
|
.mcb-block-wrapper .maple-code-blocks {
|
|
border: 2px solid currentColor;
|
|
}
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mcb-block-wrapper .maple-code-blocks * {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Dark Mode Support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.mcb-block-wrapper.is-loading {
|
|
background: #2a2a2a;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.mcb-block-wrapper.is-loading::after {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
/* Nested Block Support */
|
|
.wp-block-group .mcb-block-wrapper,
|
|
.wp-block-column .mcb-block-wrapper {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
/* Pattern Library Support */
|
|
.mcb-block-wrapper[data-pattern="documentation"] .maple-code-blocks {
|
|
height: 400px !important;
|
|
}
|
|
|
|
.mcb-block-wrapper[data-pattern="showcase"] .maple-code-blocks {
|
|
height: 600px !important;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.mcb-block-wrapper[data-pattern="inline"] .maple-code-blocks {
|
|
height: 300px !important;
|
|
display: inline-block;
|
|
width: auto;
|
|
min-width: 500px;
|
|
}
|