early implementation of ari melody LIVE tracker
This commit is contained in:
parent
f7b3faf8e8
commit
9274796729
10 changed files with 335 additions and 39 deletions
|
@ -6,6 +6,7 @@
|
|||
--secondary: #f8e05b;
|
||||
--tertiary: #f788fe;
|
||||
--links: #5eb2ff;
|
||||
--live: #fd3737;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
|
|
@ -222,3 +222,84 @@ div#web-buttons {
|
|||
transform: translate(-2px, -2px);
|
||||
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
|
||||
}
|
||||
|
||||
#live-banner {
|
||||
margin: 1em 0 2em 0;
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--primary);
|
||||
box-shadow: 0 0 8px var(--primary);
|
||||
}
|
||||
|
||||
#live-banner h2 {
|
||||
margin: 0 0 .4em 0;
|
||||
color: var(--on-background);
|
||||
}
|
||||
|
||||
#live-banner p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.live-highlight {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.live-preview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.live-preview div:first-of-type {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.live-thumbnail {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.live-button {
|
||||
margin: .2em;
|
||||
padding: .4em .5em;
|
||||
display: inline-block;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: 4px;
|
||||
transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
|
||||
}
|
||||
|
||||
.live-button:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--primary);
|
||||
box-shadow: 0 0 8px var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.live-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .3em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.live-game {
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.live-game .live-game-prefix {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.live-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.live-viewers {
|
||||
opacity: .5;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue