flashii/mami
1
0
Fork 0
Code Pull requests Releases Activity

Make colour and emoticon pickers follow selected theme.

Browse source
This commit is contained in:
flash 2024-06-27 15:43:50 +00:00
parent 81c06d4289
commit 8e162e4163
2 changed files with 57 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/mami.css/colpick.css
View file

@ -1,13 +1,12 @@
.colpick { .colpick {
accent-color: var(--colpick-colour, #000); accent-color: var(--colpick-colour, #000);
border: 2px solid var(--colpick-colour, #000);
padding: 2px; padding: 2px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
background-color: #444; background-color: var(--theme-colour-input-menu-background);
color: #fff; box-shadow: 0 2px 10px var(--theme-colour-input-menu-box-shadow);
box-shadow: 0 3px 10px #000; border: 1px solid var(--theme-colour-sidebar-background);
} }
.colpick-tabbed { .colpick-tabbed {
@ -15,38 +14,36 @@
margin-bottom: 3px; margin-bottom: 3px;
} }
.colpick-tabbed-container { .colpick-tabbed-container {
border: 2px solid var(--colpick-colour, #000);
height: 234px; height: 234px;
overflow: auto; overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
background-color: var(--theme-colour-sidebar-background);
} }
.colpick-tabbed-list { .colpick-tabbed-list {
background-color: #222;
overflow: auto; overflow: auto;
} }
.colpick-tab-button { .colpick-tab-button {
background: #333; background: transparent;
color: #fff; color: inherit;
border-radius: 0; border-radius: 0;
border-width: 0; border-width: 0;
display: inline-block; display: inline-block;
padding: 3px 5px; padding: 4px 10px;
height: 24px; height: 24px;
margin-right: 1px; margin-right: 1px;
cursor: pointer; cursor: pointer;
transition: background .1s;
} }
.colpick-tab-button:hover { .colpick-tab-button:hover,
background: #444;
border-color: #444;
}
.colpick-tab-button:focus { .colpick-tab-button:focus {
border-color: #fff; background: #fff4;
}
.colpick-tab-button:active {
background: #0004;
} }
.colpick-tab-button-active { .colpick-tab-button-active {
background: var(--colpick-colour, #000); background: var(--theme-colour-sidebar-background) !important;
border-color: var(--colpick-colour, #000);
color: var(--colpick-text, #000);
} }
.colpick-middle-row { .colpick-middle-row {
@ -89,16 +86,17 @@
} }
.colpick-values-child-input { .colpick-values-child-input {
display: inline-block; display: inline-block;
border: 1px solid #222; border: 1px solid var(--theme-colour-settings-input-border);
background: #333; background: var(--theme-colour-settings-input-background);
border-radius: 0; border-radius: 0;
color: #fff; color: inherit;
padding: 1px; padding: 2px;
width: 100px; width: 100px;
outline-style: none; outline-style: none;
transition: border .1s, background .1s;
} }
.colpick-values-child-input:focus { .colpick-values-child-input:focus {
border-color: #777; background: var(--theme-colour-settings-input-focus);
} }
.colpick-buttons-container { .colpick-buttons-container {
@ -111,23 +109,27 @@
} }
.colpick-buttons-button { .colpick-buttons-button {
border-radius: 0; display: inline-block;
background: #222; background: var(--theme-colour-settings-input-background);
border-width: 0; border: 1px solid var(--theme-colour-settings-input-border);
color: #fff; border-radius: 5px;
color: inherit;
font-family: inherit;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.2em; line-height: 1.2em;
padding: 3px 10px; padding: 3px 10px;
margin-left: 5px; margin-left: 5px;
cursor: pointer; cursor: pointer;
transition: background .1s;
}
.colpick-buttons-button:hover {
background: var(--theme-colour-settings-input-focus);
} }
.colpick-buttons-button:focus { .colpick-buttons-button:focus {
box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff;
} }
.colpick-buttons-button-submit { .colpick-buttons-button-submit {
font-weight: 700; font-weight: 700;
color: var(--colpick-text, #fff);
background: var(--colpick-colour, #000);
} }
.colpick-tab-container {} .colpick-tab-container {}
@ -151,7 +153,7 @@
height: 42px; height: 42px;
border-radius: 0; border-radius: 0;
text-decoration: none; text-decoration: none;
color: #fff; color: inherit;
cursor: pointer; cursor: pointer;
} }
.colpick-presets-option:focus { .colpick-presets-option:focus {
@ -211,16 +213,17 @@
} }
.colpick-slider-value-input { .colpick-slider-value-input {
display: inline-block; display: inline-block;
border: 1px solid #222; border: 1px solid var(--theme-colour-settings-input-border);
background: #333; background: var(--theme-colour-settings-input-background);
border-radius: 0; border-radius: 0;
color: #fff; color: inherit;
padding: 1px; padding: 2px;
width: 50px; width: 50px;
outline-style: none; outline-style: none;
transition: border .1s, background .1s;
} }
.colpick-slider-value-input:focus { .colpick-slider-value-input:focus {
border-color: #777; background: var(--theme-colour-settings-input-focus);
} }
.colpick-slider-red .colpick-slider-value-input:focus { .colpick-slider-red .colpick-slider-value-input:focus {
border-color: #f00; border-color: #f00;

32
src/mami.css/emopick.css
View file

@ -3,10 +3,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
background-color: #444; background-color: var(--theme-colour-input-menu-background);
color: #fff; box-shadow: 0 2px 10px var(--theme-colour-input-menu-box-shadow);
box-shadow: 0 3px 10px #000; border: 1px solid var(--theme-colour-sidebar-background);
max-width: 334px; max-width: 336px;
width: 100%; width: 100%;
} }
@ -41,7 +41,7 @@
height: 100%; height: 100%;
overflow: auto; overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
background: #333; background: var(--theme-colour-sidebar-background);
} }
.emopick-list-scroll { .emopick-list-scroll {
display: flex; display: flex;
@ -61,7 +61,7 @@
border: 0; border: 0;
border-radius: 0; border-radius: 0;
color: inherit; color: inherit;
background: #333; background: var(--theme-colour-sidebar-background);
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
} }
@ -82,13 +82,21 @@
} }
.emopick-action-button { .emopick-action-button {
display: block; display: inline-block;
border: 0; background: var(--theme-colour-settings-input-background);
border-radius: 0; border: 1px solid var(--theme-colour-settings-input-border);
background: #555; border-radius: 5px;
color: #fff; color: inherit;
font-family: inherit; font-family: inherit;
padding: 0 4px; font-size: 1.1em;
line-height: 1.2em;
padding: 3px 10px;
margin-left: 5px;
cursor: pointer;
transition: background .1s;
}
.emopick-action-button:hover {
background: var(--theme-colour-settings-input-focus);
} }
.emopick-action-button:focus { .emopick-action-button:focus {
box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff;