[ home / bans / all ] [ qa / jp / sum ] [ maho ] [ f / ec ] [ b / poll ] [ tv / bann ] [ toggle-new / tab ]

/maho/ - Magical Circuitboards

Advanced technology is indistinguishable from magic

New Reply

Options
Comment
File
Whitelist Token
Spoiler
Password (For file deletion.)
Markup tags exist for bold, itallics, header, spoiler etc. as listed in " [options] > View Formatting "


[Return] [Bottom] [Catalog]

File:C-1724086668538.png (811.5 KB,1999x1352)

 No.1603

If you've gotta program an algorithm you've gotta use CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

 No.1608

I guess I'll blog here after I start working on kissu css themes soon. But right now I'm paralyzed with trying to organize colors into sets so I can more easily create more themes.

The last one I was working on was a Miku one and I guess I'll start from there... I guess if anyone wants to look at it (it's incomplete and has lots of extraneous lines and stuff I was testing) you can copypaste this in the Style Tab of the [Options] thing of the Kissu UI. Bleh, I hate spending time staring at text like this. Making stuff is fun, making stuff with text (programming) is not.

Miku:root {


--

--primary1: #23262b;
--primary2: #f7f7f7;
--primary3: #e6f4f7;
--primary4: #d2f9ff;
--primary5: #d2ffee;
--primary6: #d9e3e2;
--primary7: #;
--primary8: #;


--secondary1: #c2ccd5;
--secondary2: #95d2d3;
--secondary3: #83b1d2;
--secondary4: #5cb0b4;
--secondary5: #047e83;
--secondary6: #0a7893;
--secondary7: #606467;
--secondary8: #23262b;

--gradient1: linear-gradient(90deg, rgba(230,36,122,1) 8%, rgba(233,81,127,1) 12%, rgba(246,174,102,1) 27%, rgba(241,226,33,1) 40%, rgba(160,209,134,1) 55%, rgba(99,178,207,1) 70%, rgba(139,147,194,1) 85%, rgba(166,103,167,1) 100%);
--gradient2: ;
--gradient3: ;
--gradient4: ;
--gradient5: ;
--gradient6: ;

/* PRIMARY STUFF */
--primary-text-color: #23262b;
--primary-text-shadow: 1px 1px 3px #9bd4db;
#--primary-text-font: font_goes_here;
--primary-bg-color: #d2f9ff;

/* SECONDARY STUFF */
--second-text-color: #d2f9ff;
--second-text-shadow: 1px 1px 0px #000000;
#--second-text-font: font_goes_here;
--second-bg-color: #83b1d2;

/* TERTIARY STUFF */
--tert-text-color: #23262b;
--tert-text-shadow: 1px 1px 1px #e6f4f7;
#--tert-text-font: font_goes_here;
--tert-bg-color: #9bd4db;

/* QUATERNARY STUFF */
--quat-text-color: #e6f4f7;
--quat-text-shadow: 2px 2px 2px #000000;
#--quat-text-font: font_goes_here;
--quat-bg-color: #b6ddde;

/* LARGE TEXT */
--large-text-color: #047e83;
#--large-text-shadow: 0px 0px 1px #41464a;
#--large-text-font: font_goes_here;

}

/* MOUSE CURSOR STUFF GOES HERE */


/* WINDOWS */
/* all windows */
.object-window, .react-draggable {
color: var(--darkcolor8);
text-shadow: 0px 0px 0px #000000;
background-color: var(--lightcolor2);
border:3px solid;
border-color: var(--darkcolor7);
}

/* main window. Text color also used on sidebar (or not?) */
page-details, body {
color: var(--darkcolor8);
text-shadow: 1px 1px 1px #f7f7f7;
background-color: var(--lightcolor6);
}

/* window when hovering over OP on Catalog/Home */
/* --DISABLED-- Top Bar --DISABLED-- */
.preview-container {
color: var(--tert-text-color);
text-shadow: var(--tert-text-shadow);
background: var(--tert-bg-color);
border-radius:10px;
border:1.8px solid;
border-color: var(--secondy-bg-color)
}

.preview.reply .post-contents, .preview-thread {
color: var(--quat-text-color);
text-shadow: var(--quat-text-shadow);
background: var(--quat-bg-color)
}

.preview-container>h4 {
border-bottom:1px solid #3d284f
}

/* IS THIS USED??? */
.pv-ommitted {
color:#ff0000;
font-weight:700
}

/* --DISABLED -- Used by Video Player and Options --DISABLED--*/
#.handle {
background: rgb(7,57,71);
background-image: url(https://haiji.kissu.moe/test/src/1657100751987.png);
background-position:center;
color:#d9d9d9;
border-bottom:3px ridge #fedf50
}

/* Icons */
.svg-icon, .media-player-icon {
filter: invert(26%) sepia(54%) saturate(2351%) hue-rotate(301deg) brightness(85%) contrast(90%);
#background-color: #ffcc00;
}

/* Updater is the thing on left below New Thread button */
.updater:hover {
color:#d2ffee;
text-decoration:underline
}
.updater:active {
color:#f589c0
}
.updater {
cursor:pointer
}

/* --DISABLED-- Download icon below image --DISABLED-- */
#.download {
color:#d084ef
}

/* TOP */
/* Top Frame */
.main-sections.thread-window {
background-color: var(--quat-bg-color);
}

