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 1em;
    position: relative;
    font-family: monospace, "Courier New";
    font-size: 0.9em;
    line-height: 1.5;
}

/* Container for all the lines of code */
.mw-code-area {
    overflow-x: auto;
}

/* A single line, using flexbox for alignment */
.mw-code-line {
    display: flex;
    align-items: baseline; /* Aligns prefix and code nicely */
}

/* The non-copyable prefix (line number and/or $) */
.mw-code-prefix {
    flex-shrink: 0; /* Prevents the prefix from shrinking */
    box-sizing: border-box;
    width: 4.5em; /* Give it a fixed width for alignment */
    padding-right: 1em;
    text-align: right;
    color: #6c757d;
    user-select: none; /* Make it non-selectable and non-copyable */
    white-space: pre; /* Preserve spacing */
}

/* The actual code text */
.mw-code-text {
    white-space: pre-wrap; /* Preserve whitespace and wrap long lines */
    word-break: break-all; /* Break long words that would overflow */
}

/* The 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;
}