css Pinboard的时尚扩展风格。灵感来自Dan Klammer和Pushpin App的Flat Pinboard。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Pinboard的时尚扩展风格。灵感来自Dan Klammer和Pushpin App的Flat Pinboard。相关的知识，希望对你有一定的参考价值。
/* Theme Name: Flat Pinboard */
/* Theme URL: http://onestark.github.io/ */
/* Version: v0.1 */
/* Created by: He Wenwei */
/* Broswer: Chrome + Stylish Extension */
html {
height: 100%;
}
/* Hide: Timer, Logo Text and Username, How-To Link, & Tab spacer */
#timer,
.pin_logo,
#logo span,
#top_menu a:nth-last-of-type(2),
.tab_spacer,
#suggestion_row,
#organize_table img {
display: none;
}
body {
font-family: 'Lato', Helvetica, Arial, sans-serif;
border: 12px solid rgba(69, 147, 227, 0.93);
margin: 0;
padding: 25px;
min-height: 100%;
box-sizing: border-box;
}
#pinboard {
border: none!important;
background: #fff!important;
margin: 90px 30px 10px;
padding: 0;
}
#content,
#profile_main_column {
width: 1030px;
}
a,
a:visited,
a.help {
color: #4593e3;
transition: color .2s ease;
}
a.help {
display: inline-block;
background: rgba(69, 147, 227, 0.1);
border-radius: 16px;
width: 16px;
height: 16px;
line-height: 16px;
font-weight: 700;
text-align: center;
text-shadow: -1px -1px rgab(255, 255, 255, 0.3);
}
#banner {
width: 100%!important;
height: 35px!important;
position: fixed;
z-index: 100;
top: 0;
left: 0;
margin: 0;
padding: 0;
background-color: #00A0FF;
background: #00A0FF !important;
border-bottom: none!important;
color: transparent;
font-size: 0;
}
#banner a {
color: #fff;
}
#logo {
display: block;
position: absolute;
float: none;
left: 0;
top: 0;
width: 250px;
height: 50px;
overflow: hidden;
}
#pinboard_name {
display: block;
float: left;
padding: 1px 0 0;
width: 35px;
height: 34px;
line-height: 35px;
text-indent: 140px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.1);
background-position: 10px 10px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYwNTY0MzJBMDlDRDExRTA5NTlDQzJEQzQ3NTVCNzdBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYwNTY0MzJCMDlDRDExRTA5NTlDQzJEQzQ3NTVCNzdBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjA1NjQzMjgwOUNEMTFFMDk1OUNDMkRDNDc1NUI3N0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjA1NjQzMjkwOUNEMTFFMDk1OUNDMkRDNDc1NUI3N0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5t6Ji9AAAAyUlEQVR42mL4//8/AxrmB+IoKM2ADaML2APxWyD+A8TSxGjKhCoGgQ9ArE5IU8h/VFANxPdwaQQRxkD8DU3TZCD2AOLbQKyCTdPJ/9gBssZkID4GxNthmuZA/fMci8aZUIXIzkYJCJD7n/zHDc4DMSe2IMelERQNijB1TAyo4CYQOwDxOzTx71AMBuiaQIATiPmh7EdAHAHVsBEqx4At8hqhTloHxEJQMSFogCwF8RnBHkMFEkDMDMRP0cRBYhNA4tg0EQKuAAEGAMiryfGxuJK6AAAAAElFTkSuQmCC);
transition: all .25s ease;
}
#logo:hover #pinboard_name {
text-indent: 51px;
width: 150px;
}
#top_menu {
white-space: nowrap;
margin: 0!important;
}
#top_menu a {
font-size: 14px;
text-transform: capitalize;
height: 34px;
line-height: 35px;
display: inline-block;
padding: 1px 12px 0;
font-weight: 800;
color: #fff;
transition: all .25s ease;
}
#top_menu a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.user_navbar {
width: 630px;
height:35px;
margin-bottom: 0;
background: #f5f5f5;
padding: 5px 10px 0px 10px;
text-align:right;
word-spacing: -2px;
color: transparent;
border-radius: 4px;
border-bottom: 2px solid #eee;
}
.user_navbar a.filter {
display: inline-block;
width: 60px;
height: 36px;
margin: -4px;
text-align: center;
line-height:36px;
font-weight: bold;
padding: 0px 5px;
border-bottom: 2px solid transparent;
transition: all .2s ease;
}
.user_navbar a.filter:nth-child(1) {
border-bottom:4px solid #00A0FF;
}
.user_navbar a.filter:nth-child(2) {
border-bottom:4px solid #FFB653;
}
.user_navbar a.filter:nth-child(3) {
border-bottom:4px solid #87BF48;
}
.user_navbar a.filter:nth-child(4) {
border-bottom:4px solid #F16E44;
}
.user_navbar a.filter:nth-child(5) {
border-bottom:4px solid #B4BBC2;
}
.user_navbar a.filter:nth-child(6) {
border-bottom:4px solid #8E6FF4;
}
.user_navbar a.filter:nth-child(7) {
border-bottom:4px solid #2DAAF3;
}
.user_navbar a.filter:hover {
background-color: #eee!important;
}
.user_navbar a.filter.selected {
background-color: #eee!important;
}
.user_navbar a.filter:last-of-type {
margin-right: 10px;
}
/* Hate doing these CSS hacks, but have to get grab the right selector. */
#main_column > p {
float: right;
}
#main_column > p:last-of-type {
padding-right: 50px;
}
#main_column > p + form {
clear: both;
padding-top: 10px;
}
#main_column > b,
.rss_linkbox + p > b,
#main_column > p > b,
#main_column > div > div:not(.small_username) > b {
text-transform: uppercase;
color: #404040;
word-spacing: 3px;
letter-spacing: 1px;
position: absolute;
left: 0;
top: 2px;
}
#nextprev {
background: #fff;
}
.user_navbar + #nextprev {
padding-top: 6px!important;
}
#nextprev table {
border-spacing: 0;
margin: 10px 0 0 28px;
}
#bulk_links {
clear: both;
}
.small_username {
padding-right: 5px;
font-size: 15px;
line-height: 35px;
}
.bookmark_count_box {
width: auto;
padding: 2px 0 0;
}
.rss_linkbox {
margin-top: 5px;
display: inline-block;
background: #ccc;
padding: 2px 3px;
border-radius: 2px;
}
.rss_linkbox:hover {
background:#FFBD61;
}
.user_navbar .rss_linkbox {
margin-right: 0;
}
a.rss_link {
display: block;
float: none;
color: #fff;
text-shadow: -1px -1px rgba(0, 0, 0, 0.08);
}
.rss_linkbox:empty {
display: none;
}
#bookmarks {
width: 650px;
border-bottom: 1px solid #eee!important;
}
.bookmark {
position: relative;
margin-bottom: 0;
padding: 15px 10px 6px 30px;
width: 610px;
border-top: 1px solid #eee!important;
text-shadow: -1px -1px rgba(255, 255, 255, 0.3);
transition: background .3s ease;
}
.bookmark:hover {
background-color: #fbfbfb;
}
.bookmark_title {
font-size: 125%;
line-height: 125%;
font-weight: 500;
display: inline-block;
padding: 3px 5px 5px 0;
}
.unread {
color: #F16E44 !important;
}
.private{
background:#f5f5f5;
border:none;
}
.description {
line-height: 130%;
margin: 5px 0 8px;
}
.when,
.edit_links {
padding-top: 8px;
display: inline-block;
}
.edit_links {
float: right;
opacity: 0;
transition: opacity .3s ease;
}
.edit_links a,
.edit_links a:visited,
a.edit,
a.edit:visited {
color: #bbb!important;
background-color: transparent!important;
border: none!important;
}
.edit_links a:hover,
a.edit:hover {
color: #4593e3!important;
}
.bookmark:hover .edit_links {
opacity: 1;
}
.confirm {
color: #ccc!important;
word-spacing: 3px;
}
.display {
float: none;
color: #ccc;
}
#right_bar {
margin-left: 0;
padding: 0;
}
#search_right_bar {
float: left;
margin-left: 0;
text-align: left;
width: 330px!important;
}
#searchbox,
#tweet_searchbox {
margin: 0!important;
float: none;
background: #f5f5f5;
padding: 10px 0 10px 10px;
border-radius: 4px;
border-bottom: 2px solid #eee;
}
input[type=text],
input[type=password],
input#tags,
textarea,
input#organize_page_tags {
padding: 7px 6px;
outline: none;
border-radius: 3px;
box-shadow: none;
border: 1px inset;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
width: 100%!important;
box-sizing: border-box;
}
form input#search_query_field {
width: 310px!important;
padding: 7px 6px;
font-size: 18px;
}
#tag_cloud {
width: 310px;
padding: 10px;
text-align: left;
word-spacing: 4px;
margin-top: 15px;
}
#tag_cloud_header {
word-spacing: 2px!important;
border-bottom: 2px solid #eee;
display: block;
padding: 0 12px 10px;
margin: 0 -10px 13px;
background: #f5f5f5;
border-radius: 4px;
color: #909090;
}
#tag_cloud_header p a:hover {color:#4593e3}
#tag_cloud a.tag_heading_selected,
#tag_cloud_header b {
text-transform: uppercase;
color: #606060;
text-shadow: 1px 1px #fff;
}
#tag_cloud_header > p {
margin: 0;
padding: 12px 0 2px;
}
#tag_cloud_header b {
padding: 0 0 6px;
display: block;
}
a.tag,
a.tag:visited {
background: #80CBFF!important;
color: #fff!important;
text-shadow: -1px -1px rgba(0, 0, 0, 0.08)!important;
padding: 1px 5px 2px!important;
margin: 0 1px;
border-radius: 2px;
font-size: 12px;
}
#tag_cloud a.tag,
#right_bar a.tag {
line-height: 30px;
vertical-align: middle;
margin: 0;
}
#right_bar a.tag {
line-height: 36px!important;
}
#tag_cloud .tag_table a.tag,
#right_bar .tag_table a.tag {
line-height: 25px;
}
#tag_cloud_header a{
display: inline-block;
}
#tag_cloud_header a:nth-child(1){
margin-right: -18px;
}
#tag_cloud #tag_cloud_header a.tag {
background: #4593e3;
color: #fff!important;
line-height: 30px!important;
vertical-align: middle;
margin: 0;
font-size: 14px!important;
padding: 1px 25px 3px 5px!important;
border-radius: 2px;
opacity: .5;
transition: background .2s ease;
}
#tag_cloud #tag_cloud_header a.tag + a {
margin-left: -20px;
display: inline-block;
background: #71a7e2;
color: #fff!important;
line-height: 19px!important;
vertical-align: text-top;
font-size: 14px!important;
padding: 0 5px!important;
height: 21px;
border-radius: 0 2px 2px 0;
position: relative;
transition: background .2s ease;
}
#tag_cloud #tag_cloud_header a.tag.selected {
opacity: 1;
}
#tag_cloud #tag_cloud_header a.tag.selected + a {
background: #3078c8;
}
#tag_cloud #tag_cloud_header a.tag + a:hover {
background: #3078c8;
}
#tag_cloud #tag_cloud_header a.tag.selected + a:hover {
background: #c0392b;
}
.tag_table {
margin-left: 10px;
margin-right: 0;
}
.search_button {
margin-top: 0;
padding: 5px 0;
}
.search_button input[type=submit] {
width: 151px;
}
input[type=submit],
input[type=button],
input[type=reset] {
border-radius: 3px;
background: #4a8cce!important;
color: #fff!important;
box-shadow: 0 3px #226fbe;
border: none!important;
font-family: inherit;
cursor: pointer;
padding: 9px 15px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
margin-right: 4px;
}
input[type=submit]:active,
input[type=button]:active,
input[type=reset]:active {
box-shadow: 0 1px #226fbe;
top: 2px;
}
input[type=reset] {
background: #aaa!important;
box-shadow: 0 3px #858585!important;
}
input[type=reset]:active {
box-shadow: 0 1px #858585!important;
}
td input[type=submit] {
margin-top: 10px;
}
#tweet_searchbox input[type=submit] {
width: 310px;
margin-top: 7px;
}
.search_button br {
display: none;
}
.search_button form {
display: inline;
}
#tag_cloud > p > b,
#right_bar > div > p > b {
text-transform: capitalize;
display: block;
background: #f5f5f5;
padding: 10px;
margin: 0 -10px;
border-bottom: 2px solid #eee;
border-radius: 4px;
color: #606060;
text-shadow: 1px 1px #fff;
}
#edit_bookmark_form {
width: 100%;
padding: 5px 25px 5px 5px;
box-sizing: border-box;
}
.tabs {
text-align: left;
}
.tab {
font-size: 12px;
letter-spacing: 1px;
display: inline-block;
float: none;
border: 1px solid transparent;
width: auto;
padding: 9px 16px 8px;
text-transform: uppercase;
border-radius: 4px 3px 0 0;
}
.tab.tab_selected {
background: #f1f7fd;
font-weight: 700;
}
.tab a {
color: rgba(69, 147, 227, 0.65);
}
.tab.tab_selected a {
color: #4593e3;
}
#tab_panes {
border-radius: 3px;
padding: 20px 15px 40px;
}
#tab_panes table {
width: 100%!important;
padding: 0 0 20px;
}
#tab_panes,
#tab_panes td {
border: 1px solid transparent;
background: #f1f7fd;
}
#tab_panes h2 {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #4593e3;
font-weight: 700;
margin: 12px 0 5px;
padding: 7px 8px;
background-color: rgba(69, 147, 227, 0.06);
border-radius: 3px;
}
#tab_panes p {
margin: 14px 0 12px;
}
#tab_panes input[type=checkbox],
#tab_panes input[type=submit] {
display: block;
min-width: 175px;
margin: 3px auto 0;
}
tt {
background: rgba(69, 147, 227, 0.08);
font-family: inherit;
color: #4593e3;
padding: 1px 3px;
}
#edit_bookmark_form {
background-color: transparent;
}
#edit_bookmark_form textarea {
width: 100%;
}
#import_history_table {
margin: 45px 0 0 30px;
border-radius: 6px;
border: 1px dashed #ddd;
}
#popup_header {
padding: 0 0 20px;
word-spacing: 3px;
}
#popup_header #title a {
font-size: 20px;
font-weight: 700;
padding: 5px 0 5px 42px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2733%27%20height%3D%2733%27%20viewBox%3D%27-0.042%20-0.984%2033%2033%27%20overflow%3D%27visible%27%20enable-background%3D%27new%20-0.042%20-0.984%2033%2033%27%3E%3Cpath%20fill%3D%27%234593e3%27%20d%3D%27M11.858.291l-11.563%2011.505c-.249.248-.351.605-.266.947.083.341.339.612.674.717%202.233.694%204.249.755%206.091.223l.106.159%205.354%205.354c-.799%201.724-1.24%203.573-1.24%205.421%200%201.175.174%202.327.515%203.424.104.334.375.59.714.674.34.084.698-.015.946-.262l6.887-6.843%209.721%209.567%202.191.832-.777-2.012-9.721-9.792%206.978-6.932c.191-.189.295-.446.295-.709l-.028-.238c-.084-.341-.34-.612-.675-.717-2.913-.905-6.042-.64-8.848.636l-5.462-5.459-.045-.03c.245-.83.375-1.691.375-2.585%200-1.101-.189-2.268-.562-3.468-.104-.334-.375-.59-.714-.674-.339-.084-.698.015-.946.262zm13.891%2012.865l-12.67%2012.587c-.377-3.23.925-6.714%203.448-9.236%202.51-2.51%205.978-3.735%209.222-3.351zm-8.363.092c-.804.525-1.569%201.14-2.274%201.845-.703.702-1.317%201.472-1.85%202.283l-4.508-4.508c.8-.46%201.563-1.051%202.293-1.78.743-.743%201.35-1.53%201.821-2.356l4.518%204.516zm-7.753-3.575c-1.923%201.923-4.066%202.664-6.652%202.271l9.013-8.966c.369%202.584-.404%204.738-2.361%206.695z%27%2F%3E%3C%2Fsvg%3E);
}
#organize_instructions {
color: inherit!important;
}
iframe {
border-radius: 3px;
border-width: 1px;
}
.star {
margin-left: -25px;
padding-top: 2px;
}
.star span {
text-indent: -9999px;
display: block;
width: 20px;
height: 20px;
background-position: center center;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%27-0.988%20-0.985%2034%2033%27%20overflow%3D%27visible%27%20enable-background%3D%27new%20-0.988%20-0.985%2034%2033%27%3E%3Cpath%20fill%3D%27%23ccc%27%20d%3D%27M16.013%201.936l3.655%207.579.642%201.33%201.462.218%208.308%201.234-6.059%206.042-1.018%201.016.237%201.417%201.415%208.441-7.32-3.937-1.323-.712-1.323.712-7.321%203.938%201.416-8.443.237-1.417-1.018-1.016-6.055-6.042%208.307-1.234%201.461-.218.642-1.33%203.655-7.578m-.001-1.936c-.895%200-1.712.505-2.093%201.296l-3.622%207.52-8.334%201.24c-.855.127-1.566.712-1.843%201.513-.275.801-.067%201.684.538%202.286l6.106%206.1-1.417%208.458c-.143.853.226%201.707.949%202.205.398.273.865.412%201.332.412.385%200%20.77-.094%201.119-.28l7.265-3.912%207.267%203.912c.35.187.735.28%201.118.28.467%200%20.935-.139%201.334-.412.722-.498%201.09-1.353.946-2.205l-1.417-8.458%206.109-6.1c.604-.603.812-1.485.537-2.286-.277-.801-.988-1.386-1.844-1.513l-8.334-1.24-3.623-7.52c-.378-.791-1.195-1.296-2.093-1.296z%27%2F%3E%3C%2Fsvg%3E);
}
.star.selected_star span {
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%27-0.988%20-0.985%2034%2033%27%20overflow%3D%27visible%27%20enable-background%3D%27new%20-0.988%20-0.985%2034%2033%27%3E%3Cpath%20fill%3D%27%234593E3%27%20d%3D%27M16.012%201.417c-.813%200-1.555.459-1.902%201.178l-3.292%206.833-7.573%201.127c-.777.115-1.423.646-1.674%201.374-.25.728-.061%201.53.488%202.078l5.548%205.542-1.287%207.686c-.129.775.206%201.551.863%202.004.362.249.786.375%201.21.375.349%200%20.7-.085%201.016-.255l6.602-3.555%206.603%203.555c.318.17.669.255%201.017.255.424%200%20.849-.126%201.212-.375.655-.453.99-1.229.86-2.004l-1.288-7.686%205.552-5.542c.549-.547.736-1.35.487-2.078-.252-.728-.898-1.259-1.675-1.374l-7.573-1.127-3.291-6.833c-.345-.719-1.087-1.178-1.903-1.178z%27%2F%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M16.013%201.936l3.655%207.579.642%201.33%201.462.218%208.308%201.234-6.059%206.042-1.018%201.016.237%201.417%201.415%208.441-7.32-3.937-1.323-.712-1.323.712-7.321%203.938%201.416-8.443.237-1.417-1.018-1.016-6.055-6.042%208.307-1.234%201.461-.218.642-1.33%203.655-7.578m-.001-1.936c-.895%200-1.712.505-2.093%201.296l-3.622%207.52-8.334%201.24c-.855.127-1.566.712-1.843%201.513-.275.801-.067%201.684.538%202.286l6.106%206.1-1.417%208.458c-.143.853.226%201.707.949%202.205.398.273.865.412%201.332.412.385%200%20.77-.094%201.119-.28l7.265-3.912%207.267%203.912c.35.187.735.28%201.118.28.467%200%20.935-.139%201.334-.412.722-.498%201.09-1.353.946-2.205l-1.417-8.458%206.109-6.1c.604-.603.812-1.485.537-2.286-.277-.801-.988-1.386-1.844-1.513l-8.334-1.24-3.623-7.52c-.378-.791-1.195-1.296-2.093-1.296z%27%2F%3E%3C%2Fsvg%3E);
}
#bulk_edit_box {
position: relative;
color: #fff;
padding: 0 0 8px;
border: none!important;
background: #4a8cce;
border-radius: 3px;
text-shadow: -1px -1px rgba(0, 0, 0, 0.08);
word-spacing: 2px;
}
#bulk_edit_box:after {
bottom: 100%;
right: 75px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(34, 111, 190, 0);
border-bottom-color: #226fbe;
border-width: 7px;
margin-left: -7px;
}
#bulk_edit_box a {
color: #fff!important;
font-weight: 700!important;
}
#bulk_links p {
line-height: 18px!important;
}
#bulk_top_bar {
background: #226fbe;
height: 20px;
padding: 7px 10px 3px;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
#selected_count {
display: inline-block;
color: #fff!important;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
padding: 3px 10px 5px;
font-size: 12px;
position: absolute;
bottom: 0;
right: 0;
}
.edit_checkbox {
position: absolute;
left: -7px;
z-index: 10;
padding: 0;
width: 30px;
text-align: center;
height: 100%;
border-top: 1px solid #fff;
background: #eee;
margin-left: 0!important;
}
#bookmarks > div:first-child .edit_checkbox {
border-top: none!important;
}
.edit_checkbox input {
margin-top: 27px;
}
#footer {
color: #888;
position: absolute;
left: 0;
width: 100%;
box-sizing: border-box;
margin: 50px 0 0;
padding: 20px 0 20px;
background: rgba(69, 147, 227, 0.12);
}
#footer hr {
height: 0;
background: transparent;
border: none!important;
}
#footer a:not([href^='mailto:']) {
text-transform: uppercase;
font-size: 11px;
margin: 0 4px;
}
#per_page_picker {
margin: 20px 0 0 90px
}
#per_page_picker a.per_page_selected {
background: #F5F5F5;
color: #aaa;
padding: 0 4px;
border: 1px solid rgb(204, 204, 204);
border-radius: 5px;
}
#bottom_next_prev {
margin: 20px 0 0 30px
}
/* Sticky Sidebar */
#right_bar {
top: 90px;
}
#tag_cloud {
top: 200px;
}
/* Autocorrect Tagger */
.pin-ac .bd {
overflow: hidden;
padding: 0;
border-radius: 3px;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.pin-ac li {
padding: 4px 5px;
color: #707070;
}
.pin-ac .active {
color: #fff;
background-color: #4593e3;
}
以上是关于css Pinboard的时尚扩展风格。灵感来自Dan Klammer和Pushpin App的Flat Pinboard。的主要内容，如果未能解决你的问题，请参考以下文章
css app.codeable.io风格（时尚的chrome插件）
css 我的Chrome Dev Tools Skin融合了时尚的codepen.io风格和我自己的一些可用性增强功能。图为M
css [Decrepated，请参阅https://github.com/andy0130tw/plurk-css]我的新plurk主题灵感来自Material Design。