code-body: yes
created: 20150117152612000
modified: 20220617125128201
tags: $:/tags/Stylesheet
title: $:/editions/tw5.com/doc-styles
type: text/vnd.tiddlywiki

.doc-def {
	font-style: normal;
	font-weight: bold;
}

.doc-em {
	font-style: italic;
	font-variant: small-caps;
	text-decoration: none;
}

.doc-strong {
	color: <<colour alert-highlight>>;
	font-style: normal;
	font-weight: bold;
}

.doc-foreign {
	font-style: italic;
}

.doc-place {
	background-color: <<color background>>;
	border: none;
	color: <<color very-muted-foreground>>;
	font-style: normal;
	font-weight: bold;
}

.doc-button,
.doc-tab,
.doc-tag,
.doc-tiddler,
.doc-field,
.doc-value,
.doc-operator,
.doc-var,
.doc-widget,
.doc-attr,
.doc-param {
	background-color: <<color background>>;
	border: none;
	color: <<color very-muted-foreground>>;
	font-weight: bold;
	padding: 0;
}

a .doc-place,
a .doc-button,
a .doc-tab,
a .doc-tag,
a .doc-tiddler,
a .doc-field,
a .doc-value,
a .doc-operator,
a .doc-var,
a .doc-widget,
a .doc-attr {
	color: <<color tiddler-link-foreground>>;
}

.doc-button svg {
	height: 1em;
}

td svg {
	height: 1em;
}

.doc-key {
	color: <<color very-muted-foreground>>;
	font-weight: bold;
}

.doc-clink code {
	color: <<colour tiddler-link-foreground>>;
}

.doc-preamble {
	border: 2px solid <<colour code-border>>;
	color: <<colour very-muted-foreground>>;
	font-size: 90%;
	margin-left: 0;
	padding: 0.5em 0.7em;
}

.doc-note dt {
	color: <<colour very-muted-foreground>>;
}
.doc-note dd {
	border-left: 2px solid <<colour code-border>>;
	padding-left: 0.6em;
}

.doc-example {
	margin: 1em 0;
	padding: 0.8em 0;
}
.doc-example:hover {
	background-color: <<colour code-background>>;
}
.doc-example ul {
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0.2em;
}

.doc-example input[type=search] { 
  width: 95%;
}
.doc-example pre:first-child {
	margin-top: 0;
}
.doc-example-result {
	border-left: 5px solid <<colour blockquote-bar>>;
	border-right: 5px solid <<colour blockquote-bar>>;
	margin-left: 0;
	margin-right: 0;
	padding: 0 10px;
}
.doc-example-result ul {
	margin-left: 0;
	padding-left: 10px;
}
.doc-example-result ol {
	margin-left: 0;
	padding-left: 20px;
}

.doc-bad-example code, .doc-bad-example pre, table.doc-bad-example {
  background-color:#ffff80;
}

.doc-table th, .doc-table tr {
	vertical-align: top;
}
.doc-table th a {
	font-weight: bold;
}

tr.doc-table-subheading {
	height: 2em;
	vertical-align: middle;
}

.doc-table.before-tiddler-body {
	margin-top: 2em;
}

.doc-icon svg {
	width: 1em;
	height: 1em;
    vertical-align: middle;
}

.doc-icon-block {
	border-left: 2px solid <<colour code-border>>;
	margin-left: 3em;
	padding-left: 0.6em;
	position: relative;
}
.doc-block-icon {
	position: absolute;
	left: -3em;
	top: 0.2em;
}
.doc-block-icon .tc-image-tip {
	fill: <<colour primary>>;
}
.doc-block-icon .tc-image-warning {
	fill: <<colour alert-highlight>>;
}

a.doc-from-version.tc-tiddlylink {
    display: inline-block;
    border-radius: 1em;
	background: <<colour muted-foreground>>;
	color: <<colour background>>;
	fill: <<colour background>>;
    padding: 0 0.4em;
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.5;
    vertical-align: text-bottom;
}

a.doc-deprecated-version.tc-tiddlylink {
    display: inline-block;
    border-radius: 1em;
	background: red;
	color: <<colour background>>;
	fill: <<colour background>>;
    padding: 0 0.4em;
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.5;
    vertical-align: text-bottom;
}

.doc-deprecated-version svg,
.doc-from-version svg {
	width: 1em;
	height: 1em;
    vertical-align: text-bottom;
}

.doc-link-badge {
    text-decoration: none;
    background-color: #7eba4c;
    color: <<colour foreground>>;
    padding: 3px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75em;
}

.doc-link-badge:hover {
    text-decoration: underline;
}

.doc-tiddler-fields {
	background-color: <<colour code-background>>;
	border: 1px solid <<colour tiddler-border>>;
	border-radius: 4px;
    padding: 0 0.5em;
}

.doc-tiddler-fields h2 svg {
	height: 1em;
}


.doc-tiddler-fields table, 
.doc-tiddler-fields h2 {
	margin: 0.5em 0;
}

.doc-tiddler-fields table {
	background-color: <<colour tiddler-background>>;
}

@media screen {
	.doc-tiddler-fields {
		<<box-shadow "1px 1px 6px rgba(0, 0, 0, 0.6)">>
	}
}