/* ==UserStyle== @name Modern Pinboard @namespace github.com/openstyles/stylus @version 1.1.0 @description a modern Pinboard user experience @author Michael Jaggers (https://michaeljaggers.com) @preprocessor default @homepageURL https://github.com/michaeljaggers/modern-pinboard @supportURL https://github.com/michaeljaggers/modern-pinboard/issues @updateURL https://raw.githubusercontent.com/michaeljaggers/modern-pinboard/beta/modern-pinboard.user.css @license CC-BY-SA-4.0 ==/UserStyle== */ @-moz-document regexp('http://pinboard\\.in/(?!add).*'), regexp('https://pinboard\\.in/(?!add).*') { /* Global Styles */ body { background-color: #FEFEFE; } a { color: #2196f3 !important; } input, textarea { border: 1px solid #DDD !important; border-radius: 2px !important; } /* Header */ html body #banner { padding-top: 12px; padding-bottom: 12px; background-color: #FEFEFE; background: #FEFEFE; border-bottom: 1px solid #C0C0C0 !important; min-height: 30px; } /* Logo/User */ body #logo { position: static !important; background: url('data:image/svg+xml;charset=UTF-8,') no-repeat; background-position: top 3px left -58px; height: 30px } #banner #logo { padding-left: 30px; } #banner #logo a:not(.banner_username):not([href="https://pinboard.in/note/add/"]) { font-size: 26px !important; margin-left: 0; margin-right: 10px; vertical-align: sub; font-weight: 900; color: #333 !important; } #logo span { color: #C0C0C0; vertical-align: text-bottom; font-weight: 900; } #banner #logo .banner_username { color: #222 !important; font-weight: 900; padding: 0 6px; margin-top: -2px; margin-left: -3px; margin-right: -3px; } #logo span:hover { color: #222; } .pin_logo { display: none; } /* Main Navigation */ #banner #top_menu { margin-top: 10px; display: block !important; } #top_menu a:hover { color: #666 !important; } /* Log Out Button */ #top_menu a[href="/logout/"] { color: #222 !important; font-weight: bold; } #top_menu a[href="/logout/"]:before { content: "["; color: #C0C0C0; } #top_menu a[href="/logout/"]:after { content: "]"; color: #C0C0C0; } #top_menu a[href="/logout/"]:hover:before, #top_menu a[href="/logout/"]:hover:after { color: #222; } /* User NavBar */ #main_column .user_navbar { margin-top: 5px; height: 25px; position: relative; } #main_column .user_navbar .small_username { position: absolute; top: 30px; } .user_navbar a { color: #666 !important; display: inline-block; margin-top: 4px; } body #main_column { margin: 0 !important; width: 606px; padding-right: 94px; } #main_column .user_navbar .bookmark_count_box { width: 200px; } /* main column heading - bookmark count */ #main_column .bookmark_count { font-size: 22px; color: #555; font-weight: 800; display: inline-block; width: 300px; } #main_column .bookmark_count::after { content: "bookmarks"; padding-left: 6px; color: #555; font-size: 22px; font-weight: 900; } /* main column heading - network */ #main_column > b { font-size: 22px; color: #555; } #main_column > b > a { display: none; } #main_column > b:before { content: "you"; display: inline-block !important; } #main_column > p > b > a { color: #555 !important; } /* main column heading - */ #main_column a[style="font-size:140%"] { display: inline-block; text-align: left; width: 210%; font-weight: 900; font-size: 22px !important; color: #222 !important; margin-top: 15px; } #main_column form[action="/url/"] { margin-bottom: 10px; } .user_navbar .filter:hover { color: #222 !important; } #main_column .source_filter { background: transparent; color: #C0C0C0; } #main_column .source_filter a { color: #222 !important; font-weight: 900; padding: 0 3px; } /* RSS */ .rss_linkbox { margin-top: 9px; width: 45px; background: url('data:image/svg+xml;charset=UTF-8,') no-repeat; background-position: bottom right; } .rss_link { font-weight: 900; font-size: 1em !important; color: #555 !important; width: 45px; } /* User Page RSS */ .user_navbar .rss_linkbox { margin-top: 0; margin-right: -60px; } .user_navbar .rss_link { font-weight: 900; font-size: 1em !important; color: #555 !important; width: 45px; } #main_column > .rss_linkbox { position: absolute; top: 1px; right: 0; } /* Next/Prev from /network page */ #top_next_prev { font-size: 18px; margin-top: 30px; padding-bottom: 17px; width: 606px; } /* Next/Prev Action Bar w/ Edit Buttons*/ #nextprev { margin-top: 50px; width: 606px; padding-bottom: 15px; } #nextprev #top_earlier, #nextprev #top_later { font-size: 18px; text-transform: none; } #nextprev #top_earlier:hover, #nextprev #top_later:hover { color: #666 !important; } /* Bulk Edit Button - Edit button */ #bulk_edit, #main_column > p > a.edit { font-size: 13px; display: inline-block; color: #222 !important; font-weight: 900; padding: 0 3px !important; text-transform: none; } #bulk_edit:before, #main_column > p > a.edit:before { content: "["; color: #C0C0C0; padding-right: 3px; font-weight: 900; } #bulk_edit:after, #main_column > p > a.edit:after { content: "]"; color: #C0C0C0; padding-left: 3px; font-weight: 900; } #bulk_edit:hover:before, #bulk_edit:hover:after, #main_column > p > a.edit:hover:before, #main_column > p > a.edit:hover:after { color: #222; } /* sort order */ #sort_order_picker a { color: #666 !important; } #sort_order_picker a:hover { color: #222 !important; } #sort_order_picker .sort_arrow { font-size: 20px; vertical-align: top; } /* edit - organize buttons */ #nextprev table tbody tr td { display: table-cell !important; vertical-align: top; font-weight: 900; width: 200px; padding-right: 20px !important; } #nextprev .edit { display: inline-block; color: #222 !important; font-size: 13px; font-weight: 900; text-transform: none; } #nextprev .edit:before { content: "["; color: #C0C0C0; padding-right: 3px; font-weight: 900; } #nextprev .edit:after { content: "]"; color: #C0C0C0; padding-left: 3px; font-weight: 900; } #nextprev .edit:hover:before, #nextprev .edit:hover:after { color: #222; } /* Site Speed */ #timer { display: none !important; } /* Bookmarks */ .bookmark { padding-top: 15px; padding-bottom: 5px; border-bottom: 1px solid #DDD !important; position: relative; } .bookmark .display { position: relative; width: 100%; color: #666; font-weight: 300; } .bookmark .display a { font-weight: 600; } .bookmark_title { color: #222 !important; font-weight: bold !important; font-size: 19px !important; display: inline-block; width: 580px; visibility: visible; margin-bottom: 3px; } /* /popular bookmarks */ #main_column .bookmark .bookmark_count { clear: left; display: block; font-size: 20px !important; visibility: visible; font-weight: 400 !important; } #main_column .bookmark .bookmark_count:after { content: "people added"; /* only affects /popular */ font-size: 14px; font-weight: normal; text-transform: lowercase; } /* unread bookmark */ .bookmark_title.unread, .bookmark_title.unread:visited { color: #f08d00 !important; } /* private bookmark */ .private { background: transparent !important; border: none !important; border-bottom: 1px solid #DDD !important; } .private .bookmark_title { color: #f0120d !important; } .private .tag { padding: 2px 6px; } .bookmark .url_display { display: inline-block; margin-bottom: 10px; visibility: visible; font-weight: 400 !important; font-size: 12px; } .description { margin-top: 0; line-height: 130%; font-size: 14px; color: #666; font-weight: 300; margin-bottom: 10px; visibility: visible; } .description a { font-weight: 300 !important; } .bookmark .source { font-weight: 400 !important; color: #C0C0C0 !important; } .bookmark .source:before { content: "→ "; font-weight: 300 !important; color: #C0C0C0 !important; } .bookmark .source:hover, .bookmark .source:hover:before { color: #666 !important; } .bookmark .display .tag { visibility: visible; } .star { float: right !important; font-size: 2em; position: absolute; top: 11px; right: 1px; z-index: 9; } .bookmark:hover .star { visibility: visible !important; color: #CCC !important; } .bookmark:hover .selected_star:hover, .bookmark:hover .selected_star { visibility: visible !important; color: #F7B42C !important; } .bookmark:hover .star:hover { visibility: visible !important; color: #F7B42C !important; } .star.selected_star { visibility: visible !important; color: #F7B42C !important; } /* Number Others Linked */ .url_link { background: transparent !important; color: #666 !important; font-style: italic; } .url_link:before { content: "+" } .bookmark .when, .bookmark .edit_links, .bookmark .edit_links a, .star, .bookmark .url_link, .bookmark .url_link a { visibility: hidden !important; } .bookmark .when, .bookmark .edit_links a, .bookmark .url_link { display: inline-block; padding-top: 5px; } .bookmark .when { display: inline-block; font-size: 13px; font-weight: 300 !important; padding-right: 10px; color: #666 !important; visibility: visible !important; } .bookmark .url_link { visibility: visible !important; font-weight: 300 !important; } .bookmark .when:hover { color: #222 !important; } .bookmark .edit_links { position: absolute; bottom: 3px; right: 0; } .bookmark .edit_links a.edit, .bookmark .edit_links a.delete, .bookmark .edit_links a.copy_link, .bookmark .edit_links a.mark_read { color: #222 !important; font-weight: 900; } .bookmark .edit_links a.edit:before, .bookmark .edit_links a.delete:before, .bookmark .edit_links a.copy_link:before, .bookmark .edit_links a.mark_read:before { content: "["; color: #C0C0C0; margin-right: 3px; } .bookmark .edit_links a.edit:after, .bookmark .edit_links a.delete:after, .bookmark .edit_links a.copy_link:after, .bookmark .edit_links a.mark_read:after { content: "]"; color: #C0C0C0; margin-left: 3px; } .bookmark .edit_links a.edit:hover:before, .bookmark .edit_links a.delete:hover:before, .bookmark .edit_links a.copy_link:hover:before, .bookmark .edit_links a.mark_read:hover:before { color: #222 !important; } .bookmark .edit_links a.edit:hover:after, .bookmark .edit_links a.delete:hover:after, .bookmark .edit_links a.copy_link:hover:after, .bookmark .edit_links a.mark_read:hover:after { color: #222 !important; } .bookmark .edit_links a.edit:hover, .bookmark .edit_links a.delete:hover, .bookmark .edit_links a.copy_link:hover, .bookmark .edit_links a.mark_read:hover { color: #222 !important; } .bookmark .confirm { color: #000 !important; font-weight: 900; } .bookmark .confirm a { color: #666 !important; visibility: visible !important; } .bookmark .confirm .destroy { color: #ff4242 !important; } .bookmark .when, .bookmark .edit_links a, .bookmark .url_link { padding-top: 3px; } .bookmark:hover .when { left: 0; } .bookmark:hover .display, .bookmark:hover .when, .bookmark:hover .edit_links a, .bookmark:hover .url_link, .bookmark:hover .url_link a { visibility: visible !important; } .bookmark .tag { display: inline-block; line-height: 135%; margin-top: 10px; margin-bottom: 8px; } #edit_bookmark_form input[type="button"]:hover, input.submit:hover { background: #7FC10B !important; color: #FFF !important; } #edit_bookmark_form input.reset:hover { background: #ff4242 !important; color: #FFF !important; } /* Search Section */ #right_bar { margin-left: 0 !important; width: 350px; } .search_button { margin-top: 8px !important; } #search_query_field { padding: 8px 7px !important; border: 1px solid #bbb !important; border-radius: 2px !important; } input[type="submit"], input[type="button"], input.submit, input.reset { padding: 8px 21px 8px !important; border: none !important; border-radius: 2px !important; background: #333 !important; color: #FFF !important; font-weight: bold !important; margin-bottom: 5px; } input[type="submit"]:hover { cursor: pointer; } input[type="button"], input.submit, input.reset { background: #EEE !important; color: #555 !important; } input, textarea { padding: 7px 8px !important; border: 1px solid #DDD; border-radius: 2px !important; color: #555 !important; font-weight: bold !important; } /* /network */ #right_bar > p > b { font-size: 22px; color: #666; display: inline-block; margin-top: 20px; } /* tag bundles */ #bundle_names > p > a { color: #666 !important; font-size: 16px; } #bundle_names > p > a:hover { color: #222 !important; } #bundle_names > p > a.bundle { color: #222 !important; } /* Tag Section */ #tag_cloud_header { font-size: 14px; color: transparent; margin-bottom: 20px; } #tag_cloud_header p { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } #tag_cloud_header p > a:before { content: "•"; font-size: 9px; color: #000 !important; margin-right: 10px; vertical-align: middle; } #tag_cloud_header a.tag.selected:before { content: none; } #tag_cloud_header p > a:hover { color: #666 !important; } #tag_cloud_header .tag_heading_selected { color: #222 !important; font-size: 16px; } #tag_cloud_header .tag_heading_selected:hover { color: #222 !important; cursor: default !important; } #tag_cloud_header p a:first-of-type { margin-right: -16px; } #tag_cloud_header p a:first-of-type:before { display:none; } #tag_cloud_header p a:last-of-type { color: #222 !important; font-weight: 900; } #tag_cloud_header p a:last-of-type:before { content: "["; color: #C0C0C0 !important; padding-right: 3px; font-weight: 900; margin-right: 0; font-size: 14px; vertical-align: baseline; } #tag_cloud_header p a:last-of-type:after { content: "]"; color: #C0C0C0 !important; padding-left: 3px; font-weight: 900; font-size: 14px; } #tag_cloud_header p a:last-of-type:hover:before, #tag_cloud_header p a:last-of-type:hover:after { color: #222 !important; } /* Tags */ .tag, .per_page_selected { padding: 2px 6px; background-color: #777 !important; color: #FDFDFD !important; font-weight: 700 !important; border: 2px solid transparent; border-radius: 2px; } .tag:hover { border-color: #545454; border-width: 2px; border-radius: 3px; color: #FDFDFD !important; } .tag_table a { padding: 2px 6px; background-color: #777 !important; display: inline-block !important; margin-bottom: 3px !important; color: #FDFDFD !important; font-weight: bold !important; font-size: 16px !important; line-height: 100% !important; border-radius: 2px !important; opacity: 1.0 !important; } #edit_bookmark_form input { line-height: 1.8!important; font-size: 110%!important; padding-top: 0.35rem!important; } /* Footer */ #footer { visibility: hidden; } /* Profile Page - Main Column */ #profile_main_column { margin-top: 50px; } p[style="color:#aaa"] { display: none; } /* History Page - Main Column */ #main_column { position: relative; } #main_column > p { display: inline-block; width: auto; } #main_column > p:first-of-type { display: inline-block; width: 100%; height: 95px; } /* /history/all */ #main_column > p > b { display: inline-block; font-size: 22px; color: #555; margin-right: 0; width: 300px; margin-bottom: 10px; } /* /popular - filters location */ #main_column > p:nth-of-type(2) { display: inline-block; width: 100%; position: absolute; top: 8px; right: -300px; } #main_column > p > a { display: inline-block; font-size: 13px; color: #666 !important; margin-top: -40px; } #main_column > p > a:hover { color: #222 !important; } /* Popular Page - Tag Cloud */ #tag_cloud > p > b { font-size: 16px; color: #222; } /* Popular Article Page Tag Cloud */ #right_bar #tag_cloud p[style="color:#888"] { font-size: 16px; color: #222 !important; font-weight: bold; } /* Public Profile Page */ #public_profile_searchbox input[type="submit"] { margin-top: 10px; } } /* END moz-document | pinboard.in */ @-moz-document regexp('http://pinboard\\.in/add.*'), regexp('https://pinboard\\.in/add.*') { /* Global Styles */ * { transition: background 0.25s, border 0.25s, color 0.25s; font-family: "Helvetica" !important; line-height: 1.5; font-size: 16px; } body { background-color: #FEFEFE; } input, textarea { border: 1px solid #BBB !important; border-radius: 2px !important; } #popup_header { display: block; padding-bottom: 16px; border-bottom: 1px solid #C0C0C0 !important; } #popup_header #title { font-size: 13px; font-weight: 900; color: #222; } #popup_header #title a { font-size: 26px !important; padding-left: 35px; margin-right: 10px; vertical-align: sub; font-weight: 900; color: #333 !important; position: static !important; background: url('data:image/svg+xml;charset=UTF-8,') no-repeat; background-position: top 3px left -58px; height: 30px; } #popup_header #logout { margin-top: 10px; color: #C0C0C0; font-weight: 900; } #popup_header #logout a { font-size: 13px !important;; } #popup_header #logout:hover { color: #222; } #popup_header #logout a { color: #222 !important; padding: 0 3px; } #popup_header .alert { color: #721c24; border-color: #f5c6cb; background-color: #f8d7da; text-transform: capitalize; text-align: center;padding: 8px; width: 250px; border-radius: 2px; } #popup_header .alert > div:first-child a { display: inline-block; margin-left: 10px; color: #721c24 !important; font-weight: 900; } #popup_header .alert > div:first-child a:hover { text-decoration: underline; } #popup_header .alert > div:first-child a:after { content: "?" } table tbody tr td { display: table-cell !important; vertical-align: top; font-weight: 900; padding-right: 20px !important; } input:not([type="checkbox"], [type="submit"]), textarea { width: 520px; padding: 6px } input#url { margin-top: 5px; margin-bottom: 5px !important; font-size: 13px; color: #555; } input[name="title"] { margin-bottom: 5px !important; font-size: 13px; color: #555; } textarea[name="description"] { font-size: 14px; color: #555; height: 80px !important; } input[name="tags"] { font-size: 13px; color: #555; margin-bottom: 5px; } input:focus, select:focus, textarea:focus { outline-color: #2196f3; } /* style the auto-complete tag popup */ .bd { border: none !important; box-shadow: none !important; width: 250px !important; margin: -3px 0 0 8px !important; padding: 4px 0 !important; background-color: rgba(255,255,255,0.90) !important; } .bd li { font-size: 14px !important; font-weight: 500; color: #2196f3 !important; background-color: transparent !important; transition: none; padding: 2px 4px !important; } .bd li.active { color: white !important; background-color: #2196f3 !important; } #suggestion_row { margin-bottom: 10px !important; } .suggested_tag { color: #2196f3; } label[for="private"], label[for="toread"] { vertical-align: text-bottom; } input[type="submit"] { float: right; padding: 8px 21px 8px !important; border: none !important; border-radius: 2px !important; background: #333 !important; color: #FFF !important; font-weight: bold !important; text-transform: capitalize; margin-bottom: 5px; cursor: pointer; } } /* END moz-document | pinboard.in/add* */