Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): restyle text boxes

Browse Source
This commit is contained in:
Adorian Doran 2025-01-13 14:51:23 +02:00
parent c9bf752b1f
commit 93e740cf36
3 changed files with 68 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/public/stylesheets/theme-next-dark.css
View File

@ -32,8 +32,16 @@
--muted-text-color: #bbb;
--input-text-color: #ccc;
--input-background-color: #333;
--input-background-color: #ffffff12;
--input-text-color: #ffffff52;
--input-placeholder-color: #b7b7b782;
--input-selection-background: gray;
--input-selection-text-color: white;
--input-hover-background: #ffffff1f;
--input-hover-color: var(--input-text-color);
--input-focus-outline-color: #80808095;
--input-focus-background: #ffffff1f;
--input-focus-color: white;
--hover-item-text-color: #efefef;
--hover-item-background-color: #ffffff24;

10
src/public/stylesheets/theme-next-light.css
View File

@ -32,8 +32,16 @@
--muted-text-color: #666;
--input-background-color: #00000012;
--input-text-color: black;
--input-background-color: transparent;
--input-placeholder-color: #06060682;
--input-selection-background: gray;
--input-selection-text-color: white;
--input-hover-background: #00000020;
--input-hover-color: black;
--input-focus-outline-color: #00000063;
--input-focus-background: #ffffff80;
--input-focus-color: #000;
--hover-item-text-color: black;
--hover-item-background-color: #0000001a;

49
src/public/stylesheets/theme-next/forms.css
View File

@ -0,0 +1,49 @@
/*
* Input boxes
*/
input:disabled {
opacity: .33;
}
/* Text boxes */
input:not([type]),
input[type="text"],
input[type="number"],
input[type="password"] {
outline: 3px solid transparent;
border: unset;
outline-offset: 6px;
}
input:not([type]):hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover {
--input-background-color: var(--input-hover-background);
--input-text-color: var(--input-hover-color);
}
input:not([type]):focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
--input-background-color: var(--input-focus-background);
--input-text-color: var(--input-focus-color);
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
box-shadow: unset;
transition: outline-color 50ms linear,
outline-offset 200ms ease-out;
}
input::placeholder {
--muted-text-color: var(--input-placeholder-color);
}
input::selection {
background: var(--input-selection-background);
color: var(--input-selection-text-color);
}