Tame ravelry.com

ravelry.styl

@-moz-document domain("ravelry.com") {
/*

The recent redesign of ravelry.com has some serious issues. The goal of this userscript -- for use with the 
Stylus browser extension (written in and for Firefox, but easily transferrable to Chrome) -- is to retain 
the major design choices (colors, layout, etc), but to remove the jarring elements of the design.

In proper, mobile-first design, the site would have been built to be accessible like HTML 1.0 -- but I have 
not tried to use this site with no CSS applied. That mountain is too high. Instead, I tried to use just CSS 
to improve the user experience and reduce the visual and cognitive load.

I may try to improve other things as I have time. I am not a ravelry user myself.

A word about `!important`: I naively thought this would be a small task, so I used `!important` for things 
that I didn't search extensively for (or things that I felt strongly about, like box shadows). Perhaps 
ideally these kinds of things would be applied via a :root variable referenced everywhere or a more strict 
attention to the cascading, but this... was a surgical task. `!important` was/is the guarantee, in this case.

*/

/* splash page */
.clicker--large button, 
button.clicker--large, 
a.clicker--large {
    border-color: #999 !important;
    border-radius: 4px;
    box-shadow: none !important;
    /* these two are reset to what is overridden in the same rule. bug? */
    height: 36px;
    line-height: 36px;
}

.basic_box {
    border-color: #999 !important;
    box-shadow: none !important;
}

input[type="text"], 
input[type="password"] {
    border-color: #999 !important;
}

.splash_page__forgot {
    font-weight: 600 !important;
}

/* logged in */
.navigation_v2__logo:hover {
    background-color: transparent;
    filter: brightness(.8);
    transition: filter 0.3s;
}

.box, 
.zone_specific_yarn_links .yarn_link_box {
    box-shadow: none !important;
}

.box_title, 
.box_title--standalone, 
.box_contents, 
.zone_specific_yarn_links .yarn_link_box {
    border-color: #999 !important;
}
.box_title, 
.box_title--standalone {
    background-color:#f3f4f0 !important;
}

/* main nav */

body.with_navigation_v2 #page_header {
    border-bottom: 1px solid #777 !important;
}
/*
body.notebook.with_navigation_v2 #page_header {
    border-bottom: 1px solid #1A444D !important;
}
*/

.c-navigation_dropdown__content_wrapper {
    border-color: #999 !important;
}
.c-navigation_dropdown__content {
    border: 1px solid #999 !important;
    border-top-color: #777 !important;
}
.c-navigation_dropdown__content_wrapper > .c-navigation_dropdown__content {
    border: none !important;
}

.c-navigation_dropdown__divider {
    border-bottom: 1px solid #999 !important;
}

.c-navigation_indicator__snake {
    display: none !important;
}

.navigation_v2__tab:hover {
    border-bottom: 1px solid #000;
    border-bottom: 2px solid #777;
}
#notebook_tab:hover {
    border-bottom: 2px solid #1A444D;
}
.c-navigation_dropdown__content a {
    color: #477A85;    
}
.c-navigation_dropdown__content a:hover {
    background-color: inherit !important;
    color: #000;
}

/*#navigation_v2 #notebook_tab .c-navigation_dropdown__content { */
.c-navigation_dropdown--notebook .c-navigation_dropdown__content {
    border-color: #1A444D !important;
}

/* apparently, notebook is intentionally differently-colored
.c-navigation_dropdown--notebook .c-navigation_dropdown__content {
	background-color: #fff !important;
}

.c-navigation_dropdown--notebook .c-navigation_dropdown__content .c-navigation_dropdown__name {
	color: inherit !important;
}
*/
body.notebook #navigation_v2 #notebook_tab {
    width: 8.15em;
}
body.notebook #navigation_v2 #notebook_tab a {
    display: none;
}
body.notebook #navigation_v2 #notebook_tab:hover {
    border-bottom: none;
    cursor: initial;
}
body.notebook #navigation_v2 #notebook_tab .c-navigation_dropdown {
    display: none !important;
}

