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

Various catalog CSS work, including fixing thumbnail shadow being cut off and trying to make things more efficient.

Browse Source
This commit is contained in:
ccd0 2016-09-25 21:45:27 -07:00
parent 9c30295b8e
commit 573fba798f
7 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/burichan.css
View File

@ -31,10 +31,10 @@
} }
/* Catalog */ /* Catalog */
:root.burichan .catalog-thread:hover .post { :root.burichan .catalog-thread > .postContainer:hover > .post {
background-color: #D6DAF0; background-color: #D6DAF0;
} }
:root.burichan.werkTyme .catalog-thread:not(:hover), :root.burichan .catalog-thread:hover .post { :root.burichan.werkTyme .catalog-thread:not(:hover), :root.burichan .catalog-thread > .postContainer:hover > .post {
border-color: #B7C5D9; border-color: #B7C5D9;
} }

4
src/css/futaba.css
View File

@ -31,10 +31,10 @@
} }
/* Catalog */ /* Catalog */
:root.futaba .catalog-thread:hover .post { :root.futaba .catalog-thread > .postContainer:hover > .post {
background-color: #F0E0D6; background-color: #F0E0D6;
} }
:root.futaba.werkTyme .catalog-thread:not(:hover), :root.futaba .catalog-thread:hover .post { :root.futaba.werkTyme .catalog-thread:not(:hover), :root.futaba .catalog-thread > .postContainer:hover > .post {
border-color: #D9BFB7; border-color: #D9BFB7;
} }

4
src/css/photon.css
View File

@ -31,10 +31,10 @@
} }
/* Catalog */ /* Catalog */
:root.photon .catalog-thread:hover .post { :root.photon .catalog-thread > .postContainer:hover > .post {
background-color: #DDD; background-color: #DDD;
} }
:root.photon.werkTyme .catalog-thread:not(:hover), :root.photon .catalog-thread:hover .post { :root.photon.werkTyme .catalog-thread:not(:hover), :root.photon .catalog-thread > .postContainer:hover > .post {
border-color: #CCC; border-color: #CCC;
} }
:root.photon .catalog-code { :root.photon .catalog-code {

61
src/css/style.css
View File

@ -722,27 +722,44 @@ div[data-checked="false"] > .suboption-list {
div.catalog-thread { div.catalog-thread {
margin: 4px; margin: 4px;
} }
.catalog-thread > .postContainer { .catalog-small .catalog-thread {
overflow: hidden;
}
.catalog-small .catalog-thread,
.catalog-small .catalog-thread > .postContainer {
width: 165px; width: 165px;
height: 320px; height: 320px;
} }
.catalog-large .catalog-thread, .catalog-large .catalog-thread {
.catalog-large .catalog-thread > .postContainer {
width: 270px; width: 270px;
height: 410px; height: 410px;
} }
.catalog-thread .post { .catalog-thread > .postContainer {
margin: -1px; position: absolute;
border: 1px solid transparent; top: -4px;
left: 0;
right: 0;
bottom: 0;
} }
.catalog-thread:not(.noFile) .post { .catalog-thread > .postContainer:not(:hover) {
margin-top: -21px; overflow: hidden;
}
.catalog-thread > .postContainer:hover {
z-index: 1;
}
.catalog-thread .post {
position: absolute;
top: 4px;
left: 0;
right: 0;
margin: -21px -1px -1px;
border: 1px solid transparent;
padding-top: 20px; padding-top: 20px;
} }
.catalog-thread.noFile .post {
margin-top: -5px;
padding-top: 4px;
}
.catalog-thread > .postContainer:hover .post {
margin-left: -61px;
margin-right: -61px;
}
.catalog-link { .catalog-link {
display: block; display: block;
position: relative; position: relative;
@ -790,8 +807,8 @@ div.catalog-thread {
.catalog-thread blockquote { .catalog-thread blockquote {
margin: 0; margin: 0;
} }
#delform .catalog-thread:not(:hover) .file, #delform .catalog-thread > .postContainer:not(:hover) .file,
#delform .catalog-thread:not(:hover) .postInfo, #delform .catalog-thread > .postContainer:not(:hover) .postInfo,
#delform .catalog-thread > .postContainer > :not(.post), #delform .catalog-thread > .postContainer > :not(.post),
#delform .catalog-thread .file > :not(.fileText), #delform .catalog-thread .file > :not(.fileText),
#delform .catalog-thread .file > .fileText > :not(:first-child), #delform .catalog-thread .file > .fileText > :not(:first-child),
@ -803,9 +820,9 @@ div.catalog-thread {
} }
.catalog-thread .file { .catalog-thread .file {
position: absolute; position: absolute;
left: -60px; left: 0;
right: -60px; right: 0;
top: -20px; top: 0;
} }
.catalog-thread .fileText { .catalog-thread .fileText {
padding: 2px; padding: 2px;
@ -830,16 +847,6 @@ div.catalog-thread {
display: inline-block; display: inline-block;
font-style: italic; font-style: italic;
} }
.catalog-thread:hover {
z-index: 1;
}
.catalog-thread:hover > .postContainer {
overflow: visible;
}
.catalog-thread:hover .post {
margin-left: -61px;
margin-right: -61px;
}
.catalog-thread .prettyprinted { .catalog-thread .prettyprinted {
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;

4
src/css/tomorrow.css
View File

@ -30,10 +30,10 @@
} }
/* Catalog */ /* Catalog */
:root.tomorrow .catalog-thread:hover .post { :root.tomorrow .catalog-thread > .postContainer:hover > .post {
background-color: #282A2E; background-color: #282A2E;
} }
:root.tomorrow.werkTyme .catalog-thread:not(:hover), :root.tomorrow .catalog-thread:hover .post { :root.tomorrow.werkTyme .catalog-thread:not(:hover), :root.tomorrow .catalog-thread > .postContainer:hover > .post {
border-color: #111; border-color: #111;
} }
:root.tomorrow .catalog-code { :root.tomorrow .catalog-code {

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

@ -31,10 +31,10 @@
} }
/* Catalog */ /* Catalog */
:root.yotsuba-b .catalog-thread:hover .post { :root.yotsuba-b .catalog-thread > .postContainer:hover > .post {
background-color: #D6DAF0; background-color: #D6DAF0;
} }
:root.yotsuba-b.werkTyme .catalog-thread:not(:hover), :root.yotsuba-b .catalog-thread:hover .post { :root.yotsuba-b.werkTyme .catalog-thread:not(:hover), :root.yotsuba-b .catalog-thread > .postContainer:hover > .post {
border-color: #B7C5D9; border-color: #B7C5D9;
} }

4
src/css/yotsuba.css
View File

@ -31,10 +31,10 @@
} }
/* Catalog */ /* Catalog */
:root.yotsuba .catalog-thread:hover .post { :root.yotsuba .catalog-thread > .postContainer:hover > .post {
background-color: #F0E0D6; background-color: #F0E0D6;
} }
:root.yotsuba.werkTyme .catalog-thread:not(:hover), :root.yotsuba .catalog-thread:hover .post { :root.yotsuba.werkTyme .catalog-thread:not(:hover), :root.yotsuba .catalog-thread > .postContainer:hover > .post {
border-color: #D9BFB7; border-color: #D9BFB7;
} }