Topic: my Draft (Read 103 times)

/* ----------------------------------------------------
    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);
}