#dropdown ui

[effervescent-fool]

i think one of my biggest (and only) gripes with procreate is that they dont have like. a masterlist of features their app has to offer. a full thorough ui navigation. because ive been using procreate for a couple years now and im still discovering preexisting features because they just. dont mention it anywhere

[risingsunresistance]

everyone keeps saying the new dash is supposed to be more accessible but. was it ever inaccessible to begin with?? i never saw anyone complaining about hard navigation for things like The Inbox or Activity Page, it's not hard to click them and see where they go as a new user..... the one thing that needs updated is probably the fact that settings and blog settings and account settings are all completely different. i can see navigation problems there. the things on the horizontal bar were very easy to get to and understand tho

[alectoperdita]

nothing makes me more unhinged and vengeful and toxic than being forced to build a redesign I fucking loathe

[slasheru]

did u make music yourself?

alas, no! it's the only thing I didn't do myself besides the inventory system & basic "press buttons to go" mechanic :') 99% of the music is from pixabay! One day I'd love to commission actual tunes for this game, though!

[stellophiliac]

how to build a digital music collection and stuff

spotify sucks aaaass. so start downloading shit!!

file format glossary

.wav is highest quality and biggest

.mp3 is very small, but uses lossy compression which means it's lower quality

.flac is smaller than .wav, but uses lossless compression so it's high quality

.m4a is an audio file format that apple uses. that's all i really know

downloading the music

doubledouble.top is a life saver. you can download from a variety of services including but not limited to apple music, spotify, soundcloud, tidal, deezer, etc.

i'd recommend ripping your music from tidal or apple music since they're the best quality (i think apple music gives you lossless audio anyway. .m4a can be both lossy and lossless, but from the text on doubledouble i assume they're ripping HQ files off apple music)

i also love love love cobalt.tools for ripping audio/video from youtube (they support a lot of other platforms too!)

of course, many artists have their music on bandcamp — purchase or download directly from them if you can. bandcamp offers a variety of file formats for download

file conversion

if you're downloading from apple music with doubledouble, it spits out an .m4a file.

.m4a is ok for some people but if you prefer .flac, you may wanna convert it. ffmpeg is a CLI (terminal) tool to help with media conversion

if you're on linux or macOS, you can use parameter expansion to batch convert all files in a folder. put the files in one place first, then with your terminal, cd into the directory and run:

for i in *.m4a; do ffmpeg -i "$i" "${i%.*}.flac"; done

this converts from .m4a to .flac — change the file extensions if needed.

soulseek

another way to get music is through soulseek. soulseek is a peer-to-peer file sharing network which is mainly used for music. nicotine+ is a pretty intuitive (and open-source) client if you don't like the official one.

you can probably find a better tutorial on soulseek somewhere else. just wanted to make this option known

it's bad etiquette to download from people without sharing files of your own, so make sure you've got something shared. also try to avoid queuing up more than 1-2 albums from one person in a row

tagging & organizing your music

tagging: adding metadata to a music file (eg. song name, artist name, album) that music players can recognize and display

if you've ripped music from a streaming platform, chances are it's already tagged. i've gotten files with slightly incorrect tags from doubledouble though, so if you care about that then you might wanna look into it

i use musicbrainz picard for my tagging. they've got pretty extensive documentation, which will probably be more useful than me

basically, you can look up album data from an online database into the program, and then match each track with its file. the program will tag each file correctly for you (there's also options for renaming the file according to a certain structure if you're into that!)

there's also beets, which is a CLI tool for... a lot of music collection management stuff. i haven't really used it myself, but if you feel up to it then they've got extensive documentation too. for most people, though, it's not really a necessity

how you wanna organize your music is completely up to you. my preferred filestructure is:

artist > album > track # track

using a music player

the options for this are pretty expansive. commonly used players i see include VLC, foobar2000, clementine (or a fork of it called strawberry), and cmus (for the terminal)

you can also totally use iTunes or something. i don't know what audio players other systems come with

i personally use dopamine. it's a little bit slow, but it's got a nice UI and is themeable plus has last.fm support (!!!)

don't let the github page fool you, you don't have to build from source. you can find the releases here

click the "assets" dropdown on the most recent release, and download whichever one is compatible with your OS

syncing

if you're fine with your files just being on one device (perhaps your computer, but perhaps also an USB drive or an mp3 player), you don't have to do this

you can sync with something like google drive, but i hate google more than i hate spotify

you can get a free nextcloud account from one of their providers with 2GB of free storage. you can use webDAV to access your files from an app on your phone or other device (documents by readdle has webDAV support, which is what i use)

disroot and blahaj.land are a couple providers i know that offer other services as well as nextcloud (so you get more with your account), but accounts are manually approved. do give them a look though!!

if you're tech-savvy and have an unused machine lying around, look into self-hosting your own nextcloud, or better yet, your own media server. i've heard that navidrome is a pretty good audio server. i unfortunately don't have experience with self-hosting at the moment so i have like zero advice to give here. yunohost seems to be a really easy way to manage a server

afterword

i don't know if any of this is helpful, but i just wanted to consolidate my personal advice in one place. fuck big tech. own your media, they could take it away from you at any moment

[saphushia]

Hey if this site sounds like a useful tool to u then lmk if there's search categories you personally would find useful (no promises but I'll do my best)

