he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-04 17:07: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 = {
char: {
placeholder: 'Press any key',
placeholder: 'Press any key here',
onKeyDown: charHandler
},
line: {

101
src/style/themes.css
View file

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

13
src/themes/themes.js
View file

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