Customize JSON Appearance in Browser
JSON by wenijinew
Details
Authorwenijinew
LicenseMIT
Categoryuserstyles, json
Created
Updated
Size5.7 kB
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);
}
}