Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

semi-transparent inputbox style

Browse source
This commit is contained in:
Henry Jameson 2018-04-15 06:03:57 +03:00
parent c46795c692
commit 2b64432f9a
3 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.scss
View file

@ -93,8 +93,8 @@ input, textarea, .select {
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;
background-color: $fallback--lightBg; background-color: $fallback--input;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--input, $fallback--input);
color: $fallback--lightFg; color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg); color: var(--lightFg, $fallback--lightFg);
font-family: sans-serif; font-family: sans-serif;
@ -154,8 +154,8 @@ input, textarea, .select {
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;
margin-right: .5em; margin-right: .5em;
background-color: $fallback--btn; background-color: $fallback--input;
background-color: var(--btn, $fallback--btn); background-color: var(--input $fallback--input);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1em; line-height: 1.1em;

1
src/_variables.scss
View file

@ -4,6 +4,7 @@ $darkened-background: whitesmoke;
$fallback--bg: #121a24; $fallback--bg: #121a24;
$fallback--btn: #182230; $fallback--btn: #182230;
$fallback--input: #182230;
$fallback--faint: rgba(185, 185, 186, .5); $fallback--faint: rgba(185, 185, 186, .5);
$fallback--fg: #b9b9ba; $fallback--fg: #b9b9ba;
$fallback--link: #d8a070; $fallback--link: #d8a070;

1
src/services/style_setter/style_setter.js
View file

@ -71,6 +71,7 @@ const setColors = (col, commit) => {
colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)` colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text