☰

Greasy Fork is available in English.

Classic Google Top Bar

Brings back the old black top bar from 2011 - 2014.

2023-12-22 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.

  1. /* ==UserStyle==
  2. @name           Classic Google Top Bar
  3. @namespace      https://discord.gg/t9NEEN3PnM
  4. @version        3.0.1
  5. @description    Brings back the old black top bar from 2011 - 2014.
  6. @preprocessor   stylus
  7. @var            checkbox modern "Modern Style" 0
  8. @var            checkbox filters "Old Filters Compatibility" 0
  9. @var            checkbox oldtheme "Work In Progress 2013 Theme" 0
  10. @author         CallyHam
  11. ==/UserStyle== */
  12.  
  13. /* Style custom elements (all)*/
  14. @-moz-document domain("google.com") {
  15.     .topBar {
  16.         display: flex;
  17.         position: fixed;
  18.         top: 0;
  19.         width: 100%;
  20.         height: 29px;
  21.         background-color: #2d2d2d;
  22.         border-bottom: 1px solid #000;
  23.         z-index: 999;
  24.     }
  25.  
  26.     .topBar a {
  27.         width: fit-content;
  28.         font-family: Arial, sans-serif;
  29.         font-size: 13px;
  30.         color: #ccc;
  31.         padding: 7px 6px;
  32.         white-space: nowrap;
  33.         line-height: 16px;
  34.         text-decoration: none;
  35.     }
  36.  
  37.     .topBar a.tbSelected {
  38.         font-weight: bold;
  39.         color: #fff;
  40.         line-height: 12px;
  41.         border-top: 2px solid #dd4b39;
  42.     }
  43.  
  44.     .topBar a.tbOpen {
  45.         color: #36c;
  46.         padding: 7px 5px;
  47.         background-color: #fff;
  48.         border-left: 1px solid #bebebe;
  49.         border-right: 1px solid #bebebe;
  50.         z-index: 999;
  51.     }
  52.     .topBar a.tbOpen:hover {
  53.         background-color: #fff;
  54.     }
  55.  
  56.     @css {
  57.         .topBar a.tbDropdown:after {
  58.             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>');
  59.             padding-left: 4px;
  60.         }
  61.     }
  62.  
  63.  
  64.     a.tbSettings {
  65.         background-image: url('http://ssl.gstatic.com/gb/images/b_8d5afc09.png');
  66.         background-position: 6px 7px;
  67.         background-repeat: no-repeat;
  68.         padding: 0 14px;
  69.     }
  70.  
  71.     .topBar li.tbDropdown {
  72.         display: flex;
  73.         flex-direction: column;
  74.     }
  75.  
  76.     div.tbAccountMenu {
  77.         position: fixed;
  78.         top: 40px;
  79.         right: 10px;
  80.         display: flex;
  81.         visibility: hidden;
  82.         flex-direction: column;
  83.         width: 300px;
  84.         height: 121px;
  85.         margin-top: -1px;
  86.         background-color: #fff;
  87.         border: 1px solid #bebebe;
  88.         z-index: 990;
  89.         box-shadow: 0 2px 4px rgba(0,0,0,.2);
  90.     }
  91.  
  92.     .tbAccountMenu a {
  93.         padding: 5px;
  94.         color: #36c;
  95.         background: none !important;
  96.     }
  97.  
  98.     .tbAccountMenu span {
  99.         padding: 5px;
  100.         line-height: 15px;
  101.         background: none !important;
  102.     }
  103.  
  104.     .tbAccountMenu a:hover {
  105.         text-decoration: underline;
  106.     }
  107.  
  108.     .topBar div.tbAccountMenu.tbOpen {
  109.         visibility: visible;
  110.     }
  111.  
  112.     div.tbMoreMenu {
  113.         visibility: hidden;
  114.         display: flex;
  115.         flex-direction: column;
  116.         margin-top: -1px;
  117.         background-color: #fff;
  118.         border: 1px solid #bebebe;
  119.         padding: 10px 0;
  120.         z-index: 990;
  121.         box-shadow: 0 2px 4px rgba(0,0,0,.2);
  122.     }
  123.  
  124.     .topBar div.tbMoreMenu.tbOpen {
  125.         visibility: visible;
  126.     }
  127.  
  128.     .tbMoreMenu .tbSeperator {
  129.         width: 100% !important;
  130.         height: 1px !important;
  131.         margin: 10px 0px;
  132.         background: #bebebe !important;
  133.     }
  134.  
  135.     .tbMoreMenu a {
  136.         color: #36c !important;
  137.         width: auto;
  138.         padding: 5.5px 20px;
  139.     }
  140.  
  141.     .tbMoreMenu a:hover {
  142.         background-color: #eeeeee !important;
  143.     }
  144.  
  145.     .topBar div.tbSeperator {
  146.         height: 100%;
  147.         width: 1px;
  148.         background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%)
  149.     }
  150.  
  151.     .topBar a:hover {
  152.         background-color: #4c4c4c;
  153.     }
  154.  
  155.     .tbRightItems {
  156.         margin-right: 5px;
  157.         display: flex;
  158.         flex-direction: row;
  159.     }
  160.  
  161.     .tbRightItems a {
  162.         font-weight: bold;
  163.     }
  164.  
  165.     .tbLeftItems {
  166.         margin-left: 4px;
  167.         display: flex;
  168.         flex-direction: row;
  169.         flex-grow: 1;
  170.     }
  171.  
  172.     .column {
  173.         display: flex;
  174.         flex-direction: column;
  175.     }
  176.  
  177.     .row {
  178.         display: flex;
  179.         flex-direction: row;
  180.         align-items: center;
  181.     }
  182.  
  183.     .gb_Sd, .c58wS, .CcNe6e {
  184.         display: none;
  185.     }
  186.  
  187.     .row.main {
  188.         padding: 10px;
  189.     }
  190.  
  191.     #tbName {
  192.         padding: 1px 5px;
  193.         font-weight: bold;
  194.     }
  195.  
  196.     #tbEmail {
  197.         color: #696969;
  198.         padding: 1px 5px;
  199.     }
  200.  
  201.     #tbProfilePic {
  202.         margin: 0 2px 4px 0;
  203.         height: 50px;
  204.     }
  205.  
  206.     #tbSep {
  207.         width: 8px!important;
  208.         height: 1px !important;
  209.         background: #bebebe !important;
  210.     }
  211.  
  212.     #tbSwitch {
  213.         text-align: center;
  214.         text-decoration: none !important;
  215.         line-height: 30px;
  216.         color: #696969;
  217.         background: linear-gradient(0deg, #d4d4d4 0%, #e7e7e7 100%) !important;
  218.         border-top: 1px solid #bebebe;
  219.         width: 290px;
  220.         height: 30px !important;
  221.         margin-top: auto;
  222.     }
  223.  
  224.     #tbSwitch:hover {
  225.         filter: brightness(102%)
  226.     }
  227.  
  228.     #tbSwitch:active {
  229.         background: linear-gradient(0deg, #d4d4d4 0%, #dedede 50%, #d4d4d4 100%) !important;
  230.         filter: brightness(95%);
  231.         box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.1);
  232.     }
  233.  
  234.     /* Style existing elements (all)*/
  235.     .o3j99.n1xJcf.Ne6nSd {
  236.         visibility: hidden;
  237.     }
  238.     .o3j99.c93Gbe {
  239.         position: fixed !important;
  240.         width: 100%;
  241.         bottom: 0;
  242.         z-index: 990;
  243.     }
  244.  
  245.     .yg51vc, .ndYZfc, .rfiSsc {
  246.         margin-top: 20px;
  247.     }
  248.  
  249.     #searchform, .Lj9fsd {
  250.         margin-top: 30px;
  251.     }
  252.  
  253.     /* Style existing elements (old theme only) */
  254.     if oldtheme {
  255.         .nDcEnd, .iblpc, .xtSCL, .BKRPef, .H9lube, .VuuXrf, .iTPLzd.rNSxBe.lUn2nc {
  256.             display: none;
  257.         }
  258.         .Tg7LZd, .rCGXm {
  259.             height: 32px;
  260.             background: linear-gradient(0deg, #4787ed 0%, #4d90fe 100%)
  261.             border: 1px solid #3079ed
  262.             border-radius: 0px
  263.             width: 75px;
  264.             margin-top: -1px;
  265.             margin-right: -1px
  266.         }
  267.         .Tg7LZd svg, .rCGXm svg {
  268.             filter: saturate(0%) brightness(200%)
  269.             margin-top: 2px;
  270.             height: 20px;
  271.             width: 20px;
  272.             margin-left: 10px;
  273.         }
  274.         .minidiv svg {
  275.             margin-top: 0px !important;
  276.             margin-left: 8px !important;
  277.         }
  278.         .Lj9fsd.DU1Mzb .F1hUFe {
  279.             padding: 4px 28px 0 30px;
  280.         }
  281.         .Lj9fsd.DU1Mzb {
  282.             padding: 0px
  283.             box-shadow: none;
  284.         }
  285.         .DU1Mzb svg {
  286.             margin-top: 0px !important;
  287.             margin-left: 8px !important;
  288.         }
  289.         .DKV0Md {
  290.             margin-top: -5px !important;
  291.             font-family: arial, sans-serif
  292.         }
  293.         #result-stats, .Wt5Tfe span, .T47uwc {
  294.             font-family: arial, sans-serif
  295.         }
  296.         #hdtb-msb .bmaJhd.iJddsb, .m3kSL {
  297.             display:none;
  298.         }
  299.         .hdtb-mitem, .t2vtad {
  300.             font-family: arial, sans-serif
  301.             text-align: center;
  302.         }
  303.         .minidiv .gLFyf {
  304.             margin-top: 4px !important;
  305.         }
  306.         .hdtb-msel, .rQEFy {
  307.             font-size: 13px;
  308.             font-weight: bold;
  309.             color: #dd4b39 !important;
  310.         }
  311.         .rQEFy {
  312.             border-bottom: 3px solid #dd4b39;
  313.         }
  314.         .byrV5b cite, .byrV5b span {
  315.             color: #009933 !important;
  316.         }
  317.         .YTDezd {
  318.             padding: 0 20px;
  319.             background: #dd4b39
  320.         }
  321.         .lnXdpd, .jfN4p, .TYpZOd {
  322.             opacity: 0
  323.         }
  324.         .logo, .k1zIA.rSk4se, .F1hUFe.jbTlie {
  325.             background: url('https://oldgoogle.neocities.org/images/srpr/logo11w.png');
  326.             background-size: contain;
  327.             background-repeat: no-repeat;
  328.             background-origin: content-box;
  329.         }
  330.         .qlS7ne .F1hUFe.jbTlie {
  331.             margin-top: -10px !important;
  332.             height: 38px !important;
  333.             background-size: auto 38px;
  334.         }
  335.         .logo {
  336.             padding: 0 30px;
  337.             height: 38px;
  338.             background-size: auto 38px;
  339.             margin-top: -5px !important;
  340.         }
  341.         .Q3DXx.yIbDgf .Q3DXx, .Si7Nvc.O1t3Xb{
  342.             visibility: hidden;
  343.         }
  344.         .KxwPGc.ssOUyb {
  345.             display: none;
  346.         }
  347.         .o3j99.c93Gbe {
  348.             border-top: 1px solid #dadce0 !important;
  349.             height: 40px
  350.         }
  351.         .pHiOh {
  352.             font-size: 13px;
  353.             padding: 13px;
  354.         }
  355.         .SDkEP, .e3JjXb {
  356.             padding: 4px 4px 0 10px;
  357.         }
  358.         .e3JjXb {
  359.             height: 26px;
  360.         }
  361.         .FPdoLc.lJ9FBc {
  362.             padding-top: 8px !important;
  363.         }
  364.         .lJ9FBc {
  365.             height: 58px;
  366.         }
  367.         .sbct, .I6TXqe, .TzHB6b.cLjAic div {
  368.             border-radius: 0 !important;
  369.         }
  370.         .I6TXqe {
  371.             border: none !important; 
  372.         }
  373.         .liYKde {
  374.             box-shadow: 0 2px 5px 1px rgba(64,60,67,.1) !important;
  375.         }
  376.         .A8SBwf {
  377.             margin-top: 0px;
  378.         }
  379.         .dAEiw {
  380.             margin-top: 19px;
  381.         }
  382.  
  383.         /* Thanks old google :) */
  384.         .yuRUbf h3 ~ .TbwUpd.ojE3Fb {
  385.             position:static
  386.         }
  387.  
  388.         .gNO89b, #gbqfbb, .RNmpXc, .gbqfba.gbqfba-hvr {
  389.             cursor: default !important;
  390.             background: linear-gradient(0deg,#f1f1f1 0%, #f8f8f8 100%) !important;
  391.             border: 1px solid #c6c6c6 !important;
  392.             border-radius: 0 !important;
  393.             font-size: 11px !important;
  394.             border-radius: 3px !important;
  395.             font-weight: bold !important;
  396.             padding: 0 10px !important;
  397.             max-height: 29px !important;
  398.             line-height: 21px !important;
  399.         }
  400.         .gNO89b:hover, #gbqfbb:hover, .RNmpXc:hover, .gbqfba.gbqfba-hvr:hover {
  401.             filter: brightness(101%)
  402.             border: 1px solid #aeaeae !important;
  403.             box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
  404.         }
  405.         .gNO89b:active, #gbqfbb:active, .RNmpXc:active, .gbqfba.gbqfba-hvr:active {
  406.             filter: brightness(99%)
  407.             background-color: #f4f4f4 !important;
  408.             border: 1px solid #3079ed !important;
  409.             box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
  410.         }
  411.         .RNNXgb, .aajZCb, .W6pGoe, .o6juZc {
  412.             border-radius: 0 !important;
  413.             border: 1px solid #eeeeee !important;
  414.             border-top-color: transparent !important;
  415.             box-shadow: none !important;
  416.         }
  417.         .aajZCb, .a4bIc, .W6pGoe {
  418.             margin-top: 2px !important;
  419.             padding: 2px !important;
  420.         }
  421.         .gLFyf, .og3lId {
  422.             height: 19px !important;
  423.             overflow: hidden !important;
  424.             font-size: 14px !important;
  425.             margin-top: 0;
  426.             word-wrap: none !important;
  427.             white-space: nowrap !important;
  428.         }
  429.         .a4bIc {
  430.             margin-top: -2px !important;
  431.         }
  432.         .ZrDSAb.vNzKHd {
  433.             top: -10px !important;
  434.         }
  435.         .RNNXgb, .o6juZc{
  436.             border: 1px solid #d9d9d9 !important;
  437.             border-top-color: #c0c0c0 !important;
  438.             min-height: 30px !important;
  439.             max-height: 30px !important;
  440.             margin-top: 0px !important;
  441.         }
  442.         .RNNXgb:hover {
  443.             border: 1px solid #b9b9b9 !important;
  444.             border-top-color: #a0a0a0 !important;
  445.             box-shadow: none !important;
  446.         }
  447.         .RNNXgb:focus-within {
  448.             border: 1px solid #4d90fe !important;
  449.         }
  450.         .uU7dJb, .BsA1cc, .OJmNWb, .WdWr7c {
  451.             display: none;
  452.         }
  453.         .CvDJxb, .Q3DXx.yIbDgf, .Lj9fsd{
  454.             position: fixed !important;
  455.             top: 30px !important;
  456.             width: 100% !important;
  457.             height: 70px !important;
  458.             align-items: center !important;
  459.             margin-top: 0px !important;
  460.             padding: 0px !important;
  461.             background-color: #f1f1f1 !important;
  462.             border-bottom: 1px solid #e5e5e5 !important;
  463.         }
  464.         .FtRlBe {
  465.             height: 36px;
  466.         }
  467.         .wQnou {
  468.             height: 32px;
  469.         }
  470.     }
  471.     /* Style custom elements (modern only) */
  472.     if filters {
  473.         #bruniSidebarContainer::after {
  474.             top: 50px !important;
  475.         }
  476.         #bruniSidebarContainer {
  477.             top: 100px !important;
  478.         }
  479.         .cj2HCb.iuN0sf {
  480.             margin-top: -30px;
  481.         }
  482.     }
  483.     if modern {
  484.         .topBar {
  485.             position: fixed;
  486.             margin: 10px;
  487.             height: 40px !important;
  488.             width: calc(100% - 30px);
  489.             background-color : #fff !important;
  490.             border: 1px solid #ebebeb !important;
  491.             border-radius: 12px;
  492.             padding: 4px;
  493.             box-shadow: 0 2px 5px 1px rgba(64,60,67,.1) !important;
  494.         }
  495.         .topBar a {
  496.             justify-self: center;
  497.             font-size: 15px !important;
  498.             margin: 6px 0 0 2px !important;
  499.             color: #202124 !important;
  500.             padding: 4px 10px !important;
  501.             height: 20px !important;
  502.             border: none !important;
  503.             line-height: 20px !important;
  504.             border-radius: 8px;
  505.         }
  506.         .topBar a:hover {
  507.             background-color: #ebebeb !important;
  508.         }
  509.         .tbRightItems .tbSeperator {
  510.             margin: 0 5px;
  511.             background: #ebebeb !important;
  512.             height: 75% !important;
  513.             width: 1px !important;
  514.             align-self: center;
  515.         }
  516.         .tbMoreMenu {
  517.             margin-top: 20px !important;
  518.             border: 1px solid #ebebeb !important;
  519.             border-radius: 12px;
  520.             box-shadow: 0 2px 5px 1px rgba(64,60,67,.16) !important;
  521.         }
  522.         .tbMoreMenu a {
  523.             color: #36c !important;
  524.             width: auto;
  525.             align-self: left !important;
  526.             padding: 5.5px 20px;
  527.         }
  528.         .tbMoreMenu .tbSeperator {
  529.             align-self: center;
  530.             width: 85% !important;
  531.             height: 1px !important;
  532.             margin: 5px 0px;
  533.             background: #ebebeb !important;
  534.         }
  535.         .tbMoreMenu.tbOpen {
  536.             padding: 6px;
  537.         }
  538.         .tbMoreMenu.tbOpen a {
  539.             margin: 2px !important;
  540.         }
  541.         .topBar a.tbDropdown:after {
  542.             padding-left: 8px;
  543.             filter: brightness(10%)
  544.         }
  545.         @css {
  546.             .tbSettings {
  547.                 margin-right: 15px !important;
  548.                 padding: none !important;
  549.                 width: 8px !important;
  550.                 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;
  551.                 background-size: 24px !important;
  552.                 background-position: 2px 2px !important;
  553.             }
  554.         }
  555.  
  556.         .topBar a.tbOpen {
  557.             color: #36c !important;
  558.             z-index: 1 !important;
  559.         }
  560.         .topBar a.tbOpen:after {
  561.             filter: sepia(100%) hue-rotate(194.65deg) saturate(9000%) brightness(80%) !important;
  562.         }
  563.         .tbAccountMenu {
  564.             top: 70px !important;
  565.             width: 300px;
  566.             height: 125px !important;
  567.             border: 1px solid #ebebeb !important;
  568.             border-radius: 12px;
  569.             z-index: 990;
  570.             box-shadow: 0 2px 5px 1px rgba(64,60,67,.16) !important;
  571.         }
  572.         .tbAccountMenu a {
  573.             color: #36c !important;
  574.             margin-top: 2px !important;
  575.             text-decoration: none !important;
  576.         }
  577.         .tbAccountMenu span {
  578.             margin: 0 2px !important;
  579.             text-decoration: none !important;
  580.         }
  581.         .topBar a.tbSelected {
  582.             color: #fff;
  583.             line-height: 12px;
  584.         }
  585.         #tbName, #tbEmail {
  586.             margin-bottom: 1px !important;
  587.             white-space:nowrap; 
  588.             text-overflow: ellipsis;
  589.         }
  590.         #tbProfilePic {
  591.             border-radius: 10px;
  592.             height: 62px;
  593.             margin: 0 5px 0 0 !important;
  594.         }
  595.         #tbSwitch {
  596.             background: none !important;
  597.             align-self: center;
  598.             height: 25px !important;
  599.             line-height: 25px !important;
  600.             width: 265px;
  601.             margin-left: -0.5px !important;
  602.             margin-top: -2px !important;
  603.             color: #000 !important;
  604.             border: 1px solid #ebebeb !important;
  605.             border-radius: 8px;
  606.         }
  607.         #tbSep {
  608.             display: none;
  609.         }
  610.         #tbSwitch:hover {
  611.             background: #ebebeb !important;
  612.         }
  613.         /* Style existing elements (modern) */
  614.         .yg51vc, .ndYZfc, .rfiSsc {
  615.             margin-top: 40px !important;
  616.         }
  617.         #searchform, .Lj9fsd {
  618.             margin-top: 60px !important;
  619.         }
  620.         .sfbg {
  621.             margin-top: -60px !important;
  622.             height: 115px !important;
  623.         }
  624.         .Lj9fsd {
  625.             margin-top: 0 !important;
  626.             height: 100px;
  627.         }
  628.         .rfiSsc {
  629.             margin-top: 50px !important;
  630.         }
  631.     }
  632. }