Improve sidebar dropdowns, glossy top bar
FossilOrigin-Name: 967b23f6176189dd87ca4b1a8c8f8e90cd5066e81f138ff741cd40dd9233f5a0
This commit is contained in:
nekobit
parent
b49346e059
commit
ad8819f482
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue