223 lines
6.1 KiB
Plaintext
223 lines
6.1 KiB
Plaintext
title: $:/plugins/tiddlywiki/menubar/styles
|
|
tags: [[$:/tags/Stylesheet]]
|
|
|
|
\define breakpoint-plus-one()
|
|
<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] ~[{$:/config/plugins/menubar/breakpoint}] }}} />
|
|
\end
|
|
|
|
\define sidebarbreakpoint-minus-one()
|
|
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}} />
|
|
\end
|
|
|
|
\define set-sidebar-scrollable-top-if-hamburger()
|
|
<$list filter="[all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[$:/plugins/tiddlywiki/menubar/items/toprightbar]] -$:/plugins/tiddlywiki/menubar/items/hamburger +[limit[1]]">
|
|
|
|
.tc-sidebar-scrollable {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
</$list>
|
|
\end
|
|
|
|
\define set-sidebar-scrollable-top()
|
|
<$list filter="[all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[$:/plugins/tiddlywiki/menubar/items/toprightbar]] +[limit[1]]">
|
|
|
|
.tc-sidebar-scrollable {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
</$list>
|
|
<$reveal state="$:/state/popup/menubar/hamburger" type="match" text="yes">
|
|
|
|
<$set name="itemCount" value={{{ [all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/toprightbar]] +[count[]] }}}>
|
|
|
|
.tc-sidebar-scrollable {
|
|
margin-top: calc(<<itemCount>> * 2em);
|
|
}
|
|
|
|
</$set>
|
|
|
|
</$reveal>
|
|
\end
|
|
|
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
|
|
|
|
nav.tc-menubar {
|
|
position: fixed;
|
|
z-index: 850;
|
|
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: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
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;
|
|
}
|
|
|
|
nav.tc-menubar .tc-drop-down .tc-menubar-dropdown-sidebar a,
|
|
nav.tc-menubar .tc-drop-down .tc-menubar-dropdown-sidebar button {
|
|
display: inline;
|
|
width: auto;
|
|
}
|
|
|
|
nav.tc-menubar .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
<<set-sidebar-scrollable-top-if-hamburger>>
|
|
|
|
}
|
|
|
|
@media (max-width: {{$:/config/plugins/menubar/breakpoint}}) {
|
|
|
|
<<set-sidebar-scrollable-top>>
|
|
|
|
}
|
|
@media print {
|
|
|
|
nav.tc-menubar {
|
|
display: none;
|
|
}
|
|
|
|
}
|