Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix efficiency problems with catalog hover CSS. #489

Browse Source
This commit is contained in:
ccd0 2016-09-21 15:25:52 -07:00
parent 452e28e70d
commit 1e9c453930
7 changed files with 27 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/burichan.css
View File

@ -31,7 +31,7 @@
} }
/* Catalog */ /* Catalog */
:root.burichan .catalog-thread:hover, :root.burichan .catalog-thread:hover > .comment { :root.burichan .catalog-thread:hover > * {
background-color: #D6DAF0; background-color: #D6DAF0;
border-color: #B7C5D9; border-color: #B7C5D9;
} }

2
src/css/futaba.css
View File

@ -31,7 +31,7 @@
} }
/* Catalog */ /* Catalog */
:root.futaba .catalog-thread:hover, :root.futaba .catalog-thread:hover > .comment { :root.futaba .catalog-thread:hover > * {
background-color: #F0E0D6; background-color: #F0E0D6;
border-color: #D9BFB7; border-color: #D9BFB7;
} }

2
src/css/photon.css
View File

@ -31,7 +31,7 @@
} }
/* Catalog */ /* Catalog */
:root.photon .catalog-thread:hover, :root.photon .catalog-thread:hover > .comment { :root.photon .catalog-thread:hover > * {
background-color: #DDD; background-color: #DDD;
border-color: #CCC; border-color: #CCC;
} }

53
src/css/style.css
View File

@ -712,30 +712,25 @@ div[data-checked="false"] > .suboption-list {
text-align: center; text-align: center;
} }
.catalog-thread { .catalog-thread {
display: -webkit-inline-flex; display: inline-block;
display: inline-flex; text-align: center;
text-align: left;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
margin: 0 2px 5px; margin: 0 2px 5px;
word-wrap: break-word; word-wrap: break-word;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
overflow: hidden;
} }
.catalog-thread > a { .catalog-thread > a {
flex-shrink: 0; display: block;
-webkit-flex-shrink: 0;
position: relative; position: relative;
} }
.catalog-small .catalog-thread { .catalog-small .catalog-thread {
width: 165px; width: 165px;
max-height: 320px; height: 320px;
} }
.catalog-large .catalog-thread { .catalog-large .catalog-thread {
width: 270px; width: 270px;
max-height: 410px; height: 410px;
} }
.catalog-thumb { .catalog-thumb {
border-radius: 2px; border-radius: 2px;
@ -771,45 +766,39 @@ div[data-checked="false"] > .suboption-list {
line-height: 11px; line-height: 11px;
} }
.catalog-stats { .catalog-stats {
-webkit-flex-shrink: 0;
flex-shrink: 0;
cursor: help; cursor: help;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
margin-top: 2px; padding-top: 2px;
} }
.catalog-thread > .subject { .catalog-thread > .subject {
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-align-self: stretch;
align-self: stretch;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
} }
.catalog-thread > .comment { .catalog-thread > .comment {
-webkit-flex-shrink: 1;
flex-shrink: 1;
-webkit-align-self: stretch;
align-self: stretch;
overflow: hidden;
text-align: center; text-align: center;
margin: 0; margin: 0;
} }
[name="delform"], .board, .catalog-thread, .catalog-thread:hover > .comment { [name="delform"], .board, .catalog-thread, .catalog-thread:hover > * {
background-color: inherit; background-color: inherit;
} }
.catalog-thread:hover { .catalog-thread:hover {
margin: -1px 1px 4px; overflow: visible;
border: 1px solid transparent;
z-index: 1; z-index: 1;
} }
.catalog-thread:hover > .comment { .catalog-thread:hover > * {
margin: 0 -1px -1px; margin: 0 -1px;
border: 1px solid transparent; border-left: 1px solid transparent;
border-top: none; border-right: 1px solid transparent;
-webkit-flex-shrink: 0; }
flex-shrink: 0; .catalog-thread:hover > :first-child {
margin-top: -1px;
border-top: 1px solid transparent;
}
.catalog-thread:hover > :last-child {
margin-bottom: -1px;
border-bottom: 1px solid transparent;
} }
/* /tg/ dice rolls */ /* /tg/ dice rolls */
.board_tg .catalog-thread > .comment > b { .board_tg .catalog-thread > .comment > b {

2
src/css/tomorrow.css
View File

@ -30,7 +30,7 @@
} }
/* Catalog */ /* Catalog */
:root.tomorrow .catalog-thread:hover, :root.tomorrow .catalog-thread:hover > .comment { :root.tomorrow .catalog-thread:hover > * {
background-color: #282A2E; background-color: #282A2E;
border-color: #111; border-color: #111;
} }

2
src/css/yotsuba-b.css
View File

@ -31,7 +31,7 @@
} }
/* Catalog */ /* Catalog */
:root.yotsuba-b .catalog-thread:hover, :root.yotsuba-b .catalog-thread:hover > .comment { :root.yotsuba-b .catalog-thread:hover > * {
background-color: #D6DAF0; background-color: #D6DAF0;
border-color: #B7C5D9; border-color: #B7C5D9;
} }

2
src/css/yotsuba.css
View File

@ -31,7 +31,7 @@
} }
/* Catalog */ /* Catalog */
:root.yotsuba .catalog-thread:hover, :root.yotsuba .catalog-thread:hover > .comment { :root.yotsuba .catalog-thread:hover > * {
background-color: #F0E0D6; background-color: #F0E0D6;
border-color: #D9BFB7; border-color: #D9BFB7;
} }