he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-05 01:17:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Simplify themes

Browse source
This commit is contained in:
He4eT 2021-03-03 03:15:55 +05:00
commit 2ed3f9a3ad
3 changed files with 28 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Player/InputBox.jsx
View file

@ -64,7 +64,7 @@ export default function ({ currentWindow, inputType, sendMessage }) {
const inputHandlers = { const inputHandlers = {
char: { char: {
placeholder: 'Press any key', placeholder: 'Press any key here',
onKeyDown: charHandler onKeyDown: charHandler
}, },
line: { line: {

101
src/style/themes.css
View file

@ -1,99 +1,52 @@
.default { body {
--bg-color: #ffffff; --outer-padding: 0px;
--border-width: 0px;
--inner-padding: 8px;
--input-box-margin: 0px;
}
@media (min-width: 800px) {
body {
--outer-padding: 8px;
--border-width: 2px;
--input-box-margin: 8px;
}
}
/* */
.light {
--bg-color: hsl(0, 0%, 100%, 1);
--main-color: hsl(0, 0%, 0%, 0.8); --main-color: hsl(0, 0%, 0%, 0.8);
--outer-padding: 0px;
--inner-padding: 8px;
--border-width: 0px;
--input-box-margin: 8px;
} }
.default-borders { .dim {
--bg-color: #ffffff; --bg-color: hsl(0, 0%, 20%, 1);
--main-color: hsl(0, 0%, 0%, 0.8);
--outer-padding: 8px;
--inner-padding: 8px;
--border-width: 2px;
--input-box-margin: 8px;
}
.default-dim {
--bg-color: hsl(0, 0%, 20%);
--main-color: hsl(0, 0%, 100%, 0.8); --main-color: hsl(0, 0%, 100%, 0.8);
--outer-padding: 0px;
--inner-padding: 8px;
--border-width: 0px;
--input-box-margin: 8px;
} }
.default-dim-borders { .dark {
--bg-color: hsl(0, 0%, 20%); --bg-color: hsl(0, 0%, 0%, 1);
--main-color: hsl(0, 0%, 100%, 0.8); --main-color: hsl(0, 0%, 100%, 1);
--outer-padding: 8px;
--inner-padding: 8px;
--border-width: 2px;
--input-box-margin: 8px;
}
.default-dark {
--bg-color: #000000;
--main-color: #ffffff;
--outer-padding: 0px;
--inner-padding: 8px;
--border-width: 0px;
--input-box-margin: 8px;
}
.default-dark-borders {
--bg-color: #000000;
--main-color: #ffffff;
--outer-padding: 8px;
--inner-padding: 8px;
--border-width: 2px;
--input-box-margin: 8px;
} }
/* solarized */ /* solarized */
.solarized-light, .solarized-light {
.solarized-light-borders,
.solarized-dark,
.solarized-dark-borders {
--outer-padding: 0px;
--inner-padding: 8px;
--border-width: 0px;
--input-box-margin: 8px;
}
.solarized-light-borders,
.solarized-dark-borders {
--outer-padding: 8px;
--inner-padding: 8px;
--border-width: 2px;
--input-box-margin: 8px;
}
.solarized-light,
.solarized-light-borders {
--main-color: #586e75; --main-color: #586e75;
--bg-color: #eee8d5; --bg-color: #eee8d5;
} }
.solarized-dark, .solarized-dark {
.solarized-dark-borders {
--main-color: #93a1a1; --main-color: #93a1a1;
--bg-color: #073642; --bg-color: #073642;
} }
.solarized-light strong, .solarized-light strong,
.solarized-light-borders strong, .solarized-dark strong {
.solarized-dark strong,
.solarized-dark-borders strong{
color: #b58900; color: #b58900;
} }
.solarized-light .message.input, .solarized-light .message.input,
.solarized-light-borders .message.input, .solarized-dark .message.input {
.solarized-dark .message.input,
.solarized-dark-borders .message.input{
color: #2aa198; color: #2aa198;
} }

13
src/themes/themes.js
View file

@ -3,16 +3,11 @@ import { useState } from 'preact/hooks'
import '~/src/style/themes.css' import '~/src/style/themes.css'
const themes = [ const themes = [
'default', 'light',
'default-borders', 'dim',
'default-dim', 'dark',
'default-dim-borders',
'default-dark',
'default-dark-borders',
'solarized-light', 'solarized-light',
'solarized-light-borders', 'solarized-dark'
'solarized-dark',
'solarized-dark-borders'
] ]
const DEFAULT_THEME = themes[0] const DEFAULT_THEME = themes[0]