title: $:/plugins/tiddlywiki/menubar/styles
tags: [[$:/tags/Stylesheet]]

\define breakpoint-plus-one()
<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] }}} />
\end

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

nav.tc-menubar {
	position: fixed;
	z-index: 1050;
	display: inline-block;
	top: 0;
	right: 0;
	left: 0;
}

nav.tc-menubar ul.tc-menubar-list {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 42px;
	background: <<colour background>>;
	background: <<colour menubar-background>>;
	<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>
}

@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {

	html nav.tc-menubar ul.tc-menubar-list {
		padding: 0 0 0 8px;
	}

}

nav.tc-menubar li.tc-menubar-item {
	display: inline-block;
	margin: 0;
	padding: 0;
}

nav.tc-menubar .tc-menubar-narrow li.tc-menubar-item {
	display: block;
}

nav.tc-menubar li.tc-menubar-item > a,
nav.tc-menubar li.tc-menubar-item > button {
	display: inline-block;
/*	text-transform: uppercase; */
	line-height: 1;
	font-weight: 700;
	color: <<colour foreground>>;
	color: <<colour menubar-foreground>>;
	fill: <<colour foreground>>;
	fill: <<colour menubar-foreground>>;
	text-decoration: none;
	padding: 0.5em;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 0;
	text-decoration: none;
}

nav.tc-menubar li.tc-menubar-item > a.tc-selected,
nav.tc-menubar li.tc-menubar-item > button.tc-selected {
	background: <<colour foreground>>;
	background: <<colour menubar-foreground>>;
	color: <<colour background>>;
	color: <<colour menubar-background>>;
	fill: <<colour background>>;
	fill: <<colour menubar-background>>;
}

nav.tc-menubar li.tc-menubar-item svg {
	transition: none;
	width: 1em;
	height: 1em;
	fill: <<colour foreground>>;
	fill: <<colour menubar-foreground>>;
}

nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
	width: 0.5em;
	height: 0.5em;
}

nav.tc-menubar li.tc-menubar-item > a.tc-selected svg,
nav.tc-menubar li.tc-menubar-item > button.tc-selected svg {
	fill: <<colour background>>;
	fill: <<colour menubar-background>>;
}

nav.tc-menubar li.tc-menubar-item > a:hover,
nav.tc-menubar li.tc-menubar-item > button:hover svg,
nav.tc-menubar li.tc-menubar-item > button:hover {
	background: <<colour foreground>>;
	background: <<colour menubar-foreground>>;
	color: <<colour background>>;
	color: <<colour menubar-background>>;
	fill: <<colour background>>;
	fill: <<colour menubar-background>>;
	border-radius: 0;
	text-decoration: none;
}

nav.tc-menubar li.tc-menubar-item > a:active,
nav.tc-menubar li.tc-menubar-item > button:active svg,
nav.tc-menubar li.tc-menubar-item > button:active {
	background: <<colour foreground>>;
	background: <<colour menubar-foreground>>;
	color: <<colour background>>;
	color: <<colour menubar-background>>;
	fill: <<colour background>>;
	fill: <<colour menubar-background>>;
	border-radius: 0;
	text-decoration: none;
}

nav.tc-menubar .tc-drop-down,
nav.tc-menubar .tc-block-dropdown {
	max-width: 70vw;
	max-height: 70vh;
	overflow: auto;
}

nav.tc-menubar .tc-drop-down a {
	text-decoration: none;
}

nav.tc-menubar .tc-drop-down .tc-table-of-contents button {
	display: inline-block;
	width: auto;
}

nav.tc-menubar .tc-drop-down ol {
	margin: 0;
}

@media (max-width: {{$:/config/plugins/menubar/breakpoint}}) {

	.tc-menubar-wide {
		display: none;
	}

}

@media (min-width: <<breakpoint-plus-one>>) {

	nav.tc-menubar li.tc-menubar-item.tc-menubar-narrow,
	.tc-menubar-narrow {
		display: none;
	}

}