/* Board Title */
.center-meta {
#font-family:"bubble shine";
letter-spacing: 3px;
color: var(--quat-text-color);
text-shadow: var(--quat-text-shadow);
}

/* Top banner */
.banner-wide,
iframe {
border:0px solid #003941
}

/* SIDEBAR */

/* text color carries over to RSS feed */
.side-segment,
.banner-cover,
.sidebar-container {
color: var(--tert-text-color);
text-shadow: var(--tert-text-shadow);
background: var(--tert-bg-color);
border-right:2px solid #3d284f;
}

/* Sidebar Headers */
.sidebar-title-header, h2 {
color: var(--quat-text-color);
text-shadow: var(--quat-text-shadow);

}

/* Sidebar Links */
a,
a:visited {
color:var(--primary-text-color);
text-shadow: var(--primary-text-shadow);
}

/* Sidebar Board Page Brackets */
.pagelist {
color: #b12e70;
text-shadow: 0px 0px 0px #1f1f1f;
background: var(--tert-bg-color);
}

/* Sidebar section borders */
.break-li {
border-top:1px outset #02686c
}


/* Sidebar Special Links */
.options-opener,
.updater,
.filter-toggle {
color: var(--primary-text-color);
#font-size:16px;
text-shadow: var(--primary-text-shadow);
background-color: var(--second-bg-color);
}

/* New Thread/Reply button */
.button {
background: var(--second-bg-color);
border:2px solid #02686c;
border-radius: 0%;
text-decoration:none;

font-weight:600
}

/* RSS and Hide Sidebar buttons */
.toggles {
color: #b12e70;
background-color: #41464a;
}

/* RSS, left to right */
.summary-time {
color: var(--tert-text-color);
text-shadow: var(--tert-text-shadow);
background: var(--tert-bg-color)
}

.summary-container, .summary-swiper {
background: var(--quat-bg-color)
}

.summary-board {
color: var(--tert-text-color);
text-shadow: var(--tert-text-shadow);
background: var(--tert-bg-color)
}


/* HOME PAGE */

/* Post stats (posts, unique IPs, storage) */
.stats-table {
color: var(--primary-text-color);
background-color: var(--primary-bg-color);
box-shadow: 2px 2px 0px #000000;
}

/* 'active thread' OP text */
.popular-thread-comment {
color: var(--primary-text-color);
text-shadow: var(--primary-text-shadow);
background: var(--primary-bg-color)
}

/* Headers for Active Threads, Friends */
.home-section {
background-color: var(--tert-bg-color);
text-align:center;
color: var(--tert-text-color);
text-shadow: var(--tert-text-shadow);
padding:5px 16px;
margin-left:-12px
}

/* Home page board title above each thread OP */
.popular-thread-board {
color: var(--tert-text-color);
text-shadow: var(--tert-text-shadow);
background-color: var(--tert-bg-color)
}

/* Area around Active/Featured threads */
.active-threads>ul>li,
.featured-threads>ul>li,
.banner-wide {
border:unset;
}

/* Area around 'Friends' links */
.colored-writeup,
.friend-item,
.error-img-container,
.category-container {
border:unset
}
/* HOME MENU END */

/* Context menu from right clicking arrow by post number */
.context-menu {
border-top:8px solid;
color: var(--second-text-color);
text-shadow: var(--second-text-shadow)
}
.context-tab {
background: var(--quat-bg-color);

border:1px solid #26d3f3
}
.context-tab:hover {
background:#21af75
}
.blank-context,
.blank-context:hover {
background-color:#073947;
border:1px solid #477580
}
/* Context menu END */


/* >Quoting (greentext) */
span.quote {
color:#019234;
text-shadow: 0px 0px 0px #000000
}

/*arrows at bottom of page */
.similar-rotator {
color: var(--quat-text-color);
text-shadow: var(--quat-text-shadow);
border:0px solid;
#border-color: var(--second-bg-color)
}

/* Thread stuff, visible from index too*/
.thread-contents>ol {
border-bottom:1px dashed #eacb3e;
}

/* Left click menu next to post number */
.user-action-container {
background:#073947
}

/* Thread subject */
.subject {
color: var(--large-text-color);
text-shadow: var(--large-text-shadow);
background: var(--large-bg-color);
font-weight:bold;
font-size:130%;
}

/* OP background when OP is highlighted */
.highlight.op>.post-contents,
.hover-box.op>.post-contents {
background: var(--quat-bg-color)
}
/* Reply background when reply is highlighted */
.highlight.reply>.post-contents {
background:radial-gradient(circle, rgba(0,103,117,0.75) 0%, rgba(14,71,159,0.75) 100%);
}


/* POSTING NAMES AND EFFECTS */


/* Default Anonymous name and tripcode */
.no-opt,
.trip {
color:#047e83;
}
.trip {
font-style:italic
}

.sage,
.sage:visited {
color: #b12e70
}
a.sage:hover {
color:#f589c0
}

/* 'Repo' option */
.repo,
.repo:visited {
color: #5a89aa;
}
a.repo:hover {
color:#f589c0
}

/* Email "name" */
.email,
.email:visited {
color: #0093ab;
}
a.email:hover {
color:#f589c0
}


