---
description: Peaceful, serene...
title: Importable pink theme (CSS).
tags: Theme
---

<!-----------------------------

{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}
{%hackmd @cimeesia/ByJDnGiCo %}

------------------------------>

<!----------------------------------------------------------

This is an importable pink theme made by me, Sia, a big fan
of HackMD. Feel free to import this Note by adding an above
line of code into your Note. Of course, without asking!
Just be aware you'll have to follow Creative Commons BY-SA.

[Sia's Pink Theme](https://hackmd.io/MKxk8IAqT420IAt2WXrr1Q)

By the way, thanks for @hackmd who made a very good guidance
that taught me how to import a Note from another Note.
[HackMD's Guide](https://hackmd.io/s/how-to-embed-note-tw).

---------------------------------------------------------->

<style>

/* fonts only for editor, just for myself. */
.ui-edit-area,
.CodeMirror{
font-size: 18px !important;
font-family: 'Cascadia Code Light', 'Fira Code', 'Microsoft JhengHei';
font-weight: lighter;
}

/* Universal Setup */
[data-inline-comment-id=user-selection-highlight]{
background: unset !important;
}
[data-inline-comment-id=user-selection-highlight].highlighted{
border: unset !important;
}
*::selection{
background: rgba(88, 237, 217, 0.3) !important;
}

/* .ui-view-area only work in edit mode. */
.ui-view-area{
background-color: #ffeef3 !important;
color: #5F586C !important;
}

/* Publish mode */
html, body, .ui-content {
background-color: #ffeef3 !important;
color: #5F586C !important;
}
/* hide the top nav that shows title */
#meta-title-tags{
display: none !important;
}
/* hide Edit button and whole Comment system. */
.ui-edit.btn,
.ui-comment-app{
display: none !important;
}
/* remove right-above button's background. */
.community-button:hover,
.community-button:focus{ background: unset !important; }

/* Link */
a:any-link{ color: #10A097; text-decoration: none; }
a:hover{ color: #F12C8C; text-decoration: underline hotpink solid 1px; }

/* Header */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6{ border: unset !important; }

.markdown-body h1{ font-size: 36px; font-weight: 800; color: rgba(230, 117, 149, 1) !important; letter-spacing: 3px; }
.markdown-body h2{ font-size: 30px; font-weight: 720; color: rgba(200, 107, 144, 1) !important; letter-spacing: 2px; }
.markdown-body h3{ font-size: 25px; font-weight: 640; color: rgba(170, 97, 139, 0.95) !important; letter-spacing: 1px; }
.markdown-body h4{ font-size: 21px; font-weight: 560; color: rgba(140, 87, 134, 0.90) !important; }
.markdown-body h5{ font-size: 18px; font-weight: 480; color: rgba(110, 77, 129, 0.85) !important; }
.markdown-body h6{ font-size: 16px; font-weight: 400; color: rgba( 80, 67, 124, 0.80) !important; }

/* Anchor. octicon-link */
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link{ border: unset !important; }

/* <img>'s background */
.markdown-body img{ background: transparent; }

/* left-side nav */
.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover{ border: unset !important; color: #D79AFC; }

.ui-toc-dropdown .nav>.active>a,
.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a{ border-left: rgba(80, 249, 153, 0.7) solid 2px !important; color: #D79AFC; }

.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus,
.expand-toggle:hover,
.expand-toggle:focus{ color: #D79AFC; }

/* Alert Section */
.alert-success{ color: #7D6876 !important; background: rgba(170, 230, 143, 0.4) !important; border: unset !important;}
.alert-info{ color: #7D6876 !important; background: rgba(103, 183, 223, 0.4) !important; border: unset !important;}
.alert-warning{ color: #7D6876 !important; background: rgba(227, 212, 141, 0.4) !important; border: unset !important;}
.alert-danger{ color: #7D6876 !important; background: rgba(248, 173, 173, 0.4) !important; border: unset !important;}

/* Quoted Message Block */
.markdown-body blockquote{
color: #5FA38B;
}
.markdown-body blockquote p span{
font-size: 1.3em !important;
}
.markdown-body blockquote p>small{
margin: 6px auto 3px auto !important;
}

/* Code Block */
@supports selector(:has(*)){
pre:has(>code){
color: #ccc !important;
background: #20232f !important;
}
code{
line-height: 1.4 !important;
}

.hljs span[class~="comment"]{ color: #6d7a72 !important; }
.hljs span[class~="constant"]{ color: #eba4ac !important; }
.hljs span[class~="function"]{ color: #ffc85b !important; }
.hljs span[class~="keyword"]{ color: #dcbff2 !important; }
.hljs span[class~="number"]{ color: #ff38a2 !important; }
.hljs span[class~="parameter"]{ color: #9cd162 !important; }
.hljs span[class~="punctuation"]{ color: #d971d3 !important; }
.hljs span[class~="string"]{ color: #fae8b6 !important; }
.hljs span[class~="string-property"]{ color: #fae8b6 !important; }
.hljs span[class~="property"]{ color: unset !important; }
.hljs span[class~="literal-property"]{ color: #ccc !important; }
.hljs span[class~="operator"]{ color: #ccc !important; background: unset !important; }
}

/* Table */
.markdown-body table tr,
.markdown-body table th,
.markdown-body table td{
border: solid 1px #aaa;
background: unset !important; }
.markdown-body table tr:hover{
background: rgba(109, 179, 217, 0.2) !important; }

/* Promotions in the bottom. #notes-recommendations */
/* Hide those weird bottom-border */
.border-b{ border: unset !important; }
/* Unsetting illegible font color. */
.text-gray-850{ color: unset !important; }

</style>

<!--------------------------------------------------------------------------------------------------

.&#///////////(@@
*@(////& .@////////////.
.&//////(% (///////// *,
#///////& %///////....%
#//////, .... (///(/,... ,, /
#////% /@%((((((//////////////#(,.....% /.,\
(#//& *%((((((###(////////////&///@//......% /,...,*
%///((//((/////////(///////&//&///#/.....@ /,....../
&///(////#////////////////////#((/(((/#//*...# *...*
(/////////////////////////////((///////((///////&/% \*/
%////(///////////////////////(//////////////@/////%/*#
(////////////#///////////////////////////////&////@(*.../
#///////////////////////////////////(////////#///@*..*....*
(////(////////(/////////////////(///(//#//*///////////*...,@
%///#/,/////(//////./,//////////(/////%//(/////////////////%
///((*/////#///#////////////////(##((((%%#%//////////(//(///*
,.////////#////#///%/////////////**//////(///////////#//%(//&
/..(/////(/((/%,,//&(//////////(% ,///////(/(//////////%(/// &,*,
#.*//////%#//(.. *@//,%////////(* (/////##/////////#////# ..%
%/(//////#(/( #/ ,.%//////( .%%(%#((##((/#//////#/(//////& (..(
%(////(///%/(/(&%%((%%(%.*.#/////( .( .....,,(//(///////#////////##,,,,/%./%
%(////#////##% (...., #%#%#(///. (...* .* .(/(////(/////////////////@
#//##///////#( ,... *, . ,(%///# /...... /,*(////%%&&%#//////%&
%/#((((///////%,/ ,...//. *,.%(. . ,((#*.......#/////%(((((#(((
(//%(((##(///////%,,&.../(/... . .........,...&///(///#(////#(&
%///(/////#////&&///(*,,%...,,. ...... %./((((//@((((&&////((#
///////////%(//&(((((@////##,%... ((%#((//#//((((((#(/////((%
%(//////(@///#((#(((((#////#((& ..**. #((((%(///(//%((#//////////(//#(
,%((((((////////(((#((((&///%((((((&. .##(((#(((@///#/%(((##////////////(////%
((((#//////////(%(((#((((((%%((#(#(((((((*((**,//,/((((((((((///////(#//%((#/////////(/////##/&
(%////////////((((((((((((((#(((((((((((@,,,,,,,,,/(#((((##(%///////////@((%/(//////////(////&,*%/&
//////////////(/((((((#(((((%/(((#((((((,,,,,,,,,,,%(((((((&/////(#/////#((((%((///////(((/(///#*,,&
///////////*&((/(((((((((#((#//(((%((((*,,,,,,,,,,,,*(&((&///////(/#/////#((#(((#@/&,(/#(((///((///%
////(/////#/(#//(((((((((#((#/%(((((%%*,&(,,,,,,,,,,,,,&/(//////&(#/(/////#((#(((((&/*%(((((*//#,,#/
(//////%( ((#////(((((((((%&(#@&&&,,,,&/&,,,,,,,,,,%#(////////%(#((%/(////&(##(((((//((((((&(//#
%///(& &(//////#((((((((&%&&&&&*,,,,#//%,,,/&///////////(&&&&&(((((/&(//(#((##//%((#(((((,//#
/(& #////%//(%&(,,,%/,#&&&&@,,,,*,/(/////////////#,.&&&&&& .#* /&#((&&%#&##(((((#((((#///#
( (//%/& #,,,,,&/*,,&&&&&*.. .... &&&&&&. . #* ( ((((((%%((((((((((#,*&(
/. %///&*,*@///,*.@&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&* &, (((#((%//////////////
/ (///////&** ,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&% #. %((%(%#(#((((((%((##

--------------------------------------------------------------------------------------------------->