aet/opvault.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Add settings panel

Browse Source
This commit is contained in:
aet
2021-12-19 01:57:38 -05:00
parent 298482f70e
commit bf5bdd1f72
18 changed files with 847 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
packages/web/src/index.scss
View File

@ -10,8 +10,8 @@ body {
margin: 0;
overflow: hidden;
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen",
"Cantarell", "Droid Sans", "Helvetica Neue", "Noto Sans CJK JP", sans-serif;
}
:root {
--page-background: #fff;
@ -66,22 +66,49 @@ input {
font-family: inherit;
font-size: inherit;
}
input[type="search"],
input[type="input"],
input[type="password"] {
@mixin input {
@include scheme(background-color, #fff, #2d2d2d);
border-radius: 6px;
border: 1px solid;
@include scheme(border-color, #cdc7c2, #1b1b1b);
color: inherit;
outline: none;
padding: 7px 8px;
transition: 0.1s;
&:focus {
@include scheme(border-color, #3584e480, #15539e);
}
}
input[type="search"],
input[type="input"],
input[type="number"],
input[type="password"] {
@include input;
border-radius: 6px;
border: 1px solid;
color: inherit;
outline: none;
padding: 7px 8px;
&:disabled {
cursor: not-allowed;
}
}
input[type="checkbox" i] {
@include input;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
border-radius: 3px;
appearance: none;
position: relative;
&:checked:after {
content: "\2714";
font-size: 15px;
position: absolute;
top: 0px;
left: 3px;
color: var(--color);
}
}
button,
select {
@include scheme(background-color, #f6f5f4, #333);
@ -110,3 +137,34 @@ button[type="submit"] {
select {
padding: 5px 10px;
}
// #region color
.color-primary,
.color-secondary,
.color-info,
.color-danger {
@include scheme(color, #fff, #fafafa);
}
.color-success,
.color-warning {
@include scheme(color, #000, #111);
}
.color-primary {
@include scheme(background-color, #0b5ed7, #375a7f);
}
.color-secondary {
@include scheme(background-color, #6c757d, #626262);
}
.color-success {
@include scheme(background-color, #198754, #00bc8c);
}
.color-info {
@include scheme(background-color, #0dcaf0, #17a2b8);
}
.color-warning {
@include scheme(background-color, #ffc107, #f39c12);
}
.color-danger {
@include scheme(background-color, #dc3545, #e74c3c);
}
// #endregion