mirrors/treebird
0
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Improve sidebar dropdowns, glossy top bar

Browse source 
FossilOrigin-Name: 967b23f6176189dd87ca4b1a8c8f8e90cd5066e81f138ff741cd40dd9233f5a0
This commit is contained in:
nekobit 2022-08-18 21:58:41 +00:00
parent b49346e059
commit ad8819f482
2 changed files with 71 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
dist/treebird.css vendored
View file

@ -106,7 +106,7 @@ table.ui-table td
#navbar
{
border-top: 2px solid #fff;
background: linear-gradient(#fbfbfb, #ececef);
background: linear-gradient(#fbfbfb 37%, #efefef 50%, #e4e4e9);
width: 1000px;
border-bottom: 2px solid #bfbfc4;
z-index: 999;
@ -334,41 +334,22 @@ table.ui-table td
list-style-type: none;
}
/* .sidebar-submenu .sidebarbtn */
/* { */
/* display: block; */
/* color: #000; */
/* padding: 8px; */
/* border-radius: 4px; */
/* padding-left: 24px; */
/* text-decoration: none; */
/* border: 1px solid transparent; */
/* } */
.sidebarbtn-sub
{
display: block;
color: #000;
padding: 8px;
border-radius: 4px;
padding-left: 24px;
text-decoration: none;
border: 1px solid transparent;
}
#leftbar ul.sidebar-config
{
background: linear-gradient(#eef1f9, #bbc3d0);
border-radius: 6px;
padding: 4px;
margin: 8px;
border: 1px solid #aaa;
box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
}
.sidebarbtn-sub.active
.sidebar-submenu .sidebarbtn.active
{
font-weight: bold;
}
.sidebarbtn-sub:active, .sidebarbtn-sub:hover
{
background-color: #bbc6d5;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
border: 1px solid #a8accbcc;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
#rightbar
{
border-left: 1px solid #dadada;
@ -564,8 +545,8 @@ select:hover
input[type=range] {
-webkit-appearance: none;
appearance: none;
height: 12px;
background: linear-gradient(#f3f3f3, #d5d5d5);
height: 4px;
background: linear-gradient(#f3f3f3, #c5c5c5);
border: 1px solid #cacaca;
border-radius: 4px;
outline: none;
@ -579,8 +560,9 @@ input[type=range]::-moz-range-thumb
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #303236;
background: linear-gradient(#75777c, #505256);
border-radius: 50%;
border: 1px solid #909090;
background: conic-gradient(#ddd, #aaa, #ddd, #aaa, #ddd, #aaa, #ddd);
cursor: pointer;
}
@ -598,7 +580,8 @@ input[type=range]::-moz-range-thumb
.btn:hover,
.btn:active,
.btn-menu:hover,
.sidebarbtn:hover
.sidebarbtn:hover,
.sidebar .sidebarbtn:hover
{
background: linear-gradient(#606060, #d3d3d3);
/* box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2); */
@ -704,7 +687,8 @@ input[type=submit].post-btn
padding: 4px 8px;
}
.sidebarbtn, .sidebarbtn:visited
.sidebar .sidebarbtn,
.sidebar .sidebarbtn:visited
{
display: block;
margin: 7px 8px;
@ -715,11 +699,36 @@ input[type=submit].post-btn
color: #505050;
}
.sidebar-submenu .sidebarbtn,
.sidebar-submenu .sidebarbtn:visited
{
color: #202020;
margin-left: 0;
margin-right: 0;
border-radius: 0;
padding-left: 24px;
}
.sidebar-submenu .sidebarbtn:hover
{
background: #abafb4;
}
.sidebar-login
{
padding: 18px;
}
#leftbar .sidebar-submenu
{
border-left: 4px solid #aa0000;
background-color: rgb(214, 219, 225);
box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
padding: 5px 0;
}
/****************************
* Notifications *
***************************/
@ -799,7 +808,8 @@ svg.in-reply-to-icon
line-height: 23px;
}
input[type=checkbox].hidden:not(:checked) + .reply-form
input[type=checkbox].hidden:not(:checked) + .reply-form,
input[type=checkbox].hidden:not(:checked) + .sidebar-submenu
{
display: none;
}

39
templates/main.tt
View file

@ -92,25 +92,32 @@
<!-- Navigation -->
<tr>
<td id="leftbar" class="sidebar">
<ul>
<li><a class="sidebarbtn {{ %s : active_home }}" href="$prefix/">[% lang('HOME') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_local }}" href="$prefix/local/">[% lang('LOCAL') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_federated }}" href="$prefix/federated/">[% lang('FEDERATED') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_notifications }}" href="$prefix/notifications">[% lang('NOTIFICATIONS') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_lists }}" href="$prefix/lists">[% lang('LISTS') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_favourites }}" href="$prefix/favourites">[% lang('FAVOURITES') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_bookmarks }}" href="$prefix/bookmarks">[% lang('BOOKMARKS') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_direct }}" href="$prefix/direct">[% lang('DIRECT') %]</a></li>
<li><a class="sidebarbtn {{ %s : active_chats }}" href="$prefix/chats">Chats</a></li>
<li><a class="sidebarbtn {{ %s : active_config }}" href="$prefix/config">[% lang('CONFIG') %]</a></li>
<ul class="sidebar-menu">
<li><a class="sidebarbtn" href="$prefix/">[% lang('HOME') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/local/">[% lang('LOCAL') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/federated/">[% lang('FEDERATED') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/notifications">[% lang('NOTIFICATIONS') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/lists">[% lang('LISTS') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/favourites">[% lang('FAVOURITES') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/bookmarks">[% lang('BOOKMARKS') %]</a></li>
<li><a class="sidebarbtn" href="$prefix/direct">[% lang('DIRECT') %]</a></li>
<li><a class="sidebarbtn sidebarbtn-dropdown" href="$prefix/chats">Chats</a></li>
<li>
<label for="config-dropdown-checkbox">
<span class="sidebarbtn">
[% lang('CONFIG') %]
</span>
</label>
<input type="checkbox" id="config-dropdown-checkbox" class="hidden">
<ul class="sidebar-submenu">
<li><a class="sidebarbtn" href="/config/general">General</a></li>
<li><a class="sidebarbtn" href="/config/appearance">Appearance</a></li>
</ul>
</li>
</ul>
<ul class="sidebar-config">
<li><a class="sidebarbtn-sub" href="$prefix/config/general">[% lang('GENERAL') %]</a></li>
<li><a class="sidebarbtn-sub" href="$prefix/config/appearance">[% lang('APPEARANCE') %]</a></li>
</ul>
<!-- <div class="static-html" id="instance-panel"></div> -->
<div class="mini-links">
<a href="$prefix/about">About</a>