0x256 (OP)
|
|
April 13, 2020, 11:52:59 AM Last edit: July 03, 2020, 01:48:35 PM by 0x256 |
|
--main_color: #62d; --main_color: #f16; /* ---------------------------------------------------- custom bitcointalk header author: 0x256 ¯\_(ツ)_/¯ url: https://bitcointalk.org/index.php?action=profile;u=2680306 ------------------------------------------------------*/
:root { /*--------------------------------------------------- custom your style by changing these values below ---------------------------------------------------*/ /* header position: fixed or absolute */ --header_position: fixed;
/* main colors */ --main_color: #62d; /*basic options*/ --h_bgColor: #fff; --h_fColor: #000; --h_act_color: var(--main_color); /*additional options*/ --logo_color: var(--h_fColor); --h_act_bgColor: var(--h_bgColor); /*header links on mouse hover */ --h_bgColor_hover: var(--h_bgColor); --h_fColor_hover: var(--h_fColor); /* search input and button */ --btn_bgColor: var(--main_color); --btn_fColor: var(--h_bgColor); --input_bgColor: var(--h_bgColor); --input_fColor: var(--h_fColor); --input_bColor: #ccc; /* end custom */ }
/*overflow html page!*/ html { /* overflow-x: hidden; */ }
/* navbar */ body > div.tborder+table { position: var(--header_position); top: 10px; left: 160px; }
/*change Bitcoin_Forum_color */ table#smfheader td.catbg >span { color: var(--logo_color); } /* separator between Bitcoin Forum and navbar */ table#smfheader td.catbg >span:after { content: ""; border-right: 1px solid var(--h_fColor); padding-right: 8px; opacity: 0.15; }
/*--------------------------------------------- navbar ---------------------------------------------*/ /* remove navbar background */ body > div.tborder+table .maintab_back, .maintab_active_back { background-image: none !important; padding: 0; } .maintab_first, .maintab_last, .maintab_active_first, .maintab_active_last { display: none; }
.maintab_active_back > a { color: var(--h_act_color) !important; background-color: var(--h_act_bgColor) !important; }
body > div.tborder+table .maintab_back a:link, body > div.tborder+table .maintab_back a:visited, .maintab_active_back a:link, .maintab_active_back a:visited { padding: 10px 6px !important; color: var(--h_fColor); } body > div.tborder+table .maintab_back a:hover, .maintab_active_back a:hover { opacity: 0.85; background-color: var(--h_bgColor_hover); color: var(--h_fColor_hover); } body > div.tborder+table .maintab_back a:hover strong { border-color: var(--h_bgColor_hover); } /*---------------- end navbar --------------------*/
/* remove simple machines logo (smflogo) from header */ table#smfheader tr:first-child > td+td.catbg img { display: none; }
/* top bar */ table#smfheader { position: var(--header_position); top: 0; left: 0; right: 0; box-shadow: 0 0 5px 0 #aaa; }
/*element up to header*/ body > div.tborder+table, table#smfheader, .tborder table#smfheader+table+table tr > td+td > form, .tborder table#smfheader+table { z-index: 4; }
table#smfheader tr > td.catbg { border: none; background-image: none; background-color: var(--h_bgColor); }
table#smfheader tr > td.catbg:first-child { color: var(--h_fColor); }
/*Messages notification*/ body > div.tborder+table tr > td > a > strong { background: #f22; padding: 0 4px; position: absolute; top: -2px; margin-left: -6px; color: #fff; border-color: var(--h_bgColor); border-style: solid; border-right: 3px; border-top: 3px; z-index: 1; }
/* News bar */ body>.tborder { border: none; background-color: transparent; }
#upshrinkHeader2 { display: table !important; }
/* news bar style */ #upshrinkHeader2 td.titlebg2 { background-image: none; border:none; padding: 0; background: var(--h_bgColor); background: linear-gradient( rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85) ) var(--main_color); } /*news title*/ #upshrinkHeader2 td.titlebg2 > span.smalltext > b:first-child { background: var(--main_color); background: linear-gradient( rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4) ) var(--main_color); padding: 5px; display: inline-block; } /*------------- end News bar ------------*/
/*remove background behind hello username ..*/ body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child, body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child+td { background: none; border: none; background-color: var(--h_bgColor); padding: 0; }
#upshrinkHeader td#variousheadlinks { background-color: #fff !important; }
/*put search input on top header*/ .tborder table#smfheader+table+table tr > td+td > form { display: inline-block !important; position: var(--header_position); background: none; border: none; top: 4px; right: 21%; z-index: 4; }
/* hide the extra search icon */ .tborder table#smfheader+table+table tr > td+td > form > a > img { display: none; } .tborder table#smfheader+table+table tr > td+td { padding: none; }
/*after header*/ .tborder table#smfheader+table { border-bottom: none !important; position: var(--header_position); top: 0; right: 20px; width: auto; z-index: 4; }
#upshrinkHeader2 { margin-top: 30px; }
/* remove date and time from top bar */ table#smfheader + table > tbody > tr:first-child > td:last-child span { display: none; } /*-----------------------*/
/* search input and button ------------------------------------*/ #upshrinkHeader2 input[type="text"], #upshrinkHeader2 input[type="submit"] { outline: none; border: none; padding: 4px 8px; }
/* input */ #upshrinkHeader2 input[type="text"] { border: 1px solid var(--input_bColor); background-color: var(--input_bgColor); color: var(--input_fColor); } #upshrinkHeader2 input:focus { border-color: var(--btn_bgColor); }
/* button */ #upshrinkHeader2 input[type="submit"] { cursor: pointer; background: var(--btn_bgColor); background: linear-gradient( rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) var(--btn_bgColor); color: var(--btn_fColor); } #upshrinkHeader2 input[type="submit"]:hover { background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)) var(--btn_bgColor); } /*----------------------------------*/
/*remove search Form from top bar on screens less than 1000px (small screen) */ @media (max-width: 1000px) { .tborder table#smfheader+table+table tr > td+td > form { position: relative; top: 0; right: 0; z-index: 0; } }
/*hellomember*/ #hellomember { color: var(--h_fColor); }
/*---------------------------- fixed image box ----------------------------*/ /*min width #variousheadlinks*/ tr#upshrinkHeader td#variousheadlinks { min-width: 222px !important; max-width: 222px !important; }
/*space before hellouser for avatar*/ table#smfheader+table tr > td.titlebg2:last-child { width: 62px; }
/*first click: show user box mandatory*/ tr#upshrinkHeader[style^="display: none;"] { display: block !important; right:0; }
/*second click and startup: hide user box off the page*/ tr#upshrinkHeader { position: absolute; right: -400px; }
/*when box hide show avatar in header */ tr#upshrinkHeader tr > td.windowbg > img, tr#upshrinkHeader[style=""] tr > td.windowbg > img { width: 32px !important; height: 28px !important; position: absolute !important; top: -30px; left: -200px; } /*eles back avatar in normal place*/ tr#upshrinkHeader[style^="display: none;"] tr > td.windowbg > img { width: auto !important; height: auto !important; position: inherit !important; } /*--------------------- end fixed image box -------------------------*/
#bodyarea td[width="180"] > table.bordercolor { background: transparent; border-collapse: collapse; }
#bodyarea td[width="180"] tr > td.catbg { background-image: none; border: none; background: var(--main_color); background: linear-gradient( rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) var(--btn_bgColor); }
#bodyarea td[width="180"] tr+tr.windowbg2 { border-bottom: 10px solid #e5e5e8; background: var(--h_bgColor); }
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext { padding: 0; }
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext br { display: none; }
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a { color: var(--h_fColor); display: block; padding: 2px 8px; }
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a:hover { background: rgba(255, 255, 255, 0.05); }
|