Bitcoin Forum

Other => Meta => Topic started by: 0x256 on April 09, 2020, 09:52:43 AM


Title: improvement nex dark theme
Post by: 0x256 on April 09, 2020, 09:52:43 AM
Warning/Disclaimer: Use These additions/extensions at your own risk.

Quote from: hd49728 on May 29, 2019, 06:55:22 AM
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 (https://userstyles.org/styles/173576/nex-dark-theme)

change avatar from circle to rounded square
https://i.ibb.co/ZLHDq1K/image.png===============================
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 (https://add0n.com/stylus.html) 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*/

Title: Re: improvement nex dark theme
Post by: HCP on April 09, 2020, 10:29:30 AM
Thanks for "resurrecting" the nex dark theme thread... and thanks for the the mod to fix the avatars... the circles were really annoying, the "rounded square" is a much nicer effect in my opinion. Nice work!


NOTE: You really shouldn't have created the thread in the "archival" board tho... you should move it to "meta" or to "off-topic". Use the "move topic" link in lower left:
https://talkimg.com/images/2023/11/15/z1MFq.png

And select "Other - Meta" (or "Other - Off-Topic") from the dropdown list!

Title: Re: improvement nex dark theme
Post by: 0x256 on April 09, 2020, 02:36:31 PM
Quote from: HCP on April 09, 2020, 10:29:30 AM
the circles were really annoying, the "rounded square" is a much nicer effect in my opinion. Nice work!
I agree with you "rounded square" better appearance + User experience


Quote from: HCP on April 09, 2020, 10:29:30 AM
NOTE: You really shouldn't have created the thread in the "archival" board tho... you should move it to "meta" or to "off-topic".
Well I'm going to move it and I hope it's not annoying to others

change text bold color to white
in sections and inside post
https://i.ibb.co/3s06JCB/image.png
===============================
Code:
/*---------------------------------------
change text bold color to white
---------------------------------------*/
b, strong {
    color: #fff;
}
a > b, a > strong {
    color: inherit; /*ignore links*/
}
/*-------------------------------------*/

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

probably "quotations" need reconsideration ? what do you think?
https://i.ibb.co/WtTNf5q/image.png

Title: Re: improvement nex dark theme
Post by: HCP on April 09, 2020, 07:28:54 PM
Here is my current version... I can't tell you what the exact things I changed were tho, as it has been quite a while since I modified it. :-\

I do remember that I made some modifications to the "thread listing view" so that it was highlighting "unread" threads better or something like that... and I remember changing the "quote" "delete" and "merit" buttons I think... and possibly the colour of links and/or quoted messages.

Code:
.tborder {
    border: none;
    background-color: transparent;
    padding: 0
}

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

/*استثناء عناصر من الغاء الحدود*/
#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; }
/*--------استثناء عناصر من الغاء الحدود نهاية--------*/


/* خانات الادخال input */
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}




/* الردود منفصلة كصناديق
-----------------------*/
#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;
}
/*-------- نهاية الردود منفصلة كصناديق --------*/



/*-------------------------
	تعديلات بداخل المواضيع
--------------------------*/
.post { padding-top:5px; }

/* اخفاء Re:.. */
/* .subject a {display: none} */

/* تغير لون الفواصل */
hr, .hrcolor {
	color: #d2d2d2;
	background-color: #d2d2d2;
}
/* نهاية تعديلات بداخل المواضيع */



/*-----------------------------------
	الاقتباسات
------------------------------------*/
.quote {
    color: inherit;
}

.quote, 
.quoteheader {
    background-color: transparent;
    border: none;
    margin-top: 0;
}

.quoteheader {
    margin-right: 3px;
}

.quoteheader:before {
	content: url(https://i.ibb.co/W0hX5KP/qicon.png);
    opacity: 0.1;
	margin: 0 5px;
}




.quoteheader,
.quote {
    border-left: 4px solid #ddd;
}

/*عند مرور الماوس*/
.quote:hover {
    border-left: 4px solid #ccc;
}

.quoteheader:hover,
.quoteheader:hover + .quote,
.quoteheader:hover,
.quoteheader:hover + .quote
{
    border-left: 4px solid #ccc;
}


/* الاقتباس اتجاة يمين 
----------------------*/
div.post[dir='rtl'] .quoteheader,
div.post[dir='rtl']  .quote{
    border-right: 4px solid #ddd;
    border-left: 0 !important;
}

div.post[dir='rtl']  .quote:hover {
 border-right-color: #ccc;
}

/* عند مرور الماوس اتجاة يمين*/
div.post[dir='rtl'] .quote:hover
{
    border-right: 4px solid #ccc;
}

div.post[dir='rtl'] .quoteheader:hover,
div.post[dir='rtl'] .quoteheader:hover + .quote {
    border-right: 4px solid #ccc;
}
/*---------- نهاية الاقتباسات ------------*/



/*-----------------------------------
    تنسيق عنوان الموضوع
------------------------------------*/
#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;
}
/*---------- نهاية تنسيق عنوان الموضوع ------------*/



