Fully working version (?)
This commit is contained in:
parent
4176cb113f
commit
9fe7dad24f
10 changed files with 474 additions and 196 deletions
|
|
@ -16,7 +16,7 @@ a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,inp
|
|||
--default-accent:#f58d47;
|
||||
--default-text:#fff;
|
||||
--default-secondary-text:#fff;
|
||||
--default-accent-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);
|
||||
|
|
@ -27,16 +27,11 @@ a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,inp
|
|||
--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
|
||||
--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 {
|
||||
|
|
@ -165,11 +160,7 @@ svg text {
|
|||
width:100%
|
||||
}
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
.tabs a {
|
||||
font-size:.8rem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.Added,.unplayed,.Unplayed {
|
||||
background-color:var(--unplayed-color)!important;
|
||||
|
|
@ -201,16 +192,8 @@ svg text {
|
|||
text-shadow:none
|
||||
}
|
||||
|
||||
.none,.None {
|
||||
background-color:var(--none-color)!important;
|
||||
text-shadow:none
|
||||
}
|
||||
|
||||
.none,.None,.Playing {
|
||||
color:hsla(0,0%,100%,.75)
|
||||
}
|
||||
|
||||
.Playing {
|
||||
color:hsla(0,0%,100%,.75)
|
||||
background-color:#202020!important
|
||||
}
|
||||
|
||||
|
|
@ -227,18 +210,6 @@ 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;
|
||||
|
|
@ -372,18 +343,6 @@ div.profile main {
|
|||
opacity:.5
|
||||
}
|
||||
|
||||
@media screen and (max-width:520px) {
|
||||
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
font-size:1rem
|
||||
}
|
||||
|
||||
.game-item>summary:first-child>.status {
|
||||
padding:5px
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.donut {
|
||||
display:block
|
||||
}
|
||||
|
|
@ -501,32 +460,6 @@ div.profile main {
|
|||
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;
|
||||
|
|
@ -676,41 +609,6 @@ div.profile main {
|
|||
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%}
|
||||
|
||||
|
|
@ -744,14 +642,6 @@ div.profile main {
|
|||
.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}
|
||||
}
|
||||
|
||||
.game-item .game-info {
|
||||
-webkit-box-align:start;
|
||||
-ms-flex-align:start;
|
||||
|
|
@ -827,28 +717,6 @@ div.profile main {
|
|||
opacity:.5
|
||||
}
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
.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%
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.history .box_1 {
|
||||
width: 95%;
|
||||
}
|
||||
|
|
@ -859,8 +727,6 @@ div.profile aside {
|
|||
position: sticky;
|
||||
}
|
||||
|
||||
/* NEW */
|
||||
|
||||
.library .filters {
|
||||
margin:.25rem 0 1.5rem;
|
||||
width:100%}
|
||||
|
|
@ -894,3 +760,314 @@ padding:.4rem 1rem .5rem}
|
|||
|
||||
.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: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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue