User:Aardvark/EmaStyle.css: Difference between revisions
No edit summary |
No edit summary |
||
(86 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.ema-prologue.navigation | |||
{ | |||
margin-left: auto; | |||
margin-right: auto; | |||
margin-top: .7em; | |||
/* width: 85%; */ | |||
} | |||
.ema-prologue.navigation.direct | |||
{ | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
.ema-prologue.nav-button | |||
{ | |||
background-color: #231816; | |||
border-radius: 4px; | |||
} | |||
.ema-prologue.nav-button p, | |||
.ema-prologue.left p, | |||
.ema-prologue.right p | |||
{ | |||
margin: 0; | |||
padding: 0.5em; | |||
} | |||
.ema-prologue.nav-button a, | |||
.ema-prologue.nav-button a:visited | |||
{ | |||
display: inline-block; | |||
width: 100%; | |||
height: 100%; | |||
padding: 0; | |||
} | |||
.ema-prologue.next, | |||
.ema-prologue.previous | |||
{ | |||
width: 152.64px; | |||
} | |||
.ema-prologue.navigation.choice | |||
{ | |||
display: grid; | |||
grid-template-columns: 49% 49%; | |||
grid-gap: 2%; | |||
} | |||
.ema-prologue.navigation.choice.single | |||
{ | |||
grid-template-columns: auto; | |||
} | |||
.ema-prologue.navigation.choice + .ema-prologue.navigation.choice | |||
{ | |||
margin-top: 1em; | |||
} | |||
.ema-prologue.left, | |||
.ema-prologue.right | |||
{ | |||
background: #dae4ea; | |||
border: 1px solid black; | |||
border-radius: 9px; | |||
padding: .5em; | |||
} | |||
.ema-prologue.left a, | |||
.ema-prologue.right a, | |||
.ema-prologue.left a:visited, | |||
.ema-prologue.right a:visited | |||
{ | |||
color: #595758; | |||
display: inline-block; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.ema-prologue.left a:hover, | |||
.ema-prologue.right a:hover | |||
{ | |||
text-shadow: 0 0 4px #ee0e0f; | |||
text-decoration: none; | |||
} | |||
.ema-prologue.left .nav-button a:hover, | |||
.ema-prologue.right .nav-button a:hover | |||
{ | |||
text-shadow: unset; | |||
} | |||
.lyric-left | |||
{ | |||
text-align: left; | |||
} | |||
.lyric-right | .lyric-right | ||
{ | { | ||
Line 7: | Line 105: | ||
{ | { | ||
font-style: italic; | font-style: italic; | ||
} | |||
.lyric-underline | |||
{ | |||
text-decoration: underline; | |||
} | |||
.lyric-strike | |||
{ | |||
text-decoration: line-through; | |||
} | |||
.lyric-title | |||
{ | |||
font-size: 150%; | |||
} | |||
.lyric-spoken | |||
{ | |||
color: #b5b5b5; | |||
} | } | ||
Line 13: | Line 131: | ||
color: #4EA1C7; | color: #4EA1C7; | ||
text-shadow: 0 0 1px #4EA1C7; | text-shadow: 0 0 1px #4EA1C7; | ||
} | |||
.lyric-life.only-shadow | |||
{ | |||
color: initial; | |||
text-shadow: 0 0 1px #4EA1C7, 0 0 1px #4EA1C7, 0 0 8px #4EA1C7, 0 0 16px #4EA1C7; | |||
} | |||
.lyric-life.glow | |||
{ | |||
text-shadow: 0 0 1px #1F31B8, 0 0 16px #1F31B8; | |||
} | } | ||
Line 19: | Line 148: | ||
color: #855AA0; | color: #855AA0; | ||
text-shadow: 0 0 1px #855AA0; | text-shadow: 0 0 1px #855AA0; | ||
} | |||
.lyric-death.only-shadow | |||
{ | |||
color: initial; | |||
text-shadow: 0 0 1px #855AA0, 0 0 8px #855AA0, 0 0 16px #855AA0, 0 0 8px #855AA0; | |||
} | |||
.lyric-curse | |||
{ | |||
color: #9A72B2; | |||
text-shadow: 0 0 1px #9A72B2; | |||
} | |||
.lyric-curse.only-shadow | |||
{ | |||
color: initial; | |||
text-shadow: 0 0 1px #9A72B2, 0 0 4px #9A72B2, 0 0 8px #9A72B2, 0 0 16px #9A72B2, 0px 0 6px #9A72B2; | |||
} | } | ||
Line 25: | Line 172: | ||
color: #595758; | color: #595758; | ||
text-shadow: 0 0 1px black; | text-shadow: 0 0 1px black; | ||
} | |||
.lyric-shadow.glow | |||
{ | |||
text-shadow: 0 0 1px black, 0 0 16px black; | |||
} | } | ||
Line 33: | Line 185: | ||
} | } | ||
.lyric- | .lyric-light.glow-happy | ||
{ | |||
text-shadow: 0 0 1px #FC733E, 0 0 16px #ffd600; | |||
} | |||
.lyric-light.glow-happy.white | |||
{ | |||
color: white; | |||
text-shadow: 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 8px #ffd600, 0 0 16px #ffd600; | |||
} | |||
.lyric-light.glow | |||
{ | |||
text-shadow: 0 0 1px #FC733E, 0 0 16px #FC733E; | |||
} | |||
.lyric-light.only-shadow | |||
{ | |||
color: initial; | |||
text-shadow: 0 0 4px #FC733E, 0 0 16px #FC733E; | |||
} | |||
.lyric-wish | |||
{ | |||
color: #ff2027; | |||
text-shadow: 0 0 1px #ff2027; | |||
} | |||
.lyric-revenge | |||
{ | |||
color: #BF1F24; | |||
text-shadow: 0 0 1px #BF1F24; | |||
} | |||
.lyric-revenge.glow | |||
{ | |||
text-shadow: 0 0 1px #BF1F24, 0 0 8px #ff0000, 0 0 16px #ff0000; | |||
} | |||
.lyric-screening | |||
{ | |||
color: #526180; | |||
text-shadow: 0 0 2px #bf1f24, 0 0 4px #ff0008, 0 0 8px #ff0000, 0 0 16px #ff0000; | |||
} | |||
.lyric-dusk | |||
{ | |||
color: #1F31B8; | |||
text-shadow: 0 0 1px #1F31B8; | |||
} | |||
.lyric-water | |||
{ | { | ||
color: # | color: #0064AF; | ||
text-shadow: 0 0 1px #0064AF; | |||
} | |||
.lyric-sin | |||
{ | |||
color: #E00011; | |||
text-shadow: 0 0 1px #E00011; | |||
} | |||
.lyric-fate | |||
{ | |||
color: #A5195D; | |||
text-shadow: 0 0 1px #A5195D; | |||
} | |||
.lyric-suffering | |||
{ | |||
color: #9D0F1C; | |||
text-shadow: 0 0 1px #9D0F1C; | |||
} | |||
.lyric-whitewalls | |||
{ | |||
color: white; | |||
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 8px black, 0 0 16px black; | |||
} | |||
.lyric-roots | |||
{ | |||
color: #7D4E1D; | |||
text-shadow: 0 0 1px #7D4E1D; | |||
} | |||
.lyric-leaves | |||
{ | |||
color: #006833; | |||
text-shadow: 0 0 1px #006833; | |||
} | |||
.lyric-leaves.glow | |||
{ | |||
text-shadow: 0 0 1px #0E9D40, 0 0 8px #0E9D40, 0 0 16px #0E9D40; | |||
} | |||
.lyric-heart | |||
{ | |||
color: #E84B93; | |||
text-shadow: 0 0 1px #E84B93; | |||
} | |||
.lyric-letsgo | |||
{ | |||
color: white; | |||
text-shadow: 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 8px #B1C723, 0 0 16px #B1C723; | |||
} | |||
.lyric-cateight | |||
{ | |||
color: #F8B301; | |||
text-shadow: 0 0 1px #F8B301; | |||
} | |||
.lyric-cathundred | |||
{ | |||
color: #FFB6E2; | |||
text-shadow: 0 0 1px #FFB6E2; | |||
} | |||
.lyric-bliss | |||
{ | |||
color: #F4F80B; | |||
text-shadow: 0 0 2px #f4f80b, 0 0 3px #f4f80b, 0 0 3px #434400; | |||
} | |||
@media only screen and (max-width : 1000px){ | |||
.ema-prologue.navigation.direct | |||
{ | |||
align-content: space-between; | |||
} | |||
.page-subcontainer > .ema-prologue.navigation | |||
{ | |||
width: 100%; | |||
} | |||
.ema-prologue.next, | |||
.ema-prologue.previous | |||
{ | |||
width: 48px; | |||
text-align: center; | |||
} | |||
.ema-prologue.navigation.choice | |||
{ | |||
display: block; | |||
} | |||
.ema-prologue.alternative.nav-button + .ema-prologue.alternative.nav-button | |||
{ | |||
margin-top: 1em; | |||
} | |||
.ema-prologue.left:first-child | |||
{ | |||
margin-bottom: 1em; | |||
} | |||
} | } |
Latest revision as of 19:38, 18 October 2022
.ema-prologue.navigation
{
margin-left: auto;
margin-right: auto;
margin-top: .7em;
/* width: 85%; */
}
.ema-prologue.navigation.direct
{
display: flex;
justify-content: space-between;
}
.ema-prologue.nav-button
{
background-color: #231816;
border-radius: 4px;
}
.ema-prologue.nav-button p,
.ema-prologue.left p,
.ema-prologue.right p
{
margin: 0;
padding: 0.5em;
}
.ema-prologue.nav-button a,
.ema-prologue.nav-button a:visited
{
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
}
.ema-prologue.next,
.ema-prologue.previous
{
width: 152.64px;
}
.ema-prologue.navigation.choice
{
display: grid;
grid-template-columns: 49% 49%;
grid-gap: 2%;
}
.ema-prologue.navigation.choice.single
{
grid-template-columns: auto;
}
.ema-prologue.navigation.choice + .ema-prologue.navigation.choice
{
margin-top: 1em;
}
.ema-prologue.left,
.ema-prologue.right
{
background: #dae4ea;
border: 1px solid black;
border-radius: 9px;
padding: .5em;
}
.ema-prologue.left a,
.ema-prologue.right a,
.ema-prologue.left a:visited,
.ema-prologue.right a:visited
{
color: #595758;
display: inline-block;
width: 100%;
height: 100%;
}
.ema-prologue.left a:hover,
.ema-prologue.right a:hover
{
text-shadow: 0 0 4px #ee0e0f;
text-decoration: none;
}
.ema-prologue.left .nav-button a:hover,
.ema-prologue.right .nav-button a:hover
{
text-shadow: unset;
}
.lyric-left
{
text-align: left;
}
.lyric-right
{
text-align: right;
}
.lyric-italic
{
font-style: italic;
}
.lyric-underline
{
text-decoration: underline;
}
.lyric-strike
{
text-decoration: line-through;
}
.lyric-title
{
font-size: 150%;
}
.lyric-spoken
{
color: #b5b5b5;
}
.lyric-life
{
color: #4EA1C7;
text-shadow: 0 0 1px #4EA1C7;
}
.lyric-life.only-shadow
{
color: initial;
text-shadow: 0 0 1px #4EA1C7, 0 0 1px #4EA1C7, 0 0 8px #4EA1C7, 0 0 16px #4EA1C7;
}
.lyric-life.glow
{
text-shadow: 0 0 1px #1F31B8, 0 0 16px #1F31B8;
}
.lyric-death
{
color: #855AA0;
text-shadow: 0 0 1px #855AA0;
}
.lyric-death.only-shadow
{
color: initial;
text-shadow: 0 0 1px #855AA0, 0 0 8px #855AA0, 0 0 16px #855AA0, 0 0 8px #855AA0;
}
.lyric-curse
{
color: #9A72B2;
text-shadow: 0 0 1px #9A72B2;
}
.lyric-curse.only-shadow
{
color: initial;
text-shadow: 0 0 1px #9A72B2, 0 0 4px #9A72B2, 0 0 8px #9A72B2, 0 0 16px #9A72B2, 0px 0 6px #9A72B2;
}
.lyric-shadow
{
color: #595758;
text-shadow: 0 0 1px black;
}
.lyric-shadow.glow
{
text-shadow: 0 0 1px black, 0 0 16px black;
}
.lyric-light
{
color: #FEC15F;
text-shadow: 0 0 1px #FC733E;
}
.lyric-light.glow-happy
{
text-shadow: 0 0 1px #FC733E, 0 0 16px #ffd600;
}
.lyric-light.glow-happy.white
{
color: white;
text-shadow: 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 1px #ffd600, 0 0 8px #ffd600, 0 0 16px #ffd600;
}
.lyric-light.glow
{
text-shadow: 0 0 1px #FC733E, 0 0 16px #FC733E;
}
.lyric-light.only-shadow
{
color: initial;
text-shadow: 0 0 4px #FC733E, 0 0 16px #FC733E;
}
.lyric-wish
{
color: #ff2027;
text-shadow: 0 0 1px #ff2027;
}
.lyric-revenge
{
color: #BF1F24;
text-shadow: 0 0 1px #BF1F24;
}
.lyric-revenge.glow
{
text-shadow: 0 0 1px #BF1F24, 0 0 8px #ff0000, 0 0 16px #ff0000;
}
.lyric-screening
{
color: #526180;
text-shadow: 0 0 2px #bf1f24, 0 0 4px #ff0008, 0 0 8px #ff0000, 0 0 16px #ff0000;
}
.lyric-dusk
{
color: #1F31B8;
text-shadow: 0 0 1px #1F31B8;
}
.lyric-water
{
color: #0064AF;
text-shadow: 0 0 1px #0064AF;
}
.lyric-sin
{
color: #E00011;
text-shadow: 0 0 1px #E00011;
}
.lyric-fate
{
color: #A5195D;
text-shadow: 0 0 1px #A5195D;
}
.lyric-suffering
{
color: #9D0F1C;
text-shadow: 0 0 1px #9D0F1C;
}
.lyric-whitewalls
{
color: white;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 8px black, 0 0 16px black;
}
.lyric-roots
{
color: #7D4E1D;
text-shadow: 0 0 1px #7D4E1D;
}
.lyric-leaves
{
color: #006833;
text-shadow: 0 0 1px #006833;
}
.lyric-leaves.glow
{
text-shadow: 0 0 1px #0E9D40, 0 0 8px #0E9D40, 0 0 16px #0E9D40;
}
.lyric-heart
{
color: #E84B93;
text-shadow: 0 0 1px #E84B93;
}
.lyric-letsgo
{
color: white;
text-shadow: 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 1px #B1C723, 0 0 8px #B1C723, 0 0 16px #B1C723;
}
.lyric-cateight
{
color: #F8B301;
text-shadow: 0 0 1px #F8B301;
}
.lyric-cathundred
{
color: #FFB6E2;
text-shadow: 0 0 1px #FFB6E2;
}
.lyric-bliss
{
color: #F4F80B;
text-shadow: 0 0 2px #f4f80b, 0 0 3px #f4f80b, 0 0 3px #434400;
}
@media only screen and (max-width : 1000px){
.ema-prologue.navigation.direct
{
align-content: space-between;
}
.page-subcontainer > .ema-prologue.navigation
{
width: 100%;
}
.ema-prologue.next,
.ema-prologue.previous
{
width: 48px;
text-align: center;
}
.ema-prologue.navigation.choice
{
display: block;
}
.ema-prologue.alternative.nav-button + .ema-prologue.alternative.nav-button
{
margin-top: 1em;
}
.ema-prologue.left:first-child
{
margin-bottom: 1em;
}
}