Convert from CSS? #287

mgrimace · 2022-07-14T15:04:06Z

mgrimace
Jul 14, 2022

Hello,

I have a .css file I currently use in Cascadea to enable dark mode on a particular site. Is there a way to convert it to a proper user script? It doesn't work as it is when I import it into userscripts, I'll post it below:

@name			CEO.ca - better dark
@author			cammarata.m
@version		1.0.0
@namespace		cascadea789083371
@preprocessor	default
==/UserStyle== */

@-moz-document url-prefix("https://ceo.ca")
{
	body {
		background: radial-gradient(circle closest-corner at 50% 10px, #333, #000);
	}
	
	
	#nav .tab.toggle-chat .label {
		background: #171717;
	}
	
	#nav .tab.toggle-chat path {
		fill: #171717;
	}
	
	#nav .tab.toggle-left-sidebar .label {
		background: #000;
	}
	
	#nav .tab.toggle-left-sidebar path {
		fill: #000;
	}
	
	.left-sidebar {
		background: #222;
	}
	
	.discover .hash.cash:hover {
		border: none;
		color: #fff;
		background: #C13939;
	}
	
	.discover .hash.cash {
		background: rgba(120, 200, 240, 0.2);
		color: #9af;
	}
	
	.discover .hash.cash:hover {
		color: #fff;
		background: #3D9BEF;
	}
	
	.discover .hash.at, .darkmode .discover .author {
		color: #aa5d5c;
		background: none;
	}
	
	.discover .hash.at:hover, .discover .author:hover {
		color: #aa5d5c;
		background: none;
	}
	
	.left-sidebar .legal a {
		color: #a44;
	}
	
	.discover .article {
		background: #111;
		color: #555;
	}
	
	.discover .article .details {
		color: #555;
	}
	
	.discover .article .title {
		color: #888
	}
	
	.left-sidebar .header {
		background: #2f2f2f;
		color: #aaa;
	}
	
	#center-column.article-mode #current-channel.formatted-channel {
		background: #000;
	}
	
	.formatted-channel .channel {
		background: #222;
	}
	
	.formatted-channel .channel:hover {
		background: #666;
	}
	
	#post .outer {
		background: #555;
	}
	
	#post input, #post textarea, #post button, #accounts input, #accounts button {
		background: #000;
		color: #ddd;
	}
	
	#chat {
		background: #222;
	}
	
	.message.truncated .ellipsis {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
	}
	
	.row a.linkified {
		color: #fff;
		border-bottom: 1px solid #666;
	}
	
	.row a.linkified:hover {
		border-bottom: 1px solid #fff;
	}
	
	.message {
		background: rgba(255, 255, 255, 0.1);
	}
	
	.message .spiel-content {
		color: #aaa;
	}
	
	.row .date a {
		background: rgba(255, 255, 255, 0.3);
		color: #faa;
	}
	
	.spiel-actions {
		background: #2e2e2e;
	}
	
	.spiel-actions a {
		background: #000;
		border-color: #000;
	}
	
	#channels {
		background: #2f2f2f;
	}
	
	.watchlist .channels-list.detailed .channel .dollar {
		color: #bbb;
	}
	
	.watchlist .channels-list.detailed .channel .volume {
		color: #999;
	}
	
	.watchlist .channels-list.detailed .channel .price {
		color: #eee;
	}
	
	.watchlist .channels-list.detailed .channel .exchange {
		color: #444;
		text-shadow: none;
	}
	
	.watchlist .channels-list.detailed .channel .cashtag span {
		background: #222;
		color: #aaa;
	}
	
	.watchlist .channels-list.detailed .channel .percent {
		background: #222;
	}
	
	.watchlist .channels-list.detailed .channel .bid-ask {
		background-color: #171717;
		box-shadow: 0 0 10px 5px #171717;
	}
	
	.watchlist .channels-list.detailed .channel .desc {
		color: #aaa;
	}
	
	.watchlist .channels-list.detailed .channel a:hover .desc {
		color: #fff;
	}
	
	.watchlist .sort-and-filter .filter-label {
		border-bottom: 1px solid #444;
	}
	
	.watchlist .sort-and-filter .filter {
		background: #111;
		color: #aaa;
	}
	
	.watchlist .sort-and-filter .filter.selected {
		background: #777;
		color: #fff;
	}
	
	.watchlist .sort-and-filter .filter:hover {
		background: #333;
		color: #fff;
	}
	
	#home h2 {
		color: #877777;
		text-shadow: 0 1px 0 #000;
	}
	
	#home .content {
		background: #000;
	}
	
	#home .spacer {
		border-top: 1px solid #111;
		border-bottom: 1px solid #444;
	}
	
	#home .tabs .tab {
		background: rgba(255, 255, 255, 0.26);
	}
	
	#home .tabs .tab.selected {
		background: rgba(255, 255, 255, 0.7);
		color: #000;
	}
	
	#home .tabs .tab.selected .icon {
		color: #000;
	}
	
	.watchlist .channels-list .channel a {
		background: #171717;
		color: #aaa;
	}
	
	.watchlist .channels-list .channel a:hover {}
	
	.watchlist .channels-list .channel .up {
		color: #0d0;
	}
	
	.watchlist .channels-list .channel .down {
		color: #d33;
	}
	
	.formatted-channel {
		background: #171717;
	}
	
	.top-bar .search-bar .suggestions {
		background: #000;
	}
	
	.message .name .hash.at {
		color: #ffe4fa;
	}
	
	.message .name .hash.at:hover {
		color: #fff;
	}
	
	.spiel-content .hash {
		background: rgba(190, 60, 60, 0.30);
		color: #faa;
	}
	
	.spiel-content .hash:hover {
		border: none;
		color: #fff;
		background: #C13939;
	}
	
	.spiel-content .hash.at {
		background: rgba(230, 170, 230, 0.20);
		color: #e1a8e1;
	}
	
	.spiel-content .hash.at:hover {
		color: #fff;
		background: #a955a6;
	}
	
	.spiel-content .hash.panel {
		background: rgba(104, 154, 76, 0.18);
		color: #16581f;
	}
	
	.spiel-content .hash.panel:hover {
		color: #fff;
		background: #16581f;
	}
	
	.spiel-content .hash.cash {
		background: rgba(120, 200, 240, 0.33);
		color: #adf;
	}
	
	.spiel-content .hash.cash:hover {
		color: #fff;
		background: #3D9BEF;
	}
	
	.spiel-content .hash.sedi {
		background: #948989;
		color: #fff;
	}
	
	.spiel-content .hash.sedi:hover {
		color: #fff;
		background: #000;
	}
	
	.spiel-content .hash.article {
		background: rgba(210, 164, 105, 0.34);
		color: #ffa;
	}
	
	.spiel-content .hash.article:hover {
		background: rgba(210, 164, 105, 0.94);
		color: #fff;
	}
	
	.spiel-content .hash.shared {
		background: #f7f2cd;
		color: #5f451b;
	}
	
	.spiel-content .hash.shared:hover {
		color: #f7f2cd;
		background: #5f451b;
	}
	
	#chart-box .last-value {
		color: #ccc;
	}
	
	#chart-box .percent {
		background: #333;
	}
	
	#chart-box .quote .down {
		color: #f00;
	}
	
	#chart-box .data-item .ask {
		color: #d33;
	}
	
	#chart-box .data-item {
		background: #333;
		color: #888;
	}
	
	#chart-box .data-item .value {
		color: #aaa;
	}
	
	#chart-box .action-buttons .action {
		background: #222;
		color: #aaa;
	}
	
	#chart-box .action-buttons .action:hover {
		background: #aaa;
		color: #333;
	}
	
	#chart-box .chart-button {
		background: #333;
		border-color: transparent;
		color: #aaa;
	}
	
	#chart-box .chart-button:hover {
		background: #555;
		color: #fff;
	}
	
	#chart-box .chart-button-inactive {}
	
	#chart-box .chart-button-focussed {
		color: #ccc;
		background: #555;
		border-color: #aaa;
	}
	
	.market-depth-chart .controls a {
		background: #555;
		border: 1px solid #333;
	}
	
	#chart-box table th, .darkmode #chart-box table td {
		color: #aaa;
	}
	
	.market-depth-tables tr.bid td {
		background: rgba(0, 255, 0, 0.2);
	}
	
	.market-depth-tables tr.ask td {
		background: rgba(255, 0, 0, 0.2);
	}
	
	.photo-control, .video-control {
		border-color: #aaa;
	}
	
	.row .vote {
		color: #666;
	}
	
	.row:hover .vote {
		opacity: 0.5;
	}
	
	.row .vote.voted {
		color: #fff;
	}
	
	.row .vote:hover {
		color: #aaa;
	}
	
	.row .vote:hover.voted {
		color: #fff;
	}
	
	#article {
		background: #000;
		color: #aaa;
	}
	
	#article .article-body {
		color: #999;
	}
	
	#article a {
		color: #d44;
	}
	
	.toggle-grid-view {
		background: #888;
	}
}```

quoid · 2022-07-15T02:15:54Z

quoid
Jul 15, 2022
Maintainer

@mgrimace

There's two approaches you could use with this extension.

The first would be making a "css userscript". I am assuming the url you want to target is https://ceo.ca. This approach is pasted below.

The second approach is by creating a traditional userscript and injecting the css with GM_addStyle or using vanilla javascript. I actually prefer this approach, but the outcome is the same as the other method so I did not paste the code for this.

/* ==UserStyle==
@name			CEO.ca - better dark
@author			cammarata.m
@version		1.0.0
@description         PUT YOUR OWN DESCRIPTION HERE
@match                 *://ceo.ca/*
==/UserStyle== */

body {
		background: radial-gradient(circle closest-corner at 50% 10px, #333, #000);
	}
	
	
	#nav .tab.toggle-chat .label {
		background: #171717;
	}
	
	#nav .tab.toggle-chat path {
		fill: #171717;
	}
	
	#nav .tab.toggle-left-sidebar .label {
		background: #000;
	}
	
	#nav .tab.toggle-left-sidebar path {
		fill: #000;
	}
	
	.left-sidebar {
		background: #222;
	}
	
	.discover .hash.cash:hover {
		border: none;
		color: #fff;
		background: #C13939;
	}
	
	.discover .hash.cash {
		background: rgba(120, 200, 240, 0.2);
		color: #9af;
	}
	
	.discover .hash.cash:hover {
		color: #fff;
		background: #3D9BEF;
	}
	
	.discover .hash.at, .darkmode .discover .author {
		color: #aa5d5c;
		background: none;
	}
	
	.discover .hash.at:hover, .discover .author:hover {
		color: #aa5d5c;
		background: none;
	}
	
	.left-sidebar .legal a {
		color: #a44;
	}
	
	.discover .article {
		background: #111;
		color: #555;
	}
	
	.discover .article .details {
		color: #555;
	}
	
	.discover .article .title {
		color: #888
	}
	
	.left-sidebar .header {
		background: #2f2f2f;
		color: #aaa;
	}
	
	#center-column.article-mode #current-channel.formatted-channel {
		background: #000;
	}
	
	.formatted-channel .channel {
		background: #222;
	}
	
	.formatted-channel .channel:hover {
		background: #666;
	}
	
	#post .outer {
		background: #555;
	}
	
	#post input, #post textarea, #post button, #accounts input, #accounts button {
		background: #000;
		color: #ddd;
	}
	
	#chat {
		background: #222;
	}
	
	.message.truncated .ellipsis {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
	}
	
	.row a.linkified {
		color: #fff;
		border-bottom: 1px solid #666;
	}
	
	.row a.linkified:hover {
		border-bottom: 1px solid #fff;
	}
	
	.message {
		background: rgba(255, 255, 255, 0.1);
	}
	
	.message .spiel-content {
		color: #aaa;
	}
	
	.row .date a {
		background: rgba(255, 255, 255, 0.3);
		color: #faa;
	}
	
	.spiel-actions {
		background: #2e2e2e;
	}
	
	.spiel-actions a {
		background: #000;
		border-color: #000;
	}
	
	#channels {
		background: #2f2f2f;
	}
	
	.watchlist .channels-list.detailed .channel .dollar {
		color: #bbb;
	}
	
	.watchlist .channels-list.detailed .channel .volume {
		color: #999;
	}
	
	.watchlist .channels-list.detailed .channel .price {
		color: #eee;
	}
	
	.watchlist .channels-list.detailed .channel .exchange {
		color: #444;
		text-shadow: none;
	}
	
	.watchlist .channels-list.detailed .channel .cashtag span {
		background: #222;
		color: #aaa;
	}
	
	.watchlist .channels-list.detailed .channel .percent {
		background: #222;
	}
	
	.watchlist .channels-list.detailed .channel .bid-ask {
		background-color: #171717;
		box-shadow: 0 0 10px 5px #171717;
	}
	
	.watchlist .channels-list.detailed .channel .desc {
		color: #aaa;
	}
	
	.watchlist .channels-list.detailed .channel a:hover .desc {
		color: #fff;
	}
	
	.watchlist .sort-and-filter .filter-label {
		border-bottom: 1px solid #444;
	}
	
	.watchlist .sort-and-filter .filter {
		background: #111;
		color: #aaa;
	}
	
	.watchlist .sort-and-filter .filter.selected {
		background: #777;
		color: #fff;
	}
	
	.watchlist .sort-and-filter .filter:hover {
		background: #333;
		color: #fff;
	}
	
	#home h2 {
		color: #877777;
		text-shadow: 0 1px 0 #000;
	}
	
	#home .content {
		background: #000;
	}
	
	#home .spacer {
		border-top: 1px solid #111;
		border-bottom: 1px solid #444;
	}
	
	#home .tabs .tab {
		background: rgba(255, 255, 255, 0.26);
	}
	
	#home .tabs .tab.selected {
		background: rgba(255, 255, 255, 0.7);
		color: #000;
	}
	
	#home .tabs .tab.selected .icon {
		color: #000;
	}
	
	.watchlist .channels-list .channel a {
		background: #171717;
		color: #aaa;
	}
	
	.watchlist .channels-list .channel a:hover {}
	
	.watchlist .channels-list .channel .up {
		color: #0d0;
	}
	
	.watchlist .channels-list .channel .down {
		color: #d33;
	}
	
	.formatted-channel {
		background: #171717;
	}
	
	.top-bar .search-bar .suggestions {
		background: #000;
	}
	
	.message .name .hash.at {
		color: #ffe4fa;
	}
	
	.message .name .hash.at:hover {
		color: #fff;
	}
	
	.spiel-content .hash {
		background: rgba(190, 60, 60, 0.30);
		color: #faa;
	}
	
	.spiel-content .hash:hover {
		border: none;
		color: #fff;
		background: #C13939;
	}
	
	.spiel-content .hash.at {
		background: rgba(230, 170, 230, 0.20);
		color: #e1a8e1;
	}
	
	.spiel-content .hash.at:hover {
		color: #fff;
		background: #a955a6;
	}
	
	.spiel-content .hash.panel {
		background: rgba(104, 154, 76, 0.18);
		color: #16581f;
	}
	
	.spiel-content .hash.panel:hover {
		color: #fff;
		background: #16581f;
	}
	
	.spiel-content .hash.cash {
		background: rgba(120, 200, 240, 0.33);
		color: #adf;
	}
	
	.spiel-content .hash.cash:hover {
		color: #fff;
		background: #3D9BEF;
	}
	
	.spiel-content .hash.sedi {
		background: #948989;
		color: #fff;
	}
	
	.spiel-content .hash.sedi:hover {
		color: #fff;
		background: #000;
	}
	
	.spiel-content .hash.article {
		background: rgba(210, 164, 105, 0.34);
		color: #ffa;
	}
	
	.spiel-content .hash.article:hover {
		background: rgba(210, 164, 105, 0.94);
		color: #fff;
	}
	
	.spiel-content .hash.shared {
		background: #f7f2cd;
		color: #5f451b;
	}
	
	.spiel-content .hash.shared:hover {
		color: #f7f2cd;
		background: #5f451b;
	}
	
	#chart-box .last-value {
		color: #ccc;
	}
	
	#chart-box .percent {
		background: #333;
	}
	
	#chart-box .quote .down {
		color: #f00;
	}
	
	#chart-box .data-item .ask {
		color: #d33;
	}
	
	#chart-box .data-item {
		background: #333;
		color: #888;
	}
	
	#chart-box .data-item .value {
		color: #aaa;
	}
	
	#chart-box .action-buttons .action {
		background: #222;
		color: #aaa;
	}
	
	#chart-box .action-buttons .action:hover {
		background: #aaa;
		color: #333;
	}
	
	#chart-box .chart-button {
		background: #333;
		border-color: transparent;
		color: #aaa;
	}
	
	#chart-box .chart-button:hover {
		background: #555;
		color: #fff;
	}
	
	#chart-box .chart-button-inactive {}
	
	#chart-box .chart-button-focussed {
		color: #ccc;
		background: #555;
		border-color: #aaa;
	}
	
	.market-depth-chart .controls a {
		background: #555;
		border: 1px solid #333;
	}
	
	#chart-box table th, .darkmode #chart-box table td {
		color: #aaa;
	}
	
	.market-depth-tables tr.bid td {
		background: rgba(0, 255, 0, 0.2);
	}
	
	.market-depth-tables tr.ask td {
		background: rgba(255, 0, 0, 0.2);
	}
	
	.photo-control, .video-control {
		border-color: #aaa;
	}
	
	.row .vote {
		color: #666;
	}
	
	.row:hover .vote {
		opacity: 0.5;
	}
	
	.row .vote.voted {
		color: #fff;
	}
	
	.row .vote:hover {
		color: #aaa;
	}
	
	.row .vote:hover.voted {
		color: #fff;
	}
	
	#article {
		background: #000;
		color: #aaa;
	}
	
	#article .article-body {
		color: #999;
	}
	
	#article a {
		color: #d44;
	}
	
	.toggle-grid-view {
		background: #888;
	}

1 reply

mgrimace Jul 15, 2022
Author

The first would be making a "css userscript". I am assuming the url you want to target is https://ceo.ca. This approach is pasted below.

Thank you for that. I tried the updated script (straight copy/paste) by clicking + then new CSS in the extension. Went back to the page, toggled on, refreshed again, closed/reopened browser but it isn't applying the style yet.

I had created this forever ago and honestly don't remember how to use CSS/code so it's possible I'm missing something obvious here. Any idea what I'm missing?

quoid · 2022-07-15T13:32:24Z

quoid
Jul 15, 2022
Maintainer

I am assuming you are using this on desktop, but correct me if I am wrong.

Could you share a screenshot of the browser console? I pasted a screenshot below, which shows my console and the userscript working.

The code you shared seemingly works fine, but I want to see if there is an injection problem. I am on the beta version 4.2.1 which has some changes to how css is injected, so that could be why I am seeing it work and you are not. However, I would like to validate that.

0 replies

mgrimace · 2022-07-15T13:51:12Z

mgrimace
Jul 15, 2022
Author

I am indeed on desktop,

I do see the line injecting CEO.ca - dark mode, but not the subsequent injecting 4.1 in my console. Here is the screenshot:

0 replies

quoid · 2022-07-15T14:25:38Z

quoid
Jul 15, 2022
Maintainer

I think this might be due to a change in the way css is injected in 4.2.1 vs 4.2.

If adding !important after the css values works, then I am pretty sure this is the reason it works for me and not you. I pasted an updated script below that adds those !important tags, would you mind trying it out?

/* ==UserStyle==
@name           CEO.ca - better dark
@author         cammarata.m
@version        1.0.0
@description         PUT YOUR OWN DESCRIPTION HERE
@match                 *://ceo.ca/*
==/UserStyle== */

body {
     background: radial-gradient(circle closest-corner at 50% 10px, #333, #000) !important;  
}
 #nav .tab.toggle-chat .label {
     background: #171717 !important;  
}
 #nav .tab.toggle-chat path {
     fill: #171717 !important;  
}
 #nav .tab.toggle-left-sidebar .label {
     background: #000 !important;  
}
 #nav .tab.toggle-left-sidebar path {
     fill: #000 !important;  
}
 .left-sidebar {
     background: #222 !important;  
}
 .discover .hash.cash:hover {
     border: none !important;  
     color: #fff !important;  
     background: #C13939 !important;  
}
 .discover .hash.cash {
     background: rgba(120, 200, 240, 0.2) !important;  
     color: #9af !important;  
}
 .discover .hash.cash:hover {
     color: #fff !important;  
     background: #3D9BEF !important;  
}
 .discover .hash.at, .darkmode .discover .author {
     color: #aa5d5c !important;  
     background: none !important;  
}
 .discover .hash.at:hover, .discover .author:hover {
     color: #aa5d5c !important;  
     background: none !important;  
}
 .left-sidebar .legal a {
     color: #a44 !important;  
}
 .discover .article {
     background: #111 !important;  
     color: #555 !important;  
}
 .discover .article .details {
     color: #555 !important;  
}
 .discover .article .title {
     color: #888 
}
 .left-sidebar .header {
     background: #2f2f2f !important;  
     color: #aaa !important;  
}
 #center-column.article-mode #current-channel.formatted-channel {
     background: #000 !important;  
}
 .formatted-channel .channel {
     background: #222 !important;  
}
 .formatted-channel .channel:hover {
     background: #666 !important;  
}
 #post .outer {
     background: #555 !important;  
}
 #post input, #post textarea, #post button, #accounts input, #accounts button {
     background: #000 !important;  
     color: #ddd !important;  
}
 #chat {
     background: #222 !important;  
}
 .message.truncated .ellipsis {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%) !important;  
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
}
 .row a.linkified {
     color: #fff !important;  
     border-bottom: 1px solid #666 !important;  
}
 .row a.linkified:hover {
     border-bottom: 1px solid #fff !important;  
}
 .message {
     background: rgba(255, 255, 255, 0.1) !important;  
}
 .message .spiel-content {
     color: #aaa !important;  
}
 .row .date a {
     background: rgba(255, 255, 255, 0.3) !important;  
     color: #faa !important;  
}
 .spiel-actions {
     background: #2e2e2e !important;  
}
 .spiel-actions a {
     background: #000 !important;  
     border-color: #000 !important;  
}
 #channels {
     background: #2f2f2f !important;  
}
 .watchlist .channels-list.detailed .channel .dollar {
     color: #bbb !important;  
}
 .watchlist .channels-list.detailed .channel .volume {
     color: #999 !important;  
}
 .watchlist .channels-list.detailed .channel .price {
     color: #eee !important;  
}
 .watchlist .channels-list.detailed .channel .exchange {
     color: #444 !important;  
     text-shadow: none !important;  
}
 .watchlist .channels-list.detailed .channel .cashtag span {
     background: #222 !important;  
     color: #aaa !important;  
}
 .watchlist .channels-list.detailed .channel .percent {
     background: #222 !important;  
}
 .watchlist .channels-list.detailed .channel .bid-ask {
     background-color: #171717 !important;  
     box-shadow: 0 0 10px 5px #171717 !important;  
}
 .watchlist .channels-list.detailed .channel .desc {
     color: #aaa !important;  
}
 .watchlist .channels-list.detailed .channel a:hover .desc {
     color: #fff !important;  
}
 .watchlist .sort-and-filter .filter-label {
     border-bottom: 1px solid #444 !important;  
}
 .watchlist .sort-and-filter .filter {
     background: #111 !important;  
     color: #aaa !important;  
}
 .watchlist .sort-and-filter .filter.selected {
     background: #777 !important;  
     color: #fff !important;  
}
 .watchlist .sort-and-filter .filter:hover {
     background: #333 !important;  
     color: #fff !important;  
}
 #home h2 {
     color: #877777 !important;  
     text-shadow: 0 1px 0 #000 !important;  
}
 #home .content {
     background: #000 !important;  
}
 #home .spacer {
     border-top: 1px solid #111 !important;  
     border-bottom: 1px solid #444 !important;  
}
 #home .tabs .tab {
     background: rgba(255, 255, 255, 0.26) !important;  
}
 #home .tabs .tab.selected {
     background: rgba(255, 255, 255, 0.7) !important;  
     color: #000 !important;  
}
 #home .tabs .tab.selected .icon {
     color: #000 !important;  
}
 .watchlist .channels-list .channel a {
     background: #171717 !important;  
     color: #aaa !important;  
}
 .watchlist .channels-list .channel a:hover {
}
 .watchlist .channels-list .channel .up {
     color: #0d0 !important;  
}
 .watchlist .channels-list .channel .down {
     color: #d33 !important;  
}
 .formatted-channel {
     background: #171717 !important;  
}
 .top-bar .search-bar .suggestions {
     background: #000 !important;  
}
 .message .name .hash.at {
     color: #ffe4fa !important;  
}
 .message .name .hash.at:hover {
     color: #fff !important;  
}
 .spiel-content .hash {
     background: rgba(190, 60, 60, 0.30) !important;  
     color: #faa !important;  
}
 .spiel-content .hash:hover {
     border: none !important;  
     color: #fff !important;  
     background: #C13939 !important;  
}
 .spiel-content .hash.at {
     background: rgba(230, 170, 230, 0.20) !important;  
     color: #e1a8e1 !important;  
}
 .spiel-content .hash.at:hover {
     color: #fff !important;  
     background: #a955a6 !important;  
}
 .spiel-content .hash.panel {
     background: rgba(104, 154, 76, 0.18) !important;  
     color: #16581f !important;  
}
 .spiel-content .hash.panel:hover {
     color: #fff !important;  
     background: #16581f !important;  
}
 .spiel-content .hash.cash {
     background: rgba(120, 200, 240, 0.33) !important;  
     color: #adf !important;  
}
 .spiel-content .hash.cash:hover {
     color: #fff !important;  
     background: #3D9BEF !important;  
}
 .spiel-content .hash.sedi {
     background: #948989 !important;  
     color: #fff !important;  
}
 .spiel-content .hash.sedi:hover {
     color: #fff !important;  
     background: #000 !important;  
}
 .spiel-content .hash.article {
     background: rgba(210, 164, 105, 0.34) !important;  
     color: #ffa !important;  
}
 .spiel-content .hash.article:hover {
     background: rgba(210, 164, 105, 0.94) !important;  
     color: #fff !important;  
}
 .spiel-content .hash.shared {
     background: #f7f2cd !important;  
     color: #5f451b !important;  
}
 .spiel-content .hash.shared:hover {
     color: #f7f2cd !important;  
     background: #5f451b !important;  
}
 #chart-box .last-value {
     color: #ccc !important;  
}
 #chart-box .percent {
     background: #333 !important;  
}
 #chart-box .quote .down {
     color: #f00 !important;  
}
 #chart-box .data-item .ask {
     color: #d33 !important;  
}
 #chart-box .data-item {
     background: #333 !important;  
     color: #888 !important;  
}
 #chart-box .data-item .value {
     color: #aaa !important;  
}
 #chart-box .action-buttons .action {
     background: #222 !important;  
     color: #aaa !important;  
}
 #chart-box .action-buttons .action:hover {
     background: #aaa !important;  
     color: #333 !important;  
}
 #chart-box .chart-button {
     background: #333 !important;  
     border-color: transparent !important;  
     color: #aaa !important;  
}
 #chart-box .chart-button:hover {
     background: #555 !important;  
     color: #fff !important;  
}
 #chart-box .chart-button-inactive {
}
 #chart-box .chart-button-focussed {
     color: #ccc !important;  
     background: #555 !important;  
     border-color: #aaa !important;  
}
 .market-depth-chart .controls a {
     background: #555 !important;  
     border: 1px solid #333 !important;  
}
 #chart-box table th, .darkmode #chart-box table td {
     color: #aaa !important;  
}
 .market-depth-tables tr.bid td {
     background: rgba(0, 255, 0, 0.2) !important;  
}
 .market-depth-tables tr.ask td {
     background: rgba(255, 0, 0, 0.2) !important;  
}
 .photo-control, .video-control {
     border-color: #aaa !important;  
}
 .row .vote {
     color: #666 !important;  
}
 .row:hover .vote {
     opacity: 0.5 !important;  
}
 .row .vote.voted {
     color: #fff !important;  
}
 .row .vote:hover {
     color: #aaa !important;  
}
 .row .vote:hover.voted {
     color: #fff !important;  
}
 #article {
     background: #000 !important;  
     color: #aaa !important;  
}
 #article .article-body {
     color: #999 !important;  
}
 #article a {
     color: #d44 !important;  
}
 .toggle-grid-view {
     background: #888 !important;  
}

2 replies

mgrimace Jul 15, 2022
Author

would you mind trying it out?

I don't mind at all, and I very much appreciate it! Tested and confirmed working.

I have to add that I chuckled when I saw the updated script that you had to label everything as "important" for it to work. It reads like: "have you tried yelling at it?" 😆

quoid Jul 15, 2022
Maintainer

Great!

In version 4.2 the css is injected in a way that it injected before the page css, so in order to overwrite a lot of page styles, one has to use the !important flag.

In version 4.2.1 I made a change (actually reversion, because this is how it was originally done) where after page load the css is injected, which reduces the number of !important flags needed.

4.2.1 will be released soon, but until then the !important flags will be needed for this specific website, obviously.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert from CSS? #287

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 3 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Convert from CSS? #287

mgrimace Jul 14, 2022

Replies: 4 comments · 3 replies

quoid Jul 15, 2022 Maintainer

mgrimace Jul 15, 2022 Author

quoid Jul 15, 2022 Maintainer

mgrimace Jul 15, 2022 Author

quoid Jul 15, 2022 Maintainer

mgrimace Jul 15, 2022 Author

quoid Jul 15, 2022 Maintainer

mgrimace
Jul 14, 2022

Replies: 4 comments 3 replies

quoid
Jul 15, 2022
Maintainer

mgrimace Jul 15, 2022
Author

quoid
Jul 15, 2022
Maintainer

mgrimace
Jul 15, 2022
Author

quoid
Jul 15, 2022
Maintainer

mgrimace Jul 15, 2022
Author

quoid Jul 15, 2022
Maintainer