#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
}




/* اضافة لون للمواضيع المتحكمة من صاحب الموضوع  */
#bodyarea tr.catbg3+tr td.smalltext {
    background-color: #fffce5;
    border-bottom: 1px solid #ffde7b;
}
/*---------- نهاية موضوع متحكم ------------*/



/*-----------------------------------
  تغير الصور الشخصية لدائرية
-----------------------------------*/
#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: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    object-fit: cover;
    border: 2px solid #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background: no-repeat center center;

    box-shadow: 2px 2px 4px 0px #aaa;
}*/
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;
}

/* الحجم بالمنشورات */
#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 /*بصفحة الرسائل*/ {
    height: 4rem;
    width: 4rem;
}

/* الحجم بصفحة العضوء */
table.bordercolor > tbody > tr > td.windowbg img.avatar {
    height: 5.75rem;
    width: 5.75rem;
}

/* الحجم بالهيدر العلوي */
#upshrinkHeader table > tbody > tr > td.windowbg img.avatar {
    height: 3.5rem;
    width: 3.5rem;
}

/* من الديف الحاويoverflow اخفاء  */
#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;
}
/*------ نهاية تغير الصور الشخصية لدائرية ------*/

/* اخفاء حدود القائمة العلوية */
.tborder table#smfheader+table,
.tborder table#smfheader+table+table {
    border: none !important;
}

div[style="border:2px solid orange; background-color:lightyellow; padding:10px; margin-bottom:5px"] {
    color: black
}
div[style="border:2px solid red; background-color:#FF9696; padding:10px; margin-bottom:5px"] {
    color: black
}
div[style="border:2px solid red; background-color:#FF9696; padding:10px; margin-bottom:5px"] a {
    color: #666666
}

/* خانات الادخال input */
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;
    border-radius: 3px;
    padding: 4px 7px !important;
}
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #5265d9;
}


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

/* لون النصوص بالثيم الاسود*/
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
}


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


/* الروابط */
a:visited {
    color: #939dc5;
}

a:link {
    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;
}


/* الفواصل */
hr, .hrcolor {
	color: #393c44;
	background-color: #393c44;
}



/*	الوان الاقتباسات
--------------------------*/
.quoteheader, .quoteheader a {
    color: #737c9e;
}

.quoteheader,
.quote{
    border-left: 4px solid #3d444e;
    
}

.quote:hover
{
    border-left: 4px solid #62676f;
}

.quoteheader:hover,
.quoteheader:hover + .quote
{
    border-left: 4px solid #62676f;
}

/* الاقتباس اتجاة يمين 
----------------------*/
div.post[dir='rtl'] .quoteheader,
div.post[dir='rtl']  .quote{
    border-right: 4px solid #3d444e;
}

div.post[dir='rtl']  .quote:hover {
 border-right-color: #62676f;
}

/* عند مرور الماوس اتجاة يمين*/
div.post[dir='rtl'] .quote:hover
{
    border-right: 4px solid #62676f;
}

div.post[dir='rtl'] .quoteheader:hover,
div.post[dir='rtl'] .quoteheader:hover + .quote {
    border-right: 4px solid #62676f;
}
/*---------- نهاية الوان الاقتباسات ------------*/



/* الصور الشخصية */

#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 
{
    background-color: #fff;
    border-color: #323640;
    box-shadow: 2px 2px 4px 0px #121c27;

}


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

#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;
}


/* اضافة لون للمواضيع المتحكمة من صاحب الموضوع  */
#bodyarea tr.catbg3+tr td.smalltext {
    background-color: #292d38;
    border-bottom-color: #373b44;
    color: #fff
}


/* ----------------
    تعديل الالوان
------------------*/
[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;
}


/* الوان شريط الانتقال بالاسفل */
.titlebg2 {
    background-image: none;
    border: none;
    background-color: #2d313a;
    color: #d6d6d6;
}