.navigation_v2__tab--active .navigation_v2__avatar__link img, 
.navigation_v2__tab--open .navigation_v2__avatar__link img {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.navigation_v2__avatar img {
    transition: filter 0.3s;
}

/*
.navigation_v2__tab > a:not(.navigation_v2__avatar__link) {
    overflow: hidden;
}
*/


/* other */
.clicker_v2, 
.clicker {
    border-color: #999 !important;
    border-color: transparent !important;
    border-radius: 4px;
    box-shadow: none !important;
    top: 0 !important;
}
#advanced_search_link, 
.clicker_v2--advanced_search {
    border-color: #EE6E62 !important;
    border-color: transparent !important;
}

.enabler_image img {
    border-color: #ccc !important;
}

ul.tag_set li:not(.tag_set__control), 
span.tag_word {
    border-color: #999 !important;
    color: #666 !important;
}
ul.tag_set li:not(.tag_set__control) a, 
span.tag_word a {
    color: #666 !important;
}

/* ! */
.navigation_v2__avatar img, 
.patterns .chart a.thumbnail img, 
.patterns_landing__history .tiny_thumbnail, 
.media_square_150 .photo, 
.patterns .featured_pattern .thumbnail, 
.photo_gallery__border, 
.yarns_index .new_yarns img, 
.yarns .search_result .preview img, 
.patterns .search_result .preview img, 
.photo_frame, 
.grid_photo__frame,
.group_badge_placeholder, 
img.group_badge, 
.people .box--imagegrid img, 
.yarns .chart .thumbnail img, 
.people_bubble .wip img, 
.dashboard__full_image__wrapper img, 
.tiny_avatar img, 
.media_square_200 .photo_border, 
.avatar_medium img, 
.dashboard__finished__projects img, 
.square_thumbnail {
    border-color: #aaa !important;
}
.avatar img {
    border-color: transparent !important;
}

.patterns__highlights img, 
.patterns__random img {
    border-color: #aaa !important;
}

.download_plate {
    border-color: #999 !important;
    box-shadow: none !important;
}

body.search #search_navigation, 
body.supports_subnavigation.with_subnavigation .tabs--subnavigation {
    border-bottom: 1px solid #999 !important;
}
body.supports_subnavigation.with_subnavigation .tabs--notebook_projects {
    border-bottom: 1px solid #1a444d !important;
}

.bookmarklet {
    border-color: #999 !important;
}

.patterns .photo_border {
    margin-bottom: 0;
}

.captioned_media_square li.byline {
    line-height: inherit;
}

body.topics_index .pagination a, 
.page_links .pagination a, 
.page_buttons a, 
.page_bar__current {
    border-color: transparent !important;
    box-shadow: none !important;
}

body.patterns_popular .search_result, 
body.patterns_attributes .search_result {
    margin-bottom: 20px;
}

select.hopper {
    border: 1px solid #999 !important;
}

body.search .advanced_search__facet_content, 
body.search .advanced_search__filter_jump .form_select {
    border-color: #ccc !important;
}

body.search .advanced_search__tools .clicker_v2 {
    border: none !important;
    width: auto !important;
}

body.search .advanced_search__tools.buttons button:first-of-type {
    margin-right: 20px;
}
body.search .advanced_search__tools.buttons button {
    padding-right: 10px !important;
}

.box_contents {
    padding: 8px 8px 8px 12px;
}

/* projects subnav */
body.supports_subnavigation.with_subnavigation .tabs--subnavigation li > span a:hover {
    border-bottom: 2px solid #999 !important;    
    padding-bottom: 8px;
}
body.supports_subnavigation.with_subnavigation .tabs--tabset_notebook li > span a:hover {
    border-bottom: 3px solid #f3f4f0 !important;
    border-bottom: 3px solid #fff !important;
    padding-bottom: 8px;
}
.tabs--subnavigation li .c-navigation_indicator {
    display: none !important;
}

/* table */
.thread_filters {
    color: #ccc;
}
.thread_filters strong {
    color: initial;
}

body.with_frontend_v1_2 .d-tlist, 
table.bordered, 
body.user_threads_index table.grid, 
table#forum_posts thead td, 
table.grid th, 
table.grid tr.header td, 
table.needle_inventory {
    border: 1px solid #ccc;
}
body.with_frontend_v1_2 .d-tlist__global_label {
    border-bottom: 1px solid #ccc;
}
table.needle_inventory, 
table.bordered {
    border-collapse: collapse;
}
table.needle_inventory tr.section_top td {
    border-top: 1px solid #ccc;
}
table.needle_inventory td {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
/* queued projects, probably should be a table or a list... */
.queued_project {
    border: 1px solid #dbded3;
    border-top: none;
    padding-bottom: 10px;
    padding-top: 10px;
}
div#q1 + .queued_project {
    border-top: 1px solid #dbded3;
}
#queue_panel .top {
    position: relative;
    left: 2.5px;
}
.resizable_table__body {
    border-color: #ccc;
}
#topics table, 
.forum_glance table {
    border-collapse: collapse;
}
#topics table th:first-of-type, 
#topics table td:first-of-type, 
.forum_glance table th:first-of-type, 
.forum_glance table td:first-of-type, 
#topics table tr:last-of-type td, 
.forum_glance table tr:last-of-type td, 
#topics table th:last-of-type, 
#topics table td:last-of-type, 
.forum_glance table th:last-of-type, 
.forum_glance table td:last-of-type {
    border-color: #ccc !important;
}
.forum_glance__header {
    padding-top: 20px;
}

/* events list, should be a list... */
#event_list .month {
    margin-top: 2em;
}
.event__search_result {
    border-top: 1px solid #ccc;
    margin-bottom: 16px;
    padding-top: 16px;
}
.month + .event__search_result {
    border-top: none;
    margin-bottom: 16px;
    padding-top: 0;
}
}