/* Reply chain thing if toggled on*/
.chain-container {
border:2px inset;
border-color: #83b1d2
}
.chain-number {
background:#21af75;
color:#e6e6f1;
border:1px solid #9f4cb7
}
.selected.chain-number {
background:#019ab0;
color:#e6e6f1
}
.post-chains>li {
border:1px ridge #019ab0;
border-radius:10px;
border-bottom-right-radius:5px;
border-top-right-radius:5px
}


.hover-box.reply>.post-contents {
border:5px solid;
border-color: var(--tert-bg-color)
}

/* Background color in 'show hidden posts' mode */
.thread.hidden {
background:linear-gradient(90deg, rgba(230,36,122,1) 8%, rgba(233,81,127,1) 12%, rgba(246,174,102,1) 27%, rgba(241,226,33,1) 40%, rgba(160,209,134,1) 55%, rgba(99,178,207,1) 70%, rgba(139,147,194,1) 85%, rgba(166,103,167,1) 100%);
}

/* Reply background color during 'show hidden posts mode' */
.hidden.reply>.post-contents {
background:linear-gradient(#191ab7 0%,#5e38e9,#06078a)
}

 No.1613

File:Photoshop_VyMiOrYRQi.png (628.33 KB,1573x1154)

I decided to make a faux kissu homepage for creating CSS themes because I hate looking css text so much. Still have to add more stuff, but it's getting there.
Maybe this is why all modern websites look so dull and lifeless: text is a terrible way to create visual things.

 No.1614

The site's CSS isn't that easy to work with but you'd have an easy time if you got it working.

The biggest difficulty would be adjusting the sizes of things. Fonts are kind of included.
Colors are fine.

 No.1619

File:2024-08-25 03-38-10.mp4 (4.41 MB,2224x1368)

arghhhh I NEED HELP
In most of the themes the filename color is shared with a bunch of other text colors like the board names on the sidebar, but uhh... Lala and Nekomimi are different and I can't quite figure out why. I'd definitely like to keep them isolated for future theme creation.
I think it might be the "a" thing, so I remove it and it reverts. I can't quite figure out what "a" is exactly. Or when I'm doing this is it breaking something? I'm never really been able to correctly isolate this stuff in the Inspector mode thing so I kind of just open up the Style tab and delete lines to figure things out.

Maybe I can define stuff in the sidebar itself?

 No.1620

Do you mean the purple text that appears after you remove that rule?

 No.1621

File:waterfox_BeDEMNv0Er.png (36.97 KB,350x293)

Also I forgot how much effort I put into the Lala theme. I'll have to use that as a base for some things. Really need to find a solution to having a cool animated background and not hogging the CPU, though. Animated PNG background? Animated WEBM? No, then there's a weird playback button thing...
There must be a solution out there somewhere.

>>1620
Hm, I think there's a better way for me to talk about this. Right now is to find out how I can define the text color for the filenames that appear above uploaded files and the text color for the board names on the side panel on the left. The Nekomimi and Lala themes have this, but I can't figure out how to replicate it. It feels like it's some nested thing somewhere, but maybe I'm just too dumb to notice it.

 No.1622

oh you mean the yellow text vs the white one

 No.1623

just looking at it, nekomimi sheet has nothing defined for var(--standard_url_col) while Luna does

a, a:visited {
color: var(--standard_url_col);
}

 No.1624

meanwhile the side color is being defined by .side-segment, .banner-cover {
color: #ebebff;
text-shadow: 2px 2px 1px rgba(33,16,0,.5);
}

so there might be some sort of hierarchy issue where .side-segment is removing what you're adding

 No.1625

I think Nekomimi has a lot of weird stuff going on with it. I think I remember you saying something about it being the improper way to do things since kissu UI has changed a bit since then so I tried not to look at it much.
Hierarchy, huh. Yeah, that makes sense. I should have the original Lala css file before it was streamlined here somewhere and I might have done the commented lines in it... maybe

 No.1626

File:[kojikoji[[fuwa (precure) ….png (418.97 KB,900x895)

ohh wait a minute, yeah here it is

lala.css:root {
--thread-bg-col: #fedf50;
--catalog-highlight: #fedf50;
--catalog-text-hl-color: #fedf50;
--catalog-text-hl-sdw: #fedf50;
--catalog-text-url: #000000;
--catalog-dash-color: #fedf50;
--hover-fname-color:#fedf50;
--score-bg-basis: #11ff27;
--main-score-bg-border: #000000;
--main-score-main-bg: radial-gradient(circle,var(--score-bg-basis) 0%,#404040 100%);
--main-score-text-color: #dbdbdb;
--hover-score-bg-border: #797979 .1em;
--hover-score-main-bg: radial-gradient(circle,var(--score-bg-basis) 0%,#fedf50 100%);
--hover-score-text-color: #dbdbdb;
--submit-score-bg-border: #b77b7b .1em;
--submit-score-main-bg: radial-gradient(circle,var(--score-bg-basis) 0%,#404040 100%);
--submit-score-text-color: #dbdbdb;
#--standard_url_col: #ead5e8
}
@font-face {
font-family:'bubble shine';
src: url(https://kissu.moe/stylesheets/fonts/BubbleShine.ttf);
}
#@font-face {
# font-family:'baby doll';
# src: url(https://kissu.moe/stylesheets/fonts/babydoll.ttf);
#}


/* Mouse cursor */
* {
cursor: url(/test/src/1657138315386.png), auto !important;

}
i, a > img, input[type="text"], input[type="search"], input:not([type]), select {
cursor: url(https://haiji.kissu.moe/test/src/1657142125297.png) , auto !important;
}

/* Animated Lala BG. Taller image = faster movement */
@keyframes lala {
0% { background-position: 0px 0%;}
100% { background-position: 0px 30000%;}
}

/* Animated backround's actual location */
/* changed from "#lowercontents, .main-contents" to carry bg over to side and top */
#lowercontents, .page-details, .main-sections.thread-window {
background-image: url(https://haiji.kissu.moe/test/src/1656914868664.png), url(/test/src/1657131441571.png), url(/test/src/1657131434876.png);
background-repeat: repeat;
animation-timing-function:linear;
background-attachment:fixed;
animation-name: lala;
animation-duration: 30000s;
animation-iteration-count: infinite;
}

/* Top Frame [DISABLED FOR ABOVE] */
#.main-sections.thread-window {
#background:url(https://haiji.kissu.moe/static/spreads/2iiH.gif)
#}

/* some subtitle fix for /poll/? */
.center-meta > h1, .center-meta > .subtitle {
width: 507px;
}

/* main window. IMPORTANT! */
body {
background-color:#00082b;
background-image: url(/test/src/1657131444151.png);
background-attachment:fixed;
color:#fedf50

}

/* Board Title */
.center-meta {
font-family:"bubble shine";
letter-spacing: 3px;
font-size: 120%;
color:#fff;
background: linear-gradient(90deg, rgba(255,21,124,1) 39%, rgba(255,56,116,1) 42%, rgba(254,159,64,1) 45%, rgba(246,229,12,1) 48%, rgba(164,255,114,1) 51%, rgba(96,205,244,1) 54%, rgba(146,159,242,1) 58%, rgba(202,98,204,1) 61%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* Left Panel Titles */
.sidebar-title-header, h2 {
color:#eefbff !important;
text-shadow: 2px 2px 2px rgba(20, 20, 20, 1)

}



/* Sidebar stuff, text color carries over to RSS feed */
.side-segment,
.banner-cover,
.sidebar-container {
color:#ebebff;
text-shadow: 2px 2px 1px rgba(33, 16, 0, 0.5);
background:radial-gradient(circle, rgba(0,90,103,0.5) 0%, rgba(0,9,51,0.5) 100%);
border-right:0px solid #3d284f
}
/* Sidebar board page brackets */
.pagelist {
color:#da80ff;
}
/* Lines between sidebar sections */
.break-li {
border-top:1px dotted #5e38e9
}

/* Video player */
.page-frame,
.error-frame {
background:#000;
border:2px solid #0e002b;
border-radius:2px;
border-top:1px solid #191ab7

}
/*bottom line in video player */
.image-frame {
background:#e6e6f1
}

/* The RSS and hide sidebar buttons */
.toggles {
color:#49c5d7;
text-shadow: 0px 0px 5px rgba(251, 139, 201, 1)
}

/* Some Links on Left Bar */
.options-opener,
.updater,
.filter-toggle {
color:#5bf6b7;
font-size:16px;
text-shadow: 1px 1px 6px rgba(1, 154, 176, .75);

/* ??? */
}
.style-option {
color:#c4c4c4
}

/* Post stats on home page (posts, unique IPs, storage) */
.stats-table {
text-shadow: 1px 1px 0px rgba(30, 23, 0, 1);
color:#ffe467


}

/* Popular thread comment is homepage 'active thread' OP text, summary time
and board is from RSS feed*/
.popular-thread-comment,
.summary-time,
.summary-board {
color:#f5f285;
text-shadow: 1px 1px 1px rgba(33, 16, 0, 1);
background: rgb(7,19,71);
background: radial-gradient(farthest-corner at 200px 200px, rgba(15,0,28,0.4) 0%, rgba(0,11,54,0.4) 25%, rgba(0,11,43,0.4) 50%, rgba(9,0,32,0.4) 75%, rgba(0,13,32,0.4) 100%);
}

/* RSS background */
.summary-container,
.summary-swiper {
border:1px solid #797280;
background: rgb(8,9,88);
background: radial-gradient(farthest-corner at 500px 200px, rgba(8,9,88,1) 15%, rgba(7,9,100,1) 35%, rgba(6,7,70,1) 50%, rgba(5,37,82,1) 65%, rgba(6,7,80,1) 85%);
border-right:1px solid #3d284f;

}
/* Post time on RSS */
.summary-time {
border-right:1px dotted #d1f4fa;
color:#fb8bc9
}
/* Board group titles at bottom of home page */
.category {
padding:0;
text-decoration:unset;
color:#d1f4fa
}
/* Search box on left bar and Friends subtitles on home page */
.friend-description,
.global-search-label {
color:#efc8ff;
text-shadow: 1px 1px 0px rgba(61, 0, 86, 1);
}

/******* Home page stuff START *******/
.featured-section,
.friend-section {
background: rgb(0,90,103);
background: linear-gradient(180deg, rgba(0,90,103,1) 15%, rgba(1,134,154,1) 50%, rgba(0,90,103,1) 85%);
text-align:center;
color:#f2f2ff;
text-shadow: 2px 2px 2px rgba(0, 56, 64, 1);
padding:5px 16px;

margin-left:-12px
}

/* Home page board title above each thread OP */
.popular-thread-board {
color:#d084ef;
text-shadow: 1px 1px 4px rgba(185, 70, 217, 1);
}

.active-threads>ul>li,
.featured-threads>ul>li,
.banner-wide {
border:unset
}
.colored-writeup,
.friend-item,
.error-img-container,
.category-container {
border:3px offset #3d284f;
background-color:#071347
}
.head-item {
border:1px solid #6c4c88;
background:#00ff1e;
color:#9e9ed9
}
.tabs-header>.head-item:hover {
color:#fedf50
}
.active,
.top-content {
background-color:#000000
}
/******* Home page stuff END? *******/

/* ??? */
.news-header {
color:#ece46f

/* ??? */
}
.top-bar {
border:1px solid #655c6c
}

.top-bottom {
color:#fedf50;
}
.top-segment {
opacity:.9;
background-color:#4a4a4a
}
/* Top banner */
.banner-wide,
iframe {
border:1px solid #003941
}

/* New Thread/Reply button */
.button {
background:linear-gradient(0deg,#880c4a 5%,#b9216e 18%,#ec6cb3 100%);
border:3px solid #880c4a;
border-radius: 25%;
text-decoration:none;
color:#fedf50;
font-weight:600
}


.mobile .fas {
color:#5e2b26
}

/*The popup thing when you click [Options] on left */
.options-window {
background:#073947;
border:1px solid #3d284f
}

/* Used by video player and Options */
.handle {
background: rgb(7,57,71);
background-image: url(https://haiji.kissu.moe/test/src/1657100751987.png);
background-position:center;
color:#d9d9d9;
border-bottom:3px ridge #fedf50
}
/* OPTIONS POPUP END */

/* ??? Where is this stuff used? */
.preview-container {
background:#4a4a4a;
border-radius:10px;
border:1.8px solid #3d284f
}
.preview.reply .post-contents {
background:#1e1e1e
}
.preview-thread {
background:#1e1e1e
}
.preview-container>h4 {
border-bottom:1px solid #3d284f
}
.pv-ommitted {
color:#ece8b4;
font-weight:700
}

/* >Quoting (greentext) */
span.quote {
color:#5bf67f
}

/* Download icon below image */
.download>.fas {
color:#d084ef
}

/* Context menu from right clicking arrow by post number */
.context-menu {
border-top:8px solid #26d3f3
}
.context-tab {
background:#073947;
border:1px solid #26d3f3
}
.context-tab:hover {
background:#21af75
}
.blank-context,
.blank-context:hover {
background-color:#073947;
border:1px solid #477580
}
/* Context menu END */

/*arrows at bottom of page */
.similar-rotator {
color:#fedf50;
border:px solid #ead5e8
}
/* Thread stuff, visible from index too*/
.thread-contents>ol {
border-bottom:1px dashed #eacb3e;
}

/* Left click menu next to post number */
.user-action-container {
background:#073947
}
.user-action-container>button {
color:#fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
background: rgb(16,144,92);
background: linear-gradient(to bottom, #4a9b66 0%,#359183 50%,#007a5d 51%,#2886a0 100%);
font-size:15px;
border:1px solid #073947
}

/* [POSTING NAMES AND EFFECTS] */

/* Default Anonymous name and tripcode */
.no-opt,
.trip {
#font-family:"babydoll";
color:#fff;
background-image:linear-gradient(0deg, rgba(59,149,255,1) 0%, rgba(21,255,51,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
#font-size:110%
}
.trip {
font-style:italic
}

/* SAGE */
.sage,
.sage:visited {
#font-family:"baby doll";
background-image:linear-gradient(0deg, rgba(38,243,39,1) 0%, rgba(246,211,91,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow: unset;
#font-size:110%
}
a.sage:hover {
color:#f955a8
}

/* 'Repo' option */
.repo,
.repo:visited {
#font-family:"baby doll";
background-image:linear-gradient(0deg, rgba(251,139,201,1) 0%, rgba(208,132,239,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

#font-size:110%
}

/* Email "name" */
.email,
.email:visited {
#font-family:"baby doll";
background-image:linear-gradient(0deg, rgba(195,160,0,1) 0%, rgba(245,242,133,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
#font-size:110%
}

/* Thread subject */
.subject {
#color:#bba668;
font-family:"bubble shine";
font-weight:100;
letter-spacing: 2px;
background: linear-gradient(90deg, rgba(230,36,122,1) 8%, rgba(233,81,127,1) 12%, rgba(246,174,102,1) 27%, rgba(241,226,33,1) 40%, rgba(160,209,134,1) 55%, rgba(99,178,207,1) 70%, rgba(139,147,194,1) 85%, rgba(166,103,167,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size:140%;
}

/* Reply chain thing if toggled on*/
.chain-container {
background-image: url(/test/src/1657131444151.png);
border:1px solid #06078a
}
.chain-number {
background:#21af75;
color:#e6e6f1;
border:1px solid #9f4cb7
}
.selected.chain-number {
background:#019ab0;
color:#e6e6f1
}
.post-chains>li {
border:1px ridge #019ab0;
border-radius:10px;
border-bottom-right-radius:5px;
border-top-right-radius:5px
}

/* Updater is the thing on left below New Thread button */
.updater:hover {
color:#fb8bc9;
text-decoration:underline
}
.updater:active {
color:#f5f285
}
.updater {
cursor:pointer
}
.hover-box.reply>.post-contents {
border:1px solid #8c818b
}

/* Background color in 'show hidden posts' mode */
.thread.hidden {
background:linear-gradient(90deg, rgba(230,36,122,1) 8%, rgba(233,81,127,1) 12%, rgba(246,174,102,1) 27%, rgba(241,226,33,1) 40%, rgba(160,209,134,1) 55%, rgba(99,178,207,1) 70%, rgba(139,147,194,1) 85%, rgba(166,103,167,1) 100%);
}

/* Reply background color during 'show hidden posts mode' */
.hidden.reply>.post-contents {
background:linear-gradient(#191ab7 0%,#5e38e9,#06078a)
}

/* OP background when OP is highlighted */
.highlight.op>.post-contents,
.hover-box.op>.post-contents {
background:radial-gradient(circle, rgba(0,103,117,0.75) 0%, rgba(14,71,159,0.75) 100%);
}
/* Reply background when reply is highlighted */
.highlight.reply>.post-contents {
background:radial-gradient(circle, rgba(0,103,117,0.75) 0%, rgba(14,71,159,0.75) 100%);
}

/* ??? */
.preview {
background:transparent
}

/* The "No." ahead of post number */
.post-highlighter {
text-decoration:none;
color:#ff98d1
}

/* post number */
a.qr-number {
text-decoration:none;
color:#e094ff;
letter-spacing:.5px

}

/* ??? */
a.qr-number:visited,
a.post-highlighter:visited {
text-decoration:none;
color:inherit
}

/* ??? */
.select-container>select {
background:#313435!important;
color:#c4c4c4
}

/* on /poll/ */
.poll-expander>a {
color:#f5f285;
text-shadow: 0px 0px 5px rgba(91, 246, 127, 1);

}


/* Text color in posts but not OP */
p,
.preview {
color:#e6e6f1;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);

}

/* reply citing >123 */
.cite {
color:#efc8ff
}
.cite:hover {
color:#fb8bc9
}

/* Reply Boxes */
.reply>.post-contents {
background: rgb(7,19,71);
background: radial-gradient(farthest-corner at 200px 200px, rgba(15,0,28,0.7) 0%, rgba(0,11,54,0.7) 25%, rgba(0,11,43,0.7) 50%, rgba(9,0,32,0.7) 75%, rgba(0,13,32,0.7) 100%);
border:0px solid #0e002b;
border-radius: 3%;
}

/* sidebar page numbers */
.kissu-link.page-number {
color:#fedf50
}
.page-list-item {
color:inherit
}
.page-list-item.current-page>.page-number {
color:inherit
}

/* Quick reply hover box */

.qr-comment,
.helper-item-container {
background: radial-gradient(farthest-corner at 100px 1px, rgba(15,0,28,1) 0%, rgba(0,11,54,1) 25%, rgba(0,11,43,1) 50%, rgba(9,0,32,1) 75%, rgba(0,13,32,1) 100%);
color:#e6e6f1;
border:unset;
font-size:120%
}
.qr-comment.dnd-visible {
background-color:transparent
}

/* Quick reply frame, BG is line above typing area */
.qr-frame {
background: radial-gradient(farthest-corner at 100px 1px, rgba(15,0,28,1) 0%, rgba(0,11,54,1) 25%, rgba(0,11,43,1) 50%, rgba(9,0,32,1) 75%, rgba(0,13,32,1) 100%);
box-shadow:0px 0px 25px #21af75;
border:2px solid #686363
}

/* Quick Reply bottom frame */
.textarea-container {
background:#5e38e9
}

/* Posting queue in Quick Reply Box */
.queue-item:hover:not(.current-bud) {
color:#5bf6b7
}
.modifier-on,
.current-bud {
color:#fedf50;
text-shadow: 2px 1px 1px rgba(79, 50, 0, 1);
background:linear-gradient(155deg, rgba(208,132,239,1) 50%, rgba(32,39,163,1) 100%) !important;
}
.queue-item:last-child {
border-right:2px outset #b946d9
}
.queue-item {
border-left:1px solid #06078a;
border-bottom:1px solid #06078a;
text-shadow: 2px 1px 1px rgba(79, 50, 0, 1);
border-radius:40%;
background:linear-gradient(155deg, rgba(1,154,176,1) 50%, rgba(32,39,163,1) 100%);
}

.post-queue {

background: #020929;
}

/* Quick reply hover box */
.qr-preview-container {
background-color:rgba(30,30,30,.81);
border:2px solid #073947;
border-radius:10px
}
.qr-actions {
border:3px inset #959090;
border-left:unset
}
.qr-button {
border-left:0px inset #959090;
font-size:110%;
color:#e6e6f1;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
background: radial-gradient(circle, rgba(114,56,233,1) 0%, rgba(6,7,138,1) 100%);
}
.qr-button:hover,
.qr-button:focus-visible {
box-shadow:-.5px .5px .5px #151515;
background:linear-gradient(#00ff1e,#04c0cb,#019ab0) !important;
}
.qr-filebar {
background:#06078a;
color:#f5f285;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);

}
/* /poll/ stuff */
.qr-poll-question {
background:#00082b;
color:#f5f285
}
.plus-min-button {
background:#21af75
}
.
.helper-item:hover {
color:#737373
}
.qr-handle {
color:#ececf8;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
background-image: url(https://haiji.kissu.moe/test/src/1657100751987.png);
}
.bar-label,
.chart-title {
fill:#00ff1e
}
.fileboard-table {
border:0px solid #191ab7
}
.fileboard-body>tr:nth-child(odd) {
background: linear-gradient(343deg, rgba(0,10,62,0.7) 0%, rgba(20,20,20,0.7) 100%);
}
.fileboard-body td {
border:1px solid #000
}
.fileboard-head-row {
background: #56b573; /* Old browsers */
background: linear-gradient(to bottom, #4a9b66 0%,#359183 50%,#007a5d 51%,#2886a0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.load-bg {
background-color:rgba(174,174,174,.36);
border-bottom:1px solid #805295ab
}
.load-fill {
background:linear-gradient(0.25turn,#ff76ca,#ac00a9)
}
.startup-window {
background-color:#262626;
border:1px solid #5e5e5e4f
}
.startup-window-contents>h2 {
background-color:unset;
color:#e3e3e3
}
.startup-window-contents h3 {
color:#ffebea;
background:#558d9b
}
.motd-text {
color:#efc8ff;
font-size:14px
}
a,
a:visited {
color:var(--standard_url_col)
}
a:hover,
.fas:hover,
.fab:hover,
.fa-eye-slash:hover,
a.qr-number:hover,
a.post-highlighter:hover {
cursor:pointer;
color:#ff98d1
}
hr {
border-color:#2c292f;
border-radius:0px
}
.sidebar-title-header {
border-radius:10px
}
.sidebar-title-header,
h2 {
color:#ffebea;
background:#558d9b
}
.main-sections>h1 {
background:unset
}
h3 {
color:#dacc86;
font-weight:400;
font-style:italic;
text-decoration:underline
}

/*post form at bottom */
input[type=submit],
.secondary-bud-final {
background: radial-gradient(farthest-corner at 100px 1px, rgba(15,0,28,1) 0%, rgba(0,11,54,1) 25%, rgba(0,11,43,1) 50%, rgba(9,0,32,1) 75%, rgba(0,13,32,1) 100%) !important;
color:#e6e6f1;
font-size:105%;
margin:4px 0 0
}
input {
background: radial-gradient(farthest-corner at 30px 1px, rgba(15,0,28,1) 0%, rgba(0,11,54,1) 25%, rgba(0,11,43,1) 50%, rgba(9,0,32,1) 75%, rgba(0,13,32,1) 100%);
color:#e6e6f1;
border:1px inset #959090
}
.report-body input:disabled {
background-color:#073947
}
input[type=submit]:active,
input[type=submit]:focus-visible,
.secondary-bud-final:active,
.secondary-bud-final:focus-visible {
background-color:#372d4d;
border:2px inset #675c80
}
input[type=button]:active {
background:linear-gradient(#353738,#505151,#323536)
}
.secondary-bud label {
background: linear-gradient(343deg, rgba(0,10,62,1) 0%, rgba(47,0,9,1) 100%);
color:#e6e6f1;
border:1px solid #5e38e9;
}
.secondary-bud-final {
border:1px solid #5e38e9
}
.page-frame.report-frame {
background-color: #071347;
color:#f5f285
}

 No.1627

>>1626
It looks like it should be this based on what I wrote, but it doesn't seem to do anything when I write it here in the 'live' css?

/* Left Panel Titles */
.sidebar-title-header, h2 {
color:#eefbff !important;
text-shadow: 2px 2px 2px rgba(20, 20, 20, 1)
}


bleh

 No.1628

>>1626
hi lala

 No.1629

File:[unknown artist[[cure milk….jpg (3.26 MB,1631x2315)

>>1628
Lala was very good inspiration for a CSS theme! Just that transformation scene alone is full of fantastic visual flare!
I'll have to try and match that again, or at least approach it...

 No.1631

File:waterfox_AUdBWMBRIM.png (4.64 KB,473x186)

I can't figure out how to get the gradient inside board title to work. It works fine when it's left to right, but seems like there's some issue with it at the top. Looking at the Lala theme, I have the gradient positioned as if it's a full page, so since board title text starts near the middle the gradient actually starts at 39%, but I can't seem to figure out the number for top-to-bottom...

Working Lala CSS rainbow color:

.center-meta {
font-family:"bubble shine";
letter-spacing: 3px;
font-size: 120%;
color:#fff;
background: linear-gradient(90deg, rgba(255,21,124,1) 39%, rgba(255,56,116,1) 42%, rgba(254,159,64,1) 45%, rgba(246,229,12,1) 48%, rgba(164,255,114,1) 51%, rgba(96,205,244,1) 54%, rgba(146,159,242,1) 58%, rgba(202,98,204,1) 61%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


Kuon color NOT working, although you could also just change the above to 0deg from 90deg to see how it breaks the Lala one as well.


.center-meta {
letter-spacing: 3px;
font-size: 120%;
color:#fff;
background: linear-gradient(0deg, rgba(96,80,25,1) 0%,rgba(252,208,65,1) 10%,rgba(252,208,65,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

 No.1632

>>1631
You're setting a background for the entire .center-meta div. So the positions of the gradient are a bit un-intuitive.

It's coloring the subtitle and the main title with the gradient at once.

.center-meta {
letter-spacing: 3px;
font-size: 120%;
color: #fff;
background: linear-gradient(180deg, rgb(14, 255, 51) 0%,rgb(255, 196, 4) 20%,rgb(255, 0, 0) 50%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

It's why it's horizontal and not vertical I guess
This shows it better.

 No.1633

File:Utawarerumono_Mask_of_Dece….png (1.51 MB,1920x1296)

Hmmm. I think by using the border image property thing I could get the OP text to have a 'frame' that looks like this, but would it be worth it? The border-image thing does scale with the size of the box...

 No.1740

File:firefox_03a4ii3fO2.png (86.71 KB,338x1095)

hmm... can you think of any way for this border gradient thing to run its value from the top of the screen to the bottom, instead of how it seems to work by default to where it changes color as your scroll down the page? I do like that effect, but not really what I'm after right now
.side-segment, .sidebar-container {
border-right: 8px solid;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}


What I'd like for is in this example for it to run the full gamut in a 'static' way that isn't responsive to page scrolling. Kind of like how 'background size:cover' works for backgrounds.

 No.1741

what you basically want is a position:fixed element that is always on the screen, covering up the top to bottom. So as you scroll the element will always stay at the same gradient positions.
The alternative concept is that the entire contents website gets put into a container and then you have the contents scroll inside of the container(like how the text scrolls in a text box but doesn't move the page)

This is kind of tricky to do if you can't edit the website itself but with some pseudo-elements it might be possible. Perhaps there's an element on the site which will allow it anyways

 No.1742

but I suppose if you just want to target the sidebar, then you might be able to target the `.sidebar-nav thread-sidebar` instead. Just go a bit deeper into the object

 No.1743

or maybe it was `sidebar-container pannel-borders thread-page-layout fixed-sidebar` but when it comes to the sidebar the site does a little bit of CSS manipulation on it based on what the page's scroll position is so you'll have to see if it doesn't work when the page is scrolled up to the top or scrolled to the middle

 No.1744

.sidebar-container.pannel-borders.thread-page-layout.fixed-sidebar {
border-right: 8px solid;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}


Have a try with that

 No.1745

Remove .thread-page-layout since that CSS rule only does modifications when you switch between catalog and index

 No.1746

also remove .fixed-sidebar since that rule is what max the sidebar stick to the side regardless of scroll, and goes away when you are looking at the top of the site

 No.1747

File:4057cb97d9.mp4 (1.41 MB,896x944)


 No.1748

Yeah, you're going to have to fiddle around with this to get it to work, but it's possible

 No.1749

.sidebar-container.pannel-borders.fixed-sidebar , .side-segment.pannel-borders.thread-page-layout {
border-right: 8px solid;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}


I just did the hard parts for you but you have to handle the situation where it scrolls up to the top yourself. I'm not entirely sure how to do that without thinking

 No.1750

Also you have to handle the homepage and probably /f/ as well

 No.1751

>>1749
>you have to handle the situation where it scrolls up to the top yourself.
Mmm, maybe "starting" the gradient at like 20% or something, like the issue with the gradient text positioning? Gradients sure are complicated...

 No.1752

>>1751
it's more like the site does some things that are complicated in ways that don't make CSS easy. But that might just be the way it has to be. Adjusting the gradient % under .side-segment.pannel-borders.thread-page-layout sounds correct. Then .sidebar-container.pannel-borders.fixed-sidebar handles the other scenario.

 No.1753

actually, you might want to see if you can use something other than percentages like vh because a % is going to use the full page height which will vary

 No.1754

or possibly you should just use an image because otherwise this could get pretty unpredictable

 No.1755

File:waterfox_cinzvwQ17u.png (33.19 KB,814x483)

Out of curiosity I tried it with an actual gradient image

.sidebar-container.pannel-borders.fixed-sidebar , .side-segment.pannel-borders.thread-page-layout {
border-right: 8px solid;
border-image: url(https://haiji.kissu.moe/test/src/1726185772007.png) 10 fill;
}
Changing the numbers there can effect the filling so that's kind of cool. The change from 10 to 9 is pretty drastic as it fills in the whole area below the box.
I guess it's related to pic related https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

This mozilla page is pretty informative, I like it more than other css sites I've used in the past.

 No.1756

File:2024-09-12 19-15-40.mp4 (2.22 MB,1920x1080)

kinda weird

 No.1757

>>1756
that's how the sticky scrolling is handled for the sidebar. There's a small panel that stretches a bit. I think there's a way to make it not do that. Lets see....

 No.1758

.thread-page-layout.sidebar-container {
border: unset;
height: calc(100vh - 4px);
}


Try seeing what this does to it. This will make that sidebar box take up more vertical height

 No.1759

Hmm, don't think that did anything. But, I think we're spending too much time on this and it's something I can go back to later. There's probably a simpler answer in just adjusting the image itself.




[Return] [Top] [Catalog] [Post a Reply]
Delete Post [ ]

[ home / bans / all ] [ qa / jp / sum ] [ maho ] [ f / ec ] [ b / poll ] [ tv / bann ] [ toggle-new / tab ]