User:Layer-09/Sandbox/Command.css: Difference between revisions
Created page with ".mw-command-block { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 3px; margin: 1em 0; padding: 0.5em 0.8em; padding-right: 5em; position: relative; font-family: monospace; font-size: 0.95em; line-height: 1.5; overflow-x: auto; } .mw-command-prefix { color: #555; padding-right: 0.5em; user-select: none; display: inline-block; vertical-align: top; white-space: pre; } .mw-command-text..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Main container for the code block */ | |||
.mw-command-block { | .mw-command-block { | ||
background-color: # | background-color: #f8f9fa; | ||
border: 1px solid # | border: 1px solid #dee2e6; | ||
border-radius: | border-radius: 4px; | ||
margin: 1em 0; | margin: 1em 0; | ||
padding: 0. | padding: 0.75em; | ||
padding- | padding-left: 0; /* Padding will be handled by the inner container */ | ||
position: relative; | position: relative; | ||
font-family: monospace; | font-family: monospace, "Courier New"; | ||
font-size: 0. | font-size: 0.9em; | ||
line-height: 1.5; | line-height: 1.5; | ||
} | |||
/* Inner container that holds the lines of code */ | |||
.mw-code-area { | |||
counter-reset: line; /* Initialize a line counter */ | |||
overflow-x: auto; | overflow-x: auto; | ||
padding-left: 1em; | |||
} | |||
/* Each individual line of code */ | |||
.mw-code-area code { | |||
display: block; | |||
white-space: pre-wrap; /* Preserve whitespace but wrap long lines */ | |||
word-break: break-all; /* Break long words that would overflow */ | |||
padding-left: 4em; /* Create space on the left for prefixes */ | |||
text-indent: -4em; /* Pull the text back into the created space */ | |||
} | } | ||
.mw- | /* The generated prefix area (for line numbers and/or '$') */ | ||
.mw-code-area code::before { | |||
display: inline-block; | display: inline-block; | ||
box-sizing: border-box; | |||
width: 4em; /* Must match padding-left */ | |||
padding-right: 1em; | |||
text-align: right; | |||
color: #6c757d; /* A muted gray for the non-copyable parts */ | |||
user-select: none; /* Make prefixes non-selectable */ | |||
white-space: pre; | white-space: pre; | ||
content: ''; /* Default: no prefix */ | |||
} | } | ||
.mw- | /* --- Logic for Prefixes --- */ | ||
/* For multi-line blocks, show the line number */ | |||
.mw-code-area-multiline code::before { | |||
counter-increment: line; | |||
content: counter(line); | |||
} | |||
/* For blocks of type 'command', show the '$' prompt */ | |||
.mw-code-area-command code::before { | |||
content: '$ '; | |||
} | |||
/* For multi-line commands, combine the line number and the '$' prompt */ | |||
.mw-code-area-multiline.mw-code-area-command code::before { | |||
counter-increment: line; | |||
content: counter(line) ' $ '; | |||
} | } | ||
/* --- Copy Button --- */ | |||
.mw-copy-button { | .mw-copy-button { | ||
position: absolute; | position: absolute; | ||
top: | top: 6px; | ||
right: 8px; | right: 8px; | ||
color: #007bff; | color: #007bff; | ||
| Line 45: | Line 71: | ||
user-select: none; | user-select: none; | ||
background-color: transparent; | background-color: transparent; | ||
border: | border: 1px solid transparent; | ||
border-radius: 3px; | |||
padding: 2px 6px; | |||
z-index: 1; | z-index: 1; | ||
} | } | ||
.mw-copy-button:hover { | .mw-copy-button:hover { | ||
color: #0056b3; | |||
text-decoration: underline; | text-decoration: underline; | ||
} | |||
.mw-copy-source { | |||
display: none; | |||
} | } | ||