You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1189 lines
24 KiB
CSS
1189 lines
24 KiB
CSS
/* lato-regular - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
/* lato-italic - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lato';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src: url('/fonts/lato-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
/* lato-700 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
/* lato-700italic - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lato';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
src: url('/fonts/lato-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* titillium-web-regular - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
/* titillium-web-italic - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Titillium Web';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src: url('/fonts/titillium-web-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
/* titillium-web-700 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
/* titillium-web-700italic - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Titillium Web';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
src: url('/fonts/titillium-web-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* material-icons-regular - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/material-icons-v142-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
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:#000;
|
|
--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);
|
|
--beaten-color: hsla(0, 0%, 82%, 0.9);
|
|
--completed-color: hsla(48, 80%, 82%, 0.9);
|
|
--unplayed-color: hsla(200, 30%, 30%, 0.9);
|
|
--unfinished-color: hsla(0, 38%, 35%, 0.9);
|
|
--endless-color: hsla(275, 39%, 32%, 0.9);
|
|
}
|
|
|
|
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;
|
|
border-bottom:1px solid var(--active-text);
|
|
font-size:18px;
|
|
margin:30px 0 10px;
|
|
padding-left:5px
|
|
}
|
|
|
|
details.game-item div.history {
|
|
max-width: 95%;
|
|
}
|
|
|
|
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%
|
|
}
|
|
|
|
.unibar a {
|
|
color: inherit;
|
|
}
|
|
|
|
.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:hsla(0,0%,100%,.75);
|
|
text-shadow:none
|
|
}
|
|
|
|
.Playing {
|
|
color:hsla(0,0%,100%,.75)
|
|
background-color:#202020!important
|
|
}
|
|
|
|
.borderless {
|
|
border:none!important
|
|
}
|
|
|
|
.markdown {
|
|
padding:0 .25rem;
|
|
white-space:pre-wrap
|
|
}
|
|
|
|
div.profile main {
|
|
grid-area:main
|
|
}
|
|
|
|
.game-item {
|
|
margin-bottom:-3px;
|
|
overflow:hidden;
|
|
position:relative;
|
|
}
|
|
|
|
.game-item>summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.game-item>summary:first-child {
|
|
background-color:hsla(0,0%,100%,.05);
|
|
border:2px solid rgba(0,0,0,.5);
|
|
border-radius:4px;
|
|
-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>summary:first-child>div {
|
|
-webkit-box-flex:1;
|
|
-ms-flex:1;
|
|
flex:1
|
|
}
|
|
|
|
.game-item>summary: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>summary:first-child>.platform img,.game-item>summary:first-child>.platform p {
|
|
opacity:.85
|
|
}
|
|
|
|
.game-item>summary:first-child>.platform img {
|
|
position:relative;
|
|
top:7px;
|
|
width:35px
|
|
}
|
|
|
|
.game-item>summary:first-child>.platform img.bw {
|
|
-webkit-filter:var(--platform-bw);
|
|
filter:var(--platform-bw)
|
|
}
|
|
|
|
.game-item>summary:first-child>.status {
|
|
max-width:48px;
|
|
padding:5px 9px
|
|
}
|
|
|
|
.game-item>summary:first-child>.status img {
|
|
margin-top:3px;
|
|
max-width:32px
|
|
}
|
|
|
|
.game-item>summary:first-child>.text {
|
|
-webkit-box-flex:5;
|
|
-ms-flex-positive:5;
|
|
flex-grow:5;
|
|
padding:3px 4px;
|
|
text-align:left
|
|
}
|
|
|
|
.game-item>summary: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>summary: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>summary: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>summary: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>summary:first-child>.priority {
|
|
max-width:56px;
|
|
padding-right:10px;
|
|
text-align:center
|
|
}
|
|
|
|
.game-item>summary:first-child>.priority img {
|
|
margin-top:3px;
|
|
max-width:32px;
|
|
opacity:.5
|
|
}
|
|
|
|
.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 4px;
|
|
text-align:center;
|
|
width:100%
|
|
}
|
|
|
|
.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-right:2px solid rgba(0,0,0,.5);
|
|
-webkit-box-flex:1;
|
|
-ms-flex:1;
|
|
flex:1;
|
|
font-size:14px;
|
|
margin:0;
|
|
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
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.platform-card .bars a:first-of-type {
|
|
border-left:none;
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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%
|
|
}
|
|
|
|
.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}
|
|
|
|
.game-item .game-info {
|
|
-webkit-box-align:start;
|
|
-ms-flex-align:start;
|
|
align-items:flex-start;
|
|
background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05)));
|
|
background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05));
|
|
border-radius:0 0 5px 5px;
|
|
-webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
|
|
box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
|
|
margin:-10px 8px 15px 30px;
|
|
padding:10px;
|
|
position:relative
|
|
}
|
|
|
|
.game-item .game-info label {
|
|
font-size:12px;
|
|
font-weight:700;
|
|
letter-spacing:.5px;
|
|
margin-left:4px;
|
|
opacity:.9;
|
|
text-transform:uppercase
|
|
}
|
|
|
|
.game-item .game-info .markdown,.game-item .game-info p {
|
|
font-size:16px;
|
|
margin:0 0 12px .3rem;
|
|
padding:0
|
|
}
|
|
|
|
.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
margin:auto 15px;
|
|
}
|
|
|
|
.game-item .game-info .history {
|
|
-ms-flex-wrap:wrap;
|
|
flex-wrap:wrap;
|
|
width:100%
|
|
}
|
|
|
|
.game-item .game-info .history .list {
|
|
font-size:14px
|
|
}
|
|
|
|
.game-item .game-info .history .list>div {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex
|
|
}
|
|
|
|
.game-item .game-info .history .list>div>div:first-of-type {
|
|
-webkit-box-flex:1;
|
|
-ms-flex:1;
|
|
flex:1;
|
|
margin-right:5px;
|
|
opacity:.65;
|
|
text-align:right
|
|
}
|
|
|
|
.game-item .game-info .history .list>div>div:last-of-type {
|
|
-webkit-box-flex:2;
|
|
-ms-flex:2;
|
|
flex:2
|
|
}
|
|
|
|
.game-item .game-info .box_2 {
|
|
margin-right:15px
|
|
}
|
|
|
|
.game-item .game-guest label {
|
|
opacity:.5
|
|
}
|
|
|
|
.history .box_1 {
|
|
width: 95%;
|
|
}
|
|
|
|
div.profile aside {
|
|
grid-area:side;
|
|
margin-top:1.5rem;
|
|
position: sticky;
|
|
}
|
|
|
|
.library .filters {
|
|
margin:.25rem 0 1.5rem;
|
|
width:100%}
|
|
|
|
.library .filters>div {
|
|
padding:1rem;
|
|
width:95%}
|
|
|
|
/* .library .filters .empty-filters {
|
|
border:2px solid rgba(0,0,0,.5);
|
|
background-color:var(--active-secondary);
|
|
color:var(--active-secondary-text);
|
|
border-radius:.5rem;
|
|
margin:.5rem auto;
|
|
opacity:.8;
|
|
padding:.4rem;
|
|
text-align:center}
|
|
|
|
.library .filters .empty-filters:hover {
|
|
opacity:1} */
|
|
|
|
.library .filters .item {
|
|
border:2px solid rgba(0,0,0,.5);
|
|
background-color:var(--active-secondary);
|
|
color:var(--active-secondary-text);
|
|
display: inline-block;
|
|
font-size: 0.8rem;
|
|
border-radius:.5rem;
|
|
margin:.25rem;
|
|
max-width:8rem;
|
|
opacity:.8;
|
|
position: relative;
|
|
padding:.45rem 2rem .5rem 1rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.library .filters .item .filter_clear {
|
|
border-radius: .5rem;
|
|
padding: .425rem .5rem .475rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.library .filters .item:hover {
|
|
opacity:1}
|
|
|
|
.status-dot {
|
|
width:12px;
|
|
height:12px;
|
|
max-width:12px;
|
|
border-radius:8px;
|
|
border:2px solid #000;
|
|
display:inline-block;
|
|
margin-right:3px;
|
|
opacity:1;
|
|
position:relative;
|
|
top:1px;
|
|
}
|
|
|
|
|
|
/* new for history page */
|
|
|
|
.hide_arrow {
|
|
-webkit-transform: translateX(100px);
|
|
transform: translateX(100px)
|
|
}
|
|
|
|
.scroll-button {
|
|
border-radius: 8px;
|
|
background: var(--active-secondary);
|
|
color: var(--active-secondary-text);
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 18px;
|
|
opacity: .7;
|
|
pointer-events: all;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
text-align: center;
|
|
line-height: 26px;
|
|
height: 30px;
|
|
width: 30px;
|
|
-webkit-transition: -webkit-transform .5s;
|
|
transition: -webkit-transform .5s;
|
|
transition: transform .5s;
|
|
transition: transform .5s,-webkit-transform .5s
|
|
}
|
|
|
|
.box_1 {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1
|
|
}
|
|
|
|
.history {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
width: 100%
|
|
}
|
|
|
|
.history .list, .history .retro {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1
|
|
}
|
|
|
|
.history .list>div {
|
|
font-size: 14px
|
|
}
|
|
|
|
.history .list>div:first-of-type h2 {
|
|
margin-top: 0
|
|
}
|
|
|
|
.history .list>div h2 {
|
|
display: block;
|
|
font-size: 13px
|
|
}
|
|
|
|
section.history .list>div>div {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex
|
|
}
|
|
|
|
.history .list>div>div>div:first-of-type {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
margin-right: 5px;
|
|
opacity: .65;
|
|
text-align: right
|
|
}
|
|
|
|
.history .list>div>div>div:last-of-type {
|
|
-webkit-box-flex: 2;
|
|
-ms-flex: 2;
|
|
flex: 2
|
|
}
|
|
|
|
.history .list>div>div>div:last-of-type span {
|
|
opacity: .65
|
|
}
|
|
|
|
.history .side {
|
|
margin-left: 40px;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1
|
|
}
|
|
|
|
.history .side .year-tally {
|
|
font-size: 14px;
|
|
opacity: .7;
|
|
margin: 25px 0 15px 0;
|
|
padding: 10px 10px 10px
|
|
}
|
|
|
|
.history .side .year-tally.active {
|
|
background-color: var(--active-secondary-50);
|
|
color: var(--active-secondary-text);
|
|
border-left: 3px solid var(--active-accent);
|
|
border-radius: 0 1rem 1rem 0;
|
|
opacity: 1
|
|
}
|
|
|
|
.history .side .year-tally:first-of-type {
|
|
margin-top: 0
|
|
}
|
|
|
|
.history .side .year-tally h2 {
|
|
border: none;
|
|
margin: 0 0 5px
|
|
}
|
|
|
|
.history .side .year-tally h2 span {
|
|
float: right;
|
|
font-size: 14px;
|
|
padding-top: 5px
|
|
}
|
|
|
|
.history .side .year-tally div {
|
|
display: table-row
|
|
}
|
|
|
|
.history .side .year-tally div div {
|
|
display: table-cell;
|
|
padding: 1px 3px;
|
|
vertical-align: middle
|
|
}
|
|
|
|
.history .side .year-tally div div:first-of-type {
|
|
text-align: right
|
|
}
|
|
|
|
.history .side .year-tally div div:nth-child(2) {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0;
|
|
flex: 0;
|
|
border-right: 2px solid #000;
|
|
padding: 0 5px 0 3px;
|
|
text-align: center;
|
|
min-width: 40px
|
|
}
|
|
|
|
.history .side .year-tally div 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);
|
|
padding: 4px 0;
|
|
width: 100%
|
|
}
|
|
|
|
.history .side .year-tally div div:last-child div {
|
|
-webkit-animation: width_in 1s ease-in-out;
|
|
animation: width_in 1s ease-in-out;
|
|
border: 2px solid #000;
|
|
border-left: none;
|
|
border-radius: 0 4px 4px 0;
|
|
display: block;
|
|
font-size: 14px;
|
|
height: 16px;
|
|
overflow: hidden;
|
|
text-align: left
|
|
}
|
|
|
|
@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
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@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
|
|
}
|
|
|
|
}
|
|
|
|
@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
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width:700px) {
|
|
.tabs a {
|
|
font-size:.8rem
|
|
}
|
|
|
|
.history {
|
|
display:block;
|
|
}
|
|
|
|
.history .side {
|
|
margin-left: 0;
|
|
margin-top: 50px
|
|
}
|
|
|
|
.game-item .game-info {
|
|
margin-left:8px
|
|
}
|
|
|
|
.game-item .game-info .box_2 {
|
|
margin-right:0
|
|
}
|
|
|
|
.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
|
|
display:block
|
|
}
|
|
|
|
.game-item .game-info .data .box_1 div {
|
|
display:inline-block;
|
|
margin-right:1%;
|
|
width:48%
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width:680px) {
|
|
.platform-card .bars a {
|
|
content:"";
|
|
font-size:.6rem;
|
|
}
|
|
|
|
.platform-card .abbr,.platform-card .title {
|
|
font-size:.8rem;
|
|
min-width:45px;
|
|
}
|
|
|
|
.platform-card .total {
|
|
font-size:.8rem;
|
|
}
|
|
|
|
.platform-card .total>span {
|
|
display:none;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width:600px) {
|
|
.library .unibar div {
|
|
font-size:3vw}
|
|
|
|
.library .unibar div:first-of-type span {
|
|
margin-right:.5rem}
|
|
}
|
|
|
|
@media screen and (max-width:520px) {
|
|
|
|
.game-item>summary:first-child>.text>.title {
|
|
font-size:1rem
|
|
}
|
|
|
|
.game-item>summary:first-child>.status {
|
|
padding:5px
|
|
}
|
|
|
|
}
|