#javascript background

[one-dollar-design]

Premium Animated Background Bundle - Particle & Star Effects (Background + Transparent Versions)

LIVE DEMO - Premium Animated (Background)

LIVE DEMO - Premium Animated (Transparent)

BUY NOW

Elevate your website's visual appeal with our Premium Animated Background Bundle - a collection of professionally crafted particle and star effects designed to create immersive user experiences. This versatile package includes two distinct versions for maximum flexibility:

Gradient Background Version: Features a stunning cosmic-themed gradient background with:

150+ twinkling stars with randomized glow effects

100+ dynamic floating particles

Smooth parallax movement

Modern dark-blue/purple color scheme

Transparent Background Version: Perfect for seamless integration:

Fully transparent canvas

120+ semi-transparent glowing stars

80+ ethereal particles with opacity control

Works over ANY background color/image

Key Features:

✅ Double Value: Two complete versions in one package ✅ Zero Dependencies: Pure vanilla JavaScript + CSS ✅ Lightweight: Only 4KB minified (CSS+JS combined) ✅ Fully Responsive: Auto-adapts to all screen sizes ✅ Cross-Browser: Works on Chrome, Firefox, Safari, Edge ✅ Easy Customization: Change colors/size/speed in 2 lines of code

Perfect For:

Website hero sections

SaaS product backgrounds

Portfolio showcases

Landing page decorations

Presentation visuals

Digital product showcases

Technical Specifications:

Format: HTML5/CSS3/JavaScript

Total Files: 8 (4 HTML, 2 CSS, 2 JS)

Documentation: Detailed README included

License: Commercial Use (MIT)

Why Choose Our Bundle?

Performance Optimized: CPU-friendly animations with intelligent element recycling ensure buttery-smooth performance even on mobile devices.

Professional Aesthetics: Carefully calibrated timing functions and randomized parameters create organic, natural-looking motion that stands out from amateur effects.

Developer Friendly: Clean, commented code with modular architecture makes customization effortless. No jQuery or bloated libraries!

Instant Integration: Includes ready-to-use HTML files - just drag & drop into your project. Works with React/Vue/WordPress via simple wrapper.

Sample Customer Use Cases:

Web Designer: "Used the transparent version over client's photography portfolio - created magical hover effects!"

SaaS Developer: "Background version made our analytics dashboard feel premium and high-tech"

Marketer: "Increased conversion rate by 17% with animated hero section"

Agency Owner: "Our go-to solution for client projects needing wow-factor backgrounds"

Commercial License Includes:

Use in unlimited projects

Client work authorization

Resell in compiled products

Lifetime updates

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[divinector]

Animated Bubbles Background

[wachi-delectrico]

They should remake Rap Rat. It's a fun gimmick for a game but now we live in an era where we could actually have randomized video prompts instead of them being simulated to be random

[sinsangria]

Website is still a WIP but I'm happy with how it's looking so far! The lore is also a bit unpolished but I think it pretty good for a non-writer! Link in notes. Also my Homestuck reveal post only needs 8 more notes, so check that out as well if interested.

[codingflicks]

Water Ripples Effect using jQuery

[jcmarchi]

Modern Scroll Shadows Using Scroll-Driven Animations

New Post has been published on https://thedigitalinsider.com/modern-scroll-shadows-using-scroll-driven-animations/

Modern Scroll Shadows Using Scroll-Driven Animations

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s one of his all-time favorite CSS tricks), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element.

Geoff covered a newer approach that uses the animation-timeline property. Using animation-timeline, we can tie CSS animation to the scroll position. His example uses pseudo-elements to render the scroll shadows, and animation-range to animate the opacity of the pseudo-elements based on scroll.

Here’s yet another way. Instead of using shadows, let’s use a CSS mask to fade out the edges of the scrollable element. This is a slightly different visual metaphor that works great for horizontally scrollable elements — places where your scrollable element doesn’t have a distinct border of its own. This approach still uses animation-timeline, but we’ll use custom properties instead of pseudo-elements. Since we’re fading, the effect also works regardless of whether we’re on a dark or light background.

First, we’ll define our scrollable element with a mask that fades out the start and end of the container. For this example, let’s consider the infamous table that can’t be responsive and has to be horizontally scrollable on mobile.

Let’s add the mask. We can use the shorthand and find the mask as a linear gradient that fades out on either end. A mask lets the table fade into the background instead of overlaying a shadow, but you could use the same technique for shadows.

.scrollable mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);

Defining the custom properties and animation

Next, we need to define our custom properties and the animation. We’ll define two separate properties, --left-fade and --right-fade, using @property. Using @property is necessary here to specify the syntax of the properties so that browsers can animate the property’s values.

