more default shadows, replaced original shadows with generated ones. maybe gotta

update fallbacks...
This commit is contained in:
Henry Jameson 2018-11-21 21:23:07 +03:00
parent 3bdcdefc9b
commit 621ab806e6
5 changed files with 98 additions and 10 deletions

View file

@ -58,9 +58,10 @@ button {
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer; cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.2); /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
box-shadow: 0px 0px 2px black; box-shadow: 0px 0px 2px black;
box-shadow: var(--buttonShadow);
font-size: 14px; font-size: 14px;
font-family: sans-serif; font-family: sans-serif;
@ -75,11 +76,12 @@ button {
&:hover { &:hover {
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
box-shadow: var(--buttonHoverShadow);
} }
&:active { &:active {
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); */
} }
&:disabled { &:disabled {
@ -104,9 +106,10 @@ input, textarea, .select {
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
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;
box-shadow: var(--inputShadow);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
color: $fallback--lightText; color: $fallback--lightText;
@ -184,6 +187,7 @@ 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;
box-shadow: var(--inputShadow);
margin-right: .5em; margin-right: .5em;
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
@ -365,6 +369,7 @@ main-router {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--panel, $fallback--fg); background-color: var(--panel, $fallback--fg);
align-items: baseline; align-items: baseline;
box-shadow: var(--panelHeaderShadow);
.title { .title {
flex: 1 0 auto; flex: 1 0 auto;

View file

@ -146,6 +146,7 @@
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow);
margin-top: 0.25em; margin-top: 0.25em;
margin-left: 0.5em; margin-left: 0.5em;
z-index: 50; z-index: 50;

View file

@ -155,6 +155,7 @@
width: 56px; width: 56px;
height: 56px; height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75); box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
box-shadow: var(--avatarShadow);
object-fit: cover; object-fit: cover;
&.animated::before { &.animated::before {

View file

@ -212,11 +212,16 @@
"inset": "Inset", "inset": "Inset",
"components": { "components": {
"panel": "Panel", "panel": "Panel",
"panelHeader": "Panel header",
"topBar": "Top bar",
"avatar": "User avatar (in post display)",
"avatarStatus": "User avatar (in profile view)",
"popup": "Popups and tooltips",
"button": "Button", "button": "Button",
"button_hover": "Button (hover)", "buttonHover": "Button (hover)",
"button_pressed": "Button (pressed)", "buttonPressed": "Button (pressed)",
"button_pressed_hover": "Button (pressed+hover)", "buttonPressedHover": "Button (pressed+hover)",
"input_box": "Input field" "input": "Input field"
} }
} }
} }

View file

@ -258,6 +258,40 @@ const generateRadii = (input) => {
} }
const generateShadows = (input) => { const generateShadows = (input) => {
const buttonInsetFakeBorders = [{
x: 0,
y: 101,
blur: 0,
spread: -100,
color: '#FFFFFF',
alpha: 0.2,
inset: true
}, {
x: 0,
y: -101,
blur: 0,
spread: -100,
color: '#000000',
alpha: 0.2,
inset: true
}]
const inputInsetFakeBorders = [{
x: 0,
y: 101,
blur: 0,
spread: -100,
color: '#000000',
alpha: 0.2,
inset: true
}, {
x: 0,
y: -101,
blur: 0,
spread: -100,
color: '#FFFFFF',
alpha: 0.3,
inset: true
}]
const shadows = { const shadows = {
panel: [{ panel: [{
x: 1, x: 1,
@ -267,6 +301,48 @@ const generateShadows = (input) => {
color: '#000000', color: '#000000',
alpha: 0.6 alpha: 0.6
}], }],
popup: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}],
avatar: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}],
panelHeader: [],
button: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders],
buttonHover: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--faint',
alpha: 1
}, ...buttonInsetFakeBorders],
input: [{
x: 0,
y: 0,
blur: 2,
inset: true,
spread: 0,
color: '#000000',
alpha: 1
}, ...inputInsetFakeBorders],
...(input.shadows || {}) ...(input.shadows || {})
} }