sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

semi-transparent inputbox style

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

1
src/_variables.scss
View File

@ -4,6 +4,7 @@ $darkened-background: whitesmoke;
$fallback--bg: #121a24;
$fallback--btn: #182230;
$fallback--input: #182230;
$fallback--faint: rgba(185, 185, 186, .5);
$fallback--fg: #b9b9ba;
$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.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.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.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