title: $:/themes/tiddlywiki/snowwhite/base
tags: [[$:/tags/Stylesheet]]

\define sidebarbreakpoint-minus-one()
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
\end

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

.tc-sidebar-header {
	text-shadow: 0 1px 0 <<colour sidebar-foreground-shadow>>;
}

.tc-tiddler-info {
	box-shadow: inset 1px 2px 3px rgba(0,0,0,0.1);
}

@media screen {
	.tc-tiddler-frame {
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	}
}

@media (max-width: <<sidebarbreakpoint-minus-one>>) {
	.tc-tiddler-frame {
		box-shadow: none;
	}
}

.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,
.tc-page-controls button.tc-selected {
	filter: drop-shadow(0px -1px 2px rgba(0,0,0,0.25));
}

.tc-tiddler-frame input.tc-edit-texteditor,
.tc-tiddler-frame select.tc-edit-texteditor {
	box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.15);
}

.tc-edit-tags {
	box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.15);
}

.tc-tiddler-frame .tc-edit-tags input.tc-edit-texteditor {
	box-shadow: none
	border: none;
	outline: none;
}

textarea.tc-edit-texteditor {
	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
}

canvas.tc-edit-bitmapeditor  {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.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 {
	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-sidebar-lists .tc-tab-set .tc-tab-divider {
	border-top: none;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%); 
}

/* HACK: :dir should be used here. html[dir="rtl"] rules are used to support browsers released before 2023 */

html[dir="rtl"] .tc-sidebar-lists .tc-tab-set .tc-tab-divider {
	background-image: linear-gradient(to left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
}

.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
	background-image: linear-gradient(to right, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%);
}

.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
	background-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%);
}

html[dir="rtl"] .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
    background-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.01) 100%);
}

html[dir="rtl"] .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%)
}

.tc-message-box img {
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.tc-plugin-info {
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5)
}