@property --left-fade syntax: "<length>"; inherits: false; initial-value: 0; @property --right-fade syntax: "<length>"; inherits: false; initial-value: 0; @keyframes scrollfade 0% --left-fade: 0; 10%, 100% --left-fade: 3rem; 0%, 90% --right-fade: 3rem; 100% --right-fade: 0;

Instead of using multiple animations or animation-range, we can define a single animation where --left-fade animates from 0 to 3rem between 0-10%, and --right-fade animates from 3rem to 0 between 90-100%. Now we update our mask to use our custom properties and tie the scroll-timeline of our element to its own animation-timeline.

Putting it all together

Putting it all together, we have the effect we’re after:

We’re still waiting for some browsers (Safari) to support animation-timeline, but this gracefully degrades to simply not fading the element at all.

Wrapping up

I like this implementation because it combines two newer bits of CSS — animating custom properties and animation-timeline — to achieve a practical effect that’s more than just decoration. The technique can even be used with scroll-snap-based carousels or cards:

It works regardless of content or background and doesn’t require JavaScript. It exemplifies just how far CSS has come lately.

[codenewbies]

Background Color Change JavaScript

[krisztapwonderland]

Please check out my Poshmark closet!

Please check out my favorite poshers as well below.

THANK YOU SO MUCH!

[robindavis]

Shop more of my listings on Poshmark

[retrcmoon]

XOXO - RPG THEME SET - 1k SPECIAL !!!

This theme set is completely free. It is a special thank you for 1k followers. Please support me and my work by liking and reblogging this post!

[ BLOG THEME INFORMATION ]

Option between 400px, 450px, 500px and 540px posts.

Custom Body Fonts and Body Font sizes (11px - 13px)

Two Custom Header Links

Two Dropdown Links with unlimited link options

Dropdown Links are optional

Fully supports NPF (beta editor) posts.

The theme adjusts to different screen sizes.

Visible Source Link & Scroll to top button.

A lot of the design can be changed in the editing panel. Everything else is explained in the code.

Sidebar Boxes for: Welcome, Events, Admins, Quick Links and Schedule

Quick RPG Information on the header (Member & Application count, short rp information and Plot description)

Disclaimer and further blog information in the footer.

Sticky Sidebar

Footer can be turned off.

[ LOCATION PAGE ]

The Page does not contain any javascript (100% java free)

Comes in 2 versions (with and without filters)

Location picture sizes are 130 x 130. They will resize automatically.

Option for a background picture.

3 Custom Links

All colors can be easily edited on top of the css code

The theme will resize to different screen sizes.

Custom accent colors (explanation in the code)

[ CHARACTER PAGE ]

The Page does not contain any javascript (100% java free)

Comes in 2 versions (with and without filters)

Character picture sizes are 155 x 150. They will resize automatically.

Option for a background picture.

3 Custom Links

All colors can be easily edited on top of the css code

The theme will resize to different screen sizes.

Character boxes have custom links.

Custom accent colors (explanation in the code)

[ GUIDELINES ]

Do not claim as your own.

Do not remove the credit!

Do not use as a base code or take parts of this code for your theme.

Feel free to edit as much as you want!

All credits are mentioned in the code!

Static Blog Theme Preview  + Page Preview Links + All Codes  Location Page Preview + All Codes  Character Page Preview + All Codes  All codes (without preview)

[hiveswap]

She's got a bubble effect now (and a custom exclamation mark cursor that only shows up when hovering over this box)

embedded scrollable updates box in case my homepage wasnt cluttered enough

[achillesuwu]

Well guess I made it even more yellow (code below !)

#footer .group,

.post fieldset fieldset,

fieldset fieldset {

background: none;

}

#header {

background: #000 url('https://media.archiveofourown.org/news/milestones/2024-08-seventeen-years-otw/2024-08-seventeen-years-otw-pattern.jpg');

background-size: 350px;

}

#header .heading a,

#header .primary .dropdown a:focus,

#header .heading a:visited,

#main .pagination .current,

h2 {

color: #ffe8b4;

}

#header .clear,

#footer {

border-color: #000000;

}

#header .actions a[href="/menu/fandoms"],

#header .actions a[href="/menu/browse"],

#header .actions a[href="/menu/search"],

#header .actions a[href="/menu/about"] {

color: #DEB887;

}

#footer ul {

background: url('https://live.staticflickr.com/7284/9616997915_4194b6c6f7_h.jpg');

background-size: 350px;

}

#footer ul li:nth-child(1) ul,

#footer ul li:nth-child(2) ul,

#footer ul li:nth-child(3) ul,

#footer ul li:nth-child(4) ul {

background: rgba(0, 0, 0, 0.0);

}

#header .primary {

