From 5eabb9424a101720f2a5a4cbfc562662bdc11d13 Mon Sep 17 00:00:00 2001 From: Mariu Date: Thu, 25 Nov 2021 10:26:35 +0100 Subject: [PATCH] bug fixing + sepia --- dyslexia-dark.css | 19 +- dyslexia-sepia.css | 1777 +++++++++++++++++++++++++++++++++++++++ dyslexia.css | 17 +- mobile-fix-dyslexia.css | 4 + 4 files changed, 1810 insertions(+), 7 deletions(-) create mode 100644 dyslexia-sepia.css diff --git a/dyslexia-dark.css b/dyslexia-dark.css index 5e24058..fd02f7a 100644 --- a/dyslexia-dark.css +++ b/dyslexia-dark.css @@ -1139,7 +1139,7 @@ a.tag, a.tag:visited, a.tag:link { display: inline-block; - padding: 4px 7px; + padding: 3px 7px; margin: 4px 0px; border: 2px solid #3aacff; border-radius: 5px; @@ -1149,6 +1149,11 @@ a.tag:link { content: ""; } +h5.fandoms.heading { + /*this removes the commas in the fandom tags (yeah, it's weird)*/ + color: transparent; +} + .favorite a.tag { border: none; } @@ -1340,13 +1345,19 @@ input[type=checkbox]:hover, input[type=checkbox]:checked, input[type=radio]:checked, .actions input[type=checkbox]:checked, -label.action input[type=checkbox]:checked, -input[type=checkbox]:hover, -.actions input[type=checkbox]:hover { +label.action input[type=checkbox]:checked { background-color: #3aacff; border: none; } +input[type=checkbox]:hover, +.actions input[type=checkbox]:hover, .filters [type=checkbox]:hover + .indicator:before, +.filters [type=radio]:hover + .indicator:before, +.filters .exclude [type=checkbox]:hover + .indicator:before { + background-color: #3e8ac4; + border: none; +} + form.search input[type=text], dd.autocomplete li.input, input[type=radio], diff --git a/dyslexia-sepia.css b/dyslexia-sepia.css new file mode 100644 index 0000000..e15a3d8 --- /dev/null +++ b/dyslexia-sepia.css @@ -0,0 +1,1777 @@ +@charset "UTF-8"; +/* +=========================== +General font and text stuff +=========================== +*/ +h1, +h2, +h3, +h4, +h5, +h6, +.heading { + /* + -----------------TITLE FONT----------------- + This is the font for the titles, not for the body of text. + If you want to change it remember to provide fallback fonts + (something like 'serif' or 'sans-serif', separated by a comma) + */ + font-family: "Trebuchet MS", Calibri, sans-serif; + border-bottom: none; + font-weight: 700; +} + +body, +input, +.toggled form, +.dynamic form, +.secondary, +.dropdown, +button, +blockquote, +.filters dt, +.filters dd, +.filters input[type=submit], +.filters .expander, +.bookmark .user .meta, +.datetime, +a.work, +span.symbol, .splash .news .meta, select { + /* + -----------------MAIN FONT----------------- + This is the font for the entire body of text. If you need to change it please do it here + Please also remember to provide fallback fonts + (something like 'serif' or 'sans-serif', separated by a comma) + */ + font-family: "Trebuchet MS", Calibri, sans-serif; +} + +#footer li, +.comment .userstuff, .blurb dl.stats, +.actions li a, +.actions li input, +.actions li input[type=submit], +input[type=submit], +.actions li .current, +.actions li label, +#header .primary .menu a, +#header .primary .menu .current, +form.search input[type=text], +dd.autocomplete li.input, +input[type=radio], +input[type=checkbox], +input[type=file], +input.number, +p input, +p select, +.heading select, +li select, +input:focus, +select:focus, +textarea:focus, +textarea, +p.type, +.meta dd, #workskin, +.blurb .userstuff, +.news .userstuff, +.system .userstuff, +.collection blockquote.userstuff, #header h1, +#header, +#outer.wrapper, +#inner.wrapper, +#modal, +.filters .expander, .qtip-content, h5, +h6, +h4.viewed, p.note, blockquote, body, +input, +.toggled form, +.dynamic form, +.secondary, +.dropdown, +button, #main, select { + /* + -----------------TEXT SIZE----------------- + This sets the default text size + if you need to increase or decrease, please keep in mind that "em" + as a measurement changes A LOT between numbers, so you might want to try + decimals like 1.1em, 1.2em, 1.15em before going a number up (or down) + */ + font-size: 1.05em; +} + +.home .header h2, +.preface h3, +.faq .categories h3, +.userstuff h3, +#footer a { + /* + Removes all the underlines from titles + */ + border-bottom: none; +} + +#chapters, +#chapters p, +textarea, +#footer li, +.preface.group blockquote.userstuff, +.preface.group blockquote.userstuff p, +.comment .userstuff, #workskin, +.blurb .userstuff, +.news .userstuff, +.system .userstuff, +.collection blockquote.userstuff, +#inner.wrapper, +#modal, h3, .filters dt, +.filters dd, +.filters input[type=submit], +.filters .expander, .userstuff li, .userstuff ul, .userstuff p, .userstuff h2, .userstuff h1, .userstuff h3, .userstuff h4, p.note, blockquote, body, +input, +.toggled form, +.dynamic form, +.secondary, +.dropdown, +button, #main, select { + /* + -----------------LINE HEIGHT----------------- + This is the line height of the text. + + if you need to increase or decrease, please keep in mind that "em" + as a measurement changes A LOT between numbers, so you might want to try + decimals like 1.7em, 1.5em, 1.65em before going a number up (or down) + */ + line-height: 1.8em; +} + +.filters dt, +.filters dd, +.filters input[type=submit], +.filters .expander { + /* + a smaller text for the filters + just remove the font-size line if you want it bigger + */ + font-size: 0.84em; +} + +h4.heading { + /*ALLTHETITLESSSS*/ + font-size: 1.640625em; + font-weight: 700; +} + +h4 { + /* should this be here if I reset it later? */ + font-size: 1.3125em; +} + +h4.heading .datetime { + /* slightly bigger date on blurbs*/ + padding: 5px; + font-size: 0.5376em; +} + +.preface a:hover { + text-decoration: none; +} + +#header { + /* + font size of the stuff in the header menu + */ + font-size: 1.05em; +} + +.news h4.heading { + margin: 0; +} + +code, pre { + font-family: "Courier New", Courier, Monospace; + font-size: 1.05em; + padding: 1em 0.5em; +} + +html, +body, +div, +span, +applet, +object, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +.filters dt, +.filters dd, +.filters input[type=submit], +.filters .expander { + /* + for some weird reason this is needed + or fonts just won't behave + */ + font-size: 100%; +} + +h1, +h2 { + /* + thicc titley titles + */ + font-size: 2.05078125em; + font-weight: 600; +} + +h3 { + /* + other titley titles, not as thicc + */ + font-size: 1.640625em; +} + +.blurb dl.stats, +.actions li a, +.actions li input, +.actions li input[type=submit], +input[type=submit], +.actions li .current, +.actions li label, +#header .primary .menu a, +#header .primary .menu .current, +form.search input[type=text], +dd.autocomplete li.input, +input[type=radio], +select, +input[type=checkbox], +input[type=file], +input.number, +p input, +p select, +.heading select, +li select, +input:focus, +select:focus, +textarea:focus, +input, +p.type, +.meta dd, #chapters, +#chapters p, +textarea, +#footer li, +.preface.group blockquote.userstuff, +.preface.group blockquote.userstuff p, +.userstuff p, +.comment .userstuff, #workskin, +.blurb .userstuff, +.news .userstuff, +.system .userstuff, +.collection blockquote.userstuff, body, +#header, +#outer.wrapper, +#inner.wrapper, +.secondary, +#modal, +.filters .expander { + /* + -----------------WORD SPACING----------------- + This sets the spacing between words + + if you need to increase or decrease, please keep in mind that "em" + as a measurement changes A LOT between numbers, so you might want to try + decimals like 0.22em, 0.25em, 0.3em before going a number up (or down) + */ + word-spacing: 0.21em; +} + +.blurb dl.stats, +.actions li a, +.actions li input, +.actions li input[type=submit], +input[type=submit], +.actions li .current, +.actions li label, +#header .primary .menu a, +#header .primary .menu .current, +form.search input[type=text], +dd.autocomplete li.input, +input[type=radio], +select, +input[type=checkbox], +input[type=file], +input.number, +p input, +p select, +.heading select, +li select, +input:focus, +select:focus, +textarea:focus, +input, +textarea, +p.type, +.meta dd, body, +#header, +#outer.wrapper, +#inner.wrapper, +.secondary, +#modal, +.filters .expander { + /* + -----------------LETTER SPACING----------------- + This sets the spacing between letters + + if you need to increase or decrease, please keep in mind that "em" + as a measurement changes A LOT between numbers, so you might want to try + decimals like 0.025em, 0.03em, 0.035em before going a number up (or down) + */ + letter-spacing: 0.02em; +} + +#chapters, +#chapters p, +textarea, +#footer li, +.preface.group blockquote.userstuff, +.preface.group blockquote.userstuff p, +.userstuff p, +.comment .userstuff, div#comments_placeholder, .blurb dl.stats, #workskin, +.blurb .userstuff, +.news .userstuff, +.system .userstuff, +.collection blockquote.userstuff { + /* + -----------------TEXT ALIGNS TO LEFT----------------- + This sets the text alignment. + + you can change it to justify, right or center. + */ + text-align: left; +} + +#workskin { + /* + Trying to override potential workskins so that the text is never justified + */ + text-align: left !important; +} + +div#comments_placeholder, #workskin, +.blurb .userstuff, +.news .userstuff, +.system .userstuff, +.collection blockquote.userstuff { + /* + -----------------PARAGRAPH WIDTH----------------- + This sets the width of the reading paragraphs. + It sets a percentage according to the width of the screen + (reduce or increase the percentage of width: 70%; to change this. remember the semicolon.) + but it doesn't allow it to go over a certain amount of width, so that even HUGE screens + will have a maximum width for the text. + (reduce or increase this by changing the number on the max-width: 45em; remember the semicolon.) + + + It is reset on the mobile skin to 100% + */ + width: 70%; + max-width: 45em; +} + +.comment .userstuff { + /* + resets the width of the paragraph comments after being reduced as a part of .userstuff + */ + width: 95%; +} + +.blurb .userstuff { + /* + It gives a bit of space on top and at the bottom of the summary in the blurb + */ + padding: 20px 0; +} + +.userstuff p { + /* + Sets how far paragraphs should be from each other in text + + if you need to increase or decrease, please keep in mind that "em" + as a measurement changes A LOT between numbers, so you might want to try + decimals like 2.5em, 2.3em, 2.8em before going a number up (or down) + + remember to leave " auto;" or wonky stuff will happen to the width of your paragraphs + */ + margin: 2em auto; +} + +/* +Basic fic formatting + (bold, + italics + and underline) +*/ +u, +acronym[title], abbr[title] { + /* + --------UNDERLINE--------- + To remove the colored underline from the skin just remove + the following 2 lines (border-bottom etc etc and padding-bottom etc etc) + This will leave a nice, readable bold text + */ + /* start deleting here -> */ + border-bottom: 2px solid #928b70; + padding-bottom: 4px; + /* <- stop deleting here for the underline thingy! Leave the rest*/ + text-decoration: none; + font-weight: 700; +} + +b, +strong { + font-weight: 700; +} + +/* +--------ITALICS--------- +The following code remove all the italics and changes +them into bold instead for easier dyslexia reading. +This will override what the fic author's decided to use. +If you prefer you can delete it and all will return to normal +*/ +/* start deleting here -> */ +i, +em, +cite { + font-style: normal; + font-weight: 700; +} + +/* <- Stop deleting here for the italics thingy*/ +.userstuff blockquote { + /* + blockquotes in fics/newsposts/FAQs have a colored border on the left + */ + border-inline-start: 2px solid #928b70; +} + +/* +======== +Buttons! +======== +*/ +#header .menu, +#small_login, +#header .dropdown:hover .current + .menu, +.event .userstuff, .notice, +.comment_notice, +ul.notes, +.caution, +.error, +.comment_error, +.alert.flash, +.actions a:hover, +.actions input:hover, +.actions a:focus, +.actions input:focus, +label.action:hover, +.action:hover, +.action:focus, +.dynamic form, +.ui-draggable form, #header .primary, +.group.listbox, +fieldset fieldset.listbox, +#main li.blurb, +.wrapper, +#dashboard .secondary, +.secondary, +form blockquote.userstuff, +.thread .comment, +.toggled form, +.listbox .index, +form .notice, +form ul.notes, +form.verbose legend, +.verbose form legend, +span.question, +fieldset, +form dl, +fieldset dl dl, +fieldset fieldset fieldset, +fieldset fieldset dl dl, +dd.hideme, +.delete a, +span.delete, +#header ul.primary, .ui-sortable li, input, .actions input, +input[type=submit], +textarea, .actions a, +.actions a:link, +.action, +.action:link, +button, +.current, +.actions label { + /* + This resets the shadows in several places + */ + box-shadow: none; +} + +.announcement blockquote.userstuff, #footer, +.autocomplete .dropdown ul li:hover, +li.selected, +.autocomplete a:hover, form .notice, +form ul.notes, +form.verbose legend, +.verbose form legend, input, .actions input, +input[type=submit], +textarea, .actions a, +.actions a:link, +.action, +.action:link, +button, +.current, +.actions label { + /* + This resets the background image from default skin in several places + */ + background-image: none; +} + +.actions input, +input[type=submit], +textarea, .actions a, +.actions a:link, +.action, +.action:link, +button, +.current, +.actions label { + /* + Further 3d elements to reset in webkit browsers + */ + -webkit-appearance: none; +} + +form .notice, +form ul.notes, +form.verbose legend, +.verbose form legend, +.actions a, +.actions a:link, +.action, +.action:link, +input[type=submit], +button, +.current, +.actions label, .notice, +.comment_notice, +ul.notes, +.caution, +.error, +.comment_error, +.alert.flash, +.actions a:hover, +.actions input:hover, +.actions a:focus, +.actions input:focus, +label.action:hover, +.action:hover, +.action:focus, +.toggled form, +.dynamic form, +.ui-draggable form { + /* Sets the style for border buttons */ + border: none; +} + +.actions a, +.actions a:link, +.action, +.action:link, +button, +.current, +.actions label { + border: none; +} + +input { + width: 96%; + border: 1px solid; +} + +.actions a:hover, +a:hover, +.actions input:hover, +#dashboard a:hover, +.actions a:focus, +.actions input:focus, +#dashboard a:focus, +.actions a:active, +.current, +a.current, +.current a:visited, +#dashboard .current, +#outer .current, +#header .current, +span.unread, +.replied, +span.claimed, +dl.index dd, +.own, +.draft, +.draft .unread, +.child, +.unwrangled, +.unreviewed, +.ui-sortable li:hover, +#header .primary .menu .current { + /* resets the border color */ + border-color: initial; + /* extra aggressive shadow removing */ + box-shadow: none !important; +} + +form .notice, +form ul.notes, +form.verbose legend, +.verbose form legend, +.actions a, +.actions a:link, +.action, +.action:link, +input[type=submit], +button, +.current, +.actions label { + border-bottom: none; +} + +.listbox .index, +.dashboard .listbox .index, +.splash .news li, +form dt, +.picture .header { + /* + some stuff needs some aggressive non-bordering + */ + border: none; + border-bottom: none; + border-top: none; + border-left: none; + border-right: none; +} + +#header .menu, +#small_login, +#header .dropdown:hover .current + .menu, +.event .userstuff { + /* + removes some more effects of default skin + */ + filter: none; +} + +.autocomplete input, +.autocomplete .dropdown ul li { + min-width: 10px; +} + +fieldset.work.meta .fandom.required ul.autocomplete { + background: transparent; +} + +/* +=============================== +Borders and boxes in the layout +=============================== +*/ +fieldset, +form dl, +fieldset dl dl, +fieldset fieldset, +fieldset fieldset fieldset, +fieldset fieldset dl dl, +dd.hideme, +form blockquote.userstuff, +.listbox, +.listbox .index, +fieldset fieldset.listbox, +.own, +.draft, +.draft .wrapper, +.unread, +.child, +.unwrangled, +.unreviewed, +form.verbose legend, +.verbose form legend, +li.blurb, +li.comment, +.comment h4.byline, +dl.index dd, +form blockquote.userstuff, +table, +tr, +th, +td, +thead, +tfoot, +.reading h4.viewed, +li.relationships a, +#bookmark_form_placement form, +#collection-form form, .nomination dt { + /* + it removes the color background + where it's set in Ao3's default skin + */ + background: transparent; +} + +.secondary, +dl.meta, +li.post.group, +.faq .example, +.guideline .example, +tr:hover, +fieldset, +form dl, +fieldset dl dl, +fieldset fieldset fieldset, +fieldset fieldset dl dl, +dd.hideme, +form blockquote.userstuff, +.listbox, +fieldset fieldset.listbox, +.own, +.draft, +.draft .wrapper, +.unread, +.child, +.unwrangled, +.unreviewed, +form.verbose legend, +.verbose form legend, +li.blurb, +li.comment, #bookmark_form_placement form, +#collection-form form { + /* + sets the border shapes + */ + border: 2px solid; + border-radius: 5px; +} + +th, +thead, +tbody tr { + /* + sets the border shapes + */ + border: 2px solid; +} + +li.post.group { + /* + posts social distancing + */ + padding: 10px; +} + +.splash .news li:last-of-type { + /* + last news post in the home page has inexplicabbly a border-bottom + this removes it + */ + border-bottom: 2px solid; + border-radius: 5px; +} + +tr, +th, +td, +thead, +tfoot { + /* + this is for tables + */ + vertical-align: middle; +} + +col.name { + background: transparent; +} + +.bookmark .user, +.filters dl, +.filters dt, +dl.index dd, +div.comment, +#modal, +#dashboard.own, +#dashboard ul, +.autocomplete div.dropdown ul, +.event .userstuff, +#dashboard.own, +#dashboard ul, +.splash .module h3, +.comment div.icon, +a, +a:link, +a:visited:hover, .alert .userstuff { + /* remove borders */ + border: none; +} + +#dashboard.own, +#dashboard ul, +.splash .module h3, +.comment div.icon, +a, +a:link, +a:visited:hover { + /* + further removes borders to those classes where there's a top and bottom border + set in ao3's default skin + */ + border-top: none; + border-bottom: none; +} + +span.symbol { + /* + what the hell does this change I can't remember + */ + color: initial; + border: 1px solid; + vertical-align: middle; +} + +.blurb .header img, #workskin h2.heading img { + /* + Aligns vertically the little lock next to the title in the blurb + it also gives a bit of a space enough to have a background if needed in dark mode, later + */ + vertical-align: baseline; + padding: 3px; + border-radius: 3px; +} + +/* +I make the icons smaller, +and as such a few things need to be +properly positioned +*/ +.icon { + height: 80px; + width: 80px; +} + +.tag .primary .icon, +.tagset .primary .icon { + background: url(/images/imageset.png) -10px -285px; +} + +.skins .primary .icon { + background: url(/images/imageset.png) -10px -185px; +} + +.comment h4.byline { + padding: 0.25em; +} + +.abbreviated h4.byline { + padding-left: 0.25em; +} + +.comment div.icon { + margin-left: 10px; + margin-right: 10px; + margin-top: 10px; +} + +.comment .icon .visitor { + background: url(/images/imageset.png) no-repeat -10px -85px; + display: block; +} + +/*end of stuff regarding the icon resizing*/ +.comment .posted { + /* + positions the date of a comment + */ + display: block; + float: none; +} + +.fandom .group.listbox { + width: 100%; +} + +form.inbox { + overflow-x: initial; +} + +#dashboard { + /*this deals with the border on ipad*/ + border-color: transparent; +} + +.LV_invalid, .qtip-content { + /*tooltips in tagsets and error messages in forms*/ + background: #86300f; + border: 2px solid #86300f; + color: #FBF6E5; + border-radius: 5px; + box-shadow: none; + z-index: 1; +} + +.qtip-content { + /*tooltips in tagsets*/ + border-radius: 0 5px 5px; +} + +.LV_invalid:before { + border-color: #86300f transparent; + border-width: 0 0.643em 0.643em; +} + +.LV_invalid_field, +input.LV_invalid_field:hover, +input.LV_invalid_field:active, +textarea.LV_invalid_field:hover, +textarea.LV_invalid_field:active { + border-color: #86300f; +} + +#bookmark-form, +#collection-form { + margin-top: 20px; +} + +/* +====================== + General settings +====================== +*/ +div#comments_placeholder, #main.system h2.heading, +#main.system h3.heading, +.userstuff img, #workskin, +.blurb .userstuff, +.news .userstuff, +.system .userstuff, +.collection blockquote.userstuff { + /* + This centers elements that need to be centered + */ + margin: auto; +} + +/* +========== + Header +========== +*/ +#outer.wrapper, +#header { + /* + Resets line height for the header + so it all aligns properly + */ + line-height: normal; +} + +#header .logo, +#header .heading sup, +#greeting p.icon { + /* + hides Ao3 Logo in the header, + the user's avatar in the header + and the 'beta' bit too. + so that everything is a little more clear. + */ + display: none; +} + +#header .heading { + /* + gives a decent space on the left to Ao3's logo in the header + */ + margin-left: 2em; +} + +#header h1 { + /* + Ao3 Logo is boldy + */ + font-weight: 700; +} + +#login, +#greeting { + /* + gives a decent space on top to the user's menu in the header + */ + margin-top: 10px; +} + +#header .menu, +#small_login, +#header .dropdown:hover .current + .menu { + /* + Makes the dropdown menu bigger, + since the font used in this theme is huge + */ + width: 25em; +} + +/* +============= + News Posts + Collections + FAQs +============= +*/ +.news .wrapper, +#main.system h2.heading, +#main.system h3.heading, +#header h2.collections, +#header h2 { + /* + centers a few kind of titles (collections, news posts, FAQs...) + */ + text-align: center; +} + +.userstuff img { + /* + Regarding icons in news posts + */ + max-width: 90%; +} + +#main.system h2.heading, +#main.system h3.heading, +.userstuff img { + /* + needs this as blocks or will never center + */ + display: block; +} + +#header h2.collections, +#header h2 { + /* + resetting ao3 default skin's border on top of collection's header + */ + border-top: none; +} + +.home .header .userstuff, +.home .header dl.stats, +.home .header .type { + /* + Collection pages have a weird margin left??? why?? + */ + margin-left: initial; +} + +/* +======== + Blurb +======== +*/ +/* +-----------------TAGS----------------- +This is what makes the tag having a border! +If you want to remove the border please delete all these lines +*/ +/* start deleting here -> */ +a.tag, +a.tag:visited, +a.tag:link { + display: inline-block; + padding: 3px 7px; + margin: 4px 0px; + border: 2px solid #928b70; + border-radius: 5px; +} + +.commas li:after { + content: ""; +} + +h5.fandoms.heading { + /*this removes the commas in the fandom tags (yeah, it's weird)*/ + color: transparent; +} + +.favorite a.tag { + border: none; +} + +/* <- stop deleting here for the tag thingy */ +.blurb dl.stats { + /* + puts stats on the left of the blurb + */ + float: initial; +} + +.meta ul li { + padding-left: 0; +} + +#header .primary a { + /*colors of the primary menu links*/ + color: #FBF6E5; +} + +.blurb ul li, +.blurb dd ul li, +.meta dd ul li { + /* + paginates better the tags, so that they tend to not break lines mid-tag. + it's a readibility thing related to the border for the tags + */ + display: inline; + margin: 0; +} + +.notice a, +.notice a:link, +.notice a:visited, +.announcement a, +.announcement a:link, +.announcement a:visited { + text-decoration: underline; +} + +/* +============ + Filters! +============ +*/ +.filters .expander, +.filters .expanded .expander { + /* + sets the spacing and font of the filter expander text + */ + padding: 0px; + font-size: 1.05em; + background: none; +} + +.filters .expander::before { + /* + This is the arrow for the filters + */ + content: "➙"; +} + +.filters .expanded .expander::before { + /* + This is the arrow for the filters when expanded + */ + content: "➘"; +} + +.filters input:checked + .indicator + span { + /* + resets the weight from the Ao3 default skin + */ + font-weight: inherit; +} + +/* +================= + Forms +================= +*/ +/* +This is the very complicated code for the checkboxes and the radio +yes I hate it too. + +*/ +.filters [type=radio] + .indicator:before, +.filters [type=radio]:checked + .indicator:before, +.filters [type=checkbox] + .indicator:before, +.filters .exclude [type=checkbox] + .indicator:before, +.filters [type=checkbox]:checked + .indicator:before, +.filters .exclude [type=checkbox]:checked + .indicator:before, +input[type=checkbox], +input[type=radio], +input[type=checkbox]:checked, +input[type=radio]:checked, +.actions input[type=checkbox]:checked, +label.action input[type=checkbox]:checked, +input[type=checkbox]:hover, +.actions input[type=checkbox]:hover { + /* + sets the size of the checkboxes and radio boxes around the website + including filters + */ + width: 0.9em; + height: 0.9em; +} + +input[type=radio] { + border-radius: 50%; +} + +.filters [type=radio] + .indicator:before { + content: ""; + vertical-align: -0.125em; + background: none; + background-color: #F7EEDE; + border: none; +} + +.filters [type=radio]:checked + .indicator:before { + content: ""; + vertical-align: -0.125em; + background: none; + background-color: #928b70; + border: none; +} + +.filters [type=checkbox] + .indicator:before, +.filters .exclude [type=checkbox] + .indicator:before { + content: ""; + padding: 0px; + border-radius: 0px; + vertical-align: -0.125em; + background: none; + background-color: #F7EEDE; + border: none; +} + +.filters [type=checkbox]:checked + .indicator:before, +.filters .exclude [type=checkbox]:checked + .indicator:before { + content: ""; + padding: 0px; + border-radius: 0px; + vertical-align: -0.125em; + background: none; + background-color: #928b70; + border: none; +} + +.filters .exclude [type=checkbox]:checked + .indicator:before { + /* + the exclude filters have a different color when checked + */ + background-color: #86300f; +} + +input[type=checkbox], +input[type=radio], +.actions input[type=checkbox], +label.action input[type=checkbox] { + background-color: #F7EEDE; + border: 2px solid #DBD5C3; +} + +input[type=checkbox], +input[type=radio], +input[type=checkbox]:checked, +input[type=radio]:checked, +.actions input[type=checkbox]:checked, +label.action input[type=checkbox]:checked, +input[type=checkbox]:hover, +.actions input[type=checkbox]:hover { + /* + removes browser-specific appearance of checkboxes and radio + */ + display: inline-block; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +input[type=checkbox]:checked, +input[type=radio]:checked, +.actions input[type=checkbox]:checked, +label.action input[type=checkbox]:checked { + background-color: #928b70; + border: none; +} + +input[type=checkbox]:hover, +.actions input[type=checkbox]:hover, .filters [type=checkbox]:hover + .indicator:before, +.filters [type=radio]:hover + .indicator:before, +.filters .exclude [type=checkbox]:hover + .indicator:before { + background-color: #bab39c; + border: none; +} + +form.search input[type=text], +dd.autocomplete li.input, +input[type=radio], +select, +input[type=file], +input.number, +p select, +.heading select, +li select, +input:focus, +select:focus, +textarea:focus, +input, +textarea { + /* + sets the color of most forms + */ + border-top-color: #F7EEDE; + border-color: #F7EEDE; + background-color: #F7EEDE; + border-radius: 5px; +} + +p input, input[type=checkbox] { + border-top-color: #F7EEDE; + border-color: #F7EEDE; + background-color: #F7EEDE; +} + +.filters [type=radio] + .indicator:before, +.filters [type=checkbox] + .indicator:before, +.filters .exclude [type=checkbox] + .indicator:before { + /* + filter related checkboxes and radio + */ + background-color: #F7EEDE; +} + +.filters .exclude [type=checkbox]:checked + .indicator:before { + /* + Exclude filters when checked have the same color of alerts + */ + background-color: #86300f; +} + +.javascript { + /* + Sets the background color in the filters on mobile + */ + background-color: #F4E8D3 !important; +} + +.announcement input[type=submit], +.announcement .action { + /* + no idea what this is but it does something I guess + it was probabbly related to some announcement bar it appeared at some point + */ + border: 1px solid #DBD5C3; +} + +.ui-draggable form { + /* + This sets a shadow in the comment reply form that is floaty in some pages + */ + box-shadow: 0 0 3px #F7EEDE; +} + +.filters .expander, +.filters .expanded .expander { + /* + these are the buttons to open the filters + */ + border: 2px solid #928b70; + border-radius: 5px; + margin-top: 10px; +} + +/* +=========== + Colors +=========== + */ +#header a, +#header a:visited, +#header .current, +#header .primary .open a, +#header .primary .dropdown:hover a, +#header .primary .dropdown a:focus, .notice, +.comment_notice, +ul.notes, +.caution, +.error, +.comment_error, +.alert.flash, +.required .autocomplete, +.autocomplete .notice, +#header h2.collections, +#header h2, .alert .userstuff, body, +#header, +#outer.wrapper, +#inner.wrapper, +.secondary, +#modal, +.filters .expander, .userstuff h1, .userstuff h2, .userstuff h3, .userstuff h4, .userstuff h5, .userstuff h6, span.unreviewed.symbol, ul.notes li::marker, a.tag, +a.tag:visited, +a.tag:link, .actions a, +.actions a:link, +.actions a:visited, +.action, +.action:link, +.actions input, +input[type=submit], +button, +.current, +.actions label, +.listbox > .heading, +.listbox .heading a:visited, +form dd.required, +.filters dt, +.filters dd, +.filters input[type=submit], +#header .primary .menu a, +#header .primary .menu .current, #outer .current, label, .autocomplete li.added, .post .meta dd ul li.added, +.dropdown, +.splash .favorite li:nth-of-type(odd) a, .statistics .index li:nth-of-type(even), +input#site_search:focus, +#header #search input:focus, +.autocomplete div.dropdown ul, +.toggled form, +.dynamic form, .ui-sortable li:hover, .ui-sortable li, form.search input[type=text], +dd.autocomplete li.input, +input[type=radio], +select, +input[type=file], +input.number, +p select, +.heading select, +li select, +input:focus, +select:focus, +textarea:focus, +input, +textarea, p input, input[type=checkbox], .announcement input[type=submit], +.announcement .action { + /* + -----------------TEXT COLOR----------------- + This is the main text color for all the body of text + Use a hex color picker to change this! + */ + color: #5C6D74; +} + +body, +#header, +#outer.wrapper, +#inner.wrapper, +.secondary, +#modal, +.filters .expander, .announcement input[type=submit], +.announcement .action { + /* + -----------------BACKGROUND COLOR----------------- + This sets the main background color + Use a hex color picker to change this! + */ + background-color: #FBF6E5; + background: #FBF6E5; +} + +.actions a, +.actions a:link, +.actions a:visited, +.action, +.action:link, +.actions input, +input[type=submit], +button, +.current, +.actions label, +.dropdown, +.splash .favorite li:nth-of-type(odd) a, .statistics .index li:nth-of-type(even), +input#site_search:focus, +#header #search input:focus, +.autocomplete div.dropdown ul, +.toggled form, +.dynamic form, +.secondary, .ui-sortable li:hover, .ui-sortable li, #dashboard .current, +#header .menu, +#small_login, +#header .dropdown:hover .current + .menu, +#header .actions a:hover, +#header .actions a:focus, +#header .dropdown:hover a, +#header .open a, +#header #search input, +tr:hover, +#outer .current { + /* + This sets the secondary background color + Use a hex color picker to change this! + */ + background-color: #F4E8D3; + background: #F4E8D3; +} + +a, +a:link, +a:visited, +a.tag, +a.tag:visited, +a.tag:link, +.listbox .index a:link, +.listbox .index a:visited, +.listbox .index a, +#header .heading a, +.splash .module h3, +.blurb h4 a:link, +.blurb h4 a, +.blurb h4 a:visited, +#dashboard a, +#dashboard span, +#header .user a:hover, +#header .user a:focus, +#header .user .current, +li::marker, +.draggable, +.droppable { + /* + -----------------ACCENT COLOR----------------- + This is the accent text color for all the links and titles and other stuff that + is colored differently from the body of text + Use a hex color picker to change this! + */ + color: #928b70; +} + +#footer, +a:hover, +a.tag:hover, +.listbox .heading a.tag:visited:hover, +#dashboard a:hover, +.actions a:hover, +.actions input:hover, +.actions a:focus, +.actions input:focus, +label.action:hover, +.action:hover, +.action:focus, +.splash .favorite li:nth-of-type(odd) a:hover, +.splash .favorite li:nth-of-type(odd) a:focus, +.blurb h4 a:hover, +a:visited:hover, +input[type=submit]:hover, +#header .dropdown .menu a:hover, +#header .dropdown .menu a:focus, +.event .userstuff, +.event .userstuff a, +.event .userstuff a:link, +.event .userstuff a:visited, +.listbox .index a:hover, +.autocomplete .dropdown ul li:hover, +li.selected, .filters [type=radio]:checked + .indicator:before, +.filters [type=checkbox]:checked + .indicator:before, +.filters .exclude [type=checkbox]:checked + .indicator:before, .filters .expander, +.filters .expanded .expander { + /* + This sets the accent color to the backgrounds. + like buttons, footer and stuff like that. + Use a hex color picker to change this! + */ + background-color: #928b70; +} + +#header .primary { + background: #928b70; +} + +#footer, +a:hover, +a.tag:hover, +.listbox .heading a.tag:visited:hover, +#dashboard a:hover, +.actions a:hover, +.actions input:hover, +.actions a:focus, +.actions input:focus, +label.action:hover, +.action:hover, +.action:focus, +.splash .favorite li:nth-of-type(odd) a:hover, +.splash .favorite li:nth-of-type(odd) a:focus, +.blurb h4 a:hover, +a:visited:hover, +input[type=submit]:hover, +#header .dropdown .menu a:hover, +#header .dropdown .menu a:focus, +.event .userstuff, +.event .userstuff a, +.event .userstuff a:link, +.event .userstuff a:visited, +.listbox .index a:hover, +.autocomplete .dropdown ul li:hover, +li.selected, li.dropdown, .notice a, +.notice a:link, +.notice a:visited, +.announcement a, +.announcement a:link, +.announcement a:visited, .filters .expander, +.filters .expanded .expander { + /* + Related to the previous classes, this colors the text in a way that it can + be read on the accent color background + Use a hex color picker to change this! + */ + color: #FBF6E5; +} + +::-moz-selection, +::selection, +::-webkit-selection { + background-color: #928b70; + color: #FBF6E5; +} + +.notice, +.comment_notice, +ul.notes, +.caution, +.error, +.comment_error, +.alert.flash, +.required .autocomplete, +.autocomplete .notice, +#header h2.collections, +#header h2, .alert .userstuff { + /* + This is the background color of the notices, alert, comment errors and stuff like that + */ + background-color: #c5b89c; + background: #c5b89c; +} + +.required, +.error, +.alert.flash, +.nominations .rejected, .alert .userstuff { + /* + This sets the warning text color for alerts, error, and stuff like that + */ + color: #86300f; +} + +a.modal.help:hover { + background-color: transparent; +} + +fieldset, +form dl, +fieldset dl dl, +fieldset fieldset fieldset, +fieldset fieldset dl dl, +dd.hideme, +form blockquote.userstuff, +.listbox, +fieldset fieldset.listbox, +.own, +.draft, +.draft .wrapper, +.unread, +.child, +.unwrangled, +.unreviewed, +form.verbose legend, +.verbose form legend, +.secondary, +th, +thead, +tbody tr, +.wrapper, +li.blurb, +fieldset, +form dl, +dl.meta, +li.post.group, +.splash .news li:last-of-type, +li.comment, +.faq .example, +.guideline .example, +#bookmark_form_placement form, +#collection-form form { + /* + this sets the borders color + Use a hex color picker to change this! + */ + border-color: #DBD5C3; +} + +/* +These next 3 are related to exchanges. +They modify the colors in the sign-up list +*/ +span.offered.requested { + color: #F2AA4C; +} + +span.offered, +.replied, +.nominations .approved { + color: #75BD57; +} + +span.requested, +.nominations .rejected { + color: #A62637; +} + +.thread .even { + /*comments alternate*/ + background-color: #F7EEDE; +} + +#footer .heading, #footer a, #footer { + /*changes the color of the footer text. Necessary for squidgeworld*/ + color: #FBF6E5; +} diff --git a/dyslexia.css b/dyslexia.css index e2e9f11..57200b6 100644 --- a/dyslexia.css +++ b/dyslexia.css @@ -1140,6 +1140,11 @@ a.tag:link { content: ""; } +h5.fandoms.heading { + /*this removes the commas in the fandom tags (yeah, it's weird)*/ + color: transparent; +} + .favorite a.tag { border: none; } @@ -1331,13 +1336,19 @@ input[type=checkbox]:hover, input[type=checkbox]:checked, input[type=radio]:checked, .actions input[type=checkbox]:checked, -label.action input[type=checkbox]:checked, -input[type=checkbox]:hover, -.actions input[type=checkbox]:hover { +label.action input[type=checkbox]:checked { background-color: #4675C0; border: none; } +input[type=checkbox]:hover, +.actions input[type=checkbox]:hover, .filters [type=checkbox]:hover + .indicator:before, +.filters [type=radio]:hover + .indicator:before, +.filters .exclude [type=checkbox]:hover + .indicator:before { + background-color: #85a1d1; + border: none; +} + form.search input[type=text], dd.autocomplete li.input, input[type=radio], diff --git a/mobile-fix-dyslexia.css b/mobile-fix-dyslexia.css index 3a7e006..76e7284 100644 --- a/mobile-fix-dyslexia.css +++ b/mobile-fix-dyslexia.css @@ -255,6 +255,10 @@ dl.meta dd { margin: 10px; } +.chapter .expandable.secondary, .chapter .expandable.secondary select { + width: 90%; +} + /* =========== Blurb