mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-07-05 19:53:17 +00:00
136ecee41e
This allows us to style the images with CSS, which means we finally get hover effects on our toolbar buttons
602 lines
9.9 KiB
Plaintext
602 lines
9.9 KiB
Plaintext
title: $:/core/styles/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 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
|
|
*/
|
|
|
|
{{$:/core/styles/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: {{$:/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 {
|
|
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: {{$:/core/styles/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;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.tw-tiddlylink-missing {
|
|
font-style: italic;
|
|
}
|
|
|
|
/*
|
|
** Drag and drop styles
|
|
*/
|
|
|
|
.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>>
|
|
}
|
|
|
|
.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-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 6px;
|
|
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-radius 5px>>
|
|
}
|
|
|
|
/*
|
|
** Page layout
|
|
*/
|
|
|
|
.sidebar-header {
|
|
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
|
|
}
|
|
|
|
.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 svg {
|
|
height: 1.5em;
|
|
min-width: 1px;
|
|
padding-right: 0.5em;
|
|
fill: #fff;
|
|
}
|
|
|
|
.tw-page-controls svg:hover {
|
|
fill: #000;
|
|
}
|
|
|
|
.tw-menu-list-item {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 55em) {
|
|
.sidebar-header {
|
|
padding: 1em;
|
|
}
|
|
|
|
.story-river {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 55em) {
|
|
.sidebar-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 55em;
|
|
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 {
|
|
width: 55em;
|
|
padding: 3em;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.sidebar-header {
|
|
display: none;
|
|
}
|
|
|
|
.story-river {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
** Tiddler styles
|
|
*/
|
|
|
|
.tw-tiddler-frame {
|
|
position: relative;
|
|
margin-bottom: 2em;
|
|
background-color: {{$:/core/styles/colourmappings##tiddlerbackground}};
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 55em) {
|
|
.tw-tiddler-frame {
|
|
padding: 2em 3em 3em 3em;
|
|
}
|
|
}
|
|
|
|
.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.33em;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tw-tiddler-controls .tw-button svg {
|
|
height: 0.75em;
|
|
fill: #ccc;
|
|
}
|
|
|
|
.tw-tiddler-controls .tw-button 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 #888;
|
|
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 {
|
|
cursor: crosshair;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
/*
|
|
** Dropdowns
|
|
*/
|
|
|
|
.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;
|
|
}
|
|
|
|
.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
|
|
*/
|
|
|
|
.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 #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-sidebar-tab-divider.tw-tab-divider {
|
|
border-top: none;
|
|
height: 1px;
|
|
<<background-linear-gradient "left, rgb(160,160,160) 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;
|
|
}
|