A Clean Space ( Google Plus )
plus.google.com • 5 months ago by mike
15
/*
todo/ideas:
- always re-check code for selectors that change (eg. mute button, blue-line and other .classes)
- make top share box stand out
- JS: less hack-job popup dimmer
.gbtc > li.gbto > div {
outline: 1300px hsla(0,0%,0%,0.75) solid;
z-index: 50;
}
- JS: a contact panel (2ppl x 4ppl) 48px or 64px icons (generous padding) in the right side-bar or above chat. Clicking image sends to page, message button (shows within the lower 20% of box, on hover) pops up a share box
*/
/* ??? */
.a-b-la-T > .a-Rf-A, div[id=":rn"] {
display: none;
}
/* top bar */
#notify-widget-pane + div + div, #gbx3, #gbx4, .gbtcb, .gbtb, .gbtb2, #gbg4, #gbgs3 > .gbgsc, div[role="navigation"] > a:first-child {
display: none;
}
/* footer */
#content + div {
display: none;
}
/* left sidebar */
#content > div > div:first-child > div > div:first-child, #content > div > div:first-child > div > div:nth-child(2) > div > div > a:nth-last-of-type(2) {
display: none;
}
/* right side bar */
#contentPane + div > div:first-child > div:nth-child(1), #contentPane + div > div:first-child > div:nth-child(3), #contentPane + div > div:first-child > div:nth-child(5), #contentPane + div > div:first-child > div:nth-child(6) {
display: none;
}
/* TOP: fixed toolbar + stream sidebar */
#notify-widget-pane + div + div + div, #content > div > div:first-child {
height: auto;
position: fixed;
z-index: 10;
}
#notify-widget-pane + div + div + div {
z-index: 100;
border-bottom: 2px #aaa solid;
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.07);
}
#content > div > div:first-child + div {
margin-left: 188px;
}
#content > div > div:first-child[style] + div {
margin-left: 1px;
}
/* TOP: slim the plus bar */
#notify-widget-pane + div + div + div > div {
height: auto;
padding: 7px 10px;
}
h1 + a > img {
height: 32px;
margin: 3px 0 -2px 0;
}
/* TOP: google "+" app selector */
#gbz {
padding-left: 0;
background: #f1f1f1;
top: 0;
margin-left: -862px;
height: auto;
width: 20px;
overflow: hidden;
-webkit-transition: width 0.6s ease-in-out;
-webkit-transition-delay: 0.4s;
}
#gbz > ol.gbtc {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-webkit-transition-delay: 1s;
}
#gbz:hover {
width: 550px;
overflow: visible;
-webkit-transition: width 0.3s ease-in-out;
-webkit-transition-delay: 0.1s;
}
#gbz:hover > ol.gbtc {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-webkit-transition-delay: 0.3s;
}
#gbz:before {
content: "+";
font-size: 18px;
font-family: verdana;
width: 20px;
vertical-align: top;
}
#gbz:before, #gbz > ol.gbtc {
display: inline-block;
padding: 9px 6px 9px 3px;
}
#gbz li a {
padding: 0 6px;
}
#gbz li a span {
color: #969696;
}
#gbz li:hover {
z-index: 2;
}
#gbz li:first-child, #gbz li:nth-last-child(2) {
display: none;
}
#gbz li.gbt:last-child > a, #gbz li.gbt:last-child > a > span {
background: #e5e5e5 ;
padding-right: 5px;
}
/* TOP: make profile button first */
div[role="navigation"] > a:nth-child(3) {
float: left;
}
/* GOOG: move googbar onto plus bar */
#gb {
position: fixed;
margin-right: -480px;
right: 50%;
top: -1px;
}
#gbg {
margin: 10px 0;
padding: 0;
}
/* GOOG: tweak googbar for consistency */
.gbzt, .gbgt {
border: 1px #d9d9d9 solid;
margin-left: -1px;
height: 27px;
background: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#F1F1F1));
}
.gbzt-hvr, .gbzt:focus, .gbgt-hvr, .gbgt:focus {
border: 1px #c0c0c0 solid;
background: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#F1F1F1));
}
.gbts {
padding: 0;
border: 0;
}
/* GOOG: notifications*/
#gbi1.gbids {
color: #aaa;
background: #e5e5e5;
outline: none;
}
#gbi1 {
color: #fff;
background: #4d90fe;
outline: 1px #4d90fe solid;
-webkit-transition: all .6s ease-out;
width: 44px;
}
#gbg1:hover #gbgs1 {
outline: 1px #c0c0c0 solid;
}
/* GOOG: shorten SEARCH (on plus bar) */
#searchBox {
width: 200px;
}
/* GOOG: share bar */
#gbgs3:after {
content: "Share…";
display: block;
color: #a9a9a9;
padding: 4px 0 0 8px;
font-size: 14px;
letter-spacing: 0.1em;
}
a#gbg3 {
background: #fff;
width: 100px;
border-top-color: #c0c0c0;
}
li[class="gbt"]:hover a#gbg3:hover, li[class="gbt"]:hover a#gbg3:active {
border-color: #4d90fe;
box-shadow: rgba(0,0,0,0.3) 0 1px 2px 0 inset;
}
/* GOOG: name + pic */
#gbg3 {
margin-right: 151px;
}
#gbg6 {
position: absolute;
right: -296px;
border-right-width: 0;
padding: 0 10px;
text-align: center;
min-width: 80px;
max-width: 120px;
}
#gbg6:hover, a#gbg6.gbgt:active {
border-right-width: 1px;
margin-right: -1px;
}
#gbi4t {
color: #969696;
}
#gbg6:hover #gbi4t {
color: #4d90fe;
}
/* GOOG: settings gear */
#gbg5 #gbgs5 {
padding: 6px 14px ;
}
#gbi5 {
background-position: -6px -22px;
}
/* CHAT: move status up beside "chat" sub-header*/
div.me_widget_container {
position: relative;
margin-top: -54px;
margin-left: 35px;
}
.me_entry_status_static_div_hover {
background: transparent;
}
/* CHAT: blend in search*/
input.me_entry_search {
background: #f1f1f1;
border-width: 0;
}
/* CHAT: set height + width of box */
#content > div > div:first-child {
padding-right: 12px;
}
#content > div > div:first-child > div > div:last-child {
padding-right: 0;
padding-left: 6px;
}
.CSS_CHAT_ROSTER {
width: 164px;
}
.quicklist_widget {
margin-top: 23px;
}
#oz-chat-roster > iframe {
height: 345px;
}
/* POPUPS: Popups for notifications, share, name/profile & account settings */
.gbto {
box-shadow: none;
}
.gbtc > li:nth-child(3) > div, .gbtc > li:nth-child(3) > iframe, .gbtc > li:nth-child(5) > div, .gbtc > li:nth-child(5) > iframe, .gbtc > li:nth-child(7) > div, .gbtc > li:nth-child(7) > iframe, .gbtc > li:last-child > div, .gbtc > li:last-child > iframe {
position: absolute;
right: -45px;
width: 440px;
height: auto;
margin-top: 11px;
}
#gbwc {
right: 1px;
margin-top: 22px;
}
/* POPUPS: add'l settings for notifications box */
.gbtc > li:nth-child(3) > div, .gbtc > li:nth-child(3) > iframe {
margin-right: -252px;
}
/* POPUPS: add'l settings for settings box */
.gbtc > li:last-child > div, .gbtc > li:last-child > iframe {
width: 147px;
right: 0;
}
#gbgs5 {
background-color: transparent;
}
/* MAIN: push content down */
#content {
border: none;
padding-top: 70px;
}
#contentPane {
display: inline-block;
background: #fff;
}
#contentPane > div > div:last-of-type[aria-live="polite"], #contentPane > div > div > div:last-of-type[aria-live="polite"] {
padding-top: 25px;
}
/* CONTENT: move the blueline over */
#contentPane h2 + div > div {
margin-left: -1px;
border-left-color: #ebebeb;
}
#contentPane h2 + div > div.xi {
border-left-color: #bbd4f9;
}
#contentPane h2 + div > div.rh {
border-left-color: #1e73ec;
border-top-color: #ebebeb;
}
/* CONTENT: bigger post-option handles
http://stylebot.me/styles/473 */
#contentPane h3 + span[aria-haspopup="true"] {
padding: 9px;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
box-shadow: 0 2px 3px #ddd inset;
background-color: #fff;
}
#contentPane h3 + span[title="Options menu"]:hover {
box-shadow: 0 2px 1px #ccc inset;
}
/* CONTENT: Easy-muting */
div[id^="update"] > div[role="menu"] {
margin: -93px 0 0 21px;
padding-bottom: 0;
}
div[id^="update"] > div[role="menu"] > div:hover {
background-color: #f2f2f2;
}
div[id^="update"] > div[role="menu"] > div.Zi.cf {
border-top: 1px #fdd solid;
border-bottom: 1px #fdd solid;
padding: 6px 7px 6px 30px;
}
div[id^="update"] > div[role="menu"] > div.Zi.cf:hover {
background-color: #ffe6e6;
}
div[id^="update"] > div[role="menu"] > div.Zi.cf > div, div[id^="update"] > div[role="menu"] > div.Zi.cf:hover > div {
color: #db4937 ;
}
/* CONTENT: Hide muted posts after 2s */
div[id^="update"] > div:first-child {
max-height: 9999px;
}
div[id^="update"][style*="background-color"] > div:first-child > div > div {
text-align: right;
color: #999;
padding-top: 18px;
}
div[id^="update"][style*="background-color"] {
padding: 0;
height: 50px;
max-height: 0;
overflow: hidden;
border-width: 0;
-webkit-transition: max-height 1s linear 3s;
}
/*
TOP: have home button on sidebar side rather than stream
div[role="navigation"] > a:nth-child(3)
{float: left;}
div[role="navigation"]
{margin-left: -29px;}
*/
✂ CSS×
A Clean Space ( Google Plus )
/*
todo/ideas:
- always re-check code for selectors that change (eg. mute button, blue-line and other .classes)
- make top share box stand out
- JS: less hack-job popup dimmer
.gbtc > li.gbto > div {
outline: 1300px hsla(0,0%,0%,0.75) solid;
z-index: 50;
}
- JS: a contact panel (2ppl x 4ppl) 48px or 64px icons (generous padding) in the right side-bar or above chat. Clicking image sends to page, message button (shows within the lower 20% of box, on hover) pops up a share box
*/
/* ??? */
.a-b-la-T > .a-Rf-A, div[id=":rn"] {
display: none;
}
/* top bar */
#notify-widget-pane + div + div, #gbx3, #gbx4, .gbtcb, .gbtb, .gbtb2, #gbg4, #gbgs3 > .gbgsc, div[role="navigation"] > a:first-child {
display: none;
}
/* footer */
#content + div {
display: none;
}
/* left sidebar */
#content > div > div:first-child > div > div:first-child, #content > div > div:first-child > div > div:nth-child(2) > div > div > a:nth-last-of-type(2) {
display: none;
}
/* right side bar */
#contentPane + div > div:first-child > div:nth-child(1), #contentPane + div > div:first-child > div:nth-child(3), #contentPane + div > div:first-child > div:nth-child(5), #contentPane + div > div:first-child > div:nth-child(6) {
display: none;
}
/* TOP: fixed toolbar + stream sidebar */
#notify-widget-pane + div + div + div, #content > div > div:first-child {
height: auto;
position: fixed;
z-index: 10;
}
#notify-widget-pane + div + div + div {
z-index: 100;
border-bottom: 2px #aaa solid;
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.07);
}
#content > div > div:first-child + div {
margin-left: 188px;
}
#content > div > div:first-child[style] + div {
margin-left: 1px;
}
/* TOP: slim the plus bar */
#notify-widget-pane + div + div + div > div {
height: auto;
padding: 7px 10px;
}
h1 + a > img {
height: 32px;
margin: 3px 0 -2px 0;
}
/* TOP: google "+" app selector */
#gbz {
padding-left: 0;
background: #f1f1f1;
top: 0;
margin-left: -862px;
height: auto;
width: 20px;
overflow: hidden;
-webkit-transition: width 0.6s ease-in-out;
-webkit-transition-delay: 0.4s;
}
#gbz > ol.gbtc {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-webkit-transition-delay: 1s;
}
#gbz:hover {
width: 550px;
overflow: visible;
-webkit-transition: width 0.3s ease-in-out;
-webkit-transition-delay: 0.1s;
}
#gbz:hover > ol.gbtc {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-webkit-transition-delay: 0.3s;
}
#gbz:before {
content: "+";
font-size: 18px;
font-family: verdana;
width: 20px;
vertical-align: top;
}
#gbz:before, #gbz > ol.gbtc {
display: inline-block;
padding: 9px 6px 9px 3px;
}
#gbz li a {
padding: 0 6px;
}
#gbz li a span {
color: #969696;
}
#gbz li:hover {
z-index: 2;
}
#gbz li:first-child, #gbz li:nth-last-child(2) {
display: none;
}
#gbz li.gbt:last-child > a, #gbz li.gbt:last-child > a > span {
background: #e5e5e5 ;
padding-right: 5px;
}
/* TOP: make profile button first */
div[role="navigation"] > a:nth-child(3) {
float: left;
}
/* GOOG: move googbar onto plus bar */
#gb {
position: fixed;
margin-right: -480px;
right: 50%;
top: -1px;
}
#gbg {
margin: 10px 0;
padding: 0;
}
/* GOOG: tweak googbar for consistency */
.gbzt, .gbgt {
border: 1px #d9d9d9 solid;
margin-left: -1px;
height: 27px;
background: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#F1F1F1));
}
.gbzt-hvr, .gbzt:focus, .gbgt-hvr, .gbgt:focus {
border: 1px #c0c0c0 solid;
background: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#F1F1F1));
}
.gbts {
padding: 0;
border: 0;
}
/* GOOG: notifications*/
#gbi1.gbids {
color: #aaa;
background: #e5e5e5;
outline: none;
}
#gbi1 {
color: #fff;
background: #4d90fe;
outline: 1px #4d90fe solid;
-webkit-transition: all .6s ease-out;
width: 44px;
}
#gbg1:hover #gbgs1 {
outline: 1px #c0c0c0 solid;
}
/* GOOG: shorten SEARCH (on plus bar) */
#searchBox {
width: 200px;
}
/* GOOG: share bar */
#gbgs3:after {
content: "Share…";
display: block;
color: #a9a9a9;
padding: 4px 0 0 8px;
font-size: 14px;
letter-spacing: 0.1em;
}
a#gbg3 {
background: #fff;
width: 100px;
border-top-color: #c0c0c0;
}
li[class="gbt"]:hover a#gbg3:hover, li[class="gbt"]:hover a#gbg3:active {
border-color: #4d90fe;
box-shadow: rgba(0,0,0,0.3) 0 1px 2px 0 inset;
}
/* GOOG: name + pic */
#gbg3 {
margin-right: 151px;
}
#gbg6 {
position: absolute;
right: -296px;
border-right-width: 0;
padding: 0 10px;
text-align: center;
min-width: 80px;
max-width: 120px;
}
#gbg6:hover, a#gbg6.gbgt:active {
border-right-width: 1px;
margin-right: -1px;
}
#gbi4t {
color: #969696;
}
#gbg6:hover #gbi4t {
color: #4d90fe;
}
/* GOOG: settings gear */
#gbg5 #gbgs5 {
padding: 6px 14px ;
}
#gbi5 {
background-position: -6px -22px;
}
/* CHAT: move status up beside "chat" sub-header*/
div.me_widget_container {
position: relative;
margin-top: -54px;
margin-left: 35px;
}
.me_entry_status_static_div_hover {
background: transparent;
}
/* CHAT: blend in search*/
input.me_entry_search {
background: #f1f1f1;
border-width: 0;
}
/* CHAT: set height + width of box */
#content > div > div:first-child {
padding-right: 12px;
}
#content > div > div:first-child > div > div:last-child {
padding-right: 0;
padding-left: 6px;
}
.CSS_CHAT_ROSTER {
width: 164px;
}
.quicklist_widget {
margin-top: 23px;
}
#oz-chat-roster > iframe {
height: 345px;
}
/* POPUPS: Popups for notifications, share, name/profile & account settings */
.gbto {
box-shadow: none;
}
.gbtc > li:nth-child(3) > div, .gbtc > li:nth-child(3) > iframe, .gbtc > li:nth-child(5) > div, .gbtc > li:nth-child(5) > iframe, .gbtc > li:nth-child(7) > div, .gbtc > li:nth-child(7) > iframe, .gbtc > li:last-child > div, .gbtc > li:last-child > iframe {
position: absolute;
right: -45px;
width: 440px;
height: auto;
margin-top: 11px;
}
#gbwc {
right: 1px;
margin-top: 22px;
}
/* POPUPS: add'l settings for notifications box */
.gbtc > li:nth-child(3) > div, .gbtc > li:nth-child(3) > iframe {
margin-right: -252px;
}
/* POPUPS: add'l settings for settings box */
.gbtc > li:last-child > div, .gbtc > li:last-child > iframe {
width: 147px;
right: 0;
}
#gbgs5 {
background-color: transparent;
}
/* MAIN: push content down */
#content {
border: none;
padding-top: 70px;
}
#contentPane {
display: inline-block;
background: #fff;
}
#contentPane > div > div:last-of-type[aria-live="polite"], #contentPane > div > div > div:last-of-type[aria-live="polite"] {
padding-top: 25px;
}
/* CONTENT: move the blueline over */
#contentPane h2 + div > div {
margin-left: -1px;
border-left-color: #ebebeb;
}
#contentPane h2 + div > div.xi {
border-left-color: #bbd4f9;
}
#contentPane h2 + div > div.rh {
border-left-color: #1e73ec;
border-top-color: #ebebeb;
}
/* CONTENT: bigger post-option handles
http://stylebot.me/styles/473 */
#contentPane h3 + span[aria-haspopup="true"] {
padding: 9px;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
box-shadow: 0 2px 3px #ddd inset;
background-color: #fff;
}
#contentPane h3 + span[title="Options menu"]:hover {
box-shadow: 0 2px 1px #ccc inset;
}
/* CONTENT: Easy-muting */
div[id^="update"] > div[role="menu"] {
margin: -93px 0 0 21px;
padding-bottom: 0;
}
div[id^="update"] > div[role="menu"] > div:hover {
background-color: #f2f2f2;
}
div[id^="update"] > div[role="menu"] > div.Zi.cf {
border-top: 1px #fdd solid;
border-bottom: 1px #fdd solid;
padding: 6px 7px 6px 30px;
}
div[id^="update"] > div[role="menu"] > div.Zi.cf:hover {
background-color: #ffe6e6;
}
div[id^="update"] > div[role="menu"] > div.Zi.cf > div, div[id^="update"] > div[role="menu"] > div.Zi.cf:hover > div {
color: #db4937 ;
}
/* CONTENT: Hide muted posts after 2s */
div[id^="update"] > div:first-child {
max-height: 9999px;
}
div[id^="update"][style*="background-color"] > div:first-child > div > div {
text-align: right;
color: #999;
padding-top: 18px;
}
div[id^="update"][style*="background-color"] {
padding: 0;
height: 50px;
max-height: 0;
overflow: hidden;
border-width: 0;
-webkit-transition: max-height 1s linear 3s;
}
/*
TOP: have home button on sidebar side rather than stream
div[role="navigation"] > a:nth-child(3)
{float: left;}
div[role="navigation"]
{margin-left: -29px;}
*/
Circle me at plus.ly/ramia
Features:
- The cleanest header around
- Noticeable Notifications
- "Easy-hide" for posts that are read (click the post-options arrow, then mute)
- Fixed left sidebar for streams
- Large chat box
and more..
Credit for larger post-options arrow: stylebot.me/styles/473
★ by 
★ by
9
You need to be signed in to comment.