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 7e82eb13eb Fix problem with stray drag image showing
Changes to the main layout CSS a few weeks ago meant that the drag
image element was visible at the top left corner of the window.
Astoundingly, the fix is to cover it with another div with the same
background colour as the page….
2013-08-08 21:46:38 +01:00

864 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: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
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: 1em;
margin: 0 0 1em;
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: 100%;
}
table th, table td {
padding: 0 0.5em 0 0.5em;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.tw-tiddler-frame img, .tw-tiddler-frame svg, .tw-tiddler-frame canvas, .tw-tiddler-frame embed {
max-width: 100%;
}
embed {
width: 100%;
height: 20em;
}
/*
** Links
*/
a.tw-tiddlylink {
text-decoration: none;
font-style: normal;
font-weight: normal;
color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
}
.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 {
font-style: normal;
}
a.tw-tiddlylink-missing {
font-style: italic;
}
a.tw-tiddlylink-external {
font-weight: bold;
}
/*
** 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: 0.5em;
}
.tw-tags-wrapper {
margin: 0.25em 0 1em 0;
}
.tw-missing-tiddler-label {
font-style: italic;
font-weight: normal;
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
line-height: 14px;
white-space: nowrap;
vertical-align: baseline;
border: 1px solid rgba(0,0,0,0.2);
<<border-radius 3px>>
<<box-shadow "inset 1px 1px 0 rgba(255,255,255,0.5)">>
}
.tw-tag-label {
display: inline-block;
padding: 2px 9px;
font-size: 11.844px;
font-weight: 300;
line-height: 14px;
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: 0.2em;
margin-bottom: 0.2em;
}
.tw-search a svg {
height: 0.75em;
}
.tw-search-results {
padding-top: 1em;
}
.tw-page-controls {
margin-top: 1em;
}
.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-open-tiddler-list {
<<transform-origin "0% 0%">>
}
.tw-menu-list-subitem {
padding-left: 0.5em;
}
@media (max-width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}}) {
.sidebar-header {
padding: 1em;
}
.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 -3em;
padding: 5em 0 2em 3em;
}
.story-river {
position: absolute;
left: {{$:/themes/tiddlywiki/snowwhite/metrics##storyleft}};
top: {{$:/themes/tiddlywiki/snowwhite/metrics##storytop}};
width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}};
padding: 3em;
}
}
@media print {
.sidebar-header {
display: none;
}
.story-river {
margin-left: 1em;
}
}
/*
** Tiddler styles
*/
.tw-tiddler-frame {
margin-bottom: 2em;
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##tiddlerbackground}};
}
.tw-tiddler-info {
overflow: hidden;
padding: 1em 3em 1em 3em;
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)">>
}
@media screen {
.tw-tiddler-frame {
<<box-shadow "5px 5px 5px rgba(0, 0, 0, 0.1)">>
}
}
@media (max-width: 55em) {
.tw-tiddler-frame {
padding: 1em 1em 1em 1em;
}
.tw-tiddler-info {
margin: 0 -1em 0 -1em;
}
}
@media (min-width: 55em) {
.tw-tiddler-frame {
padding: 2em 3em 3em 3em;
}
.tw-tiddler-info {
margin: 0 -3em 0 -3em;
}
}
.title {
font-weight: 300;
font-size: 33px;
line-height: 40px;
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 0.33em;
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: 1em;
}
.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: 0.25em 0 0.25em 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: 1em 0 1em 0;
}
.tw-tag-editor-label {
display: inline-block;
margin-right: 0.5em;
}
.tw-remove-tag-button {
padding-left: 4px;
}
.tw-tags-autocomplete-wrapper {
position: relative;
}
.tw-tags-autocomplete {
position: absolute;
min-width: 20em;
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: 0.25em 0 0 0;
white-space: nowrap;
z-index: 1000;
}
.tw-tags-autocomplete a {
display: block;
padding: 0.25em 1em 0.25em 1em;
}
.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-fieldlist > div:nth-child(odd) {
background-color: #f0f4f0;
}
.tw-fieldlist > 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: 20em;
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.5em 0em 0.5em 0em;
margin: 0.25em 0 0 0;
white-space: nowrap;
}
.tw-drop-down a {
display: block;
padding: 0em 1em 0em 1em;
}
.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 {
position: fixed;
top: 50%;
left: 50%;
z-index: 1100;
width: 560px;
margin: -250px 0 0 -280px;
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)">>
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
overflow-y: auto;
max-height: 400px;
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: 1em;
right: 1em;
z-index: 1000;
max-width: 20em;
padding: 0em 1em 0em 1em;
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: 0.25em;
margin-right: 0.25em;
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: 1em;
}
.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: 55em) {
.tw-more-sidebar.tw-tab-set {
margin-left: -1em;
}
}
.tw-more-sidebar .tw-tab-buttons {
display: inline-block;
vertical-align: top;
text-align: right;
padding-top: 0em;
padding-left: 0em;
}
.tw-more-sidebar .tw-tab-content {
display: inline-block;
vertical-align: top;
padding-top: 0em;
padding-left: 1em;
}
.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: 0.5em 0.5em 0.5em 0.5em;
padding: 1em 1em 1em 1em;
border: 3px solid #DBB727;
background-color: rgb(250, 210, 50);
}
.tw-static-alert {
padding: 0em 0.2em 0.2em 3em;
color: #AAA;
}
/*
** Grids
*/
.tw-grid-frame td {
width: 1em;
height: 1em;
}