>> (p.1)
    Author Topic: improvement nex dark theme  (Read 721 times)
    0x256 (OP)
    Sr. Member
    ****
    Offline

    Activity: 346
    Merit: 343


    View Profile
    April 09, 2020, 09:52:43 AM
    Last edit: June 11, 2020, 03:25:41 AM by 0x256
    Merited by o_e_l_e_o (2), HCP (2), ABCbits (1)
     #1

    Warning/Disclaimer: Use These additions/extensions at your own risk.

    Everyone have intention to use any of those userscripts/ extensions should accept risks themselves. Even those ones listed here published by well-known users, it does not guarentee that you have zero risk when using them.

    this archival post to improvement nex dark theme

    change avatar from circle to rounded square
    ===============================
    Code:
    /*-----------------------------------
      Resize & change avatar
    -----------------------------------*/
    #quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
    table > tbody > tr > td.windowbg img.avatar,
    form[name=pmFolder]  img.avatar {
        display: inline-block;
        vertical-align: middle;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        object-fit: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background: no-repeat center center;
    }

    ====================================================================================



    the final Stylus code until now
    Code:
    /* fixed background behind main ad */
    form#quickModForm > table > tbody > tr > td {
        background-color: #191c23;
    }

    /*---------------------------------------
        highlighting strong/bold text
    ---------------------------------------*/
    b, strong {
        color: #fff;
    }
    /*ignore links*/
    a > b, a > strong {
        color: inherit;
    }
    /*-------------------------------------*/

    /*canceling borders*/
    .tborder {
        border: none;
        background-color: transparent;
        padding: 0
    }

    form#quickModForm > table.bordercolor > tbody > tr > td {
        padding: 0;
    }

    /*Exclude items from canceling borders*/
    #frmLogin table.tborder,
    #creator table.tborder,
    .tborder table#smfheader+table,
    .tborder table#smfheader+table+table,
    div#helpmenu+div#helpmain {
        border: 1px solid #373b44 !important;
    }

    /**/
    .tborder table#smfheader+table,
    .tborder table#smfheader+table+table {
        border-top: none !important;
    }

    .tborder table#smfheader+table {
        border-bottom: none !important;
    }
    #upshrinkHeader2 { padding-bottom: 1px; }
    /*-------- end Exclude items from canceling borders --------*/


    /*------------------------
        inputs
    ---------------------------*/
    input,
    input[type="text"],
    textarea,
    select {
        outline: none;
        padding: 4px;
        transition: all 0.2s;
        border-radius: 3px;
    }

    input:disabled  {
        background-color: #25282f;
    }

    input[type="button"],
    input[type="submit"] {
        cursor: pointer;
        padding: 2px 10px !important;
        transition: all 0.2s;
    color: #fff;
    }

    input:focus, textarea:focus {
        border-color: #6393bf !important;
    }


    input, input[type="text"], textarea {
        border: 1px solid #aaa;
    }
    select {padding: 2px}


    /* buttons and input/textarea */
    input, textarea {
        border-color: #424448 !important;
        background-color: #191c23;
    }
    input:focus, textarea:focus {
        border-color:#567ee0 !important;
    }

    input[type="button"],
    input[type="submit"] {
        border: none;
        background-color: #3F51B5;
        color: #ffffff !important;
        border-radius: 3px;
        padding: 4px 7px !important;
    }
    input[type="button"]:hover,
    input[type="submit"]:hover {
        background-color: #5265d9;
    }

    /*----------- end  inputs -----------*/



    /* messages separate as a Boxs
    ---------------------------------------------------------------------*/
    #bodyarea > form > table > tbody > tr > td > table {
        margin-top: 10px;
    }

    #bodyarea > form > table > tbody > tr:first-child > td > table {
        margin-top: 0;
    }

    #bodyarea #quickModForm .bordercolor {
        background-color: transparent;
    }

    #quickModForm .windowbg, #quickModForm #preview_body{
        background-color: #f7f7f7;
    }
    #quickModForm .windowbg2 { background-color: #fff; }

    #quickModForm .windowbg,
    #quickModForm .windowbg2 {
        padding: 0;
        border-radius: 5px;
    }

    form#quickModForm > table:first-child > tbody > tr:first-child  td.windowbg:first-child {
        border-radius: 0 0 5px 5px;
    }

    #quickModForm td.windowbg > table > tbody > tr > td+td,
    #quickModForm td.windowbg2 > table > tbody > tr > td+td{
        padding-right: 25px !important;
        padding-left: 25px !important;
    }

    #quickModForm td.windowbg > table > tbody > tr > td.poster_info,
    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
        padding-left: 10px;
        width: 14%;
        overflow: auto !important;
        border-radius: 5px 0 0 5px;
    }

    #quickModForm td.windowbg > table > tbody > tr > td.poster_info {
        background-color: #f3f3f3;
    }

    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
        background-color: #f7f7f7;
    }
    /*-------- End messages separate as a Boxs --------*/



    /*---------------------------------
    modification inside post
    ----------------------------------*/
    .post { padding-top:5px; }

    /* hide Re:.. */
    .subject a {display: none}

    /*hide merits from posts!*/
    /*.subject + .smalltext + .smalltext {
        display: none
    }*/


    /* change color hr insde post */
    hr, .hrcolor {
    color: #d2d2d2;
    background-color: #d2d2d2;
    }
    /* end modification inside post */



    /*-----------------------------------
    Quotations
    ------------------------------------*/
    .quote,
    .quoteheader {
        border: none;
        margin-top: 0;
        background-color: #ffffff08;
    }

    .quote {
        color: inherit;
        border-radius: 0 0 4px 4px;
    }

    .quoteheader {
        background-color: #ffffff0d;
        margin-right: 3px;
        border-radius: 4px 4px 0 0;
    }

    /*quote icon*/
    .quoteheader:before {
        content: url(https://i.ibb.co/QpYLk0v/qiconw.png) !important;
    margin: 0 5px;
        opacity: 0.1;
    }

    /*---------- End Quotations ------------*/



    /*-----------------------------------
        Format the title of the topic
    ------------------------------------*/
    #bodyarea table.tborder tr.catbg3,
    #bodyarea table.tborder tr.catbg3 td {
        background-image: none;
        background-color: #5b7e9e;
    }

    tr.catbg3 #top_subject {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #bodyarea table.tborder tr.catbg3 td:first-child {
        border-radius: 5px 0 0 0;
    }

    #bodyarea table.tborder tr.catbg3 td:last-child {
        border-radius: 0 5px 0 0;
    }
    /*---------- end Format the title of the topic ------------*/



    /* Header */

    #bodyarea > div.tborder > table.bordercolor {
        border-radius: 5px 5px 0 0;
    }

    .catbg, .catbg2, .catbg3 {
        border-bottom: 0;
    }

    .catbg, tr.catbg td, .catbg3, tr.catbg3 td,
    .catbg2, tr.catbg2 td {
        background-image: none;
        background-color: #5b7e9e;
    }

    tr.catbg3 #top_subject {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    table.bordercolor tr td.catbg3:first-child {
        border-radius: 5px 0 0 0;
    }

    table.bordercolor tr td.catbg3:last-child {
        border-radius: 0 5px 0 0;
    }

    .tborder > .catbg:first-child,
    table.bordercolor tr td.catbg:first-child,
    .catbg2:first-child {
        border-radius: 5px 5px 0 0;
    }


    .bordercolor {
        margin-top: 0 !important;
    }


    .tborder #smfheader td.catbg:first-child {
        border-radius: 5px 0 0 0
    }

    .tborder #smfheader td.catbg:last-child {
        border-radius: 0 5px 0 0
    }


    /*-----------------------------------
      Resize & change avatar
    -----------------------------------*/
    #quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
    table > tbody > tr > td.windowbg img.avatar,
    form[name=pmFolder]  img.avatar {
        display: inline-block;
        vertical-align: middle;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        object-fit: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background: no-repeat center center;
    }

    /* avatars size in post page */
    #quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
    form[name=pmFolder]  img.avatar*in message page*/ {
        height: 3.5rem;
        width: 3.5rem;
    }

    /* avatars size in profile page */
    table.bordercolor > tbody > tr > td.windowbg img.avatar {
        height: 5.75rem;
        width: 5.75rem;
    }

    /* avatars size in top header */
    #upshrinkHeader table > tbody > tr > td.windowbg img.avatar {
        height: 3.5rem;
        width: 3.5rem;
    }

    /* overflow avatar div*/
    #quickModForm td.windowbg > table > tbody > tr > td.poster_info div[style^="overflow"],
    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info div[style^="overflow"]{
        overflow: unset !important;
    }
    /*------ end Resize & change avatar ------*/

    /* hide border top header */
    .tborder table#smfheader+table,
    .tborder table#smfheader+table+table {
        border: none !important;
    }



    /* الوان القوائم الفاتحة */
    .titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
    {
        border: none;
        background-image: none;
        background-color: #373b44;
    }

    /* color main text */
    body, td, th, tr,
    .nav, .nav:link, .nav:visited,
    a.nav:hover,
    .windowbg, #preview_body,
    .quoteheader, .codeheader, .code,
    .windowbg2, .windowbg3,
    .titlebg2 a:link, .titlebg2 a:visited,
    .titlebg, .titlebg a:link, .titlebg a:visited,
    .titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td,
    input, textarea

    {
        color: #ccc !important;
    }


    /* لون الخلفية بالثيم الاسود */
    .windowbg, #preview_body {
        background-color: #25282f;
    }


    /*------------------------
        links
    --------------------------*/
    a:link,
    a:visited {
        color: #939dc5;
    }

    a.ul[href^="https://bitcointalk.org/"]:hover {
        color: #89c775 !important
    }

    .edited {
        border-bottom-color: #d6d6d6;
    }


    div#bodyarea .maintab_back a:link, div#bodyarea .maintab_back a:visited, div#bodyarea .mirrortab_back a:link, div#bodyarea .mirrortab_back a:visited {
        color: #939dc5;
    }


    /* الوان خلفية الردود */
    #quickModForm .windowbg, #quickModForm #preview_body,
    #quickModForm .windowbg2 {
        background-color: #23262f;
    }

    #quickModForm td.windowbg > table > tbody > tr > td.poster_info,
    #quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
        background-color: #20232b;
    }



    /* Separators (hr) */
    hr, .hrcolor {
    color: #393c44;
    background-color: #393c44;
    }


    /* الوان عنوان الموضوع */

    #bodyarea table.tborder tr.catbg3,
    #bodyarea table.tborder tr.catbg3 td {
        background-color: #373b44;

    }

    .catbg, tr.catbg td, .catbg3, tr.catbg3 td,
    .catbg2, tr.catbg2 td {
        background-color: #3f4554;
    }

    #bodyarea table.tborder tr.catbg3,
    #bodyarea table.tborder tr.catbg3 td {
        background-color: #373b44;
    }



    /*msg moderated post*/
    #bodyarea tr.catbg3+tr td.smalltext {
        background-color: #292d38;
        border-bottom-color: #373b44;
        color: #fff
    }



    /* ----------------
        fixed some colors
    ------------------*/
    [style^="color: black"], [style^="color:black"] {
        color: #d6d6d6 !important;
    }

    [style^="color: green"], [style^="color:green"] {
        color: #5bb55b !important;
    }

    [style^="color: red"], [style^="color:red"] {
        color: #ff3434 !important;
    }

    [style^="color: blue"], [style^="color:blue"] {
        color: #1f81ff !important;
    }

    /**/

    [style^="background-color: yellow"], [style^="background-color:yellow"] {
        color: #000;
    }


    /* color Jump to: in bottom */
    .titlebg2 {
        background-image: none;
        border: none;
        background-color: #2d313a;
        color: #d6d6d6;
    }


    /* code colors */
    .code {
        background-color: #2f323c;
        border-color: #444850;
    }


    /*-------------------------------
        test
    -------------------------------*/
    .windowbg2 {
        background-color: #262931;
    }

    .bordercolor {
        background-color: #363940;
    }


    body {
        background-color: #191c23;
        color: #fff
    }


    .windowbg3 {
        background-color: #22242b;
    }
    /*---------- end test ----------*/


    /*---------------------------------
        top menu background images
    ---------------------------------*/
    /* delete this code If images are not displayed in the top menu*/

    .maintab_back {
        background-image: url('https://i.ibb.co/v1vrm0d/maintab-back.gif')
    }
    .maintab_first {
        background-image: url('https://i.ibb.co/DKK4rrX/maintab-first.gif')
    }
    .maintab_last {
        background-image: url('https://i.ibb.co/C9QxkDg/maintab-last.gif')
    }


    .maintab_active_first {
        background-image: url('https://i.ibb.co/Q96FRdx/maintab-active-first.gif')
    }
    .maintab_active_back {
        background-image: url('https://i.ibb.co/5Tk3s5j/maintab-active-back.gif')
    }
    .maintab_active_last {
        background-image: url('https://i.ibb.co/drDZN4d/maintab-active-last.gif')
    }
    /* end top menu background image! code*/
Page 1
Viewing Page: 1