TiddlyWiki5/themes/tiddlywiki/seamless/base.tid

104 lines
2.2 KiB
Plaintext

title: $:/themes/tiddlywiki/seamless/base
tags: [[$:/tags/Stylesheet]]
list-after: $:/themes/tiddlywiki/vanilla/base
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
/*
Rules copied from Snow White
*/
.tc-page-controls button svg, .tc-tiddler-controls button svg, .tc-topbar button svg {
<<transition "fill 150ms ease-in-out">>
}
.tc-tiddler-controls button.tc-selected svg {
<<filter "drop-shadow(0px -1px 2px rgba(0,0,0,0.25))">>
}
.tc-drop-down {
border-radius: 4px;
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
}
.tc-block-dropdown {
border-radius: 4px;
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
}
.tc-modal-displayed {
<<filter "blur(4px)">>
}
.tc-modal {
border-radius: 6px;
<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
}
.tc-modal-footer {
border-radius: 0 0 6px 6px;
<<box-shadow "inset 0 1px 0 #fff">>;
}
.tc-alert {
border-radius: 6px;
<<box-shadow "0 3px 7px rgba(0,0,0,0.6)">>
}
.tc-notification {
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);
}
.tc-message-box img {
<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
}
/*
Seamless modifications
*/
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
/* Drop the tiddler frame padding */
body.tc-body .tc-tiddler-frame {
padding: 0;
}
/* Move the sidebar up so that the title lines up */
body.tc-body .tc-sidebar-scrollable {
padding: 43px 0 28px 42px;
}
/* Stop the tiddler info panel from bleeding into the tiddler frame padding */
body.tc-body .tc-tiddler-info {
margin: 0;
}
/* Stop message boxes from bleeding into the tiddler frame padding */
body.tc-body .tc-message-box {
margin: 21px 0 21px 0;
}
}
/* Use the tiddler background colour for the page background */
html body.tc-body {
background-color: <<colour background>>;
}
html:-webkit-full-screen {
background-color: <<colour background>>;
}
/* Adjust the colour of the page controls */
body.tc-body .tc-page-controls svg {
fill: <<colour muted-foreground>>;
}
/* Adjust the colour of the sidebar selected tabs */
body.tc-body .tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {
background-color: <<colour background>>;
}