admin styles

This commit is contained in:
Dym Sohin 2024-08-07 16:14:32 +02:00
parent 6251eb3281
commit 08f51bf8ed
2 changed files with 52 additions and 27 deletions

View File

@ -229,7 +229,7 @@ img
.buttons > a:any-link .buttons > a:any-link
{ background : { background :
var( --b, var( --true-gray ) ) var( --b, var( --true-gray ) )
url( 'button-gradient.svg' ) url( './button-gradient.svg' )
50% 50% no-repeat 50% 50% no-repeat
; background-size : cover ; background-size : cover
; box-shadow ; box-shadow
@ -390,21 +390,6 @@ input
{ width : 14rem { width : 14rem
} }
.buttons input[type="search"]
{ color : var(--bg) }
input[type="search"] + button
{ margin-left : -3rem
; display : none
}
input[type="search"]:hover + button
, input[type="search"]:focus + button
, input[type="search"]:active + button
{ display : flex
; border : 0.125rem solid #bbb
; box-shadow : inset 0 0 0 0.125rem transparent
}
button button
{ background-color : var(--b, var( --gray ) ) } { background-color : var(--b, var( --gray ) ) }
@ -412,14 +397,52 @@ button
button:hover button:hover
, button:focus , button:focus
, button:active , button:active
{ box-shadow : inset 0 0 0 0.125rem #fff !important { box-shadow
: inset 0 0 0 0.125rem #0002
, 0 0 0 0.175rem var(--bg)
, 0 0 0 0.25rem #fff
; display : flex ; display : flex
} }
input:hover input:hover
, input:focus , input:focus
, input:active , input:active
{ box-shadow : inset 0 0 0 0.125rem #bbb } { box-shadow
: inset 0 0 0 0.125rem #bbb
, 0 0 0 0.175rem var(--bg)
, 0 0 0 0.25rem #fff
}
.buttons input[type="search"]
{ color : var(--bg)
; width : 10rem
}
.buttons input[type="search"] + button
{ margin-left : -3rem
; background : #ddd
; border : 0.125rem solid #ddd
}
.buttons input[type="search"]:hover
, .buttons input[type="search"]:focus
, .buttons input[type="search"]:active
{ box-shadow: inset 0 0 0 0.125rem #bbb
}
.buttons input[type="search"]:hover + button
, .buttons input[type="search"]:focus + button
, .buttons input[type="search"]:active + button
{ border : 0.125rem solid #bbb
; box-shadow : inset 0 0 0 0.125rem transparent
}
.buttons input[type="search"] + button:hover
, .buttons input[type="search"] + button:focus
, .buttons input[type="search"] + button:active
{ border : 0.125rem solid #bbb
; box-shadow : inset 0 0 0 0.125rem transparent
, 0 0 0 0.125rem #fff
, 0 0 0 0.25rem #bbb
}
.red { --b : var( --red ) } .red { --b : var( --red ) }

View File

@ -11,10 +11,10 @@
<nav class="c"> <nav class="c">
<div class="buttons round"> <div class="buttons round">
<x-nav-link class="orange">new</x-nav-link> <x-nav-link class="orange">new</x-nav-link>
<x-nav-link class="gray">list</x-nav-link> <x-nav-link class="rose">list</x-nav-link>
<x-nav-link class="pink">tags</x-nav-link> <x-nav-link class="pink">tags</x-nav-link>
<x-nav-link class="gray">collections</x-nav-link> <x-nav-link class="teal">collections</x-nav-link>
<x-nav-link class="gray">admin/list</x-nav-link> <x-nav-link class="gray">/</x-nav-link>
</div> </div>
</nav> </nav>
@ -26,9 +26,9 @@ if ( $_SESSION['active']) {
--}} --}}
<form class="col c" method="post" name="login_form"> <form class="col c" method="post" name="login_form">
<input type="email" name="email" placeholder="email"> <input type="email" name="email" placeholder="email">
<input type="password" name="password" placeholder="password"> <input type="password" name="password" placeholder="password">
<button onclick="login_form.submit()">Login</button> <button onclick="login_form.submit()">Login</button>
</form> </form>
{{ $slot }} {{ $slot }}
@ -36,11 +36,13 @@ if ( $_SESSION['active']) {
<footer class="c"> <footer class="c">
<form class="buttons round c" method="get" name="search_form"> <form class="buttons round c" method="get" name="search_form">
<input type="search" name="search"> <input type="search" name="search" placeholder="search">
<button onclick="search_form.submit()" <button onclick="search_form.submit()"
class="gray" title="search" class="gray" title="search"
><span class="hidden">/</span> ><span class="hidden">search</span>
</search> </button>
<a href="/rss" class="orange" title="rss"><span class="hidden">rss</span>
</a>
</form> </form>
</footer> </footer>