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

Template:Syx and Seven Terminal/styles.css: Difference between revisions

Template page
Content deleted Content added
No edit summary
No edit summary
Tag: Reverted
Line 1: Line 1:
.template-Syx_and_Seven_Terminal {
.template-Syx_and_Seven_Terminal {
box-sizing: border-box;
background: var(--color-surface-4);
overflow-wrap: break-word;
padding: var(--space-md);
word-wrap: break-word;
font-family: var(--font-family-monospace);
word-break: break-word;
border: solid 4px transparent;
white-space: normal;
width: 95%;
overflow: hidden;
margin: 0 auto;
}

.template-Syx_and_Seven_Terminal.animate-border {
border: 4px solid transparent;
border-image: linear-gradient(270deg, purple, red, green, purple) 1;
border-image-slice: 1;
animation: animated-border-gradient 6s linear infinite;
}

@keyframes animated-border-gradient {
0% {
border-image-source: linear-gradient(270deg, purple, red, green, purple);
}
50% {
border-image-source: linear-gradient(270deg, green, purple, red, green);
}
100% {
border-image-source: linear-gradient(270deg, purple, red, green, purple);
}
}
}

Revision as of 17:31, April 18, 2025

.template-Syx_and_Seven_Terminal {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
}

.template-Syx_and_Seven_Terminal.animate-border {
  border: 4px solid transparent;
  border-image: linear-gradient(270deg, purple, red, green, purple) 1;
  border-image-slice: 1;
  animation: animated-border-gradient 6s linear infinite;
}

@keyframes animated-border-gradient {
  0% {
    border-image-source: linear-gradient(270deg, purple, red, green, purple);
  }
  50% {
    border-image-source: linear-gradient(270deg, green, purple, red, green);
  }
  100% {
    border-image-source: linear-gradient(270deg, purple, red, green, purple);
  }
}