/* ايقونات الرد و التعديل و الحذف */
img.reply_button {
    /* content: url(https://i.ibb.co/d6zXLq1/brown-quote.png); */
    content: url(https://talkimg.com/images/2023/11/15/z1nv2.png);
}
img.modify_button {
    /* content: url(https://i.ibb.co/dLtnpKp/brown-edit.png); */
    content: url(https://talkimg.com/images/2023/11/15/z1Cgc.png);
}
img.remove_button {
    /* content: url(https://i.ibb.co/vPDfyG9/brown-delete.png); */
    content: url(https://talkimg.com/images/2023/11/15/z1GuP.png);
    
}


/* ايقونة الاقتباس */
.quoteheader:before {
	content: url(https://i.ibb.co/QpYLk0v/qiconw.png) !important;
    opacity: 0.22;
}


/* لون الكود */
.code {
    background-color: #2f323c;
    border-color: #444850;
}


/*تحت التجربة*/
.windowbg2 {
    background-color: #262931;
}

.bordercolor {
    background-color: #363940;
}


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


.windowbg3 {
    background-color: #22242b;
}


/*---------------------------------
 تغير خلفية القائمة العلوية مؤقتاً !!!
الافضل تخصيص الالوان اكثر حتى يكون اكثر تناسق هذا موقت 
---------------------------------*/
/* 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*/


/*------------------------------
    شريط التمرير الجانبي
------------------------------*/
    ::-webkit-scrollbar {
        width: 10px;
        height: 8px;
    }

    ::-webkit-scrollbar-track-piece {
        background-color: #23262f;          /*Global Track Peice(the slider noob.)*/
        -webkit-border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #373b44;            /* Up/Down slider background*/
        -webkit-border-radius: 6px;
        
    }
  
    ::-webkit-scrollbar-thumb:horizontal {
        width: 50px;
        background-color: #373b44;            /* Side/Side slider background*/
        -webkit-border-radius: 3px;
    }


    /* الشريط بالكود */
    /* الحجم */
    .code::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
    
    /*مقبض التمرير*/  
    .code::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #13161c;            /* Up/Down slider background*/
        -webkit-border-radius: 6px;
        
    }

    /*خلفية شريط التمرير*/
    .code::-webkit-scrollbar-track-piece {
        background-color: #23262f;          /*Global Track Peice(the slider noob.)*/
        -webkit-border-radius: 6px;
    }


    /* نهاية الشريط بالكود */

.windowbg b a {
    color: white
}


/* ------ نهاية شريط التمرير الجانبي ------- */

Title: Re: improvement nex dark theme
Post by: 0x256 on April 10, 2020, 08:53:09 AM
Quote from: HCP on April 09, 2020, 07:28:54 PM
Here is my current version... I can't tell you what the exact things I changed were tho, as it has been quite a while since I modified it. :-\
I discovered some of your modifications using https://www.diffchecker.com/diff we need to apply some of them like (highlighting "unread" threads)

Quote from: HCP on April 09, 2020, 07:28:54 PM
remember changing the "quote" "delete" and "merit" buttons
this buttons not important I mean the default buttons nice :) so I will remove this code from my stylus


there are some modifications in "quotes" I need you test this new style, in your opinion, is it better than before?
https://i.ibb.co/MBMRhvw/image.png

I don't know how it will be when quote levels more than 3 and 4 levels  ;D

the final 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*/

Title: Re: improvement nex dark theme
Post by: HCP on April 10, 2020, 09:56:11 AM
Quote from: 0x256 on April 10, 2020, 08:53:09 AM
there are some modifications in "quotes" I need you test this new style, in your opinion, is it better than before?
...
I don't know how it will be when quote levels more than 3 and 4 levels  ;D
Try looking at this post: https://bitcointalk.org/index.php?topic=5166803.msg53623668#msg53623668
(It's just a random thread I quickly found... but you can always count on altcoin discussion for quote pyramids! ;)

The shading seems to work fairly well at quite deep quote depths... but I'm not sold... I think maybe I'm just a bit too used to the old style with the vertical lines.

https://talkimg.com/images/2023/11/15/z1w6I.png vs. https://talkimg.com/images/2023/11/15/z1Ajd.png

Title: Re: improvement nex dark theme
Post by: 0x256 on April 10, 2020, 06:24:51 PM
Quote from: HCP on April 10, 2020, 09:56:11 AM
Try looking at this post: https://bitcointalk.org/index.php?topic=5166803.msg53623668#msg53623668
(It's just a random thread I quickly found... but you can always count on altcoin discussion for quote pyramids! ;)
It seems not good after "3 quote levels"(it seems more brighter), however t'is acceptable until 2/3 levels.
the code above updated with some changes like (fixed background behind main ad)...

anyone has suggestions or notes about theme please write them below.

Title: Re: improvement nex dark theme
Post by: 0x256 on June 10, 2020, 08:37:44 PM
When you have free time and don't know what to do  ;D

https://i.ibb.co/zfhxfRN/image.png

Title: Re: improvement nex dark theme
Post by: Casdinyard on June 11, 2020, 02:04:53 AM
Quote from: 0x256 on April 09, 2020, 09:52:43 AM
this archival post to improvement nex dark theme (https://userstyles.org/styles/173576/nex-dark-theme)

The question that keeps bothering me is that, is this safe? Yes, it's just modifying a website's CSS by simply adding its extension, but then it asks for permission to read user's data:
For the "Stylish" (first link you've indicated in the OP that redirects to Stylish Extension)

And for "Stylus" (second link)

It's quite alarming to install such browser extensions especially if it asks such permissions as well. Also, I've looked for other user's review if no one had any suspicion nor had experienced any suspicious events on their devices after they've installed it, yet I've seen some such as, (Stylish and Stylus)


Though it is open source and code can be seen through their Github, based on experience, is it safe??

Title: Re: improvement nex dark theme
Post by: 0x256 on June 11, 2020, 03:30:05 AM
Quote from: Casdinyard on June 11, 2020, 02:04:53 AM

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


Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines