Brings back the old black top bar from 2011 - 2014.
/* ==UserStyle==
@name Classic Google Top Bar
@namespace https://discord.gg/t9NEEN3PnM
@version 3.0.1
@description Brings back the old black top bar from 2011 - 2014.
@preprocessor stylus
@var checkbox modern "Modern Style" 0
@var checkbox filters "Old Filters Compatibility" 0
@var checkbox oldtheme "Work In Progress 2013 Theme" 0
@author CallyHam
==/UserStyle== */
/* Style custom elements (all)*/
@-moz-document domain("google.com") {
.topBar {
display: flex;
position: fixed;
top: 0;
width: 100%;
height: 29px;
background-color: #2d2d2d;
border-bottom: 1px solid #000;
z-index: 999;
}
.topBar a {
width: fit-content;
font-family: Arial, sans-serif;
font-size: 13px;
color: #ccc;
padding: 7px 6px;
white-space: nowrap;
line-height: 16px;
text-decoration: none;
}
.topBar a.tbSelected {
font-weight: bold;
color: #fff;
line-height: 12px;
border-top: 2px solid #dd4b39;
}
.topBar a.tbOpen {
color: #36c;
padding: 7px 5px;
background-color: #fff;
border-left: 1px solid #bebebe;
border-right: 1px solid #bebebe;
z-index: 999;
}
.topBar a.tbOpen:hover {
background-color: #fff;
}
@css {
.topBar a.tbDropdown:after {
content: url('data:image/svg+xml,<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 5" width="6" height="5"><title>image</title><style>.s0 { fill: %23c3c3c3 } </style><path id="Shape 1" class="s0" d="m0 0l3 3 3-3z"/></svg>');
padding-left: 4px;
}
}
a.tbSettings {
background-image: url('http://ssl.gstatic.com/gb/images/b_8d5afc09.png');
background-position: 6px 7px;
background-repeat: no-repeat;
padding: 0 14px;
}
.topBar li.tbDropdown {
display: flex;
flex-direction: column;
}
div.tbAccountMenu {
position: fixed;
top: 40px;
right: 10px;
display: flex;
visibility: hidden;
flex-direction: column;
width: 300px;
height: 121px;
margin-top: -1px;
background-color: #fff;
border: 1px solid #bebebe;
z-index: 990;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.tbAccountMenu a {
padding: 5px;
color: #36c;
background: none !important;
}
.tbAccountMenu span {
padding: 5px;
line-height: 15px;
background: none !important;
}
.tbAccountMenu a:hover {
text-decoration: underline;
}
.topBar div.tbAccountMenu.tbOpen {
visibility: visible;
}
div.tbMoreMenu {
visibility: hidden;
display: flex;
flex-direction: column;
margin-top: -1px;
background-color: #fff;
border: 1px solid #bebebe;
padding: 10px 0;
z-index: 990;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.topBar div.tbMoreMenu.tbOpen {
visibility: visible;
}
.tbMoreMenu .tbSeperator {
width: 100% !important;
height: 1px !important;
margin: 10px 0px;
background: #bebebe !important;
}
.tbMoreMenu a {
color: #36c !important;
width: auto;
padding: 5.5px 20px;
}
.tbMoreMenu a:hover {
background-color: #eeeeee !important;
}
.topBar div.tbSeperator {
height: 100%;
width: 1px;
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%)
}
.topBar a:hover {
background-color: #4c4c4c;
}
.tbRightItems {
margin-right: 5px;
display: flex;
flex-direction: row;
}
.tbRightItems a {
font-weight: bold;
}
.tbLeftItems {
margin-left: 4px;
display: flex;
flex-direction: row;
flex-grow: 1;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.gb_Sd, .c58wS, .CcNe6e {
display: none;
}
.row.main {
padding: 10px;
}
#tbName {
padding: 1px 5px;
font-weight: bold;
}
#tbEmail {
color: #696969;
padding: 1px 5px;
}
#tbProfilePic {
margin: 0 2px 4px 0;
height: 50px;
}
#tbSep {
width: 8px!important;
height: 1px !important;
background: #bebebe !important;
}
#tbSwitch {
text-align: center;
text-decoration: none !important;
line-height: 30px;
color: #696969;
background: linear-gradient(0deg, #d4d4d4 0%, #e7e7e7 100%) !important;
border-top: 1px solid #bebebe;
width: 290px;
height: 30px !important;
margin-top: auto;
}
#tbSwitch:hover {
filter: brightness(102%)
}
#tbSwitch:active {
background: linear-gradient(0deg, #d4d4d4 0%, #dedede 50%, #d4d4d4 100%) !important;
filter: brightness(95%);
box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.1);
}
/* Style existing elements (all)*/
.o3j99.n1xJcf.Ne6nSd {
visibility: hidden;
}
.o3j99.c93Gbe {
position: fixed !important;
width: 100%;
bottom: 0;
z-index: 990;
}
.yg51vc, .ndYZfc, .rfiSsc {
margin-top: 20px;
}
#searchform, .Lj9fsd {
margin-top: 30px;
}
/* Style existing elements (old theme only) */
if oldtheme {
.nDcEnd, .iblpc, .xtSCL, .BKRPef, .H9lube, .VuuXrf, .iTPLzd.rNSxBe.lUn2nc {
display: none;
}
.Tg7LZd, .rCGXm {
height: 32px;
background: linear-gradient(0deg, #4787ed 0%, #4d90fe 100%)
border: 1px solid #3079ed
border-radius: 0px
width: 75px;
margin-top: -1px;
margin-right: -1px
}
.Tg7LZd svg, .rCGXm svg {
filter: saturate(0%) brightness(200%)
margin-top: 2px;
height: 20px;
width: 20px;
margin-left: 10px;
}
.minidiv svg {
margin-top: 0px !important;
margin-left: 8px !important;
}
.Lj9fsd.DU1Mzb .F1hUFe {
padding: 4px 28px 0 30px;
}
.Lj9fsd.DU1Mzb {
padding: 0px
box-shadow: none;
}
.DU1Mzb svg {
margin-top: 0px !important;
margin-left: 8px !important;
}
.DKV0Md {
margin-top: -5px !important;
font-family: arial, sans-serif
}
#result-stats, .Wt5Tfe span, .T47uwc {
font-family: arial, sans-serif
}
#hdtb-msb .bmaJhd.iJddsb, .m3kSL {
display:none;
}
.hdtb-mitem, .t2vtad {
font-family: arial, sans-serif
text-align: center;
}
.minidiv .gLFyf {
margin-top: 4px !important;
}
.hdtb-msel, .rQEFy {
font-size: 13px;
font-weight: bold;
color: #dd4b39 !important;
}
.rQEFy {
border-bottom: 3px solid #dd4b39;
}
.byrV5b cite, .byrV5b span {
color: #009933 !important;
}
.YTDezd {
padding: 0 20px;
background: #dd4b39
}
.lnXdpd, .jfN4p, .TYpZOd {
opacity: 0
}
.logo, .k1zIA.rSk4se, .F1hUFe.jbTlie {
background: url('https://oldgoogle.neocities.org/images/srpr/logo11w.png');
background-size: contain;
background-repeat: no-repeat;
background-origin: content-box;
}
.qlS7ne .F1hUFe.jbTlie {
margin-top: -10px !important;
height: 38px !important;
background-size: auto 38px;
}
.logo {
padding: 0 30px;
height: 38px;
background-size: auto 38px;
margin-top: -5px !important;
}
.Q3DXx.yIbDgf .Q3DXx, .Si7Nvc.O1t3Xb{
visibility: hidden;
}
.KxwPGc.ssOUyb {
display: none;
}
.o3j99.c93Gbe {
border-top: 1px solid #dadce0 !important;
height: 40px
}
.pHiOh {
font-size: 13px;
padding: 13px;
}
.SDkEP, .e3JjXb {
padding: 4px 4px 0 10px;
}
.e3JjXb {
height: 26px;
}
.FPdoLc.lJ9FBc {
padding-top: 8px !important;
}
.lJ9FBc {
height: 58px;
}
.sbct, .I6TXqe, .TzHB6b.cLjAic div {
border-radius: 0 !important;
}
.I6TXqe {
border: none !important;
}
.liYKde {
box-shadow: 0 2px 5px 1px rgba(64,60,67,.1) !important;
}
.A8SBwf {
margin-top: 0px;
}
.dAEiw {
margin-top: 19px;
}
/* Thanks old google :) */
.yuRUbf h3 ~ .TbwUpd.ojE3Fb {
position:static
}
.gNO89b, #gbqfbb, .RNmpXc, .gbqfba.gbqfba-hvr {
cursor: default !important;
background: linear-gradient(0deg,#f1f1f1 0%, #f8f8f8 100%) !important;
border: 1px solid #c6c6c6 !important;
border-radius: 0 !important;
font-size: 11px !important;
border-radius: 3px !important;
font-weight: bold !important;
padding: 0 10px !important;
max-height: 29px !important;
line-height: 21px !important;
}
.gNO89b:hover, #gbqfbb:hover, .RNmpXc:hover, .gbqfba.gbqfba-hvr:hover {
filter: brightness(101%)
border: 1px solid #aeaeae !important;
box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
}
.gNO89b:active, #gbqfbb:active, .RNmpXc:active, .gbqfba.gbqfba-hvr:active {
filter: brightness(99%)
background-color: #f4f4f4 !important;
border: 1px solid #3079ed !important;
box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
}
.RNNXgb, .aajZCb, .W6pGoe, .o6juZc {
border-radius: 0 !important;
border: 1px solid #eeeeee !important;
border-top-color: transparent !important;
box-shadow: none !important;
}
.aajZCb, .a4bIc, .W6pGoe {
margin-top: 2px !important;
padding: 2px !important;
}
.gLFyf, .og3lId {
height: 19px !important;
overflow: hidden !important;
font-size: 14px !important;
margin-top: 0;
word-wrap: none !important;
white-space: nowrap !important;
}
.a4bIc {
margin-top: -2px !important;
}
.ZrDSAb.vNzKHd {
top: -10px !important;
}
.RNNXgb, .o6juZc{
border: 1px solid #d9d9d9 !important;
border-top-color: #c0c0c0 !important;
min-height: 30px !important;
max-height: 30px !important;
margin-top: 0px !important;
}
.RNNXgb:hover {
border: 1px solid #b9b9b9 !important;
border-top-color: #a0a0a0 !important;
box-shadow: none !important;
}
.RNNXgb:focus-within {
border: 1px solid #4d90fe !important;
}
.uU7dJb, .BsA1cc, .OJmNWb, .WdWr7c {
display: none;
}
.CvDJxb, .Q3DXx.yIbDgf, .Lj9fsd{
position: fixed !important;
top: 30px !important;
width: 100% !important;
height: 70px !important;
align-items: center !important;
margin-top: 0px !important;
padding: 0px !important;
background-color: #f1f1f1 !important;
border-bottom: 1px solid #e5e5e5 !important;
}
.FtRlBe {
height: 36px;
}
.wQnou {
height: 32px;
}
}
/* Style custom elements (modern only) */
if filters {
#bruniSidebarContainer::after {
top: 50px !important;
}
#bruniSidebarContainer {
top: 100px !important;
}
.cj2HCb.iuN0sf {
margin-top: -30px;
}
}
if modern {
.topBar {
position: fixed;
margin: 10px;
height: 40px !important;
width: calc(100% - 30px);
background-color : #fff !important;
border: 1px solid #ebebeb !important;
border-radius: 12px;
padding: 4px;
box-shadow: 0 2px 5px 1px rgba(64,60,67,.1) !important;
}
.topBar a {
justify-self: center;
font-size: 15px !important;
margin: 6px 0 0 2px !important;
color: #202124 !important;
padding: 4px 10px !important;
height: 20px !important;
border: none !important;
line-height: 20px !important;
border-radius: 8px;
}
.topBar a:hover {
background-color: #ebebeb !important;
}
.tbRightItems .tbSeperator {
margin: 0 5px;
background: #ebebeb !important;
height: 75% !important;
width: 1px !important;
align-self: center;
}
.tbMoreMenu {
margin-top: 20px !important;
border: 1px solid #ebebeb !important;
border-radius: 12px;
box-shadow: 0 2px 5px 1px rgba(64,60,67,.16) !important;
}
.tbMoreMenu a {
color: #36c !important;
width: auto;
align-self: left !important;
padding: 5.5px 20px;
}
.tbMoreMenu .tbSeperator {
align-self: center;
width: 85% !important;
height: 1px !important;
margin: 5px 0px;
background: #ebebeb !important;
}
.tbMoreMenu.tbOpen {
padding: 6px;
}
.tbMoreMenu.tbOpen a {
margin: 2px !important;
}
.topBar a.tbDropdown:after {
padding-left: 8px;
filter: brightness(10%)
}
@css {
.tbSettings {
margin-right: 15px !important;
padding: none !important;
width: 8px !important;
background-image: url('data:image/svg+xml,<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><title>Ic_settings_48px-svg</title><style>.s0 { fill: none } .s1 { fill: %23202124 } </style><path id="Layer" fill-rule="evenodd" class="s0" d="m0 0h48v48h-48z"/><path id="Layer" fill-rule="evenodd" class="s1" d="m43.1 29.3c0.4 0.3 0.5 0.8 0.2 1.2l-4 7c-0.2 0.4-0.7 0.6-1.2 0.4l-5-2q-1.5 1.2-3.4 2l-0.7 5.3c-0.1 0.4-0.5 0.8-1 0.8h-8c-0.5 0-0.9-0.4-1-0.8l-0.7-5.3q-1.9-0.8-3.4-2l-5 2c-0.4 0.2-1 0-1.2-0.4l-4-7c-0.3-0.4-0.2-0.9 0.2-1.2l4.2-3.4q-0.1-0.9-0.1-1.9 0-1 0.1-2l-4.2-3.3c-0.4-0.3-0.5-0.8-0.2-1.2l4-7c0.2-0.4 0.8-0.6 1.2-0.4l5 2q1.5-1.2 3.4-2l0.7-5.3c0.1-0.4 0.5-0.8 1-0.8h8c0.5 0 0.9 0.4 1 0.8l0.8 5.3q1.8 0.8 3.3 2l5-2c0.5-0.2 1 0 1.2 0.4l4 7c0.3 0.4 0.2 0.9-0.2 1.2l-4.2 3.3q0.1 1 0.1 2 0 1-0.1 1.9zm-12.1-5.2c0-3.9-3.2-7-7-7-3.9 0-7 3.1-7 7 0 3.9 3.1 7 7 7 3.8 0 7-3.1 7-7z"/></svg>') !important;
background-size: 24px !important;
background-position: 2px 2px !important;
}
}
.topBar a.tbOpen {
color: #36c !important;
z-index: 1 !important;
}
.topBar a.tbOpen:after {
filter: sepia(100%) hue-rotate(194.65deg) saturate(9000%) brightness(80%) !important;
}
.tbAccountMenu {
top: 70px !important;
width: 300px;
height: 125px !important;
border: 1px solid #ebebeb !important;
border-radius: 12px;
z-index: 990;
box-shadow: 0 2px 5px 1px rgba(64,60,67,.16) !important;
}
.tbAccountMenu a {
color: #36c !important;
margin-top: 2px !important;
text-decoration: none !important;
}
.tbAccountMenu span {
margin: 0 2px !important;
text-decoration: none !important;
}
.topBar a.tbSelected {
color: #fff;
line-height: 12px;
}
#tbName, #tbEmail {
margin-bottom: 1px !important;
white-space:nowrap;
text-overflow: ellipsis;
}
#tbProfilePic {
border-radius: 10px;
height: 62px;
margin: 0 5px 0 0 !important;
}
#tbSwitch {
background: none !important;
align-self: center;
height: 25px !important;
line-height: 25px !important;
width: 265px;
margin-left: -0.5px !important;
margin-top: -2px !important;
color: #000 !important;
border: 1px solid #ebebeb !important;
border-radius: 8px;
}
#tbSep {
display: none;
}
#tbSwitch:hover {
background: #ebebeb !important;
}
/* Style existing elements (modern) */
.yg51vc, .ndYZfc, .rfiSsc {
margin-top: 40px !important;
}
#searchform, .Lj9fsd {
margin-top: 60px !important;
}
.sfbg {
margin-top: -60px !important;
height: 115px !important;
}
.Lj9fsd {
margin-top: 0 !important;
height: 100px;
}
.rfiSsc {
margin-top: 50px !important;
}
}
}