Skip to content

https://rxjs.dev by doctorwhat7u

Write a review Install Get Stylus

Details

Authordoctorwhat7u

LicenseNo License

Categoryrxjs

Created

Updated

Size559 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A blue-gray theme to mute the brightness

Notes

Just a brute force find + replace casting color values to some css3 vars.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         https://rxjs.dev
@version      20211114.09.29
@namespace    userstyles.world/user/doctorwhat7u
@description  A blue-gray theme to mute the brightness
@author       doctorwhat7u
@license      No License
==/UserStyle== */

@-moz-document domain("rxjs.dev") {

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=block');

:root  {
    --initial50:#ecf1ff;
    --initial100: #e1e7f9;
    --initial200: #d5dcf3;
    --initial250:#d0d7f2;
    --initial300: #cad2ed;
    --initial350: #bfbfe2;
    --initial400: #bec7e6;
    --initial500: #b3bcdf;
    --initial600: #a7b3d8;
    --initial700: #9ca8d1;
    --initial800: #919fca;
    --initial900: #8393C3;
    --initial950: #7B8CCC;
    --initial1000: #687BB6;



    --darkBlueGrey50:#687bb6;
    --darkBlueGrey100: #5a6faf;
    --darkBlueGrey200: #5065a5;
    --darkBlueGrey250:#495d97;
    --darkBlueGrey300: #3c4c7c;
    --darkBlueGrey350: #35436E;
    --darkBlueGrey400: #2E3B60;
    --darkBlueGrey500: #283353;
    --darkBlueGrey600: #212A45;
    --darkBlueGrey700: #1B2237;
    --darkBlueGrey800: #141929;
    --darkBlueGrey900: #283353;
    --darkBlueGrey950: #212A45;
    --darkBlueGrey1000: #141929;


--dualSalmonBlue50:#53AAB2;
--dualSalmonBlue100: #61A0B5;
--dualSalmonBlue200:#7396B4;
--dualSalmonBlue300:#848AAE;
--dualSalmonBlue400:#937FA3;
--dualSalmonBlue500:#9E7394;
--dualSalmonBlue600:#A56984;
--dualSalmonBlue700:#A76172;
--dualSalmonBlue800:#A45B60;



--accent50:#d81b60;
--accent100: #ca2f67;
--accent200: #bd3b6d;
--accent300: #ae4474;
--accent400: #9d4c7c;
--accent500: #8c5182;
--accent600: #7a5689;
--accent700: #645a90;
--accent800: #495d97;
/*----------------------------------------------------------------

background- color: var(--accent50) accent50;
    background- color: var(--accent300);
 100;
    background-color: var(--accent200);

    background- color:  #d81b60;
    background-color: var(--accen t500);
    background-color:  rgba(255,205,210, .3)
    background-color:  rgba(244,67,54, .54)
    background-color: rgba(229,57,53, .3)
    background-color: rgba(216,27,96, .3)
    background-color: rgba(211,47,47, .2)


background-color:  var(--backgroundColor4);
background- color: #eceff1;
    background: var(--backgroundColor3);
background: var(--backgroundColor5);
background-color:  var(--backgroundContrast6);
background-color: var(--backgroundContrast7);

background: rgba(97,97,97, .9)

background: #323232;
background-color: var(--backgroundContrast2);
background-color: var(--darkBlueGrey500);
background-color: 000;
background-color: rgba(0,0 ,0, .87)
background-color: rgba(0, 0,0, .54);
background-color: rgba(0 ,0, 0, .38)
background-color: rgba(0,0, 0, .26)
background-color: rgba(0,0 ,0, .12)
border-color: rgba(  ,0,0, .7)

border-left: 5px solid var(--backgroundColor6);
border-bottom: 1px solid var(--backgroundColor5)
border-left: 5px solid #d81b60;
color:  #d81b60;


background- color: var(--accent50)
    background- color: #c21 85b
    background-color: var(--accent200);

    background- color:  var(--accent200);
    background-color: var(--ac cent500);
    background-color: rgba(255, 205,210, .3)
    background-color: rgba(244,67 ,54, .54)
    background-color: rgba(229,57, 53, .3)
    background-color: rgba(216,27, 96, .3)
    background-color: rgba(211,47, 47, .2)

color: var(--foreGround50);
color: var(--backgroundContrast7);
color: var(--darken1);
    color: var(--textColorContrast2);
color: hsla(0,0%,100%, .7);
border-bottom: 1px solid hsla(0,0%,43.1%, .5)
color: var(--textColorContrast2);
color: hsla(0,0%,100%, .4)
color: #b0b0b0;

backgroundground: var(--backgroundColor5);
background-color: hsla(0,0%,100%, .12)

--backgroundDark1: #333


*/
--darken1:rgba( 0,0,0, .87);
--darken2:rgba(0,0 ,0, .7);
--darken3:rgba(0,0 ,0, .54);
--darken4:rgba(0, 0,0, .38);
--darken5:rgba(0 ,0,0, .26);
--darken6:rgba(0,0, 0, .12);
  --darken7: rgba(0,0, 0, body .04);


/* --foreGround50:#333;
--foreGround100:rgba(0, 0,0, .87);
--foreGround200:rgba(0 ,0,0, .7);
--foreGround300:rgba(0,0 ,0, .54);
--foreGround400:rgba(0, 0,0, .38);
--foreGround500:rgba(0,0, 0, .26);
--foreGround600:rgba(0,0,0 , .12);
--foreGround700:#333;
--foreGround800:#333;
--foreGround900:#333; */


--foreGround50:var(--darkBlueGrey900);
--foreGround100:var(--darkBlueGrey800);
--foreGround200:var(--darkBlueGrey700);
--foreGround300:var(--darkBlueGrey600);
--foreGround400:var(--darkBlueGrey500);
--foreGround500:var(--darkBlueGrey400);
--foreGround600:var(--darkBlueGrey300);

--background0: var(--initial50);
--backgroundColorBase:  var(--initial950);
--backgroundColor1:  var(--initial600);
--backgroundColor2: var(--initial50);

--backgroundColor3: var(--darkBlueGrey600);

--backgroundColor4:  var(--darkBlueGrey500);
--backgroundColor5: var(--darkBlueGrey400);
--backgroundColor6: var(--darkBlueGrey300);
--backgroundColor7: var(--darkBlueGrey200);

--backgroundContrast1: var(--darkBlueGrey900);
--backgroundContrast2: var(--darkBlueGrey800);
--backgroundContrast3: var(--darkBlueGrey700);
--backgroundContrast4: var(--darkBlueGrey600);
--backgroundContrast5: var(--darkBlueGrey500);
--backgroundContrast6: var(--darkBlueGrey400);
--backgroundContrast7: var(--darkBlueGrey300);
--backgroundContrast8: var(--darkBlueGrey200);
--backgroundContrast9: var(--darkBlueGrey100);
--backgroundContrast10: var(--darkBlueGrey50);
/**
    /* --background0: #000;
--backgroundColorBase: #fff;
--backgroundColor1: #fafafa;
--backgroundColor2: #f1f1f1;

--backgroundColor3: #f5f5f5;

--backgroundColor4: #cfd8dc;
--backgroundColor5: #dbdbdb;
--backgroundColor6: #dfdfdf;

--backgroundContrast1: #000;
--backgroundContrast2:#333;
--backgroundContrast6: #62757f; */


--textColorContrast1:#fff;
--textColorContrast2:#fafafa;
--textColorContrast3:#f1f1f1;
--textColorContrast4:#f5f5f5;
--textColorContrast5:#cfd8dc;
--textColorContrast6:#dbdbdb;
--textColorContrast7:#cfd8dc;
--textColorContrast8:#dfdfdf;


--textColor1:#62757f;
--textColorContrast9:#62757f;

    --textColorPrimary: #212529;
    --textColorPrimaryDarker: #121417;
    --textColorPrimaryLighter: #363C45;

    --textColorLight: #5e6873;

    --textColorSecondary: #324375;
    --textColorSecondaryDarker: #2B3964;
    --textColorSecondaryLighter: #435A9D;


    --originalBackgroundAccent:#dd0031;

    --backgroundAccent:var(--originalBackgroundAccent);


/*   --backgroundOriginalFFF:var(--backgroundOriginal); */

    --backgroundOriginalFFF:var(--initial250);


/*     --fontFamilyPrimary: '  Roboto,Helvetica  Neue, sans-serif' */
        --fontFamilyPrimary: 'Source Sans Pro';

  --fontWeight300:300;
  --fontWeight400:400;
  --fontWeight500:500;
  --fontWeight600:600;
  --fontWeight700:700;
  --fontWeight900:900;

  --fontWeightLight: var(--fontWeight300);
  --fontWeightBook: var(--fontWeight400);
  --fontWeightSemi: var(--fontWeight600);
  --fontWeightBold: var(--fontWeight900);

  --wMd:rem;
  --wBase:0.94rem;
  --wSm:0.90rem;
  --wXS:0.88rem;

--headlineSizeLg:1.188rem;
--headLineSizeM2:1.818rem;
--headlineSizeMd:1.718rem;
  --headlineSizeBase:1.618rem;
  --headlineSizeSm:1.418rem;

  --textSizeXXXL:1.349rem;
  --textSizeXXL:1.22rem;
  --textSizeXL:1.18rem;
  --text-sizeLg: 1.12rem;
  --textSizeMed:1.06rem;
  --textSizeBook:0.98rem;
  --textSizeBase:0.94rem;
  --textSizeSm:0.90rem;
  --textSizeXS:var(--wXS);

}

/*

@font-face {
	font-family: "DinNextW1G";
  src: url('https://127.0.0.1:4700/assets/fonts/DINNextW1GLight/font.woff2') format('woff2'), url('https://127.0.0.1:4700/assets/fonts/DINNextW1GLight/font.woff') format('woff');
  font-weight:300;
  font-style: normal;
  font-kerning: normal;
  font-stretch: 100%;
  font-display: block;
}

@font-face  {
	font-family: "DinNextW1G";
  src: url('https://127.0.0.1:4700/assets/fonts/DINNextW1GRegular/font.woff2') format('woff2'), url('https://127.0.0.1:4700/assets/fonts//DINNextLTPro-Regular/font.woff') format('woff');
  font-weight:400;
  font-style: normal;
  font-kerning: auto;
  font-stretch: 100%;
  font-display: block;
}

@font-face {
  font-family: "DinNextW1G";
  src: url('https://127.0.0.1:4700/assets/fonts/DINNextW1GMedium/font.woff2') format('woff2'), url('https://127.0.0.1:4700/assets/fonts/DINNextW1GMedium/font.woff') format('woff');
  font-weight:500;
  font-style: normal;
  font-kerning: auto;
  font-stretch: 100%;
  font-display: block;
} */


body {
  font: var(--fontWeightBook) var(--fontWeightBase) var(--fontFamilyPrimary);
  font-feature-settings: "ordn", "pnum", "kern";
}

body .mode-stable .mat-badge-content {
    font-weight: var(--fontWeightBold);
    font-size: var(--textSizeBase);
    font-family: var(--fontFamilyPrimary);
}


body .mode-stable .mat-badge-small .mat-badge-content {
    font-size: var(--textSizeXS);
}


body .mode-stable .mat-badge-large .mat-badge-content {
    font-size: var(--textSizeLG);
}


body .mode-stable .mat-h1, body .mat-headline, body .mat-typography h1 {
    font: var(--fontWeightBook)   var(--headlineSizeBase)/ var(--headlineSizeMd2) var(--fontFamilyPrimary);
    margin: 0 0 var(--textSizeBase);
}


body .mode-stable .mat-h2, body .mat-title, body .mat-typography h2 {
    font-weight: var(--fontWeightSemi) 20px/32px var(--fontFamilyPrimary);
    margin: 0 0 var(--textSizeBase);
}


body .mode-stable .mat-h3, body .mat-subheading-2, body .mat-typography h3 {
    font: var(--fontWeightBook) 16px/ var(--headlineSizeMd2) var(--fontFamilyPrimary);
    margin: 0 0 var(--textSizeBase);
}


body .mode-stable .mat-h4, body .mat-subheading-1, body .mat-typography h4 {
    font: var(--fontWeightBook)   15px/24px var(--fontFamilyPrimary);
    margin: 0 0  var(--textSizeBase);
}


body .mode-stable .mat-h5, body .mat-typography h5 {
    font: var(--fontWeightBook)   11.62px/20px var(--fontFamilyPrimary);
    margin: 0 0  var(--textSizeSm);
}


body .mode-stable .mat-h6, body .mat-typography h6 {
    font: var(--fontWeightBook)   var(--textSizeXs)/var(--textSizeLg) var(--fontFamilyPr...

Reviews

No reviews yet.