So far I have:

Color

Field (nature spirits, deep savers, etc)

Attribute (vaccine, virus, etc)

Level

Terrain (if they can fly, swim, etc)

Appearance (beast, reptile, human, etc)

Element

X-antibody

Also thinking I'll prob add one for weapons too, so u can find gun or sword using digimon or w/e

most of the way through the A's !

it's gonna be a visual list of digimon, a cross between wikimon's visual list and the official dgmn encyclopedia, but with more appearance-based filtering. intended as a resource for artists/writers (mostly myself lmao) when searching for partner digimon and such. the elemental assignments are entirely unofficial, based off of their attacks, but i thought it would be another helpful filter

[evenvillain]

dark flat ao3 skin v2.0

1. log in and go HERE

2. click button "Create Site Skin"

3. name it whatever

4. copy/paste code from below in "CSS" field

5. "Submit"

6. make sure you clicked button "Use" HERE in the list of skins

7. change it as you like

CSS:

outer .region,

footer .group,

.post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea,

main .verbose legend,

.verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover,

modal,

.ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form,

ui-datepicker-div,

.ui-datepicker table { color: #eee; border-color: #151619; outline: #111; box-shadow: none; }

form .notice, form ul.notes { box-shadow: none; }

workskin {

font-size: 1.2em; margin: auto; padding: 0 0.25em; max-width: 60em; overflow-x: auto; overflow-y: hidden; position: relative; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label { border-radius: 0; }

header ul.primary,

outer #footer,

.toggled form { background: #1a1b1f; }

header .primary {

background: none; padding: 10px 0; width: 100%; box-shadow: none; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { background: #1a1b1f !important; }

.user.navigation.actions>li { margin-top: 0.3em !important; }

header .menu,

small_login {

border: 1px solid #1f2126; box-shadow: none; padding: 0; }

.tags.group, .more.group { margin-top: 0.6em; }

header .actions a:hover,

header .actions a:focus,

header .dropdown:hover a,

header .open a,

header .menu,

small_login,

.group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index,

dashboard a:hover,

th,

dashboard .secondary,

.secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #151619; }

.userstuff p { text-align: justify; margin: 1.286em auto; padding: 0; line-height: 1.5; }

.tags.commas { margin: 1.5em auto; }

header .dropdown .menu a:hover,

header .dropdown .menu a:focus,

.splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover,

tos_prompt .heading,

tos_prompt [disabled] {

background: #22262a; }

outer,

.javascript, .statistics .index li:nth-of-type(even),

tos_prompt,

.announcement input[type="submit"] { background: #151619; }

.filters .submit input { border: 1px solid #202227; background-color: #202227; height: 110%; margin: 1em 0; min-height: 2.286em; padding-left: 0; padding-right: 0; text-align: center; white-space: normal; }

header ul.primary,

footer,

dashboard ul,

dl.meta, .group.listbox, fieldset fieldset.listbox,

main li.blurb,

form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset,

inner .module .heading,

.bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #1a1b1f; }

.work.navigation.actions { width: 100%; }

dl.meta { border: none; }

.splash .news li { padding: 1em; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { padding: 1em; }

.logged-in .splash>.module { width: 100% !important; }

dl.meta { max-width: 75em; margin: auto; clear: right; padding: 2em 1.75em; position: relative; overflow: hidden; }

.group.listbox, fieldset fieldset.listbox,

main li.blurb,

.wrapper,

dashboard .secondary,

.secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: none; }

dashboard .current,

.actions a:active,

outer .current,

a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #1a1b1f; border-color: #1f2126; }

greeting .menu {

right: 0; border: 1px solid #1f2126; box-shadow: none; }

select { background-color: #202227; color: #fff; border: 1px solid #202227; min-height: 3em; border-radius: 0; padding: 0 0.6em; }

input:focus, select:focus, textarea:focus { background: #202227; }

body, .toggled form, .dynamic form, .secondary, .dropdown { background: #202227; color: #fff; margin: 0; padding: 0; }

footer a:hover,

footer a:focus,

.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #a7a7a7; color: #111; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #a7a7a7; color: #111; }

header #greeting img,

header .heading a,

header .heading a:visited,

header .user a:hover,

header .user a:focus,

header fieldset,

header form,

header p,

dashboard a:hover,

.actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8,

tos_prompt .heading {

color: #a7a7a7; }

header .menu li {

border-bottom: 1px solid #2c2c2c; margin: 0; text-align: left; }

greeting .icon,

dashboard,

dashboard.own,

.error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #151619; }

dashboard.own {

border: none; }

form.filters dl { margin-left: 0; margin-right: 0; }

.filters .expander:focus { outline: none; }

.filters .expander { padding: 0.45em 0 0.45em 14px; }

.filters .group dt.search, .filters .range dt { padding: 1.25em 0 0.4em 0; }

a.tag { border-bottom: 1px dotted !important; }

a, a:link, a.tag,

header a,

header a:visited,

header .primary .open a,

header .primary .dropdown:hover a,

header .primary .dropdown a:focus,

header #search input:focus,

header #search input:hover,

dashboard a,

dashboard span,

dashboard .current,

.heading, .group .heading, .filters dt a:hover { color: #fff; }

header .dropdown .menu a {

padding: .75em .5em .75em; }

header #search .text {

background: #151619 !important; border-radius: 0; margin: 0.2857em 0.429em; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #999; }

a:active, a:focus, button:focus { outline: none; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label,

header .actions a {

background: #23252a; border-color: #23252a; color: #eee; box-shadow: none; text-shadow: none; }

.actions a:hover, .actions input:hover,

dashboard a:hover,

.actions a:focus, .actions input:focus,

dashboard a:focus {

color: #fff; border-color: #101214; box-shadow: none; background-color: #101214; }

.actions a:active, .current, a.current, .current a:visited { color: #fff; background: #101214; border-color: #101214; box-shadow: none; }

.delete a, span.delete { box-shadow: none; }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

outer .group .heading,

header .actions a,

fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #fff; background: none; }

header .actions a,

fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #eee; }

.mce-container input:focus { background: #F3EFEC; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #fff; }

a, a:link, a:visited:hover { color: #fff; text-decoration: none; }

.announcement .userstuff a:visited { color: #666; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #999; }

.event.announcement .userstuff a, .filters .expander { color: #eee; }

form.verbose legend, .verbose form legend { background: #151619; }

.listbox li.blurb { box-shadow: none; background: #1a1b1f; }

li.blurb, fieldset, form dl { border: none; }

li.blurb, .blurb .blurb { display: block; position: relative; clear: left; padding: 1em 1.4em; overflow: visible; background: #1a1b1f; }

dashboard ul {

float: none; display: block; padding: 0.26em 0; text-align: right; position: relative; background: none; }

user-fandoms {

padding: 1.4em 0; background: #1a1b1f; }

.listbox .index { padding: 0.6em 0; }

.bookmark div.user { background-color: #151619; }

.bookmark dl.stats { margin-bottom: 1.5em; margin-top: 1.5em; }

.dashboard .own, .comment span.unreviewed { background: #1a1b1f; opacity: 1.0; }

.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed { background: #1a1b1f; opacity: 0.95; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label { padding: 0.5em 1em; border-radius: 0; }

header {

margin: 0 0 3em; }

.tags.group, .more.group { padding: 0.6em; }

dashboard a,

dashboard span {

line-height: 2.2; padding: 0 0.5em; }

.listbox>.heading, .listbox .heading a:visited { margin-left: .6em; }

.listbox, fieldset fieldset.listbox { border: 1px solid #1a1b1f; margin: 0.5em auto; box-shadow: none; }

.reading .user { margin-top: 1.5em; padding-top: 0.5em; border-top: 1px solid #23252a !important; }

.comment .userstuff { background-color: #1a1b1f !important; }

input, textarea { box-shadow: none; background: #151619; padding: 0.4em; }

.filters .indicator:before { background: #404248; color: #aaa; display: inline-block; border: 1px solid #404248; margin-right: 0.25em; background-image: none; }

.filters [type="checkbox"]+.indicator:before { padding: 0 0.25em; border-radius: 2px; }

.filters [type="checkbox"]:checked+.indicator:before { background: #970000; color: #ffffff; background-image: none; }

.filters input:checked+.indicator:before { border-color: #1a1b1f; }

.filters input:checked+.indicator+span { font-weight: 500; }

.filters .exclude [type="checkbox"]:checked+.indicator:before { background: #970000; color: #ffffff; background-image: none; }

.filters [type="radio"]:checked+.indicator:before { background: #970000; background-image: none; }

ui-datepicker-div,

.ui-datepicker table { background: #1a1b1f; }

.ui-datepicker td { border: 1px solid #23252a; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #2e3138; border: 1px solid #2e3138; margin: 0.6em auto; padding: 1em; box-shadow: none; border-radius: 0; }

.listbox .index { padding: 0.6em; box-shadow: none; }

dl.meta { max-width: 75em; background: #1a1b1f; margin-top: 1em; }

dl.index dd { background: #151619 !important; }

form.search input[type="text"] { border-top-color: #151619; background-color: #202227; padding: 0.45em 0.45em; border-radius: 0; }

modal {

background: #1a1b1f; border: 10px solid #1a1b1f; margin: 3% 0; max-width: 800px; min-width: 200px; padding-bottom: 44px; position: relative; text-align: left; width: 80%; z-index: 501; }

.post .meta dd ul li { display: block; padding-bottom: 0.6em; }

workskin {

font-size: 1.2em; max-width: 52em; }

div.comment, li.comment { padding: 0.6em; background: #1a1b1f !important; }

[popcron]

Dropdown UI from enums

Remaining its still WIP :p

[birbwell]

utterly fascinated by the bizarre ways tumblr's message UI is broken as hell. im not able to open it regularly, but i can open them if:

i squish my browser window enough that the dash taskbar has to be accessed through a dropdown button, through which i can actually click on my messages

view a post on someones blog over my dash which then allows me to open my DMs

scroll up and down very very fast which shows me the flickering specter of my DMs on the bottom right corner ??????

[idrellegames]

hi so i was playing around with my codes and the link color does not work ? the hover , active , and visited does but the actual link itself will not change the color or text decoration. also wayfarer works pretty well on mobile nested nicely on screen. what code did you use because the code i am using makes it all squished thanks !

The CSS for the hover is separate from the CSS for the link.

Here's the CSS from the default Sugarcube UI. The element a (anchor, which creates links) controls your link styling. a:hover controls the styling for when the cursor hovers over it. a[disabled] controls a disabled/visited link. You can see how they have different colours and text decorations.

a { cursor: pointer; color: #68d; text-decoration: none; transition-duration: 200ms; } a:hover { color: #8af; text-decoration: underline; }

a[disabled], span.link-disabled { color: #aaa; cursor: not-allowed !important; text-decoration: none; }

Making your game responsive isn't a one-size fits all scenario. It depends on the dimensions of your UI and a number of other unique factors. You can use media queries to change what your game looks like on different viewport sizes.

If you open your game in a browser, right click and hit Inspect, you can test what it looks like with different resolutions. Switch it to mobile mode and there will be a dropdown menu with the dimensions for different common phones and tablets.

You can switch through them to see how your media queries are working with each size; usually you will have to fiddle with things to get it to fit right.

[dinnerbug]

Thought I'd leave my ao3 skin here because no matter how hard I tried I couldn't find one with a yellow background (other than one that was wayyy too bright for my liking) and I realised recently yellow backgrounds make it easier for me to read so I tried my hand at making my own with absolutely zero experience or idea of how to do so. It's a bit scuffed, (updated to fix it a little bit, yaaaay! Still scuffed tho). It's just a messily recoloured version of a skin I found on a reddit post (if I remember who's I'll come back and edit the link to it onto this) but I tried my best and it kinda worked lmao

The colour pallets I used are:

So if anyone actually sees this and wants to fix the scuffed colours please do (I'm also quite certain the dodgy colour bits are the ones more towards the end since I kinda just filled the parts I couldn't figure out what they changed with dark brown)

Enough of my rambling now so here it is, my quite banana looking yellow background skin:

body,

#inner,

#outer {

background: #ffff99;

color: #30231d;

border-color: #30231d;

}

#header {

margin-bottom: 0px;

}

#header,

#header .heading a {

background-color: #30231d;

color: #6a5750;

padding-top: 10px;

}

#header ul.primary,

#outer #footer,

.toggled form {

background: #6a5750;

color: #30231d;

box-shadow: none;

padding-top: 10px;

padding-bottom: 10px;

margin-top: 5px;

}

#header .primary a {

color: #ffffcc;

}

#header a {

color: #ffff99;

}

#header a:visited {

color: #9b4244;

}

#header a:hover {

color: #fff8dc;

}

#header a:focused {

color: #fff8dc;

}

#header .navigation .dropdown .menu li a {

color: #1F1915;

}

#header .navigation .dropdown .menu li a:hover {

color: #fff8dc;

}

#header h1.heading {

margin-left: 30px;

}

#header #search .text {

padding: 5px 7px;

}

#header .user a #greeting {

margin-top: 0.5em;

margin-right: 30px;

}

#header li.search {

float: right;

position: relative;

padding-right: 30px;

}

#footer {

background-color: #6a5750;

color: #30231d;

}

fieldset,

fieldset fieldset,

fieldset dl dl {

background: #6a5f5a;

color: #d4cecb;

border: none;

border-radius: 15px;

box-shadow: none;

}

.filters .expander {

color: #ffffcc;

}

.filters .expandable,

.filters .group dd.autocomplete {

margin: 0;

}

form dt {

border-bottom: 1px dotted #d4cecb;

}

form.filters {

background: none;

}

textarea {

width: 100%;

border-radius: 15px;

}

.sort select {

background: #30231d;

border-radius: 15px;

padding: 4px 7px;

width: 100%;

}

.autocomplete input,

input {

background-color: #b5a397;

border-radius: 15px;

padding: 4px 7px;

width: 90%;

}

input:focus,

input:focus-visible,

select:focus,

textarea:focus {

background: #b5a397;

outline: 1.5px solid #6a5750;

}

.group.listbox,

fieldset fieldset.listbox,

form blockquote.userstuff,

.group.listbox .index,

.dashboard fieldset fieldset.listbox .index,

#dashboard a:hover,

th,

#dashboard .secondary,

.secondary,

.thread .even,

.system .tweet_list li,

.ui-datepicker tr:hover {

background: #ffffcc;

box-shadow: none;

border: 1px solid #6a5750;

border-radius: 15px;

}

.listbox,

fieldset fieldset.listbox {

border: none;

}

.home .header h2 {

color: #30231d;

}

li.blurb,

li.blurb.own {

border: none;

background: #ffffcc;

padding: 2em;

border-radius: 15px;

}

.blurb h4 a:link,

.blurb h4 img {

vertical-align: bottom;

}

.blurb h4 a:link:hover,

.blurb h4 a:link:visited:hover,

.blurb h4 img {

color: #30231d;

vertical-align: bottom;

}

.splash .favorite li:nth-of-type(odd) a,

.statistics .index li:nth-of-type(even) {

background-color: rgba(106, 95, 90, 0.463);

}

#footer a:hover,

#footer a:focus,

.autocomplete .dropdown ul li:hover,

li.selected,

a.tag:hover,

li.relationships a.tag:hover,

li.characters a.tag:hover,

.listbox .heading a.tag:visited:hover,

a:visited:hover,

a.tag:visited:hover,

.symbol .question,

.qtip-content,

.splash .favorite li:nth-of-type(2n+1) a:hover,

.splash .favorite li:nth-of-type(2n+1) a:focus {

background: #f08080;

color: #ffffcc;

}

.actions a:hover,

.actions input:hover,

.actions a:focus,

.actions input:focus,

label.action:hover,

.action:hover,

.action:focus {

box-shadow: none;

border-radius: 15px;

padding: 4px 12px;

}

span.unread,

.replied,

span.claimed,

dl.index dd,

.own,

.draft,

.draft .unread,

.draft .wrapper,

.unread,

.child,

.unwrangled,

.unreviewed,

.ui-sortable li:hover {

background: #30231d;

opacity: 1;

border: none;

border-radius: 15px;

}

.actions a,

.actions a:link,

.action,

.action:link,

.actions input,

input[type="submit"],

button,

.current,

.actions label {

background: #b5a397;

border: 1px solid #30231d;

border-radius: 15px;

padding: 4px 15px;

}

.actions a:active,

.current,

a.current,

a:link.current,

.current a:visited {

background: #ffffcc;

border: 1.5px solid #ffffcc;

box-shadow: inset 1px 1px 3px #ffffcc;

border-radius: 15px;

padding: 4px 15px;

}

.actions a:hover,

.actions a:link:hover,

.action:link:hover,

.actions input:hover,

input[type="submit"]:hover,

button:hover,

.current:hover,

.actions label:hover {

background: #ffffc;

}

.actions a:visited,

.action:visited,

.action a:link,

.action a:visited {

color: #6c4f49;

}

a,

a:link {

color: #b5a397;

text-decoration: none;

}

a,

a:link,

a:visited:hover {

color: #fff8dc;

text-decoration: none;

border-bottom: 1px solid;

}

a,

a.tag,

dt a:visited {

color: #6a5750;

}

a:visited,

.listbox .heading a:visited {

color: #6c4f49;

}

li.relationships a {

background: none;

}

#main .wrapper {

box-shadow: none;

border-radius: 15px;

position: relative;

z-index: 1;

margin-top: 10px;

}

dl.meta {

border: none;

background-color: #ffffcc;

border-radius: 15px;

padding: 2em;

margin-top: 10px;

}

#workskin {

background: none;

border-radius: 15px;

padding: 0em 1em;

margin: 20px 0px;

max-width: none;

}

.preface a:hover,

.preface a:visited:hover {

text-decoration: underline;

color: #30231d;

background: none;

}

div.comment,

li.comment {

border: none;

border-radius: 15px;

padding: 15px;

color: #30231d;

background: #6a5f5a;

}

.comment h4.byline {

color: #6a5f5a;

border-radius: 15px;

padding-right: 20px;

background: #ffffcc;

}

.toggled form,

.dynamic form {

background: #c8bebb;

}

a.rss span {

background: none;

padding: 0px;

}

.search [role="tooltip"] {

color: #30231d;

}

.bookmark .user,

.reading h4.viewed {

background: none;

border: 1px solid #ffffcc;

}

#dashboard .current {

background: #ffffcc;

}

.inspired.index.group,

.signup.index.group,

.assignment.index.group {

background: #ffffcc;

padding: 0.25em;

}

.inspired.index.group dd {

border-bottom: 1.5px dotted #ededed;

}

form.verbose legend,

.verbose form legend {

background: #6a5f5a;

border: 2px solid #ffffcc;

box-shadow: none;

}

.delete a,

span.delete {

padding: 0 .1em;

box-shadow: 0px 0px 2px rgba(0, 0, 0, .75);

background-color: #ffffcc;

}

#modal {

background: #b5a397;

border-color: #30231d;

border-radius: 15px;

}

#modal .footer .action.modal-closer {

background-color: #00ff00;

}

#symbols-key dl {

background: #00ff00;

border: none;

border-radius: 15px;

padding: 1em;

margin-bottom: 0px;

}

.notice,

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.error,

.comment_error,

.kudos_error,

.alert.flash {

background: #6a5750;

border: 1px solid #30231d;

margin: .643em auto;

padding: 15px;

clear: right;

box-shadow: 1px 1px 2px gray;

border-radius: 15px;

color: #ffffcc;

}

ul.actions {

margin-bottom: 0px;

}

.comment fieldset {

padding: 2em;

}

form.verbose legend,

.verbose form legend {

box-shadow: none;

border-radius: 15px;

}

#bookmark-form.post.bookmark form {

background: #ffffcc;

border-radius: 15px;

margin-top: 1em;

padding: 2em;

}

.new.dynamic #bookmark-form {

background: #ffffcc;

}

.toggled form p.footnote,

.dynamic form p.footnote {

padding-bottom: 0.2em;

}

.removeme fieldset {

background: #ffffcc;

color: #ffffcc;

}

#outer,

.javascript,

.statistics .index li:nth-of-type(even),

#tos_prompt,

.announcement input[type="submit"] {

background: #30231d;

}

media="only screen and (max-width: 42em),

handheld" .filtering .filters #leave_filters,

.javascript .filters p.narrow-shown {

background: #ffffcc;

}

.warnings .tag,

.work .warning a.tag,

dt.warning.tags a,

dd.warning.tags a {

color: #9b4244;

font-style: normal;

}

li.relationships a,

.relationships .tag,

.work .relationships a.tag,

dt.relationship.tags,

dd.relationship.tags a {

background: none;

color: #a66a40;

}

.characters .tag,

.work .characters a.tag,

dt.character.tags,

dd.character.tags a {

color: #569566;

}

.freeforms .tag,

.work .freeforms a.tag,

dt.freeform.tags,

dd.freeform.tags a {

color: #4c709a;

}

.kudos_error {

border-color: #090;

background: #d1efd1;

}

[cornbread-but-minecraft]

Beta 6 of Cornbread's Texture Fixer is now available on Planet Minecraft! We are getting bizarrely close to the full release, but unfortunately, almost everything visual there is left is gonna be really annoying to fix, so development is probably gonna slow down a bit. Besides, some of my other packs also need updates.

Download Link

Change Log:

Bug Fixes

The way Mojang flattened Cobblestone Walls conflicted with the way this pack defined the textures for Sandstone Walls, causing Sandstone Walls to revert to vanilla and Cobblestone Walls to take on the appearance of other wall types depending on the exact shape of the wall. These have both been fixed. (Removed, added blocks JSON)  ৹ The flattening of walls technically makes it possible to intentionally change the texture of a wall based on its shape (useful for sandstone and polished walls), but this behavior is ridiculously broken to an unimaginable degree (seriously. try imagining it. you'll be wrong.) and so will have to come later, if at all.

The Bundle Storage Bar no longer moves up slightly when scrolling through said Bundle. (Added UI JSON)

A closed version of the Bundle is no longer visible behind the open version when scrolling through one in a crafting grid. (Added UI JSON)

The Mob Effects Screen should no longer appear brighter than in vanilla during its opening and closing animations when in a dark space. (Edited UI JSON)

This pack's fixes to the Player List on the Pause Screen now apply when a scoreboard is displayed there. (Added UI JSON)

The label on the Chat Settings font type dropdown is now scaled correctly when using Noto Sans. (Added UI JSON)

General Changes

Updated grass sides fix to include the Pale Garden. (Edited terrain JSON)

Removed the textures for all types of Nether Bricks since vanilla fixed their issue in game version 1.21.50. (This also fixes an issue that I had previously not noticed.)

Shifted the texture for Mud Bricks a pixel to the left for consistency with other types of bricks. (Added texture)

Turns out that Bedrock Edition's intended green item slot highlight is very difficult to work with from a creative perspective. As such, the changes made in Beta 5 have been reverted, giving the slot highlight (mostly) the same appearance as on Java Edition. (Re-added UI JSON, removed textures)  ৹ The issues the pack had with the opacity of the slot highlight in Bundles in Beta 4 (as well as vanilla's issues in 1.21.50) have been fixed. (Added UI JSON, textures)  ৹ Uses custom textures at "textures/cb_custom_ui/container/slot_highlight", "[...]/bundle/slot_highlight_front", and "[...]/bundle/slot_highlight_back".

Relatedly, the hover appearance of the buttons on the Beacon Screen has been reverted to vanilla, regardless of the subpack chosen. (Removed texture)

The Recipe Book and Creative Inventory no longer scroll two pixels lower down than they should. (Added UI JSON)

The various elements of the Bundle UI are now properly aligned with each other. (Added UI JSON)

Mojang added an option to the GUI Log Level dropdown in the Settings Screen, making the dropdown scroll in vanilla. It now scrolls with the pack enabled as well. (Added, removed UI JSON)

Bundles should no longer flicker a little when opening them for the first time in a session. (Added UI JSON)  ৹ Bundles may still flicker occasionally when the first item highlighted inside is also a Bundle. I have no clue why this is.

Wolves should no longer be off center. (Added model JSON)

The Mob Effects Screen is now the same size as in vanilla. (Edited UI JSON)

The Player List on the Pause Screen should no longer overlap the outline for its background. (Added UI JSON)

The Scroll Bar for the Player List should now be vertically aligned with the scrolling content. (Added UI JSON)

Fixed nineslice information for the Player List's background's outline.

Players' names and scores no longer have a nearly invisible drop shadow when a scoreboard is displayed on the Player List, for consistency. (Added UI JSON)

Pale Oak Hanging Signs now use the stripped log texture for their particles. (Added blocks JSON)

The Pale Oak Sign texture now matches Java Edition and just generally looks less garbage. (Added texture)

The rarities of Books and Enchanted Books are no longer swapped. (Added items JSON)

The Button for expanding and contracting the sidebar in the Dressing Room and Marketplace is now aligned correctly. (Added UI JSON)

Technical Changes

Re-added global UI variable "$cb_ignore_disabled_slot_highlight" since it is now used again.

Removed work on my hypothetical fix for mouse controls on the Crafter Screen. Experimentation will have to resume some other time.

Removed JSON responsible for left hand mode in the Mob Effects Screen since it didn't seem to be working anyway.

[vyxated]

do you plan to make a mini-update for sims 2 ui for the new "apply to all outfits" section in cas? at least for me it's broken (the dropdown menu doesn't work at all); no rush at all though!

Yes ^0^ I'll be spending the time today to work on my UI mods. You can expect the update to be released some time after the UI cheats mod is updated too.

[readingaway]

@elfspectations @theomnilegent @cosmogyros and everyone else looking for a way to give feedback to goodreads, I might have found the form.

found here

So goodreads keeps any contact or feedback options hidden, I had to go through... 3? 4? other pages before finding the contact. They don't give an option for "feedback" in the dropdown list but there is an "other" and a "suggest a new feature" option.

Hiding my drafting/ ideas for how to phrase feedback below.

I'll need to sit on this for a bit while I try to wrap up work but the main points I plan to make are -

Regarding UI change in the "my reading challenge": The change is clearly meant to reflect the trends in website and social media UI. Everything is sleek, minimalist, bubbles, and one at a time. For a site like goodreads, however, this new UI of a dropdown one-at-a-time list is irritating at best.

I read over 100 books a year and will look at the reading challenge page for a few reasons, but the one that brought this change to my attention was that I was trying to jog my memory about some reads earlier this year. Having to scroll through hundreds of books one by one is a pain, it is unnecessary, and ruins the visual language of the goodreads site.

One of the reasons I'm still using goodreads frequently after more than 12 years is because of the (former) cover layout. If the UI on "my shelves" is forcibly changed in the way the reading challenge page has been, I don't think I'll keep my goodreads account. I want to be able to look at book covers side by side, not line long lists. If I want a list, with or without pictures of the covers, there are other reading log sites - some with better tracking features and recommendations - as well as spreadsheets, physical reading journals, and Pinterest.

Tl;dr, If it ain't broke, don't fix it. The goodreads UI of being able to look at book covers side by side (in groups of six) works well and changing the reading challenge UI to match current trends is frustrating for prolific readers and visual thinkers, and turns goodreads into more white noise, indistinguishable from every other website.

Regarding the new Readers' Choice Bookmarks Challenges: I don't understand what this is, and I don't like it.

Why am I confused? This feature appears to only be on mobile, did not have any announcement or explanation that would've shown up on the home page, and is not customizable, applicable, or personalized.

I am already completely disenchanted by the Goodreads "Choice" Awards - because not only has it become more and more blatantly a contest of popularity/ high sales, but there wasn't even an option to write in a vote for 2024. Whose choice is it then, if actual readers can't have a say? Y'all could just as easily have put a "nominate" button as standard for every book on the site with a 2024 release date and let an algorithm eliminate those that didn't meet base criteria like ratings. But I digress.

These bookmark challenges are just more of the same. A popularity contest that I have no part in, and therefore have no interest in.

The formatting and idea has some promise if 1) bookmark challenges become another feature that people can create and personalize for themselves and their groups. Like the list feature that goodreads already has, with the improvement of gaining achievement badges for reading the books on the list. Which leads to 2) if the bookmarks were added into the home page and profile UIs, and perhaps given their own tab or drop-down section.

If those changes were made then bookmark challenges would likely become a fun, engaging feature. Goodreads members could set smaller reading challenges for themselves, for friends, and for the wider goodreads community. I would personally use those challenges to encourage reading widely.

[punkasshunter]

After much, much, much experimentation and back-and-forth, here it finally is! This is the Left 4 Dead-themed Ao3 site skin I've been working on for the past couple months! So far as I can tell, no one has posted anything like this, which obviously I had to change.

This is my first time making an Ao3 skin, so there will likely be areas that I've missed that will turn up broken or clumsy, and if so I will keep a running "change log". With that in mind, I'd strongly request feedback so that I can make these fixes and update the CSS with them!

This is to be followed in the near (likely within a few days) future by a similar work skin, allowing for a similar look within just a posted work, and giving the ability to use subtitle-colored character text like the tags in this!

This is not a lightweight skin; it themes virtually every area of Ao3 in some way. With that in mind, here are some major features!

"Saferoom graffiti"-style comments and inbox mail and health bar UIs for comment and inbox icons

A fun new site header! Just wait and see.

Campaign poster-style blurbs for works!

Campaign menu selection border title blocks and image borders.

Canon character tags in the color of their ingame subtitles, for both the survivors and special infected!

Detailed instructions are in the Ao3 work linked in this post, but I'll include them here as well under the cut.

Instructions to create and use the skin

This is important! If you will be using this skin for mobile at all, you must go through the steps to add the mobile parent skin, or else a lot will be broken and borderline unusable on small screens. If you will be using for desktop solely you can feel free to use only the main skin.

Creating the parent skin:

The first thing that needs to be done is to create a site skin with the mobile fix CSS. Go to your dashboard, and select the button on your side menu that says "Skins". From there, you will want to click "Create Skin". For skin type, select "site skin". Title the skin something recognizable, such as "L4D site skin mobile fixes". Then copy all of the code found here into the body. On "Advanced Options" hit "Show". The only setting here you need to worry about is Media, where you will check the box for "only screen and (max-width: 42em)". It should look like this.

Hit "Submit" and step 1 should be done!

The main skin:

Step two is to create the main portion of the skin and add the mobile fixes as the parent skin! Return to "Skins" on your dashboard, and create a second site skin. Title this something recognizable as well, such as "L4D site skin". Once again, you'll be selecting "Site skin" in the dropdown. Copy all of the code found here into the body. If you won't be on mobile at all, hit submit now and the skin will be good to go. Otherwise, show "Advanced Options" again. This time, the category you want is "Parent Skins". In the selection box, begin to type and then select whatever you titled your mobile fix skin, and then press "Add Parent". This should look something like this.

Hit submit again, and the skin creation is done!

The theme fonts:

Note that this skin was designed to use two text fonts from the Left 4 Dead games, Future Rot and Stubble Bold, to look exactly as intended, and one more open text font, Moinho, for the headings of the graffiti-styled comments and inbox. Those can be found in this folder, but are optional, and the skin will function fine without them. To use them, simply download, and then once they are downloaded, click on them and press “Install” in the window that appears with the example text.

Using the skin:

You're almost done! The last step is simply to go to the "Skins" tab of your dashboard again, where you should see the blurbs for your mobile fix skin and the main skin. Click "Use" on the main skin, and that will select the skin to use!

Here are, without spoiling a couple of the fun easter eggs, some preview images of the skin on desktop!

...And on mobile!

[judithonlinux]

AO3 Site Skin - DarkPurple

for @beastlyinstrument

Theme colors: #070707, #191919, #f2f2f2, #541f7b, #551f78

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #070707; color: #f2f2f2; border-color: #191919; outline: #191919; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #070707; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #191919; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #070707; }

#header ul.primary, #outer #footer, .toggled form { background: #191919; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #070707; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #541f7b; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #191919; border-color: #551f78; box-shadow: 0 0 1px #541f7b; }

input, textarea { box-shadow: inset 0 1px 2px #541f7b; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #541f7b; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #541f7b; color: #191919; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #541f7b; color: #191919; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #541f7b; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #541f7b; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #f2f2f2; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #f2f2f2; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #551f78; border-color: #191919; color: #f2f2f2; box-shadow: inset 0 -8px 4px #551f78, inset 0 8px 7px #551f78; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #551f78; background: #191919; border-color: #191919; box-shadow: inset 2px 2px 2px #191919; }

.actions a:active, .current, a.current, .current a:visited { color: #f2f2f2; background: #551f78; border-color: #f2f2f2; box-shadow: inset 1px 1px 1px #070707; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #f2f2f2; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #f2f2f2; }

.mce-container input:focus { background: #f2f2f2; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #191919; }

.announcement .userstuff a:visited { color: #551f78; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #551f78; }

.event.announcement .userstuff a, .filters .expander { color: #f2f2f2; }

.chapter p { font-size: 110%; }