ttscoff
1 styles • 19 ★
Website: brettterpstra.com
Redesign for Pinboard
7 months ago by ttscoff
19 3#timer {
display: none;
}
#logo {
margin-left: 35px;
}
#pinboard {
width: 100%;
padding: 0 ;
margin: 0 ;
background-color: #f9f9f9 ;
}
#banner {
background: #444 ;
width: 100% ;
min-width: 1100px;
position: fixed;
left: 0;
padding: 8px 0 6px 0 ;
border-bottom: 1px solid #222 ;
z-index: 10;
}
#banner #top_menu a {
font-weight: bold;
padding: 3px 6px ;
text-shadow: -1 -1px 0 #000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#banner:hover #top_menu a {
opacity: 0.8;
}
#banner:after {
content: "";
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,rgba(255,255,255,0)));
height: 15px;
position: absolute;
top: 36px;
width: 100%;
}
#banner #logo {
padding: 0 10px;
}
#banner #logo span {
position: relative;
top: -2px;
color: rgba(255,255,255,0.3);
}
#banner #logo span a {
color: rgba(245,245,245,0.3) ;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
#banner #logo span a:hover {
color: rgba(245,245,245,1) ;
}
#banner #pinboard_name {
text-transform: lowercase;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}
#banner #logo img {
display: none;
}
#banner #top_menu {
padding: 0 10px;
color: #434343;
}
#banner #top_menu a:last-child {
display: inline-block;
}
#banner #top_menu a:hover {
background: #555;
opacity: 1;
-webkit-box-shadow: 1px 0px 4px #111 inset;
-moz-box-shadow: 1px 0px 4px #111 inset;
box-shadow: 1px 0px 4px #111 inset;
}
#banner a {
color: #fff ;
}
#main_column, #right_bar {
margin-top: 60px;
}
#main_column b {
font-size: 150% ;
}
#bookmarks div.display a.bookmark_title.unread {
font-weight: bold;
color: #00749b ;
}
#bookmarks div.display a.bookmark_title {
font-weight: bold;
display: inline-block;
color: #3b9bba ;
width: 580px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
padding: 0;
line-height: 1.4em;
}
.user_navbar {
position: relative;
height: 15px;
margin: 0;
}
.user_navbar>div {
text-indent: -99999px;
}
.bookmark_count_box {
position: absolute;
width: 70px;
padding: 0;
left: -75px;
}
.bookmark_count {
background: #eee;
float: right;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-weight: bold;
position: relative;
top: -5px;
}
#nextprev a.edit,#nextprev a#bulk_edit {
background: #e5e5e5;
padding: 2px 10px;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: block;
float: right;
margin-right: 5px;
text-indent: 0px;
border: 1px solid #bebebe;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#nextprev a.edit:hover,#nextprev a#bulk_edit:hover {
-webkit-box-shadow: 1px -1px 4px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 1px -1px 4px rgba(0,0,0,0.2) inset;
box-shadow: 1px -1px 4px rgba(0,0,0,0.2) inset;
background-color: #eee;
text-shadow: 1px -1px 1px rgba(0,0,0,0.2);
}
#nextprev table {
width: 100%;
padding-top: 10px;
}
#nextprev td {
text-indent: -99999px;
display: inline-block;
float: left;
width: auto;
}
#nextprev td:last-of-type {
width: 300px;
float: right;
margin-right: 35px;
}
#bookmarks a.next_prev {
float: left;
}
a.next_prev {
display: block;
text-indent: 0px;
border: 1px solid #bebebe;
margin-right: 10px;
background: #cee297;
padding: 2px 10px;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background .1s ease-in-out;
-moz-transition: background .1s ease-in-out;
-o-transition: background .1s ease-in-out;
transition: background .1s ease-in-out;
}
a.next_prev:hover {
-webkit-box-shadow: 1px -1px 4px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 1px -1px 4px rgba(0,0,0,0.2) inset;
box-shadow: 1px -1px 4px rgba(0,0,0,0.2) inset;
text-shadow: 1px -1px 1px rgba(0,0,0,0.2);
background-color: #d9ef9f;
}
.display {
position: relative;
}
.display .when {
display: block;
clear: left;
float: left;
padding: 7px 3px;
}
.display .edit_links {
padding: 2px 0;
float: left;
position: relative;
margin-top: 4px;
}
.private .display a.tag, .display .tag {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
display: block;
float: left;
padding: 1px 6px ;
margin-right: 2px;
margin-top: 2px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background: #e7f0f0;
border: solid 1px rgba(0,0,0,0.1) ;
line-height: 100% ;
}
.display a.cached {
position: absolute;
left: -40px;
top: -1px;
opacity: .5;
}
.display .description {
display: block;
clear: both;
margin: 5px 0;
}
.display .tag:hover {
background: #d9e3e2;
}
#bookmarks .url_link {
display: inline-block;
float: left;
margin-top: 5px;
background: rgba(209,53,37,0.17) ;
padding: 2px 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#bookmarks .when {
opacity: 0.5;
}
#tag_cloud_header p {
background: #e4e8eb;
padding: 8px ;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#tag_cloud a {
color: rgba(100,100,100,0.4) ;
-webkit-transition: color .1s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
#tag_cloud a:hover {
color: #333 ;
}
#tag_cloud b {
font-size: 130% ;
}
#tag_cloud_header a {
color: #1f769e ;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2) ;
}
#footer {
margin-bottom: 10px;
}
.rss_link {
color: #fff ;
font-weight: bold;
background: #f28d6e;
padding: 2px 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.display .source {
display: inline-block;
float: left;
padding: 5px 0;
}
a.tag {
line-height: 130%;
}
div.display {
width: 600px;
}
#bookmarks div.bookmark {
-moz-border-radius-topright: 25px;
-webkit-border-top-right-radius: 25px;
border-radius-topright: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;
border-radius-bottomright: 25px;
}
.private {
background: #eee;
border: 1px solid #ddd
;
}
.user_navbar span {
text-indent: 0;
}
.user_navbar a {
display: block;
text-indent: 0;
}
a.filter {
display: block;
float: left;
text-indent: 0;
padding: 8px;
position: relative;
top: -6px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
a.filter:hover {
background: #eee;
color: #2f82c4 ;
-webkit-box-shadow: 1px -1px 2px rgba(33,33,33,0.5) inset;
-moz-box-shadow: 1px -1px 2px rgba(33,33,33,0.5) inset;
box-shadow: 1px -1px 2px rgba(33,33,33,0.5) inset;
text-shadow: -1px 1px 1px rgba(33,33,33,0.2);
}
a.twitter_user {
color: #1d5669 ;
}
a.source {
color: #1d5669 ;
}
.selected_star {
color: #f9ab59 ;
}
#footer a:link, #footer a:visited, #footer a:hover, #main_column a:link,#main_column a:visited,#main_column a:hover {
color: #1d5669 ;
}
.small_username {
float: left;
padding-right: 1em;
}
.rss_linkbox {
position: fixed;
top: 13px;
left: 10px;
z-index: 99;
}
#searchbox {
font-weight: bold;
color: #666;
}
#searchbox input {
font-weight: bold;
color: #666;
border: solid 1px #ccc;
background: #ddd;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 143px;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#searchbox input:hover {
background: #eee;
}
#searchbox p {
text-align: right;
padding-right: 8px;
}
#searchbox #fulltext {
width: auto;
}
#searchbox #search_field {
width: 280px;
background: #fff;
padding: 4px;
}
.bookmark {
margin-bottom: 1em;
}
div.bookmark {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
div.bookmark:hover {
background-color: #fefbef;
}