Official NixOS Wiki

User:Layer-09/Sandbox/Command.css: Difference between revisions

← Older edit
Layer-09 (talk | contribs)
175 edits
Layer-09 (talk | contribs)
175 edits
No edit summary
Layer-09 (talk | contribs)
175 edits
mNo edit summary
 
Line 5: Line 5:
     border-radius: 4px;
     border-radius: 4px;
     margin: 1em 0;
     margin: 1em 0;
     padding: 0.75em;
     padding: 0.75em 1em;
    padding-left: 0; /* Padding will be handled by the inner container */
     position: relative;
     position: relative;
     font-family: monospace, "Courier New";
     font-family: monospace, "Courier New";
Line 13: Line 12:
}
}


/* Inner container that holds the lines of code */
/* Container for all the lines of code */
.mw-code-area {
.mw-code-area {
    counter-reset: line; /* Initialize a line counter */
     overflow-x: auto;
     overflow-x: auto;
    padding-left: 1em;
}
}


/* Each individual line of code */
/* A single line, using flexbox for alignment */
.mw-code-area code {
.mw-code-line {
     display: block;
     display: flex;
     white-space: pre-wrap; /* Preserve whitespace but wrap long lines */
     align-items: baseline; /* Aligns prefix and code nicely */
    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 '$') */
/* The non-copyable prefix (line number and/or $) */
.mw-code-area code::before {
.mw-code-prefix {
     display: inline-block;
     flex-shrink: 0; /* Prevents the prefix from shrinking */
     box-sizing: border-box;
     box-sizing: border-box;
     width: 4em; /* Must match padding-left */
     width: 4.5em; /* Give it a fixed width for alignment */
     padding-right: 1em;
     padding-right: 1em;
     text-align: right;
     text-align: right;
     color: #6c757d; /* A muted gray for the non-copyable parts */
     color: #6c757d;
     user-select: none; /* Make prefixes non-selectable */
     user-select: none; /* Make it non-selectable and non-copyable */
     white-space: pre;
     white-space: pre; /* Preserve spacing */
    content: ''; /* Default: no prefix */
}
}


/* --- Logic for Prefixes --- */
/* The actual code text */
 
.mw-code-text {
/* For multi-line blocks, show the line number */
     white-space: pre-wrap; /* Preserve whitespace and wrap long lines */
.mw-code-area-multiline code::before {
     word-break: break-all; /* Break long words that would overflow */
     counter-increment: line;
     content: counter(line);
}
}


/* For blocks of type 'command', show the '$' prompt */
/* The copy button */
.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;
Line 80: Line 60:
     color: #0056b3;
     color: #0056b3;
     text-decoration: underline;
     text-decoration: underline;
}
.mw-copy-source {
    display: none;
}
}
Retrieved from "https://wiki.nixos.org/wiki/User:Layer-09/Sandbox/Command.css"