prehistoric-systems/mytinytodo
1
0
Fork 0
mirror of https://github.com/maxpozdeev/mytinytodo.git synced 2026-03-11 08:55:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

* apply css appearance for select

Browse source
This commit is contained in:
maxpozdeev 2022-11-19 21:28:16 +03:00
parent be6738c8ba
commit f109b7a762
4 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/content/theme/dark.css
View file

@ -29,6 +29,7 @@
--color-error-bg: var(--color-bg);
--color-info: #EFC300;
--color-info-bg: var(--color-bg);
--color-input-bg: #1e1e1e;
--color-toolbar: #3b3b3b;
--color-btn-toolbar-hover: #555;
@ -90,5 +91,7 @@
--color-placeholder: #444;
--color-placeholder-border: #555;
/*--svg-select: url(images/select-dark.svg);*/
--svg-select: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBvbHlsaW5lIHBvaW50cz0iMiA2LCA3IDExLCAxMiA2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2FhYSIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
}
}

3
src/content/theme/images/select-dark.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<polyline points="2 6, 7 11, 12 6" stroke-width="2" stroke="#aaa" fill="none"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 148 B

3
src/content/theme/images/select.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<polyline points="2 6, 7 11, 12 6" stroke-width="2" stroke="#444" fill="none"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 148 B

20
src/content/theme/style.css
View file

@ -33,6 +33,7 @@
--color-error-bg: #ff3333;
--color-info: var(--color-text-reduced);
--color-info-bg: #EFC300;
--color-input-bg: #fff;
--color-toolbar: #ededed;
--color-btn-toolbar-hover: #ddd;
@ -97,6 +98,8 @@
--color-placeholder: #ddd;
--color-placeholder-border: #aaa;
/*--svg-select: url(images/select.svg);*/
--svg-select: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBvbHlsaW5lIHBvaW50cz0iMiA2LCA3IDExLCAxMiA2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzQ0NCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
}
/* default style */
@ -192,11 +195,16 @@ a { color: var(--color-link); cursor:pointer; text-decoration:underline; }
.form-input {
padding: 3px;
border: 1px solid var(--color-border-default);
background-color: var(--color-input-bg);
border-radius: 2px;
transition: box-shadow .15s ease-in-out;
}
select.form-input {
padding:2px;
appearance: none;
-webkit-appearance: none; -moz-appearance: none;
background: var(--color-input-bg) var(--svg-select) no-repeat top 4px right 5px;
background-size: 1rem 1rem;
padding-right: calc(1rem + 10px);
}
.form-input:focus {
outline: none;
@ -971,10 +979,16 @@ li.mtt-item-hidden { display:none; }
padding: 3px;
border: 1px solid var(--color-border-default);
border-radius: 2px;
/*background-color: var(--color-bg);*/
background-color: var(--color-input-bg);
color: var(--color-text-default)
}
.mtt-settings-table select { padding:2px; }
.mtt-settings-table select {
appearance: none;
-webkit-appearance: none; -moz-appearance: none;
background: var(--color-input-bg) var(--svg-select) no-repeat top 4px right 5px;
background-size: 1rem 1rem;
padding-right: calc(1rem + 10px);
}
.mtt-settings-table input:focus,
.mtt-settings-table select:focus {
outline:none;