pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hover effect for buttons

Browse Source
This commit is contained in:
Fornax
2022-03-29 21:54:43 +02:00
parent 2b847c0456
commit d1326af557
3 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
res/include/style/layout.css
View File

@@ -327,14 +327,17 @@ pre {
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover,
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button_selected {
box-shadow: 0 0 3px 2px var(--highlight_color);
text-decoration: none;
@@ -397,7 +400,7 @@ select {
vertical-align: middle;
align-items: center;
cursor: pointer;
transition: padding 0.2s, box-shadow 0.2s;
transition: padding 0.2s, box-shadow 0.2s, background 0.2s;
/* Remove default styles set by the user-agent */
outline: 0;
@@ -423,7 +426,8 @@ select:focus {
color: #bfbfbf; /* Fallback */
color: var(--input_text);
text-decoration: none;
box-shadow: inset 0 0 3px 0 var(--highlight_color);
/* box-shadow: inset 0 0 3px 0 var(--highlight_color); */
background: var(--input_hover_background);
}
button:active,
@@ -456,6 +460,7 @@ select:disabled , select.disabled {
transition: none;
padding: 4px 5px 4px 5px;
cursor: not-allowed;
background: var(--input_background);
}
button > i,
.button > i,

1
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -409,6 +409,7 @@ const node_click = (index) => {
margin: 0;
color: var(--body_text_color);
text-decoration: none;
transition: background 0.2s;
}
.node:hover:not(.node_selected) {
background: var(--input_background);

15
webcontroller/style.go
View File

@@ -84,6 +84,7 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
type pixeldrainStyleSheet struct {
Link hsl // Based on Highlight if undefined
Input Color
InputHover Color
InputText Color
InputDisabledText Color
HighlightBackground Color
@@ -121,6 +122,7 @@ func (s pixeldrainStyleSheet) String() string {
`:root {
--link_color: %s;
--input_background: %s;
--input_hover_background: %s;
--input_text: %s;
--input_disabled_text: %s;
--highlight_background: %s;
@@ -153,6 +155,7 @@ func (s pixeldrainStyleSheet) String() string {
}`,
s.Link.CSS(),
s.Input.CSS(),
s.InputHover.CSS(),
s.InputText.CSS(),
s.InputDisabledText.CSS(),
s.HighlightBackground.CSS(),
@@ -216,6 +219,7 @@ func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.U
var defaultPixeldrainStyle = pixeldrainStyleSheet{
Input: hsl{266, .85, .24},
InputHover: hsl{266, .85, .28},
InputText: hsl{0, 0, .9},
InputDisabledText: hsl{266, .85, .4},
HighlightBackground: NewGradient(150, hsl{150, .84, .39}, hsl{85, .85, .35}),
@@ -241,6 +245,7 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
var pixeldrainClassicStyle = pixeldrainStyleSheet{
Input: hsl{0, 0, .16},
InputHover: hsl{0, 0, .20},
InputText: hsl{0, 0, .9},
InputDisabledText: hsl{0, 0, .4},
Highlight: hsl{89, .60, .45},
@@ -259,6 +264,7 @@ var pixeldrainClassicStyle = pixeldrainStyleSheet{
var solarizedDarkStyle = pixeldrainStyleSheet{
Input: hsl{192, .95, .25},
InputHover: hsl{192, .95, .29},
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{145, .63, .42},
@@ -277,6 +283,7 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
var maroonStyle = pixeldrainStyleSheet{
Input: hsl{0, .8, .20}, // hsl(0, 87%, 40%)
InputHover: hsl{0, .8, .24},
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{137, 1, .37}, //hsl(137, 100%, 37%)
@@ -294,7 +301,8 @@ var maroonStyle = pixeldrainStyleSheet{
}
var hackerStyle = pixeldrainStyleSheet{
Input: hsl{0, 0, .1}, // hsl(120, 50%, 10%)
Input: hsl{0, 0, .1},
InputHover: hsl{0, 0, .14},
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{120, .8, .5},
@@ -313,6 +321,7 @@ var hackerStyle = pixeldrainStyleSheet{
var cantaPixeldrainStyle = pixeldrainStyleSheet{
Input: hsl{167, .06, .30}, // hsl(167, 6%, 30%)
InputHover: hsl{167, .06, .34}, // hsl(167, 6%, 30%)
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{165, 1, .40}, // hsl(165, 100%, 40%)
@@ -331,6 +340,7 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
var skeuosPixeldrainStyle = pixeldrainStyleSheet{
Input: hsl{226, .15, .23}, //hsl(226, 15%, 23%)
InputHover: hsl{226, .15, .27},
InputText: hsl{60, .06, .93},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{282, .65, .54}, // hsl(282, 65%, 54%)
@@ -349,6 +359,7 @@ var skeuosPixeldrainStyle = pixeldrainStyleSheet{
var nordPixeldrainStyle = pixeldrainStyleSheet{
Input: hsl{193, .43, .67},
InputHover: hsl{193, .43, .71},
InputText: hsl{180, .19, .23},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{145, .63, .42},
@@ -368,6 +379,7 @@ var nordPixeldrainStyle = pixeldrainStyleSheet{
var snowstormPixeldrainStyle = pixeldrainStyleSheet{
Link: hsl{92, .40, .40},
Input: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
InputHover: hsl{219, .28, .84}, // hsl(219, 28%, 88%)
InputText: hsl{180, .19, .23},
InputDisabledText: hsl{180, .05, .63},
Highlight: hsl{179, .25, .65}, // hsl(92, 28%, 65%)
@@ -391,6 +403,7 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
var sweetPixeldrainStyle = pixeldrainStyleSheet{
Input: hsl{229, .25, .18}, // hsl(229, 25%, 14%)
InputHover: hsl{229, .25, .22}, // hsl(229, 25%, 14%)
InputText: hsl{223, .13, .79},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{296, .88, .44},