Customize JSON Appearance in Browser
JSON by wenijinew
Details
Authorwenijinew
LicenseMIT
Categoryuserstyles, json
Created
Updated
Code size5.7 kB
Code checksum18bde45a
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Customize JSON Appearance in Browser
Source code
/* ==UserStyle==
@name JSON
@version 20220221.13.04
@namespace userstyles.world/user/wenijinew
@description Customize JSON Appearance in Browser
@author wenijinew
@license MIT
==/UserStyle== */
@-moz-document regexp("https://(.*)json") {
/*
JSON Appearance Customization
*/
@charset "UTF-8";
/**********************************************************
common part:
global variables and basic common classes
**********************************************************/
:root {
--gray_05:#0C0C0C;
--gray_09:#181818;
--gray_14:#242424;
--gray_15:#292929;
--gray_21:#313131;
--gray_31:#464646;
--gray_37:#5f5f5f;
--gray_64:#a4a4a4;
--gray_68:#acacac;
--gray_76:#bdcbde;
--gray_80:#e6e6e6;
--gray_95:#F2F2F2;
--blue_20: #002a4d;
--blue_30: #005499;
--blue_40: #0062b3;
--blue_45: #007ee6;
--blue_50: #008CFF;
--blue_51: #1e90ff;
--blue_52: #2d3743;
--blue_60: #9ad1ff;
--red_3: #250900;
--red_5: #3f0000;
--red_10: #580000;
--red_20: #710000;
--red_30: #8b0000;
--red_40: #a1571b;
--red_50: #cd6f23;
--red_60: #df8943;
--red_110: #cf4222;
--red_120: #dd4e2d;
--red_130: #e06143;
--red_132: #e06e43;
--red_140: #e47359;
--red_150: #eb9885;
--red_160: #f2bdb1;
--green_05: #051e0a;
--green_10: #083412;
--green_20: #0c4a19;
--green_30: #106020;
--green_70: #2e8b57;
--green_90: #44c17b;
--green_95: #7dd4a4;
--green_100: #b6e7cc;
--orange: #ffa500;
--orange_30: #804a00;
--orange_40: #b36800;
--orange_50: #E66E19;
--orange_60: #eb8b47;
--orange_65: #ee9a5e;
--orange_80: #ff9500;
--orange_90: #ffe4b5;
--yellow: #ffff00;
--yellow_10: #95b300;
--yellow_20: #d5ff00;
--yellow_50: #808000;
--cyan_05: #0a1010;
--cyan_10: #142020;
--cyan_20: #1e3030;
--cyan_30: #284040;
--cyan_40: #325050;
--cyan_50: #3c6060;
--cyan_60: #467070;
--cyan_70: #508080;
--cyan_80: #5a9090;
--cyan_90: #659f9f;
--cyan_95: #75a9a9;
--cyan_100: #85b3b3;
--cyan_105: #95bdbd;
--cyan_110: #a5c7c7;
--purple_20: #442154;
--purple_30: #622f79;
--purple_48: #8E45B0;
--purple_58: #a565c3;
--purple_80: #ae79cb;
--purple_90: #b98bd2;
--purple_95: #c49dd9;
--purple_100: #cfafe0;
--purple_105: #dac1e7;
--purple_110: #e5d3ee;
--font_size_default: 25px;
--font_size_code: 15px;
--fg_default: var(--gray_80);
--fg_dark: var(--gray_68);
--fg_head: var(--blue_50);
--fg_code: var(--gray_95);
--fg_failed: var(--red_110);
--fg_assert: var(--red_120);
--fg_error: var(--red_130);;
--fg_exception: var(--red_132);;
--fg_warning: var(--red_140);
--fg_skipped: var(--red_150);
--fg_excluded: var(--red_160);
--fg_link: var(--blue_50);
--fg_link_visited: var(--orange_50);
--input_hover_color: var(--purple_48);
--padding_default: 3px;
--padding_5: 5px;
--padding_8: 8px;
--padding_10: 10px;
--margin_default: 5px;
--margin_3: 3px;
--margin_8: 8px;
--margin_10: 10px;
--margin_15: 15px;
--border_color: var(--gray_37);
--border_color_dark: var(--gray_21);
--button_border_color: var(--blue_50);
--border_radius_default: 6px;
--border_size_default: 0.5px;
--font_family_default: "Ericsson Hilda", Arial, Helvetica, Sans-serif, Courier, Courier-New;
--font_family_code: courier,courier-new;
--tr_height: 35px;
--tr_head_height:45px;
--search_box_height: 32px;
--button_font_size: 14px;
--button_fg: var(--fg_default);
--button_bg: var(--blue_50);
--button_border_radius: 3px;
--button_height: 32px;
--button_min_width: 60px;
--button_padding: 5px 12px;
--button_decoration: "none";
--input_hover_border_color: var(--purple_80);
--h1: 45px;
--h2: 35px;
--h3: 25px;
--h4: 18px;
--h5: 16px;
--h6: 14px;
--bg_sysbar: var(--gray_05);
--bg_bold: var(--gray_09);
--bg_default: var(--gray_14);
--bg_code: var(--gray_21);
--bg_passed:var(--green_30);
--bg_passed_hover:var(--green_20);
--bg_failed: var(--red_10);
--bg_failed_hover:var(--red_5);
--bg_assert: var(--red_20);
--bg_error: var(--red_30);;
--bg_warning: var(--red_40);
--bg_skipped: var(--red_50);
--bg_excluded: var(--red_60);
--fg_highlight_msg: #ccbd65;
--fg_head_msg: #8fcf96;
--fg_skip: #f6f511;
--fg_passed:#7cfc00;
--bg_highlight: #cdcd08;
--footbar_height: 35px;
--footbar_padding: 15px;
}
/* -------------------------------------------------------------------
SECTION: Body and Paragraph and Blocks
-------------------------------------------------------------------*/
* {
font-family:var(--font_family_code) !important;
font-size: var(--font_size_default) !important;
font-weight: 400 !important;
color: var(--fg_default);
background-color: var(--bg_default);
}
body{
color: var(--fg_default);
background-color: var(--bg_default);
width:100%;
font-family:var(--font_family_default);
}
/*JSON Lite Browser Extension - Opera*/
.K8y1qhm0 {
color: var(--blue_60);
}
.S8y1qhm0 {
color: var(--green_95);
}
/*JSON Viewer Browser Extension - Google Chrome*/
.cm-s-default .cm-operator, .cm-s-default .cm-property, .cm-s-default .cm-punctuation, .cm-s-default .cm-variable {
color: var(--blue_60);
}
.cm-s-default .cm-string, .cm-s-default .cm-string-2 {
color: var(--green_95);
}
.cm-s-default .cm-atom, .cm-s-default .cm-number {
color: var(--purple_100);
}
}