Working backlog and library HTML pages
This commit is contained in:
parent
7cef3a430f
commit
c26f9334c1
16 changed files with 1090 additions and 89 deletions
758
backloggery.css
Normal file
758
backloggery.css
Normal file
|
|
@ -0,0 +1,758 @@
|
|||
a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,input,li,main,nav,ol,p,section,select,span,summary,table,textarea,ul {
|
||||
border:0;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
font-size:100%;
|
||||
margin:0;
|
||||
outline:none;
|
||||
padding:0;
|
||||
vertical-align:baseline
|
||||
}
|
||||
|
||||
:root {
|
||||
--default-base:#424957;
|
||||
--default-secondary:#272c34;
|
||||
--default-secondary-50:rgba(40,44,52,0.5);
|
||||
--default-accent:#f58d47;
|
||||
--default-text:#fff;
|
||||
--default-secondary-text:#fff;
|
||||
--default-accent-text:#fff;
|
||||
--default-accent-shadow:hsla(0,0%,0%,50%);
|
||||
--retro-border:url(/img/border.png);
|
||||
--active-base:var(--default-base);
|
||||
--active-secondary:var(--default-secondary);
|
||||
--active-secondary-50:var(--default-secondary-50);
|
||||
--active-accent:var(--default-accent);
|
||||
--active-text:var(--default-text);
|
||||
--active-secondary-text:var(--default-secondary-text);
|
||||
--active-secondary-text-25:hsla(0,0%,100%,0.25);
|
||||
--active-accent-text:var(--default-accent-text);
|
||||
--unplayed-color:#562929;
|
||||
--unfinished-color:#bd7828;
|
||||
--beaten-color:#d1d1d1;
|
||||
--completed-color:#ecd579;
|
||||
--endless-color:#573271;
|
||||
--none-color:hsla(264,27%,11%,40%);
|
||||
--follow-color:#17cf17;
|
||||
--mention-color:#cf1717;
|
||||
--dm-color:#cf17cf;
|
||||
--news-color:#1742cf
|
||||
}
|
||||
|
||||
html {
|
||||
color:var(--active-text);
|
||||
font-family:Lato,arial,helvetica,sans-serif;
|
||||
font-size:.9rem;
|
||||
overflow-x:hidden;
|
||||
overflow-y:overlay;
|
||||
scroll-behavior:smooth
|
||||
}
|
||||
|
||||
body {
|
||||
background-attachment:fixed;
|
||||
background-color:var(--active-base);
|
||||
margin:0;
|
||||
padding:0
|
||||
}
|
||||
|
||||
#app>div:last-of-type {
|
||||
display:grid;
|
||||
grid-gap:0 10px;
|
||||
grid-template-columns:repeat(12,1fr);
|
||||
grid-template-rows:auto;
|
||||
grid-template-areas:"card card card card card card card card card card card card" "side side side side side side side side side side side side" "main main main main main main main main main main main main";
|
||||
max-width:1200px;
|
||||
margin: 0 auto;
|
||||
padding:0 2vw 0 1vw
|
||||
}
|
||||
|
||||
section {
|
||||
padding:2vh 1vw 2vh
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
.link,a {
|
||||
color:var(--active-text)
|
||||
}
|
||||
|
||||
img {
|
||||
max-width:100%
|
||||
}
|
||||
|
||||
h1,h2 {
|
||||
font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
|
||||
font-variant:small-caps;
|
||||
letter-spacing:2px
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom:1px solid var(--active-text);
|
||||
font-size:18px;
|
||||
margin:30px 0 10px;
|
||||
padding-left:5px
|
||||
}
|
||||
|
||||
h1:first-of-type {
|
||||
margin:0 0 15px
|
||||
}
|
||||
|
||||
svg,svg text {
|
||||
fill:var(--active-text)
|
||||
}
|
||||
|
||||
svg text {
|
||||
font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif
|
||||
}
|
||||
|
||||
.decay {
|
||||
opacity:.5
|
||||
}
|
||||
|
||||
.decay:active,.decay:focus,.decay:focus-within,.decay:hover {
|
||||
opacity:1
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
/* margin-top:3rem; */
|
||||
padding:.3rem 0
|
||||
}
|
||||
|
||||
.tabs a,.tabs div {
|
||||
background-color:var(--active-secondary-50);
|
||||
border-bottom:2px solid var(--active-text);
|
||||
color:var(--active-secondary-text);
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1;
|
||||
font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
|
||||
font-size:1rem;
|
||||
letter-spacing:1px;
|
||||
opacity:.7;
|
||||
padding:.5rem 0 .4rem;
|
||||
text-align:center;
|
||||
text-transform:uppercase;
|
||||
white-space:nowrap
|
||||
}
|
||||
|
||||
.tabs a:hover,.tabs div:hover {
|
||||
opacity:1
|
||||
}
|
||||
|
||||
.tabs a,.tabs a.router-link-active {
|
||||
border-top:2px solid var(--active-text)
|
||||
}
|
||||
|
||||
.tabs a.router-link-active {
|
||||
background:var(--active-accent);
|
||||
border-bottom:2px solid var(--active-text);
|
||||
color:var(--active-accent-text);
|
||||
font-weight:700;
|
||||
opacity:1;
|
||||
position:relative
|
||||
}
|
||||
|
||||
.tabs a.router-link-active a {
|
||||
border:none;
|
||||
display:block;
|
||||
padding-right:10%;
|
||||
position:absolute;
|
||||
top:-7px;
|
||||
right:0;
|
||||
text-align:right;
|
||||
width:100%
|
||||
}
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
.tabs a {
|
||||
font-size:.8rem
|
||||
}
|
||||
}
|
||||
|
||||
.Added,.unplayed,.Unplayed {
|
||||
background-color:var(--unplayed-color)!important;
|
||||
color:hsla(0,0%,100%,.75);
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.Started,.unfinished,.Unfinished {
|
||||
background-color:var(--unfinished-color)!important;
|
||||
color:hsla(0,0%,100%,.75);
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.Beat,.beaten,.Beaten {
|
||||
background-color:var(--beaten-color)!important;
|
||||
color:rgba(0,0,0,.75);
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.completed,.Completed {
|
||||
background-color:var(--completed-color)!important;
|
||||
color:rgba(0,0,0,.75);
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.endless,.Endless {
|
||||
background-color:var(--endless-color)!important;
|
||||
color:rgba(0,0,100%,.75);
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.none,.None {
|
||||
background-color:var(--none-color)!important;
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.none,.None,.Playing {
|
||||
color:hsla(0,0%,100%,.75)
|
||||
}
|
||||
|
||||
.Playing {
|
||||
background-color:#202020!important
|
||||
}
|
||||
|
||||
.borderless {
|
||||
border:none!important
|
||||
}
|
||||
|
||||
.markdown {
|
||||
padding:0 .25rem;
|
||||
white-space:pre-wrap
|
||||
}
|
||||
|
||||
div.profile main {
|
||||
grid-area:main
|
||||
}
|
||||
|
||||
@media screen and (min-width:800px) {
|
||||
div.profile {
|
||||
grid-template-areas:"card card card card card card card card card card card card" "side side side side main main main main main main main main"!important
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top:0
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.game-item {
|
||||
margin-bottom:-3px;
|
||||
overflow:hidden;
|
||||
position:relative
|
||||
}
|
||||
|
||||
.game-item>div:first-child {
|
||||
background-color:hsla(0,0%,100%,.05);
|
||||
border:2px solid rgba(0,0,0,.5);
|
||||
border-radius:4px;
|
||||
cursor: default;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
margin-bottom:10px;
|
||||
min-height:54px;
|
||||
max-height:54px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
width:100%
|
||||
}
|
||||
|
||||
.game-item>div:first-child>div {
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform {
|
||||
background-color:var(--active-secondary);
|
||||
border-radius:3px 0 0 3px;
|
||||
color:var(--active-secondary-text);
|
||||
min-height:50px;
|
||||
max-width:50px;
|
||||
overflow:hidden
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img,.game-item>div:first-child>.platform p {
|
||||
opacity:.85
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img {
|
||||
position:relative;
|
||||
top:7px;
|
||||
width:35px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img.bw {
|
||||
-webkit-filter:var(--platform-bw);
|
||||
filter:var(--platform-bw)
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status {
|
||||
max-width:48px;
|
||||
padding:5px 9px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status img {
|
||||
margin-top:3px;
|
||||
max-width:32px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text {
|
||||
-webkit-box-flex:5;
|
||||
-ms-flex-positive:5;
|
||||
flex-grow:5;
|
||||
padding:3px 4px;
|
||||
text-align:left
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text>.title {
|
||||
font-family:Titillium Web,sans-serif;
|
||||
font-size:1.1rem;
|
||||
line-height:1.1rem;
|
||||
margin:0 0 -3px
|
||||
}
|
||||
|
||||
@supports(-webkit-line-clamp:1) {
|
||||
.game-item>div:first-child>.text>.title {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:normal;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:1;
|
||||
-webkit-box-orient:vertical
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text>.markdown {
|
||||
font-size:.7rem;
|
||||
max-height:32px;
|
||||
opacity:.75;
|
||||
padding:2px 1px;
|
||||
width:auto;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
overflow:hidden
|
||||
}
|
||||
|
||||
@supports(-webkit-line-clamp:2) {
|
||||
.game-item>div:first-child>.text>.markdown {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:normal;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-box-orient:vertical
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.priority {
|
||||
max-width:56px;
|
||||
padding-right:10px;
|
||||
text-align:center
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.priority img {
|
||||
margin-top:3px;
|
||||
max-width:32px;
|
||||
opacity:.5
|
||||
}
|
||||
|
||||
@media screen and (max-width:520px) {
|
||||
|
||||
.game-item>div:first-child>.text>.title {
|
||||
font-size:1rem
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status {
|
||||
padding:5px
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.donut {
|
||||
display:block
|
||||
}
|
||||
|
||||
.platform-card {
|
||||
border:2px solid rgba(0,0,0,.5);
|
||||
border-radius:6px;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
font-weight:700;
|
||||
margin:0 0 7px;
|
||||
text-align:center;
|
||||
width:100%
|
||||
}
|
||||
|
||||
.platform-card a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.platform-card .bars {
|
||||
border-radius:0 4px 4px 0;
|
||||
display:-webkit-inline-box;
|
||||
display:-ms-inline-flexbox;
|
||||
display:inline-flex;
|
||||
border-left:2px solid rgba(0,0,0,.5);
|
||||
-webkit-box-flex:9;
|
||||
-ms-flex:9;
|
||||
flex:9
|
||||
}
|
||||
|
||||
.platform-card .bars a {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
border-left:2px solid rgba(0,0,0,.5);
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1;
|
||||
font-size:20px;
|
||||
margin:0;
|
||||
min-width:2rem;
|
||||
padding:0 3px;
|
||||
-webkit-transition:-webkit-box-flex .5s ease-in-out;
|
||||
transition:-webkit-box-flex .5s ease-in-out;
|
||||
transition:flex .5s ease-in-out;
|
||||
transition:flex .5s ease-in-out,-webkit-box-flex .5s ease-in-out,-ms-flex .5s ease-in-out
|
||||
}
|
||||
|
||||
.platform-card .bars a:first-of-type {
|
||||
border-left:0 solid rgba(0,0,0,.5)
|
||||
}
|
||||
|
||||
.platform-card .bars a.remove_flex {
|
||||
border:none;
|
||||
-webkit-box-flex:0;
|
||||
-ms-flex:0;
|
||||
flex:0;
|
||||
min-width:unset;
|
||||
padding:0
|
||||
}
|
||||
|
||||
.platform-card .abbr,.platform-card .title {
|
||||
background:var(--active-secondary);
|
||||
border-radius:4px 0 0 4px;
|
||||
color:var(--active-secondary-text);
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-flex:4;
|
||||
-ms-flex:4;
|
||||
flex:4;
|
||||
font-size:17px;
|
||||
font-weight:700;
|
||||
min-width:50px;
|
||||
overflow:hidden;
|
||||
padding:5px;
|
||||
white-space:nowrap
|
||||
}
|
||||
|
||||
.platform-card .abbr {
|
||||
display:none
|
||||
}
|
||||
|
||||
.platform-card .total {
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
background:var(--active-secondary);
|
||||
border-radius:0 4px 4px 0;
|
||||
color:var(--active-secondary-text);
|
||||
-webkit-box-pack:right;
|
||||
-ms-flex-pack:right;
|
||||
justify-content:right;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-flex:2;
|
||||
-ms-flex:2;
|
||||
flex:2;
|
||||
font-size:17px;
|
||||
font-weight:700;
|
||||
overflow:hidden;
|
||||
padding-right:10px;
|
||||
white-space:nowrap;
|
||||
width:100px
|
||||
}
|
||||
|
||||
.platform-card .total span {
|
||||
margin-left:6px
|
||||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
.platform-card .title {
|
||||
display:none
|
||||
}
|
||||
|
||||
.platform-card .abbr {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1;
|
||||
min-width:80px
|
||||
}
|
||||
|
||||
.platform-card .bars a:last-of-type {
|
||||
width:50px
|
||||
}
|
||||
|
||||
.platform-card .bars a:last-of-type span {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.backlog-breakdown {
|
||||
display:block;
|
||||
text-align:center;
|
||||
-ms-flex-wrap:wrap;
|
||||
flex-wrap:wrap
|
||||
}
|
||||
|
||||
.backlog-breakdown .backlog-charts {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-direction:normal;
|
||||
-ms-flex-direction:column;
|
||||
flex-direction:column;
|
||||
width:100%
|
||||
}
|
||||
|
||||
.backlog-breakdown .mem-sum {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1
|
||||
}
|
||||
|
||||
.backlog-breakdown .mem-sum .donut {
|
||||
display:inline-block;
|
||||
margin:0 4vw;
|
||||
min-width:44%
|
||||
}
|
||||
|
||||
.status-tally {
|
||||
-webkit-box-flex:4;
|
||||
-ms-flex:4;
|
||||
flex:4;
|
||||
font-size:18px;
|
||||
margin:15px 0 25px 25px
|
||||
}
|
||||
|
||||
.status-tally a:first-of-type div {
|
||||
padding-top:8px!important
|
||||
}
|
||||
|
||||
.status-tally a {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
margin:-5px 20px -5px 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.status-tally a div {
|
||||
padding:1px 3px;
|
||||
vertical-align:middle
|
||||
}
|
||||
|
||||
.status-tally a div img {
|
||||
max-width:32px
|
||||
}
|
||||
|
||||
.status-tally a div:first-child {
|
||||
text-align:right;
|
||||
width:60px
|
||||
}
|
||||
|
||||
.status-tally a div:nth-child(2) {
|
||||
border-right:2px solid rgba(0,0,0,.5);
|
||||
padding:4px 5px 4px 0;
|
||||
width:40px
|
||||
}
|
||||
|
||||
.status-tally a div:last-child {
|
||||
-webkit-box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
|
||||
box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
padding:4px 0;
|
||||
width:99%
|
||||
}
|
||||
|
||||
.status-tally a div:last-child div {
|
||||
-webkit-animation:width_in 1s ease-in-out;
|
||||
animation:width_in 1s ease-in-out;
|
||||
border:2px solid rgba(0,0,0,.5);
|
||||
border-left:none;
|
||||
border-radius:0 4px 4px 0;
|
||||
display:block;
|
||||
font-size:14px;
|
||||
font-weight:700;
|
||||
overflow:hidden;
|
||||
padding:7px 0 7px 7px;
|
||||
text-align:left;
|
||||
-webkit-transition:width .5s ease-in-out;
|
||||
transition:width .5s ease-in-out;
|
||||
white-space:nowrap
|
||||
}
|
||||
|
||||
.status-tally img {
|
||||
max-width:none;
|
||||
position:relative;
|
||||
top:2px
|
||||
}
|
||||
|
||||
.status-tally .backlog-tally {
|
||||
border:2px solid rgba(0,0,0,.5);
|
||||
border-radius:4px;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
margin-bottom:5px
|
||||
}
|
||||
|
||||
.status-tally .backlog-tally div {
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
font-size:1rem;
|
||||
font-weight:700;
|
||||
height:2.35rem;
|
||||
text-align:center;
|
||||
-webkit-transition:width .5s ease-in-out;
|
||||
transition:width .5s ease-in-out
|
||||
}
|
||||
|
||||
.status-tally .backlog-tally div:first-of-type {
|
||||
border-radius:4px 0 0 4px;
|
||||
border-right:2px solid rgba(0,0,0,.5);
|
||||
background-color:var(--active-accent);
|
||||
color:var(--active-accent-text)
|
||||
}
|
||||
|
||||
.status-tally .backlog-tally div:last-of-type {
|
||||
border-radius:0 4px 4px 0;
|
||||
background-color:var(--active-secondary);
|
||||
color:var(--active-secondary-text)
|
||||
}
|
||||
|
||||
.status-tally .backlog-tally div span {
|
||||
width:100%
|
||||
}
|
||||
|
||||
@media screen and (min-width:1024px) {
|
||||
.backlog-breakdown,.backlog-breakdown .backlog-charts {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex
|
||||
}
|
||||
|
||||
.backlog-breakdown .backlog-charts {
|
||||
-webkit-box-orient:horizontal;
|
||||
-webkit-box-direction:normal;
|
||||
-ms-flex-direction:row;
|
||||
flex-direction:row;
|
||||
width:100%
|
||||
}
|
||||
|
||||
.backlog-breakdown .mem-sum {
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-direction:normal;
|
||||
-ms-flex-direction:column;
|
||||
flex-direction:column;
|
||||
min-width:160px;
|
||||
max-width:160px
|
||||
}
|
||||
|
||||
.backlog-breakdown .mem-sum .donut {
|
||||
margin:0
|
||||
}
|
||||
|
||||
.backlog-breakdown .mem-sum .donut:last-of-type {
|
||||
position:relative;
|
||||
top:-10px
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.library .unibar {
|
||||
border:2px solid rgba(0,0,0,.5);border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}
|
||||
|
||||
.library .unibar div {
|
||||
border-left:2px solid rgba(0,0,0,.5);-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.25rem;font-weight:700;line-height:1.25rem;padding:.5rem;text-align:center}
|
||||
|
||||
.library .unibar div:first-of-type {
|
||||
background-color:var(--active-secondary);border:none;border-radius:6px 0 0 6px;color:var(--active-secondary-text);max-width:30%;padding:.5rem 1rem;white-space:nowrap}
|
||||
|
||||
.library .unibar div:first-of-type span {
|
||||
margin-right:1rem}
|
||||
|
||||
.library .unibar div:last-of-type {
|
||||
border-radius:0 6px 6px 0}
|
||||
|
||||
.library .unibar div.unplayed {
|
||||
background-color:var(--unplayed-color)}
|
||||
|
||||
.library .unibar div.unfinished {
|
||||
background-color:var(--unfinished-color)}
|
||||
|
||||
.library .unibar div.beaten {
|
||||
background-color:var(--beaten-color)}
|
||||
|
||||
.library .unibar div.completed {
|
||||
background-color:var(--completed-color)}
|
||||
|
||||
.library .unibar div.endless {
|
||||
background-color:var(--endless-color)}
|
||||
|
||||
.library .library-list {
|
||||
margin-top:20px}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.library .unibar div {
|
||||
font-size:3vw}
|
||||
|
||||
.library .unibar div:first-of-type span {
|
||||
margin-right:.5rem}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue