Change playcards to sumdets
This commit is contained in:
parent
16ffc10625
commit
cfd5b0ca34
2 changed files with 225 additions and 28 deletions
149
backloggery.css
149
backloggery.css
|
|
@ -85,10 +85,7 @@ img {
|
|||
h1,h2 {
|
||||
font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
|
||||
font-variant:small-caps;
|
||||
letter-spacing:2px
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing:2px;
|
||||
border-bottom:1px solid var(--active-text);
|
||||
font-size:18px;
|
||||
margin:30px 0 10px;
|
||||
|
|
@ -245,14 +242,17 @@ div.profile main {
|
|||
.game-item {
|
||||
margin-bottom:-3px;
|
||||
overflow:hidden;
|
||||
position:relative
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.game-item>div:first-child {
|
||||
.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;
|
||||
cursor: default;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
|
|
@ -268,13 +268,13 @@ div.profile main {
|
|||
width:100%
|
||||
}
|
||||
|
||||
.game-item>div:first-child>div {
|
||||
.game-item>summary:first-child>div {
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform {
|
||||
.game-item>summary:first-child>.platform {
|
||||
background-color:var(--active-secondary);
|
||||
border-radius:3px 0 0 3px;
|
||||
color:var(--active-secondary-text);
|
||||
|
|
@ -283,32 +283,32 @@ div.profile main {
|
|||
overflow:hidden
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img,.game-item>div:first-child>.platform p {
|
||||
.game-item>summary:first-child>.platform img,.game-item>summary:first-child>.platform p {
|
||||
opacity:.85
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img {
|
||||
.game-item>summary:first-child>.platform img {
|
||||
position:relative;
|
||||
top:7px;
|
||||
width:35px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img.bw {
|
||||
.game-item>summary:first-child>.platform img.bw {
|
||||
-webkit-filter:var(--platform-bw);
|
||||
filter:var(--platform-bw)
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status {
|
||||
.game-item>summary:first-child>.status {
|
||||
max-width:48px;
|
||||
padding:5px 9px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status img {
|
||||
.game-item>summary:first-child>.status img {
|
||||
margin-top:3px;
|
||||
max-width:32px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text {
|
||||
.game-item>summary:first-child>.text {
|
||||
-webkit-box-flex:5;
|
||||
-ms-flex-positive:5;
|
||||
flex-grow:5;
|
||||
|
|
@ -316,7 +316,7 @@ div.profile main {
|
|||
text-align:left
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text>.title {
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
font-family:Titillium Web,sans-serif;
|
||||
font-size:1.1rem;
|
||||
line-height:1.1rem;
|
||||
|
|
@ -324,7 +324,7 @@ div.profile main {
|
|||
}
|
||||
|
||||
@supports(-webkit-line-clamp:1) {
|
||||
.game-item>div:first-child>.text>.title {
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:normal;
|
||||
|
|
@ -336,7 +336,7 @@ div.profile main {
|
|||
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text>.markdown {
|
||||
.game-item>summary:first-child>.text>.markdown {
|
||||
font-size:.7rem;
|
||||
max-height:32px;
|
||||
opacity:.75;
|
||||
|
|
@ -348,7 +348,7 @@ div.profile main {
|
|||
}
|
||||
|
||||
@supports(-webkit-line-clamp:2) {
|
||||
.game-item>div:first-child>.text>.markdown {
|
||||
.game-item>summary:first-child>.text>.markdown {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:normal;
|
||||
|
|
@ -360,13 +360,13 @@ div.profile main {
|
|||
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.priority {
|
||||
.game-item>summary:first-child>.priority {
|
||||
max-width:56px;
|
||||
padding-right:10px;
|
||||
text-align:center
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.priority img {
|
||||
.game-item>summary:first-child>.priority img {
|
||||
margin-top:3px;
|
||||
max-width:32px;
|
||||
opacity:.5
|
||||
|
|
@ -374,11 +374,11 @@ div.profile main {
|
|||
|
||||
@media screen and (max-width:520px) {
|
||||
|
||||
.game-item>div:first-child>.text>.title {
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
font-size:1rem
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status {
|
||||
.game-item>summary:first-child>.status {
|
||||
padding:5px
|
||||
}
|
||||
|
||||
|
|
@ -756,3 +756,106 @@ div.profile main {
|
|||
.library .unibar div:first-of-type span {
|
||||
margin-right:.5rem}
|
||||
}
|
||||
|
||||
/* NEW */
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue