mirror of https://gitgud.io/fatchan/jschan.git
Themes for jschan See merge request fatchan/jschan!289indiachan-spamvector
commit
c2fbc81460
12 changed files with 1086 additions and 0 deletions
Binary file not shown.
|
After Width: | Height: | Size: 573 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
@ -0,0 +1,347 @@ |
||||
/* with love from ptchan */ |
||||
|
||||
:root { |
||||
/* light theme colors */ |
||||
--bg: #f7f8fa; |
||||
--bg-light: #fff; |
||||
--bg-dark: #f3f4f6; |
||||
--fg: #292d31; |
||||
--fg-dark: #24292e; |
||||
--fg-light: #6e7781; |
||||
--selection: #d0d7de; |
||||
--selection-dark: #cdd0d4; |
||||
--blue: #0969da; |
||||
--blue-light: #0072f3; |
||||
--green: #2da44e; |
||||
--orange: #e36209; |
||||
--pink: #ff5fba; |
||||
--red: #d73a49; |
||||
--red-light: #da4a59; |
||||
--yellow: #e3ca09; |
||||
|
||||
/* navbar and green btn colors, dark and light themes share these elements */ |
||||
--bg-navbar: #24292f; |
||||
--fg-navbar: #fff; |
||||
--fg-navbar-hover: #b1bac4; |
||||
--bg-btn-primary: #2da44e; |
||||
--bg-btn-primary-hover: #2c974b; |
||||
--text-btn-primary: #fff; |
||||
--border-btn-primary: rgba(27, 31, 36, 0.15); |
||||
--shadow-btn-primary: 0 1px 0 rgba(27, 31, 36, 0.1); |
||||
--shadow-inset-btn-primary: inset 0 1px 0 rgba(255, 255, 255, 0.03); |
||||
|
||||
/* main colors assignment */ |
||||
--darken: var(--bg-dark); |
||||
--hr: var(--selection); |
||||
--navbar-color: var(--bg-navbar); |
||||
--background-top: var(--bg); |
||||
--background-rest: var(--bg); |
||||
--post-color: var(--bg-light); |
||||
--post-outline-color: var(--selection); |
||||
--highlighted-post-color: var(--bg-light); |
||||
--highlighted-post-outline-color: var(--selection); |
||||
--label-color: var(--bg-dark); |
||||
--box-border-color: var(--selection); |
||||
--alt-label-color: var(--bg); |
||||
--alt-font-color: var(--fg); |
||||
--input-color: var(--fg); |
||||
--input-borders: var(--selection); |
||||
--input-background: var(--bg-light); |
||||
--board-title: var(--fg-dark); |
||||
--title-color: var(--red-light); |
||||
--font-color: var(--fg); |
||||
--name-color: var(--blue); |
||||
--subject-color: var(--fg-dark); |
||||
--link-color: var(--fg-dark); |
||||
--link-hover: var(--blue); |
||||
--post-link-color: var(--fg-dark); |
||||
--dice-color: var(--orange); |
||||
--greentext-color: var(--green); |
||||
--pinktext-color: var(--pink); |
||||
--capcode-color: var(--red); |
||||
--icon-color: saturate(100%) hue-rotate(2deg) brightness(95%) contrast(100%); |
||||
} |
||||
|
||||
@media (prefers-color-scheme: dark) { |
||||
:root { |
||||
/* dark theme colors */ |
||||
--bg: #010409; |
||||
--bg-light: #0d1117; |
||||
--bg-dark: #21262d; |
||||
--fg: #ededf0; |
||||
--fg-dark: #fff; |
||||
--fg-light: #b1bac4; |
||||
--selection: #30363d; |
||||
--blue: #58a6ff; |
||||
--blue-light: #79c0ff; |
||||
--green: #56d364; |
||||
--orange: #d29922; |
||||
--pink: #d2a8ff; |
||||
--red: #ff7b72; |
||||
--red-light: #ffa198; |
||||
--yellow: #e3b341; |
||||
} |
||||
} |
||||
|
||||
#action-menu, |
||||
#customflag, |
||||
#dragHandle, |
||||
#float, |
||||
#livetext, |
||||
#postform, |
||||
#threadstats, |
||||
#threadwatcher, |
||||
.bottom-reply, |
||||
.captcha, |
||||
.catalog-tile, |
||||
.close, |
||||
.collapse, |
||||
.modal, |
||||
.pages, |
||||
.post-container, |
||||
.stickynav, |
||||
input[type=submit] { |
||||
border-radius: 6px !important |
||||
} |
||||
|
||||
.file-thumb, |
||||
.post-file-src * { |
||||
border-radius: 5px |
||||
} |
||||
|
||||
#float { |
||||
box-shadow: none !important |
||||
} |
||||
|
||||
/* darker post-info */ |
||||
.post-container.highlighted .post-info, |
||||
.post-container:target, |
||||
.post-info { |
||||
background: var(--darken); |
||||
margin: -6.5px -6.5px 5px -6.5px; |
||||
border-bottom: 1px solid var(--post-outline-color); |
||||
border-radius: 6px 6px 0 0 |
||||
} |
||||
|
||||
/* darker post-info */ |
||||
@media screen and (min-width:900px) { |
||||
.container { |
||||
width: 78vw; |
||||
margin: 0 auto |
||||
} |
||||
|
||||
/* exceptions */ |
||||
.navbar, |
||||
.main>.container { |
||||
width: 100% |
||||
} |
||||
} |
||||
|
||||
a { |
||||
font-style: italic |
||||
} |
||||
|
||||
/* better highlight */ |
||||
#float, |
||||
.anchor:target+.catalog-tile, |
||||
.anchor:target+.post-container, |
||||
.anchor:target+table, |
||||
.anchor:target+table tbody tr th, |
||||
.post-container.highlighted, |
||||
.post-container.hoverhighlighted { |
||||
outline: 2px solid var(--blue-light) |
||||
} |
||||
|
||||
input:focus, |
||||
select:focus, |
||||
textarea:focus { |
||||
background: var(--highlighted-post-color); |
||||
border: 2px solid var(--blue-light) |
||||
} |
||||
|
||||
/* post menu fixes */ |
||||
.postmenu { |
||||
border: solid var(--font-color); |
||||
border-width: 0 1px 1px 0; |
||||
background: 0 0 |
||||
} |
||||
|
||||
.postmenu:hover { |
||||
border: solid var(--link-hover); |
||||
border-width: 0 1px 1px 0; |
||||
background: 0 0 |
||||
} |
||||
|
||||
.postmenu:focus { |
||||
border: solid var(--font-color); |
||||
border-width: 0 1px 1px 0; |
||||
background: 0 0 |
||||
} |
||||
|
||||
/* files box */ |
||||
.filelabel { |
||||
background: var(--highlighted-post-color); |
||||
border: 2px dashed var(--blue-light) |
||||
} |
||||
|
||||
/* big title */ |
||||
.board-title { |
||||
font-size: 55px |
||||
} |
||||
|
||||
/* navbar */ |
||||
.navbar { |
||||
border: 0; |
||||
box-shadow: none |
||||
} |
||||
|
||||
.stickynav { |
||||
background: var(--bg-navbar); |
||||
border: 0; |
||||
box-shadow: none |
||||
} |
||||
|
||||
a.nav-item { |
||||
color: var(--fg-navbar); |
||||
|
||||
font-weight: bold; |
||||
/* overwrites italic from links */ |
||||
font-style: normal !important |
||||
} |
||||
|
||||
a.nav-item:hover { |
||||
color: var(--fg-navbar-hover) !important |
||||
} |
||||
|
||||
|
||||
/* primary buttons */ |
||||
.bottom-reply.no-decoration, |
||||
.collapse.no-decoration, |
||||
.expand-omitted, |
||||
input[type=submit] { |
||||
background: var(--bg-btn-primary); |
||||
border-color: var(--border-btn-primary); |
||||
color: var(--text-btn-primary); |
||||
box-shadow: var(--shadow-btn-primary), var(--shadow-inset-btn-primary); |
||||
transition: .2s cubic-bezier(.3, 0, .5, 1); |
||||
transition-property: color, background-color, border-color; |
||||
|
||||
font-weight: bold; |
||||
/* overwrites italic from links */ |
||||
font-style: normal !important |
||||
} |
||||
|
||||
.bottom-reply.no-decoration:hover, |
||||
.collapse.no-decoration:hover, |
||||
.expand-omitted:hover, |
||||
input[type=submit]:hover { |
||||
background: var(--bg-btn-primary-hover); |
||||
/* overwrites blue from links hover */ |
||||
color: var(--text-btn-primary) !important |
||||
} |
||||
|
||||
/* grey buttons */ |
||||
#action-menu, |
||||
.close, |
||||
.pages, |
||||
.collapse { |
||||
background: var(--bg-light); |
||||
border-color: var(--selection); |
||||
box-shadow: var(--shadow-btn-primary), var(--shadow-inset-btn-primary); |
||||
transition: .2s cubic-bezier(.3, 0, .5, 1); |
||||
transition-property: color, background-color, border-color; |
||||
} |
||||
|
||||
#action-menu:hover, |
||||
.close:hover, |
||||
.pages:hover, |
||||
.collapse:hover { |
||||
background: var(--bg-dark); |
||||
} |
||||
|
||||
/* dimmed info display */ |
||||
#livetext, |
||||
#threadstats { |
||||
background: 0 0; |
||||
border: none |
||||
} |
||||
|
||||
#livetext, |
||||
#threadstats, |
||||
.board-description, |
||||
.cb, |
||||
.edited, |
||||
.footer, |
||||
.post-date, |
||||
.post-file-info, |
||||
.replies { |
||||
color: var(--fg-light) |
||||
} |
||||
|
||||
/* tables style */ |
||||
table { |
||||
border-collapse: separate; |
||||
border-radius: 6px; |
||||
} |
||||
|
||||
td { |
||||
border-top: 1px solid var(--post-outline-color); |
||||
border-left: 1px solid var(--post-outline-color); |
||||
} |
||||
|
||||
td:first-child, |
||||
th:first-child { |
||||
border-left: none; |
||||
} |
||||
|
||||
|
||||
/* table exceptions */ |
||||
table.boardtable.w900 td:last-child { |
||||
background-color: unset !important; |
||||
text-shadow: unset; |
||||
color: var(--font-color) !important; |
||||
} |
||||
|
||||
#hotposts, |
||||
#hotposts td, |
||||
#hotposts tr { |
||||
border: none; |
||||
background: none; |
||||
} |
||||
|
||||
/* forms (post form and threadwatcher) */ |
||||
.modal, |
||||
#postform, |
||||
#threadwatcher { |
||||
background-color: var(--bg-light); |
||||
outline: 2px solid var(--blue-light); |
||||
} |
||||
|
||||
.label { |
||||
border-radius: 6px 0px 0px 6px !important; |
||||
} |
||||
|
||||
input[type="text"], |
||||
input[type="password"], |
||||
select:not(.postmenu), |
||||
#message, |
||||
#postpassword, |
||||
.filelabel { |
||||
border-radius: 0px 6px 6px 0px !important; |
||||
} |
||||
|
||||
#postform-dragHandle, |
||||
#threadwatcher-dragHandle { |
||||
margin-bottom: 4px; |
||||
border-radius: 6px; |
||||
background-color: var(--bg); |
||||
padding: 5px; |
||||
} |
||||
|
||||
#submitpost { |
||||
margin-top: 6px; |
||||
} |
||||
|
||||
.rlabel { |
||||
border-radius: 0px 6px 6px 0px; |
||||
} |
||||
@ -0,0 +1,311 @@ |
||||
:root { |
||||
--icon-color: invert(97%)sepia(32%)saturate(5790%)hue-rotate(318deg)brightness(107%)contrast(93%); |
||||
--alt-label-color: #98E; |
||||
--alt-font-color: black; |
||||
--background-top: #aaa2d8; |
||||
--background-rest: #e4e4f9; |
||||
--navbar-color: #aaa2d8; |
||||
--post-color: #D6DAF0; |
||||
--post-outline-color: #B7C5D9; |
||||
--label-color: #98E; |
||||
--box-border-color: #000; |
||||
--darken: #00000010; |
||||
--highlighted-post-color: #583582; |
||||
--highlighted-post-outline-color: #ba9dbf; |
||||
--board-title: #f85088; |
||||
--hr: #f6d453; |
||||
--font-color: white; |
||||
--name-color: #3fb700; |
||||
--capcode-color: #fbe65d; |
||||
--subject-color: #d478a1; |
||||
--link-color: #f6d453; |
||||
--post-link-color: #f6d453; |
||||
--link-hover: #e9758e; |
||||
--input-borders: #a9a9a9; |
||||
--input-color: #000; |
||||
--input-background: white; |
||||
--dice-color: #e85c61; |
||||
--title-color: #d70000; |
||||
--greentext-color: #4cff00; |
||||
--pinktext-color: #f5e33c; |
||||
} |
||||
|
||||
#action-menu, #float .post-container, #livetext, #threadstats, .bottom-reply, .catalog-tile, .collapse, .pages, .post-container, .stickynav { |
||||
border-width: 0px 4px 4px 0px; |
||||
border: outset; |
||||
border-color: #a590ce; |
||||
} |
||||
|
||||
.post-container { |
||||
padding: 0.25em; |
||||
max-width: 100%; |
||||
background: #8570af; |
||||
text-shadow: 1px 1px black; |
||||
} |
||||
#action-menu, #float .post-container, #livetext, #threadstats, .bottom-reply, .catalog-tile, .collapse, .pages, .post-container, .stickynav { |
||||
border-width: 0px 4px 4px 0px; |
||||
border: outset; |
||||
border-color: #a590ce; |
||||
background: #8570af; |
||||
} |
||||
.post-container.op { |
||||
max-width: max-content; |
||||
background: #8570afab; |
||||
border: outset; |
||||
border-width: 0px 4px 4px 0px; |
||||
border-color: #a590ce; |
||||
} |
||||
body { |
||||
font-family: pc-9800; |
||||
font-size: 11pt; |
||||
color: var(--font-color); |
||||
background: #a590ce no-repeat; |
||||
background-image: linear-gradient(45deg, #a590ceeb, #a590ceeb), url(/css/themes/assets/digi-bg1.png); |
||||
background-repeat: no-repeat, repeat, repeat; |
||||
background-position: bottom right,top, bottom; |
||||
background-attachment: fixed, scroll, scroll; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 100vh; |
||||
margin: 0; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: pc-9800; |
||||
src: url(/css/themes/assets/pc-9800.ttf); |
||||
} |
||||
.board-description { |
||||
text-align: center; |
||||
margin: 0; |
||||
font-size: 150%; |
||||
text-shadow: 1px 1px 1px white; |
||||
color: #452981; |
||||
font-family: 'pc-9800'; |
||||
animation: flip 4s infinite; |
||||
} |
||||
|
||||
@keyframes flip { |
||||
0%,80% {transform: rotateY(360deg) |
||||
} |
||||
} |
||||
|
||||
.board-title { |
||||
color: var(--board-title); |
||||
letter-spacing: -2px; |
||||
text-align: center; |
||||
margin: 0; |
||||
text-shadow: 1px 1px 1px white; |
||||
font-weight: bolder; |
||||
font-size: 420%; |
||||
} |
||||
|
||||
.board-banner { |
||||
margin: 10px; |
||||
max-width: 100%; |
||||
min-width: 300px; |
||||
border-radius: 30px; |
||||
border: 5px ridge #db749f; |
||||
border-top: 0px; |
||||
height: fit-content !important; |
||||
} |
||||
|
||||
.post-message { |
||||
text-align: left; |
||||
font-family: pc-9800; |
||||
font-size: 12pt; |
||||
padding-top: 5pt; |
||||
} |
||||
|
||||
.post-info { |
||||
margin: -5px -5px 0 -5px; |
||||
padding: 5px; |
||||
padding-left: 3px; |
||||
display: block; |
||||
overflow-wrap: break-word; |
||||
font-family: 'pc-9800'; |
||||
font-size: 12pt; |
||||
} |
||||
|
||||
.file-thumb { |
||||
object-fit: contain; |
||||
max-width: var(--thumbnail-size); |
||||
max-height: var(--thumbnail-size); |
||||
border: 4px inset #8570af; |
||||
} |
||||
|
||||
.footer { |
||||
text-align: center; |
||||
flex-shrink: 0; |
||||
margin-top: auto; |
||||
line-height: 1.5em; |
||||
background: #00000047; |
||||
} |
||||
|
||||
.form-post { |
||||
display: flex; |
||||
flex-direction: column; |
||||
max-width: 100%; |
||||
text-shadow: 1px 1px 1px black; |
||||
border: 4px outset #a590ce; |
||||
background-repeat: repeat; |
||||
background-image: linear-gradient(45deg, #8570afcc, #8570afcc), url(/css/themes/assets/digi-bg2.png); |
||||
} |
||||
|
||||
#postform, #threadwatcher { |
||||
display: none; |
||||
max-width: calc(100% - 10px); |
||||
max-height: calc(100% - 50px); |
||||
position: fixed; |
||||
top: 3.5em; |
||||
right: 5px; |
||||
background-color: var(--post-color); |
||||
z-index: 2; |
||||
box-sizing: border-box; |
||||
overflow-y: auto; |
||||
border: 4px outset #a590ce; |
||||
} |
||||
|
||||
.navbar { |
||||
background: #aaa2d8; |
||||
position: fixed; |
||||
width: 100%; |
||||
z-index: 2; |
||||
top: 0; |
||||
border-bottom: 4px outset #a590ce; |
||||
text-shadow: 1px 1px 1px black; |
||||
font-family: 'pc-9800'; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.text-center.no-m-p.post-message { |
||||
white-space: break-spaces; |
||||
background: #e7d6e8; |
||||
font-family: cursive !important; |
||||
max-width: max-content; |
||||
color: #e1277b; |
||||
text-shadow: 2px 2px 0px white; |
||||
margin: auto; |
||||
font-weight: bold; |
||||
padding: 10px; |
||||
border: ridge 5px #db749f; |
||||
border-radius: 30px; |
||||
font-size: 120% !important; |
||||
text-align: center; |
||||
} |
||||
|
||||
div.modal { |
||||
background: #8570AF; |
||||
} |
||||
|
||||
option { |
||||
background: #8570AF; |
||||
font-family: pc-9800; |
||||
} |
||||
|
||||
.stickynav { |
||||
bottom: 5px; |
||||
right: 5px; |
||||
position: fixed; |
||||
z-index: 1; |
||||
background: #8570af8f !important; |
||||
} |
||||
|
||||
.postform-style { |
||||
display: flex; |
||||
background: #9988ee; |
||||
align-items: center; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
#action-menu, #float .post-container, #livetext, #threadstats, .bottom-reply, .catalog-tile, .collapse, .pages, .stickynav { |
||||
border-width: 0px 4px 4px 0px; |
||||
border: outset; |
||||
border-color: #a590ce; |
||||
background: #8570af; |
||||
text-shadow: 1px 1px 1px black; |
||||
} |
||||
|
||||
.post-capcode { |
||||
font-weight: 700; |
||||
color: var(--capcode-color); |
||||
font-family: pc-9800; |
||||
} |
||||
|
||||
.you:after { |
||||
margin-left: 3px; |
||||
font-weight: lighter; |
||||
font-style: italic; |
||||
} |
||||
|
||||
.catalog-tile { |
||||
padding: 5px; |
||||
margin: 5px; |
||||
text-align: center; |
||||
height: 300px; |
||||
width: 480px; |
||||
overflow: auto; |
||||
box-sizing: border-box; |
||||
flex-grow: 1; |
||||
max-width: 300px; |
||||
} |
||||
|
||||
table { |
||||
border-spacing: 0; |
||||
width: 700px; |
||||
border-width: 0px 4px 4px 0px; |
||||
border: outset; |
||||
border-color: #a590ce; |
||||
background: #8570af; |
||||
text-shadow: 1px 1px 1px black; |
||||
} |
||||
|
||||
hr { |
||||
border-width: 2px medium medium; |
||||
border-style: dashed none none; |
||||
margin: 9px 0; |
||||
} |
||||
.floatactions[open] { |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
display: inline-flex; |
||||
flex-direction: column; |
||||
max-width: calc(100% - 10px); |
||||
max-height: calc(100% - 50px); |
||||
position: fixed; |
||||
background-color: #5f5b79; |
||||
box-sizing: border-box; |
||||
align-self: center; |
||||
overflow: auto; |
||||
} |
||||
|
||||
html, *, .dummy-link, .invalid-quote,#postform-dragHandle,#threadwatcher-dragHandle, th { |
||||
cursor: url(/css/themes/assets/digi-cursor.png), default; |
||||
} |
||||
|
||||
.post-file-info { |
||||
text-align: center; |
||||
margin: 2px; |
||||
margin-top: 2px; |
||||
margin-top: 0; |
||||
width: 100%; |
||||
max-width: var(--thumbnail-size); |
||||
font-size: 10pt; |
||||
} |
||||
|
||||
.code, .mono { |
||||
background: var(--darken); |
||||
padding: 2px; |
||||
font-family: monospace; |
||||
max-width: calc(100vw - 50px); |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.customflag, .customflag::before, .flag { |
||||
vertical-align: unset; |
||||
} |
||||
|
||||
input[type="text"] { |
||||
font-family: pc-9800; |
||||
} |
||||
@ -0,0 +1,141 @@ |
||||
/* with love from ptchan */ |
||||
|
||||
:root { |
||||
--icon-color: invert(17%) sepia(89%) saturate(7057%) hue-rotate(2deg) brightness(93%) contrast(120%); |
||||
--alt-label-color: #d6f0da; |
||||
--alt-font-color: #333; |
||||
--background-top: #eefff2; |
||||
--background-rest: #eefff2; |
||||
--navbar-color: #d6f0da; |
||||
--post-color: #d6f0da; |
||||
--post-outline-color: transparent; |
||||
--label-color: #d6f0da; |
||||
--box-border-color: #d6f0da; |
||||
--darken: #0000000f; |
||||
--highlighted-post-color: #d6bad0; |
||||
--highlighted-post-outline-color: transparent; |
||||
--board-title: #b90000; |
||||
--hr: #DDD; |
||||
--font-color: #333; |
||||
--name-color: #117743; |
||||
--capcode-color: #f00; |
||||
--subject-color: #004A99; |
||||
--link-color: #34345c; |
||||
--post-link-color: #34345c; |
||||
--link-hover: #8d0000; |
||||
--input-borders: #d2d2d2; |
||||
--input-color: #333; |
||||
--input-background: #f5f5f5; |
||||
--dice-color: maroon; |
||||
--title-color: #d70000; |
||||
--greentext-color: #789922; |
||||
--pinktext-color: #E0727F; |
||||
} |
||||
|
||||
.post-container, #float .post-container, .stickynav, .pages, .toggle-summary, .catalog-tile, #livetext, #threadstats { |
||||
border-width: 0 1px 1px 0; |
||||
} |
||||
a.quote { |
||||
color:var(--post-link-color); |
||||
} |
||||
|
||||
.alt { |
||||
background: var(--label-color); |
||||
color: var(--font-color); |
||||
} |
||||
|
||||
td, th { |
||||
padding: 5px; |
||||
overflow-wrap: anywhere; |
||||
padding: 6px; |
||||
} |
||||
|
||||
table { |
||||
background: var(--background-rest); |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
#float .post-container, #livetext, #threadstats, .catalog-tile, .pages, .post-container, .stickynav, .toggle-summary { |
||||
border-width: 1px 1px 1px 1px; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.post-container { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.toggle-summary { |
||||
padding: 13px; |
||||
} |
||||
|
||||
#postform { |
||||
|
||||
border-radius: 5px; |
||||
} |
||||
|
||||
#dragHandle { |
||||
|
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.label, .rlabel { |
||||
border: none; |
||||
border-radius: 5px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.modal { |
||||
|
||||
border-radius: 5px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.post-date{ |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
img { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
video { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
@media only screen and (max-width: 600px) { |
||||
.post-info { |
||||
background: var(--darken); |
||||
margin: -6.5px -6.5px 5px -6.5px; |
||||
border-bottom: 1px solid var(--post-outline-color); |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.container { |
||||
padding: 5px; |
||||
|
||||
} |
||||
} |
||||
|
||||
.user-id { |
||||
text-shadow: none; |
||||
color: #fff; |
||||
padding: 1px 5px; |
||||
border: none; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.bottom-reply { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.collapse { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
body { |
||||
background: url(/css/themes/assets/favela-bg.jpg) repeat 0 0 azure |
||||
} |
||||
|
||||
hr { |
||||
border-top: 1px solid var(--post-color); |
||||
} |
||||
@ -0,0 +1,138 @@ |
||||
/* from ptchan with love */ |
||||
|
||||
:root { |
||||
--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%); |
||||
--alt-label-color: #800; |
||||
--alt-font-color: #fff; |
||||
--background-top: #fed6af90; |
||||
--background-rest: #ffe; |
||||
--navbar-color: #f0e0d6; |
||||
--post-color: #f0e0d6; |
||||
--post-outline-color: #d9bfb7; |
||||
--label-color: #EA8; |
||||
--box-border-color: #000; |
||||
--darken: #ead6ca; |
||||
--highlighted-post-color: #f0c0b0; |
||||
--highlighted-post-outline-color: #d99f91; |
||||
--board-title: #af0a0f; |
||||
--hr: #D9BFB7; |
||||
--font-color: #800000; |
||||
--name-color: #117743; |
||||
--capcode-color: #f00; |
||||
--subject-color: #f00; |
||||
--link-color: #800; |
||||
--post-link-color: navy; |
||||
--link-hover: #f00; |
||||
--input-borders: #a9a9a9; |
||||
--input-color: #000; |
||||
--input-background: white; |
||||
--dice-color: darkorange; |
||||
--title-color: #d70000; |
||||
--greentext-color: #789922; |
||||
--pinktext-color:#E0727F; |
||||
} |
||||
|
||||
.post-container, #float .post-container, .stickynav, .pages, .toggle-summary, .catalog-tile, #livetext, #threadstats { |
||||
border-width: 0 1px 1px 0; |
||||
} |
||||
a.quote { |
||||
color:var(--post-link-color); |
||||
} |
||||
|
||||
.alt { |
||||
background: var(--label-color); |
||||
color: var(--font-color); |
||||
} |
||||
|
||||
td, th { |
||||
padding: 5px; |
||||
overflow-wrap: anywhere; |
||||
padding: 6px; |
||||
} |
||||
|
||||
table { |
||||
background: var(--background-rest); |
||||
border: 1px solid var(--highlighted-post-color); |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
#float .post-container, #livetext, #threadstats, .catalog-tile, .pages, .post-container, .stickynav, .toggle-summary { |
||||
border-width: 1px 1px 1px 1px; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.post-container { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.toggle-summary { |
||||
padding: 13px; |
||||
} |
||||
|
||||
#postform { |
||||
|
||||
border-radius: 5px; |
||||
} |
||||
|
||||
#dragHandle { |
||||
|
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.label, .rlabel { |
||||
border: none; |
||||
border-radius: 5px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.modal { |
||||
|
||||
border-radius: 5px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.post-date{ |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
img { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
video { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
@media only screen and (max-width: 600px) { |
||||
.post-info { |
||||
background: var(--darken); |
||||
margin: -6.5px -6.5px 5px -6.5px; |
||||
border-bottom: 1px solid var(--post-outline-color); |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.container { |
||||
padding: 5px; |
||||
|
||||
} |
||||
} |
||||
|
||||
.user-id { |
||||
text-shadow: none; |
||||
color: #fff; |
||||
padding: 1px 5px; |
||||
border: none; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.bottom-reply { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.collapse { |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
body { |
||||
background: url(/css/themes/assets/ptchan-bg.png) repeat 0 0 #ffe |
||||
} |
||||
@ -0,0 +1,149 @@ |
||||
/* from ptchan with love */ |
||||
|
||||
:root { |
||||
--icon-color: invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%); |
||||
--alt-label-color: #040404; |
||||
--alt-font-color: #e8eaf6; |
||||
--background-top: #000; |
||||
--background-rest: #000; |
||||
--navbar-color: #040404; |
||||
--post-color: #000; |
||||
--post-outline-color: #111; |
||||
--label-color: #040404; |
||||
--box-border-color: #111; |
||||
--darken: #040404; |
||||
--highlighted-post-color: #000; |
||||
--highlighted-post-outline-color: #444; |
||||
--board-title: #e8eaf6; |
||||
--hr: #040404; |
||||
--font-color: #e8eaf6; |
||||
--name-color: #e8eaf6; |
||||
--capcode-color: #f00; |
||||
--subject-color: #b294bb; |
||||
--link-color: white; |
||||
--post-link-color: #5f89ac; |
||||
--link-hover: #81a2be; |
||||
--input-borders: #111; |
||||
--input-color: #e8eaf6; |
||||
--input-background: #040404; |
||||
--dice-color: darkorange; |
||||
--title-color: #d70000; |
||||
--greentext-color: lime; |
||||
--pinktext-color: magenta; |
||||
} |
||||
|
||||
.spoiler { |
||||
background: gray; |
||||
color: azuregray; |
||||
} |
||||
|
||||
.spoiler:not(:hover) * { |
||||
color: gray; |
||||
background: gray !important; |
||||
} |
||||
|
||||
.post-info, .post-container:target .post-info, .post-container.highlighted .post-info { |
||||
background: none !important; |
||||
border: none !important |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: VCR OSD Mono; |
||||
src: url(/css/themes/assets/VCR-OSD-Mono.ttf); |
||||
} |
||||
|
||||
* { |
||||
font-family: 'VCR OSD Mono', sans-serif !important; |
||||
} |
||||
|
||||
body { |
||||
background: black !important; |
||||
width: 80%; |
||||
margin: auto; |
||||
font-size: medium; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none !important; |
||||
color: var(--link-color) !important; |
||||
} |
||||
|
||||
th { |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
tr:nth-child(2n) * { |
||||
color: yellow; |
||||
} |
||||
|
||||
.bold { |
||||
color: var(--link-color) !important; |
||||
} |
||||
|
||||
.navbar { |
||||
width: inherit; |
||||
} |
||||
|
||||
.navbar .nav-item { |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.board-title { |
||||
background-color: black; |
||||
color: white; |
||||
text-transform: uppercase; |
||||
border: 6px solid red; |
||||
width: 60%; |
||||
margin: auto; |
||||
letter-spacing: 0.5em; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.no-m-p { |
||||
background-color: blue; |
||||
color: var(--font-color) !important; |
||||
padding: 10px 10px; |
||||
} |
||||
|
||||
.footer { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
align-content: space-between; |
||||
justify-content: space-between; |
||||
background-color: black; |
||||
font-size: 0; /* This a trick used to hide the bullet points that aren't encapsulated by tags */ |
||||
line-height: normal; |
||||
} |
||||
|
||||
.footer a { |
||||
color: blue !important; |
||||
flex: 1; |
||||
text-transform: uppercase; |
||||
font-size: initial; |
||||
padding: 5px 0; |
||||
} |
||||
|
||||
.footer > div { |
||||
line-break: after; |
||||
color: red; |
||||
font-size: initial; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.footer a:nth-child(4n + 1) { |
||||
background-color: red; |
||||
color: white !important; |
||||
} |
||||
|
||||
.footer a:nth-child(4n + 2) { |
||||
background-color: lime; |
||||
} |
||||
|
||||
.footer a:nth-child(4n + 3) { |
||||
background-color: yellow; |
||||
} |
||||
|
||||
.footer a:nth-child(4n + 4) { |
||||
background-color: cyan; |
||||
} |
||||
Loading…
Reference in new issue