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

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

@ -3,10 +3,10 @@
display: flex;
flex-direction: column;
position: absolute;
background-color: #444;
color: #fff;
box-shadow: 0 3px 10px #000;
max-width: 334px;
background-color: var(--theme-colour-input-menu-background);
box-shadow: 0 2px 10px var(--theme-colour-input-menu-box-shadow);
border: 1px solid var(--theme-colour-sidebar-background);
max-width: 336px;
width: 100%;
}
@ -41,7 +41,7 @@
height: 100%;
overflow: auto;
scrollbar-width: thin;
background: #333;
background: var(--theme-colour-sidebar-background);
}
.emopick-list-scroll {
display: flex;
@ -61,7 +61,7 @@
border: 0;
border-radius: 0;
color: inherit;
background: #333;
background: var(--theme-colour-sidebar-background);
font-size: inherit;
font-family: inherit;
}
@ -82,13 +82,21 @@
}
.emopick-action-button {
display: block;
border: 0;
border-radius: 0;
background: #555;
color: #fff;
display: inline-block;
background: var(--theme-colour-settings-input-background);
border: 1px solid var(--theme-colour-settings-input-border);
border-radius: 5px;
color: 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 {
box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff;