Template:TerminalLook/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
Tesinormed (talk | contribs) No edit summary |
No edit summary |
||
| (19 intermediate revisions by 2 users not shown) | |||
| Line 11: | Line 11: | ||
.TerminalTextRed { |
.TerminalTextRed { |
||
color: #c21018; |
color: #c21018; |
||
} |
|||
.TerminalTextBlue { |
|||
color: #1e90ff; |
|||
} |
|||
.TerminalTextOrange { |
|||
color: #ff8c00; |
|||
} |
} |
||
.TerminalBlinkerCursor::after { |
.TerminalBlinkerCursor::after { |
||
content: "_"; |
content: "_"; |
||
animation: TerminalBlinker |
animation: TerminalBlinker 1.25s infinite; |
||
} |
} |
||
.TerminalBlinkerQuestion::after { |
|||
content: "?"; |
|||
animation: TerminalBlinker 1.25s infinite; |
|||
} |
|||
.TerminalSpinner::after { |
.TerminalSpinner::after { |
||
content: "|"; |
content: "|"; |
||
animation: TerminalSpinner 0.5s infinite; |
animation: TerminalSpinner 0.5s infinite; |
||
} |
|||
.TerminalFlicker { |
|||
animation: textflicker 0.012s infinite alternate; |
|||
text-shadow: |
|||
0.06rem 0 0.06rem #ea36af, |
|||
-0.125rem 0 0.06rem #75fa69; |
|||
letter-spacing: 0.125em; |
|||
} |
|||
.text-glow { |
|||
text-shadow: |
|||
0 0 0.2rem rgba(234, 54, 175, 0.4), |
|||
0 0 0.6rem rgba(117, 250, 105, 0.2); |
|||
} |
|||
.TerminalHighlight { |
|||
font-weight: bold; |
|||
background: linear-gradient(to right, #ccc, #fff); |
|||
border: 3px solid #888; |
|||
border-radius: 0.25rem; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-family: var(--font-family-monospace); |
|||
font-size: 0.9rem; |
|||
color: #000; |
|||
} |
|||
.TerminalPrompt { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-family: var(--font-family-monospace); |
|||
font-size: 0.9rem; |
|||
color: var(--terminal-text-color, #fff); |
|||
background: var(--terminal-bg, #2e2e2e); |
|||
padding: 0.25em 0.5em; |
|||
} |
|||
.TerminalPromptManjaroGreen { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-family: var(--font-family-monospace); |
|||
font-size: 0.9rem; |
|||
color: var(--terminal-text-color, #fff); |
|||
background: var(--terminal-bg, #34be5b); |
|||
padding: 0.25em 0.5em; |
|||
} |
|||
.PromptIcon img { |
|||
width: 1.0em; |
|||
height: 1.0em; |
|||
margin-right: 0.5ch; |
|||
vertical-align: middle; |
|||
} |
|||
.PromptDir { |
|||
color: #fff; |
|||
font-weight: bold; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
} |
||
| Line 57: | Line 132: | ||
content: "|"; |
content: "|"; |
||
} |
} |
||
} |
|||
@keyframes textflicker { |
|||
from { |
|||
text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69; |
|||
} |
|||
to { |
|||
text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69; |
|||
} |
|||
} |
} |
||
Latest revision as of 16:11, May 13, 2025
.TerminalWindow {
background: var(--color-surface-4);
color: #28b823;
font-family: var(--font-family-monospace);
margin-block: var(--space-md);
padding: var(--space-sm);
border: var(--border-base);
border-radius: var(--border-radius-base);
}
.TerminalTextRed {
color: #c21018;
}
.TerminalTextBlue {
color: #1e90ff;
}
.TerminalTextOrange {
color: #ff8c00;
}
.TerminalBlinkerCursor::after {
content: "_";
animation: TerminalBlinker 1.25s infinite;
}
.TerminalBlinkerQuestion::after {
content: "?";
animation: TerminalBlinker 1.25s infinite;
}
.TerminalSpinner::after {
content: "|";
animation: TerminalSpinner 0.5s infinite;
}
.TerminalFlicker {
animation: textflicker 0.012s infinite alternate;
text-shadow:
0.06rem 0 0.06rem #ea36af,
-0.125rem 0 0.06rem #75fa69;
letter-spacing: 0.125em;
}
.text-glow {
text-shadow:
0 0 0.2rem rgba(234, 54, 175, 0.4),
0 0 0.6rem rgba(117, 250, 105, 0.2);
}
.TerminalHighlight {
font-weight: bold;
background: linear-gradient(to right, #ccc, #fff);
border: 3px solid #888;
border-radius: 0.25rem;
display: inline-flex;
align-items: center;
font-family: var(--font-family-monospace);
font-size: 0.9rem;
color: #000;
}
.TerminalPrompt {
display: inline-flex;
align-items: center;
font-family: var(--font-family-monospace);
font-size: 0.9rem;
color: var(--terminal-text-color, #fff);
background: var(--terminal-bg, #2e2e2e);
padding: 0.25em 0.5em;
}
.TerminalPromptManjaroGreen {
display: inline-flex;
align-items: center;
font-family: var(--font-family-monospace);
font-size: 0.9rem;
color: var(--terminal-text-color, #fff);
background: var(--terminal-bg, #34be5b);
padding: 0.25em 0.5em;
}
.PromptIcon img {
width: 1.0em;
height: 1.0em;
margin-right: 0.5ch;
vertical-align: middle;
}
.PromptDir {
color: #fff;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes TerminalBlinker {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes TerminalSpinner {
0% {
content: "|";
}
25% {
content: "/";
}
50% {
content: "-";
}
75% {
content: "\\";
}
100% {
content: "|";
}
}
@keyframes textflicker {
from {
text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
}
to {
text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
}
}