1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-01 16:30:46 +00:00
TiddlyWiki5/themes/tiddlywiki/snowwhite/base.tid
Jeremy Ruston 7f3000aaae Update the Snow White theme to use px for dimensions instead of em
The old behaviour meant that resizing the base font resized every page
element in proportion. The new behaviour makes the text resize within a
fixed layout, so that one can alter the number of characters displayed
on each line of a tiddler. The old behaviour can usually be emulated by
using the browser page zoom tool.
2013-09-15 11:01:35 +01:00

916 lines
15 KiB
Plaintext

title: $:/themes/tiddlywiki/snowwhite/base
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 transition(transition)
```
-webkit-transition: $transition$;
-moz-transition: $transition$;
transition: $transition$;
```
\end
\define transform-origin(origin)
```
-webkit-transform-origin: $origin$;
-moz-transform-origin: $origin$;
transform-origin: $origin$;
```
\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
/*
** Start with the normalize CSS reset, and then belay some of its effects
*/
{{$:/themes/tiddlywiki/snowwhite/reset}}
*, input[type="search"] {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*
** Basic element styles
*/
html {
font-family: {{$:/themes/tiddlywiki/snowwhite/settings##fontfamily}};
}
body {
font-size: {{$:/themes/tiddlywiki/snowwhite/metrics##fontsize}};
line-height: {{$:/themes/tiddlywiki/snowwhite/metrics##lineheight}};
color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##foreground}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}};
word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 300;
}
code, pre {
padding: 0 3px 2px;
<<border-radius 3px>>
}
code {
padding: 1px 2px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
pre {
display: block;
padding: 14px;
margin: 0 0 14px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
table {
border: 1px solid #ddd;
width: auto;
max-width: 100%;
caption-side: bottom;
}
table th, table td {
padding: 0 7px 0 7px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
table thead tr td, table th {
background-color: #f0f0f0;
font-weight: bold;
}
table tfoot tr td {
background-color: #a8a8a8;
}
.tw-tiddler-frame img, .tw-tiddler-frame svg, .tw-tiddler-frame canvas, .tw-tiddler-frame embed {
max-width: 100%;
}
embed {
max-width: 100%;
max-height: 280px;
}
/*
** Links
*/
a.tw-tiddlylink {
text-decoration: none;
font-weight: normal;
color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */
}
.tw-sidebar-lists a.tw-tiddlylink {
color: #999;
}
.tw-sidebar-lists a.tw-tiddlylink:hover {
color: #444;
}
a.tw-tiddlylink:hover {
text-decoration: underline;
}
a.tw-tiddlylink-resolves {
}
a.tw-tiddlylink-shadow {
font-weight: bold;
}
a.tw-tiddlylink-shadow.tw-tiddlylink-resolves {
font-weight: normal;
}
a.tw-tiddlylink-missing {
font-style: italic;
}
a.tw-tiddlylink-external {
text-decoration: underline;
}
/*
** Drag and drop styles
*/
.tw-tiddler-dragger {
position: relative;
z-index: -10000;
}
.tw-tiddler-dragger-inner {
position: absolute;
display: inline-block;
padding: 8px 20px;
font-size: 16.9px;
font-weight: bold;
line-height: 20px;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
white-space: nowrap;
vertical-align: baseline;
background-color: #000;
<<border-radius 20px>>
}
.tw-tiddler-dragger-cover {
position: absolute;
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}};
}
.tw-import {
position: relative;
}
.tw-drop-zone-fullscreen.tw-dragover:before {
z-index: 10000;
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(0,200,0,0.7);
text-align: center;
content: "Drop here";
}
.tw-drop-zone.tw-dragover:before {
z-index: 10000;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0,200,0,0.7);
text-align: center;
content: "Drop here";
}
/*
** Buttons
*/
.btn-invisible {
padding: 0;
margin: 0;
background: none;
border: none;
}
.btn-mini {
color: #e0e0e0;
}
.btn-mini:hover {
color: #444;
}
/*
** Tags and missing tiddlers
*/
.tw-tag-list-item {
display: inline-block;
margin-right: 7px;
}
.tw-tags-wrapper {
margin: 4px 0 14px 0;
}
.tw-missing-tiddler-label {
font-style: italic;
font-weight: normal;
display: inline-block;
font-size: 11.844px;
line-height: 14px;
white-space: nowrap;
vertical-align: baseline;
}
.tw-tag-label {
display: inline-block;
padding: 2px 9px;
font-size: 0.9em;
font-weight: 300;
line-height: 1.2em;
color: #fff;
white-space: nowrap;
vertical-align: baseline;
background-color: #D5AD34;
<<border-radius 8px>>
}
.tw-tag-label svg {
height: 1em;
width: 1em;
fill: #fff;
}
/*
** Page layout
*/
.sidebar-header {
color: #acacac;
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
}
.sidebar-header .title a.tw-tiddlylink-resolves {
font-weight: 300;
}
.sidebar-header .tw-sidebar-lists p {
margin-top: 3px;
margin-bottom: 3px;
}
.tw-search a svg {
height: 0.75em;
}
.tw-search-results {
padding-top: 14px;
}
.tw-page-controls {
margin-top: 14px;
}
.tw-page-controls a.tw-tiddlylink:hover {
text-decoration: none;
}
.tw-page-controls svg {
height: 1.5em;
min-width: 1px;
padding-right: 0.5em;
fill: #fff;
<<filter "drop-shadow(1px 1px 2px rgba(0,0,0,0.15))">>
<<transition "fill 150ms ease-in-out">>
}
.tw-page-controls svg:hover {
fill: #000;
<<filter "drop-shadow(1px 1px 2px rgba(255,255,255,0.9))">>
}
.tw-menu-list-item {
white-space: nowrap;
}
.tw-menu-list-count {
font-weight: bold;
}
.tw-open-tiddler-list {
<<transform-origin "0% 0%">>
}
.tw-menu-list-subitem {
padding-left: 7px;
}
@media (max-width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}}) {
.sidebar-header {
padding: 14px;
}
.story-river {
padding: 0;
}
}
@media (min-width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}}) {
.sidebar-header {
position: fixed;
top: {{$:/themes/tiddlywiki/snowwhite/metrics##storytop}};
left: {{$:/themes/tiddlywiki/snowwhite/metrics##storyright}};
bottom: 0;
right: 0;
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 0 -42px;
padding: 84px 0 28px 42px;
}
.story-river {
position: absolute;
left: {{$:/themes/tiddlywiki/snowwhite/metrics##storyleft}};
top: {{$:/themes/tiddlywiki/snowwhite/metrics##storytop}};
width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}};
padding: 42px;
}
}
@media print {
.sidebar-header {
display: none;
}
.story-river {
margin-left: 14px;
}
}
/*
** Tiddler styles
*/
.tw-tiddler-frame {
margin-bottom: 28px;
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##tiddlerbackground}};
}
.tw-tiddler-info {
overflow: hidden;
padding: 14px 42px 14px 42px;
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
<<box-shadow "inset 1px 2px 3px rgba(0,0,0,0.1)">>
}
.tw-view-field-name {
vertical-align: top;
display: inline-block;
width: 15%;
text-align: right;
}
.tw-view-field-value {
vertical-align: top;
display: inline-block;
width: 75%;
}
@media screen {
.tw-tiddler-frame {
<<box-shadow "5px 5px 5px rgba(0, 0, 0, 0.1)">>
}
}
@media (max-width: 77px) {
.tw-tiddler-frame {
padding: 14px 14px 14px 14px;
}
.tw-tiddler-info {
margin: 0 -14px 0 -14px;
}
}
@media (min-width: 77px) {
.tw-tiddler-frame {
padding: 28px 42px 42px 42px;
}
.tw-tiddler-info {
margin: 0 -42px 0 -42px;
}
}
.title {
font-weight: 300;
font-size: 2.35em;
line-height: 1.2em;
color: #182955;
}
.title img {
height: 1em;
}
.tw-subtitle {
font-size: 0.9em;
color: #c0c0c0;
font-weight: 300;
}
.tw-tiddler-missing .title {
font-style: italic;
font-weight: normal;
}
.tw-tiddler-frame .tw-tiddler-controls {
float: right;
}
.tw-tiddler-controls .tw-button {
margin: 0 0 0 5px;
vertical-align: baseline;
}
.tw-tiddler-controls svg {
height: 0.75em;
fill: #ccc;
<<transition "fill 150ms ease-in-out">>
}
.tw-tiddler-controls svg:hover {
fill: #888;
}
@media print {
.tw-tiddler-controls {
display: none;
}
}
.tw-tiddler-help { /* Help prompts within tiddler template */
color: #999;
margin-top: 14px;
}
.tw-tiddler-help a.tw-tiddlylink {
color: #888888;
}
.tw-tiddler-frame .tw-edit-texteditor input, .tw-tiddler-frame .tw-edit-texteditor textarea {
width: 100%;
padding: 3px 3px 3px 3px;
border: 1px solid #ccc;
line-height: 1.3em;
-webkit-appearance: none;
margin: 4px 0 4px 0;
}
.tw-tiddler-frame .tw-edit-texteditor input {
background-color: #f8f8f8;
<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
}
canvas.tw-edit-bitmapeditor {
border: 3px dashed #F0F0F0;
cursor: crosshair;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.tw-edit-bitmapeditor-width {
display: block;
}
.tw-edit-bitmapeditor-height {
display: block;
}
/*
** Tiddler edit mode
*/
.tw-edit-tags-list {
margin: 14px 0 14px 0;
}
.tw-tag-editor-label {
display: inline-block;
margin-right: 7px;
}
.tw-remove-tag-button {
padding-left: 4px;
}
.tw-tags-autocomplete-wrapper {
position: relative;
}
.tw-tags-autocomplete {
position: absolute;
min-width: 280px;
border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
<<border-radius 4px>>
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
padding: 0 0 0 0;
margin: 4px 0 0 0;
white-space: nowrap;
z-index: 1000;
}
.tw-tags-autocomplete a {
display: block;
padding: 4px 14px 4px 14px;
}
.tw-tags-autocomplete a:hover {
color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
text-decoration: none;
}
.tw-add-tag {
color: #999;
}
.tw-add-tag svg {
height: 1em;
width: 1em;
fill: #999;
}
.tw-add-tag-name {
display: inline-block;
width: 15%;
}
.tw-tiddler-preview {
overflow: auto;
}
.tw-tiddler-preview-preview {
float: right;
width: 48%;
border: 1px solid #ccc;
margin: 4px 3px 3px 3px;
padding: 3px 3px 3px 3px;
}
.tw-tiddler-preview-edit {
width: 48%;
}
.tw-edit-fields > .tw-list-frame > div:nth-child(odd) {
background-color: #f0f4f0;
}
.tw-edit-fields > .tw-list-frame > div:nth-child(even) {
background-color: #e0e8e0;
}
.tw-edit-field-name {
display: inline-block;
width: 15%;
text-align: right;
}
.tw-edit-field-value {
display: inline-block;
width: 75%;
}
.tw-edit-field-remove {
display: inline-block;
width: 5%;
}
.tw-edit-field-remove svg {
height: 1em;
width: 1em;
fill: #888;
vertical-align: middle;
}
.tw-edit-field-add {
color: #999;
}
.tw-edit-field-add-name {
display: inline-block;
width: 15%;
}
.tw-edit-field-add-button {
display: inline-block;
width: 10%;
}
/*
** Dropdowns
*/
.tw-drop-down {
min-width: 280px;
border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
<<border-radius 4px>>
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
padding: 7px 0 7px 0;
margin: 4px 0 0 0;
white-space: nowrap;
}
.tw-drop-down a {
display: block;
padding: 0 14px 0 14px;
}
.tw-drop-down a:hover {
color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
text-decoration: none;
}
.tw-drop-down .tw-tab-buttons button {
background-color: #ececec;
}
.tw-drop-down .tw-tab-buttons button.tw-tab-selected {
background-color: #fff;
border-bottom: 1px solid #fff;
}
.tw-drop-down .tw-tab-contents a {
padding: 0 0.5em 0 0.5em;
}
/*
** Modals
*/
.tw-modal-displayed {
-webkit-filter: blur(4px);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background-color: #000;
}
.modal {
z-index: 1100;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
<<border-radius 6px>>
<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
}
@media (max-width: 55em) {
.modal {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
}
.modal-body {
overflow-y: auto;
max-height: 400px;
}
}
@media (min-width: 55em) {
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 560px;
margin: -250px 0 0 -280px;
}
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
<<border-radius "0 0 6px 6px">>
<<box-shadow "inset 0 1px 0 #fff">>;
}
/*
** Notifications
*/
.tw-notification {
position: fixed;
top: 14px;
right: 14px;
z-index: 1000;
max-width: 280px;
padding: 0 14px 0 14px;
background-color: #ffd;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
<<border-radius 6px>>
<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
}
/*
** Tabs
*/
.tw-tab-set {
}
.tw-tab-buttons {
font-size: 0.85em;
line-height: 100%;
padding-top: 1em;
margin-bottom: -1px;
}
.tw-tab-buttons button {
color: #666;
background-color: #ccc;
border-left: 1px solid #bbb;
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
margin-left: 4px;
margin-right: 4px;
font-weight: 300;
}
.tw-tab-buttons button.tw-tab-selected {
background-color: #ececec;
border-bottom: 1px solid #ececec;
}
.tw-tab-divider {
border-top: 1px solid #bbb;
}
.tw-tab-content {
padding-top: 14px;
}
.tw-sidebar-tab-divider.tw-tab-divider {
border-top: none;
height: 1px;
<<background-linear-gradient "left, rgb(176,176,176) 0%, rgb(236,236,236) 250px">>
}
.tw-more-sidebar.tw-tab-set {
white-space: nowrap;
}
@media (min-width: 770px) {
.tw-more-sidebar.tw-tab-set {
margin-left: -14px;
}
}
.tw-more-sidebar .tw-tab-buttons {
display: inline-block;
vertical-align: top;
text-align: right;
padding-top: 0;
padding-left: 0;
}
.tw-more-sidebar .tw-tab-content {
display: inline-block;
vertical-align: top;
padding-top: 0;
padding-left: 14px;
}
.tw-more-sidebar .tw-tab-buttons button {
background-color: #ececec;
<<background-linear-gradient "left, rgb(236,236,236) 0%, rgb(224,224,224) 100%">>
border-top: none;
border-left: none;
border-bottom: none;
border-right: 1px solid #ccc;
}
.tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {
background-color: #fff;
<<background-linear-gradient "left, rgb(236,236,236) 0%, rgb(255,255,255) 100%">>
border: none;
}
/*
** Alerts
*/
.tw-alert {
<<border-radius 6px>>
margin: 7px 7px 7px 7px;
padding: 14px 14px 14px 14px;
border: 3px solid #DBB727;
background-color: rgb(250, 210, 50);
}
.tw-static-alert {
padding: 0 2px 2px 42px;
color: #AAA;
}
/*
** Grids
*/
.tw-grid-frame td {
width: 1em;
height: 1em;
}