background: #8a1a10;

}

#footer {

background: #8a1a10;

}

input[type="text"],

textarea,

select {

background: #191919;

color: #DEB887;

}

select:focus {

background: #2a2a2a;

}

option {

background: #191919;

color: #DEB887;

}

#work form fieldset.work.meta dl dd.warning.required fieldset,

#main form fieldset.work.meta dl dd.warning.required fieldset {

color: #DEB887;

}

#bookmark-form form {

background: #2a2a2a;

color: #DEB887;

}

#error {

color: #000000;

}

fieldset,

.verbose fieldset {

border-color: #404040;

background: #000000;

border: 1px solid #595959;

}

.search [role=tooltip] {

background: #333;

border: 1px solid #666;

}

#main a:visited {

color: #c88937;

}

#main a.tag:visited:hover {

color: #111;

}

body,

.group,

.group .group,

.region,

.flash,

form dl,

#main .verbose legend,

.notice,

ul.notes,

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: #000000;

color: #FFE4B5;

border-color: #800000;

outline: #111;

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,

.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: #191919;

}

a,

a.tag,

a:link,

#header a:visited,

#header .primary .open a,

#header .primary .dropdown:hover a,

#header #search input:focus,

#header #search input:hover,

.userstuff h2,

#dashboard a,

#dashboard span,

#dashboard .current,

.group .heading,

.filters dt a:hover {

color: #DEB887;

}

#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: #111;

color: #ffe8b4;

}

#outer,

.javascript,

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

#tos_prompt,

.announcement input[type="submit"] {

background: #000000;

}

#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: #2a2a2a;

}

.group.listbox,

fieldset fieldset.listbox,

#main li.blurb,

.wrapper,

#dashboard .secondary,

.secondary,

form blockquote.userstuff,

.thread .comment,

.toggled form {

box-shadow: 1px 1px 3px #000;

}

#dashboard .current,

.actions a:active,

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: #000;

border-color: #191919;

box-shadow: -1px -1px 3px #000;

}

input,

textarea {

box-shadow: inset 0 1px 2px #000;

}

li.blurb,

.blurb .blurb,

.listbox .index,

fieldset fieldset.listbox,

.dashboard .listbox .index {

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

}

#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 {

background: #ffedc5;

border-color: #988352;

color: #111;

}

#header #greeting img,

#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: #ffe8b4;

}

#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: #8a1a10;

}

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

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

.splash .favorite li:nth-of-type(odd) a:visited:focus {

background: #ffe8b4;

color: #111;

}

a:visited,

.actions a:visited,

.action a:link,

.action a:visited,

.listbox .heading a:visited,

span.series .divider {

color: #BC8F8F;

}

.actions a,

.actions a:link,

.action,

.action:link,

.actions input,

input[type="submit"],

button,

.current,

.actions label,

#header .actions a,

#outer .current {

background: #191919;

border-color: #222;

color: #eee;

box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #191919;

text-shadow: none;

}

.actions a:hover,

.actions input:hover,

#dashboard a:hover,

.actions a:focus,

.actions input:focus,

#dashboard a:focus,

.actions .disabled select {

color: #999;

border-color: #000;

box-shadow: inset 2px 2px 2px #000;

}

.actions a:active,

.current,

a.current,

.current a:visited {

color: #DEB887;

background: #191919;

border-color: #DEB887;

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

}

.delete a,

span.delete {

box-shadow: -1px -1px 2px rgba(255,255,255.25);

}

.actions label.disabled {

background: #222;

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 {

text-shadow: none;

color: #DEB887;

background: none;

}

#header .actions a,

fieldset fieldset,

.mce-container button,

.filters .expander,

.actions .disabled select {

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: #111;

}

.announcement .userstuff a:visited {

color: #666;

}

.announcement .userstuff a:hover,

.announcement .userstuff a:focus {

color: #999;

}

.event.announcement .userstuff a,

.filters .expander {

color: #eee;

}

[divinector]

Animated Background

[ethereal-themes]

MEL: ABOUT PAGE BY ETHEREAL THEMES

View on payhip ($6.00), check out the preview or support me on patreon for more themes + pages, header templates, coloring psds and more every month!

About Page

Navigation: Home, ask + 4 links (room for more if needed)

**No Javascript Needed**

Color options for: background, links, all content boxes, five accents + more

Sections include:

Profile with avatar, name and links

Basics/info list

Sticky note quote

About me notecard

Tags links

Scrolling Project/WIPs cards

Social media sticker links

Images Include:

100x100 Avatar

170x170 Polaroid

Three additional images

Advanced HTML to edit colors and information as this is only available as an HTML page; box + table size changes not recommended. Let me know if you come across any issues.

[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; }