mirror of
https://github.com/9001/copyparty.git
synced 2026-06-18 20:22:27 -06:00
frutiger theme refinements
This commit is contained in:
Til Schmitter
parent
4a45d53b35
commit
d0bc23c38d
|
|
@ -138,8 +138,10 @@ html.bz {
|
|||
}
|
||||
html.by {
|
||||
--a: #139cf1;
|
||||
--b: color-mix(in srgb, var(--bg) 20%, var(--a));
|
||||
--radius: 15px;
|
||||
--a-dark: hsl(from color-mix(in oklab, var(--a) 80%, var(--fg-max) 20%) h calc(s * 1.5) l);
|
||||
--bg-u3: color-mix(in oklab, var(--bg-max) 70%, var(--b) 30%);
|
||||
--g-fsel-ts: transparent;
|
||||
--scrl-hint: transparent;
|
||||
--bg-u1: color-mix(in oklab, transparent 92%, var(--fg-max));
|
||||
|
|
@ -157,10 +159,11 @@ html.by {
|
|||
--btn-bg: linear-gradient(
|
||||
-5deg,
|
||||
color-mix(in oklab, var(--btn-bg-a) 30%, var(--a) 20%),
|
||||
color-mix(in oklab, var(--btn-bg-a) 30%, transparent));
|
||||
color-mix(in oklab, var(--btn-bg-a) 30%, var(--b)));
|
||||
|
||||
text-shadow: 0px 0px 4px rgb(255, 255, 255);
|
||||
}
|
||||
html.by #spaceTotal_bar,
|
||||
html.by #s_list h3,
|
||||
html.by #wtico,
|
||||
html.by #wtoggle,
|
||||
|
|
@ -168,19 +171,9 @@ html.by #ggrid>a,
|
|||
html.by #ops a,
|
||||
html.by #tree ul a.hl,
|
||||
html.by .btn {
|
||||
/* OKLCH Color System for accurate colors */
|
||||
--hue: 140;
|
||||
--sat: 0.2;
|
||||
transition: all .15s;
|
||||
|
||||
/* Color Variables */
|
||||
--fg: oklch(15% calc(var(--sat) * 0.5) var(--hue));
|
||||
--bg: oklch(75% var(--sat) var(--hue) / 0.8);
|
||||
--bg-dark: oklch(45% var(--sat) var(--hue) / 0.75);
|
||||
|
||||
background: var(--bottom-glow), var(--btn-bg);
|
||||
border-radius: var(--radius);
|
||||
|
||||
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
html.by #files thead th {
|
||||
|
|
@ -208,6 +201,15 @@ html.by .btn:active {
|
|||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
html.by #widgeti {
|
||||
background: color-mix(in srgb, var(--bg) 40%, var(--a));
|
||||
}
|
||||
html.by #mu_outer {
|
||||
background: color-mix(in oklab, var(--b) 50%, transparent);
|
||||
}
|
||||
html.by .divider {
|
||||
display: none;
|
||||
}
|
||||
html.by summary {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
|
@ -238,7 +240,6 @@ html.by #tree ul a.hl:after,
|
|||
html.by .btn::after {
|
||||
content: "" !important;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 4%;
|
||||
left: 5px;
|
||||
width: calc(100% - 10px);
|
||||
|
|
@ -252,22 +253,20 @@ html.by .btn::after {
|
|||
transition: background 400ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
html.by a:not(.play) .imgcontainer::before{
|
||||
z-index: 2;
|
||||
}
|
||||
html.by #ops a {
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
html.by #srchfolder_div {
|
||||
left: 3em;
|
||||
}
|
||||
html.by #spaceTotal_bar,
|
||||
html.by #spaceUsed_bar{
|
||||
height: 1.6em;
|
||||
}
|
||||
html.by #spaceTotal_bar {
|
||||
height: 1.6em;
|
||||
border: var(--a) solid 1px;
|
||||
background: transparent;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
html.by #files tbody tr:hover td,
|
||||
html.by #files tbody tr:hover td+td {
|
||||
|
|
@ -2623,6 +2622,12 @@ html.b .btn {
|
|||
#unpost td:nth-child(4) {
|
||||
text-align: right;
|
||||
}
|
||||
#unpost table {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
margin: 0 -1em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
#shui,
|
||||
#rui {
|
||||
background: #fff;
|
||||
|
|
@ -3918,7 +3923,7 @@ html.by #ops{
|
|||
backdrop-filter: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0 -2px;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
@ -3928,10 +3933,14 @@ html.by #doc,
|
|||
html.by #srch_form,
|
||||
html.by .ghead,
|
||||
html.by #u2etas {
|
||||
border-color: var(--bg-u2);
|
||||
border-color: var(--bg-u3);
|
||||
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
|
||||
background: var(--bottom-glow), var(--btn-bg);
|
||||
}
|
||||
html.by #spaceTotal_bar,
|
||||
html.by #ops>a {
|
||||
border: var(--bg-u3) solid 1px;
|
||||
}
|
||||
html.by #tree li,
|
||||
html.by #treepar {
|
||||
border-color: var(--bg-u5) var(--bg-max) transparent var(--bg-max);
|
||||
|
|
@ -3945,7 +3954,10 @@ html.by #treepar {
|
|||
html.by #tree {
|
||||
border-color: #ddd;
|
||||
box-shadow: 0 0 1em #ddd;
|
||||
background: color-mix(in srgb, var(--bg) 10%, var(--a));
|
||||
background: var(--b);
|
||||
}
|
||||
html.by #tree_footer {
|
||||
background: linear-gradient(to top, var(--b), color-mix(in oklab, var(--b) 80%, transparent), transparent);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -5374,9 +5386,12 @@ html.e #actionsArea {
|
|||
background: rgb(85, 144, 255);
|
||||
background: var(--a);
|
||||
}
|
||||
html.b #spaceUsed_bar {
|
||||
html.bz #spaceUsed_bar {
|
||||
background: linear-gradient(to right, transparent, var(--a-dark), var(--a));
|
||||
}
|
||||
html.by #spaceUsed_bar {
|
||||
background: linear-gradient(to right, var(--a), var(--a-dark));
|
||||
}
|
||||
#spaceTotal_bar {
|
||||
position: relative;
|
||||
margin-bottom: .5em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue