mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-30 07:50:47 +00:00
e39d246317
Links are now draggable. Dragging outside the browser will drop the wiki text of the tiddler. Dragging to another TW5 browser window will drop the entire tiddler, including fields.
420 lines
7.3 KiB
Plaintext
420 lines
7.3 KiB
Plaintext
title: $:/core/styles/base
|
|
module-type: 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
|
|
|
|
{{$:/core/styles/reset}}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
}
|
|
|
|
body {
|
|
font-size: {{$:/core/styles/metrics##fontsize}};
|
|
line-height: {{$:/core/styles/metrics##lineheight}};
|
|
background-color: {{$:/core/styles/colourmappings##pagebackground}};
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
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 {
|
|
text-align: left;
|
|
padding: 0 0.5em 0 0.5em;
|
|
border-top: 1px solid #ddd;
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
|
|
a.tw-tiddlylink {
|
|
text-decoration: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
color: {{$:/core/styles/colourmappings##linkforeground}};
|
|
}
|
|
|
|
.sidebar-header a.tw-tiddlylink {
|
|
color: #69699B;
|
|
}
|
|
|
|
a.tw-tiddlylink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.tw-tiddlylink-resolves {
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.tw-tiddlylink-missing {
|
|
font-style: italic;
|
|
}
|
|
|
|
.tw-tiddler-dragger {
|
|
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>>
|
|
}
|
|
|
|
.btn-invisible {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.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 4px;
|
|
font-size: 11.844px;
|
|
font-weight: bold;
|
|
line-height: 14px;
|
|
color: #ffffff;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.44);
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
background-color: #999999;
|
|
border: 1px solid rgba(0,0,0,0.0);
|
|
<<border-radius 3px>>
|
|
<<box-shadow "inset 1px 1px 0 rgba(255,255,255,0.22)">>
|
|
}
|
|
|
|
.tw-tag-label:hover {
|
|
<<box-shadow "inset 0px 2em 0 rgba(0,0,0,0.22)">>
|
|
}
|
|
|
|
.edit-header {
|
|
}
|
|
|
|
.sidebar-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: {{$:/core/styles/metrics##sidebarwidth}};
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 5em 0em 2em 2em;
|
|
margin: 0;
|
|
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
|
|
}
|
|
|
|
.sidebar-header .tw-tab-set p {
|
|
margin-top: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
@media print {
|
|
.sidebar-header {
|
|
display: none;
|
|
}}
|
|
|
|
.tw-menu-list-item {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.story-river {
|
|
margin-left: {{$:/core/styles/metrics##sidebarwidth}};
|
|
padding: 2em 2em 2em 0;
|
|
}
|
|
|
|
@media print {
|
|
.story-river {
|
|
margin-left: 1em;
|
|
}}
|
|
|
|
.tw-tiddler-frame {
|
|
position: relative;
|
|
padding: 3em;
|
|
margin-bottom: 2em;
|
|
background-color: {{$:/core/styles/colourmappings##tiddlerbackground}};
|
|
max-width: 50em;
|
|
<<box-shadow "5px 5px 5px rgba(0, 0, 0, 0.1)">>
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 33px;
|
|
line-height: 40px;
|
|
color: #182955;
|
|
}
|
|
|
|
.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.5em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tw-tiddler-help {
|
|
color: #999;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.tw-tiddler-help a.tw-tiddlylink {
|
|
color: #888888;
|
|
}
|
|
|
|
.tw-drop-down {
|
|
min-width: 20em;
|
|
border: 1px solid {{$:/core/styles/colourmappings##dropdownborder}};
|
|
background-color: {{$:/core/styles/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: {{$:/core/styles/colourmappings##linkbackground}};
|
|
background-color: {{$:/core/styles/colourmappings##linkforeground}};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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">>;
|
|
}
|
|
|
|
.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 #aaa;
|
|
border-top: 1px solid #aaa;
|
|
border-right: 1px solid #aaa;
|
|
border-bottom: 1px solid #aaa;
|
|
margin-left: 0.25em;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.tw-tab-buttons button.tw-tab-selected {
|
|
background-color: #ececec;
|
|
border-bottom: 1px solid #ececec;
|
|
}
|
|
|
|
.tw-tab-divider {
|
|
border-top: 1px solid #aaa;
|
|
}
|
|
|
|
.tw-tab-content {
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.tw-search-results {
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.tw-edit-texteditor input, .tw-edit-texteditor textarea {
|
|
width: 100%;
|
|
padding: 3px 3px 3px 3px;
|
|
border: 1px solid #888;
|
|
line-height: 1.3em;
|
|
-webkit-appearance: none;
|
|
margin: 0.25em 0 0.25em 0;
|
|
}
|
|
|
|
.tw-edit-texteditor input {
|
|
background-color: #f8f8f8;
|
|
<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
|
|
}
|
|
|
|
.sidebar-header .tw-edit-texteditor input, .sidebar-header .tw-edit-texteditor textarea {
|
|
width: 80%;
|
|
}
|
|
|
|
canvas.tw-edit-bitmapeditor {
|
|
cursor: crosshair;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
img, canvas, embed {
|
|
max-width: 100%;
|
|
}
|
|
|
|
embed {
|
|
width: 100%;
|
|
height: 20em;
|
|
}
|
|
|
|
.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";
|
|
}
|