title: $:/themes/tiddlywiki/starlight/styles.tid
tags: [[$:/tags/stylesheet]]

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
\define border-radius(radius)
```
  -webkit-border-radius: $radius$;
     -moz-border-radius: $radius$;
          border-radius: $radius$;
```
\end
\define box-shadow(shadow)
```
  -webkit-box-shadow: $shadow$;
     -moz-box-shadow: $shadow$;
          box-shadow: $shadow$;
```
\end
\define filter(filter)
```
  -webkit-filter: $filter$;
     -moz-filter: $filter$;
          filter: $filter$;
```
\end
\define background-linear-gradient(gradient)
```
background-image: linear-gradient($gradient$);
background-image: -o-linear-gradient($gradient$);
background-image: -moz-linear-gradient($gradient$);
background-image: -webkit-linear-gradient($gradient$);
background-image: -ms-linear-gradient($gradient$);
```
\end
\define datauri(title)
<$macrocall $name="makedatauri" type={{$title$!!type}} text={{$title$}}/>
\end

/*
Placeholder for a more thorough refinement of Snow White
*/

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  src: local("Arvo"), url(<<datauri "$:/themes/tiddlywiki/starlight/arvo.woff">>) format("woff");
}

html body {
	font-family: "Arvo", "Times";
  background: url(<<datauri "$:/themes/tiddlywiki/starlight/ltbg.jpg">>);
}

.tw-page-controls svg {
  <<filter "drop-shadow(1px 1px 2px rgba(255,255,255,0.9))">>
}

/*
** Some rainbow icon colours
*/

svg.tw-image-new-button {
  fill: #5eb95e; /* Green */
}

svg.tw-image-options-button {
  fill: rgb(128, 88, 165); /* Purple */
}

svg.tw-image-save-button {
  fill: #0e90d2; /* Light blue */
}

.tw-tiddler-controls button svg.tw-image-info-button {
  fill: #0e90d2; /* Light blue */
}

.tw-tiddler-controls button svg.tw-image-edit-button {
  fill: rgb(243, 123, 29); /* Orange */
}

.tw-tiddler-controls button svg.tw-image-close-button {
  fill: #dd514c; /* Red */
}

.tw-tiddler-controls button svg.tw-image-delete-button {
  fill: #dd514c; /* Red */
}

.tw-tiddler-controls button svg.tw-image-cancel-button {
  fill: rgb(243, 123, 29); /* Orange */
}

.tw-tiddler-controls button svg.tw-image-done-button {
  fill: #5eb95e; /* Green */
}