Skip to content

Instantly share code, notes, and snippets.

@kaktos
Created Jul 29, 2021
Embed
What would you like to do?
preview css for mweb
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Avenir Next", "Helvetica Neue", Arial, "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;
/*font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;*/
font-size: 1.6rem;
color: #2c3f51;
-webkit-text-size-adjust: none;
/*-webkit-font-smoothing: antialiased;*/
/*-webkit-font-smoothing: subpixel-antialiased;*/
min-width: 200px;
max-width: 760px;
margin: 0 auto;
padding: 1rem;
line-height: 1.6;
}
/**
* links
*/
a {
color: #1980e6;
text-decoration: none;
}
/* Insert */
ins {
background: #ffa;
color: #333333;
}
/**
* Mark
* Note: Addresses styling not present in IE 8/9.
*/
mark {
background: #ffa;
color: #333333;
}
/**
* Abbreviation and definition
*/
abbr[title],
dfn[title] {
cursor: help;
}
dfn[title] {
border-bottom: 1px dotted;
font-style: normal;
}
/* Spacing for block elements */
p,
hr,
ul,
ol,
dl,
blockquote,
pre,
address,
fieldset,
figure {
margin: 0 0 1.6rem 0;
}
*+p,
*+hr,
*+ul,
*+ol,
*+dl,
*+blockquote,
*+pre,
*+address,
*+fieldset,
*+figure {
margin-top: 1.6rem;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 1.6rem 0;
font-weight: 600;
font-size: 100%;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') bottom left repeat-x;
}
h3 {
font-size: 1.5em;
}
*+h1,
*+h2,
*+h3,
*+h4,
*+h5,
*+h6 {
margin-top: 2rem;
}
/* Ordered and unordered lists */
ul,
ol {
padding-left: 2em;
}
/* Reset margin for nested lists */
ul>li>ul,
ul>li>ol,
ol>li>ol,
ol>li>ul {
margin: 1em 0;
}
/* Quotes */
blockquote {
font-family: Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif;
border-left-width: 10px;
border-left: 5px solid rgba(102, 128, 153, 0.075);
background-color: rgba(102, 128, 153, 0.05);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 15px 20px;
margin: 0 0 1.1em;
}
blockquote>:first-child {
margin-top: 0;
}
blockquote>:last-child {
margin-bottom: 0;
}
/* Inline and block code styles */
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, Consolas, "Courier New", "FontAwesome", monospace;
}
/* Inline code */
code {
padding: 2px 4px;
font-size: 1.3rem;
color: #c7254e;
background-color: #f8f8f8;
white-space: nowrap;
border-radius: 0;
}
/* Code block */
pre {
display: block;
padding: 1rem;
margin: 1rem 0;
font-size: 1.3rem;
line-height: 1.6;
word-break: break-all;
word-wrap: break-word;
color: #555555;
background-color: #f8f8f8;
border: 1px solid #dedede;
border-radius: 0;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
img {
max-width: 100%;
border: 0;
}
hr {
height: 0;
margin: 15px 0;
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(102, 128, 153, 0.1);
}
table {
font-size: 1.4rem;
border-spacing: 0;
border-collapse: collapse;
margin: 1.2em auto;
padding: 0;
display: block;
overflow-x: auto;
}
table td,
table th {
line-height: 1.5em;
padding: 0.4em 0.8em;
border: none;
border: 1px solid #ddd;
}
table th {
font-weight: bold;
text-align: left;
}
table th,
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
kbd {
background-color: #e7e7e7;
background-image: linear-gradient(#fefefe, #e7e7e7);
background-repeat: repeat-x;
border-radius: 2px;
border: 1px solid #cfcfcf;
color: #000;
padding: 3px 5px;
line-height: 10px;
display: inline-block;
}
.footnotes p {
font-size: 1.3rem;
margin: 0;
}
/* figure */
figure {
margin: 5px;
}
figure img {
display: block;
max-width: 100%;
height: auto;
padding: 2px;
border: 1px solid #eeeeee;
margin: 10px auto;
}
figure figcaption {
text-align: center;
font-size: 1.4rem;
margin-bottom: 15px;
color: #333333;
}
/* ================================================== special html */
p.tip,
p.success {
padding: 12px 24px 12px 30px;
margin: 2em 0;
border-left-width: 4px;
border-left-style: solid;
background-color: #f8f8f8;
position: relative;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
p.tip:before,
p.success:before {
position: absolute;
top: 14px;
left: -12px;
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
text-align: center;
line-height: 20px;
font-weight: bold;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
}
p.tip code,
p.success code {
background-color: #efefef;
}
p.tip em,
p.success em {
color: #34495e;
}
p.tip {
border-left-color: #f66;
}
p.tip:before {
content: "!";
background-color: #f66;
}
p.success {
border-left-color: #42b983;
}
p.success:before {
content: "\f00c";
font-family: FontAwesome;
background-color: #42b983;
}
/**
* prism.js Monokai theme
* @author Sam Clarke
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.4;
-moz-tab-size: 8;
-o-tab-size: 8;
tab-size: 8;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: .8em;
overflow: auto;
background: #272822;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
background: #272822;
}
.token.comment,
.token.blockquote,
.token.shebang.important,
.token.shebang {
color: #75715e;
}
.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.tag,
.token.deleted,
.token.selector,
.token.prolog,
.token.title .token.punctuation {
color: #f92672;
}
.token.property,
.token.entity,
.token.atrule,
.token.command,
.token.code {
color: #66d9ef;
}
.token.regex,
.token.atrule .token.property {
color: #fd971f;
}
.token.pseudo-element,
.token.id,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.function,
.token.namespace,
.token.inserted,
.token.symbol,
.token.url-reference .token.variable,
.token.attr-name {
color: #a6e22e;
}
.token.string,
.token.url,
.token.list,
.token.cdata,
.token.attr-value,
.token.attr-value a.token.url-link {
color: #e6db74;
}
.token.constant,
.token.hexcode,
.token.builtin,
.token.number,
.token.boolean {
color: #ae81ff;
}
.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
color: #f8f8f2;
}
.token.entity {
cursor: help;
}
.token.title,
.token.title .token.punctuation {
font-weight: bold;
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
/* YAML */
.language-yaml .token.atrule {
color: #f92672;
}
/* Bash */
.language-bash .token.function {
color: #f92672;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment