Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:TerminalLook/styles.css: Difference between revisions

Template page
Content deleted Content added
Created page with ".TerminalWindow { background: black; color: #28b823; } .TerminalTextGreen { color: #28b823; font-weight: normal; font-family: var(--font-family-monospace); } .TerminalTextRed { color: #c21018; font-weight: normal; font-family: var(--font-family-monospace); } .TerminalBlinker { color: #28b823; font-family: var(--font-family-monospace); animation: type 0.5s 10.75s steps(20, end) forwards; } .TerminalBlinkerCursor { color: #28b823; animation: blink 1s 8.5s..."
 
No edit summary
Line 1: Line 1:
.TerminalWindow {
.TerminalWindow {
background: black;
background: var(--color-surface-4);
color: #28b823;
color: #28b823;
}

.TerminalTextGreen {
color: #28b823;
font-weight: normal;
font-family: var(--font-family-monospace);
font-family: var(--font-family-monospace);
}
}
Line 12: Line 7:
.TerminalTextRed {
.TerminalTextRed {
color: #c21018;
color: #c21018;
font-weight: normal;
font-family: var(--font-family-monospace);
}

.TerminalBlinker {
color: #28b823;
font-family: var(--font-family-monospace);
animation: type 0.5s 10.75s steps(20, end) forwards;
}
}


.TerminalBlinkerCursor {
.TerminalBlinkerCursor {
animation: TerminalBlinker 1s infinite;
color: #28b823;
animation: blink 1s 8.5s infinite;
}
}


.TerminalSpinner::after {
.TerminalLoading {
animation: TerminalSpinner 0.5s infinite;
color: #28b823;
font-family: var(--font-family-monospace);
}

.loader::after {
color: #28b823;
font-family: var(--font-family-monospace);
content: "|";
animation: ascii-spin 0.5s steps(1) infinite;
}
}


@keyframes ascii-spin {
@keyframes TerminalSpinner {
0% {
0% {
content: "|";
content: "|";
Line 61: Line 39:
}
}


@keyframes blink {
@keyframes TerminalBlinker {
0% {
0% {
opacity: 0;
opacity: 0;

Revision as of 10:38, April 2, 2025

.TerminalWindow {
	background: var(--color-surface-4);
	color: #28b823;
	font-family: var(--font-family-monospace);
}

.TerminalTextRed {
	color: #c21018;
}

.TerminalBlinkerCursor {
	animation: TerminalBlinker 1s infinite;
}

.TerminalSpinner::after {
	animation: TerminalSpinner 0.5s infinite;
}

@keyframes TerminalSpinner {
	0% {
		content: "|";
	}

	25% {
		content: "/";
	}

	50% {
		content: "-";
	}

	75% {
		content: "\\";
	}

	100% {
		content: "|";
	}
}

@keyframes TerminalBlinker {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}