User:Layer-09/Sandbox/Command.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Main container for the code block */
.mw-command-block {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin: 1em 0;
    padding: 0.75em;
    padding-left: 0; /* Padding will be handled by the inner container */
    position: relative;
    font-family: monospace, "Courier New";
    font-size: 0.9em;
    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;
    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 */
}

/* The generated prefix area (for line numbers and/or '$') */
.mw-code-area code::before {
    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;
    content: ''; /* Default: no prefix */
}

/* --- 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 {
    position: absolute;
    top: 6px;
    right: 8px;
    color: #007bff;
    cursor: pointer;
    font-size: 0.85em;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 6px;
    z-index: 1;
}

.mw-copy-button:hover {
    color: #0056b3;
    text-decoration: underline;
}

.mw-copy-source {
    display: none;
}