nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New buttons with project colors + small bugfix (#80) 

Following the discussion on [#74](hmn/hmn#74), here are changes to the submit buttons so that they match theme/project color.

Border colors are set to match the button background.

I've also included a "bugfix" where the `editor-toolbar-button-background` parameter in the dark theme.css and variables.scss were missing the # sign.

I wasn't sure whether to remove the `form button` values from theme.css and variables.scss and left them, as I'm not sure they're used anywhere now

Reviewed-on: hmn/hmn#80
Co-authored-by: giggs <darkgiggsxx@gmail.com>
Co-committed-by: giggs <darkgiggsxx@gmail.com>
This commit is contained in:
giggs 2022-08-13 02:13:13 +00:00 committed by bvisness
parent bb48a77b9d
commit 9e786e132d
8 changed files with 961 additions and 947 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/style.css
View File

@ -8404,10 +8404,10 @@ input[type=button],
input[type=submit] {
color: black;
color: var(--form-button-color);
background-color: #fff;
background-color: var(--form-button-background);
border-color: #ccc;
border-color: var(--form-button-border-color);
background-color: #666;
background-color: var(--theme-color);
border-color: #666;
border-color: var(--theme-color);
border-width: 1px;
border-style: solid;
display: inline-block;
@ -8422,8 +8422,10 @@ input[type=submit] {
input[type=submit]:hover {
color: #4c9ed9;
color: var(--form-button-color-active);
background-color: #f2f2f2;
background-color: var(--form-button-background-active); }
background-color: #aaa;
background-color: var(--theme-color-dim);
border-color: #aaa;
border-color: var(--theme-color-dim); }
button.lite,
.button.lite,
@ -8527,6 +8529,7 @@ input[type=submit] {
width: 40px;
height: 40px;
flex-shrink: 0;
object-fit: cover;
border-radius: 100%;
overflow: hidden;
object-fit: cover;

2
public/themes/dark/theme.css
View File

@ -270,7 +270,7 @@ pre, code, .codeblock {
--landing-search-background-hover: #181818;
--editor-toolbar-background: #282828;
--editor-toolbar-border-color: #333;
--editor-toolbar-button-background: 282828;
--editor-toolbar-button-background: #282828;
--editor-toolbar-button-background-hover: #333;
--editor-toolbar-button-border-color: #333;
--post-blockquote-border-color: #555;

7
src/rawdata/scss/_forms.scss
View File

@ -150,8 +150,8 @@ input, select, textarea {
}
@include usevar('color', 'form-button-color');
@include usevar('background-color', 'form-button-background');
@include usevar('border-color', 'form-button-border-color');
@include usevar('background-color', 'theme-color');
@include usevar('border-color', 'theme-color');
border-width: 1px;
border-style: solid;
@ -163,7 +163,8 @@ input, select, textarea {
&:hover {
@include usevar('color', 'form-button-color-active');
@include usevar('background-color', 'form-button-background-active');
@include usevar('background-color', 'theme-color-dim');
@include usevar('border-color', 'theme-color-dim');
}
&.lite {

1
src/rawdata/scss/_forum.scss
View File

@ -54,6 +54,7 @@
width: 40px;
height: 40px;
flex-shrink: 0;
object-fit: cover;
border-radius: 100%;
overflow: hidden;
object-fit: cover;

2
src/rawdata/scss/themes/dark/_variables.scss
View File

@ -77,7 +77,7 @@ $vars: (
editor-toolbar-background: #282828,
editor-toolbar-border-color: #333,
editor-toolbar-button-background: 282828,
editor-toolbar-button-background: #282828,
editor-toolbar-button-background-hover: #333,
editor-toolbar-button-border-color: #333,

13
src/templates/src/project.css
View File

@ -38,11 +38,20 @@ header .content-title .subtitle {
border-top-color: var(--theme-dim);
}
a, .thread:before, button, .button, input[type=button], input[type=submit] {
a, .thread:before, button, .button, input[type=button] {
color: {{ $linkColor }};
color: var(--link-color);
}
a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover {
.submit, input[type=submit] {
color: white;
}
a.submit:hover, .submit:hover, input[type=submit]:hover {
color: white;
}
a:hover, button:hover, .button:hover, input[type=button]:hover {
color: {{ $linkHoverColor }};
color: var(--link-hover-color);
}

4
src/templates/src/project_edit.html
View File

@ -141,7 +141,7 @@
{{ if .Editing }}
<input type="submit" value="Save" />
{{ else }}
<a class="button" href="javascript:;" onclick="gotoTab('description');">Next</a>
<a class="button submit" href="javascript:;" onclick="gotoTab('description');">Next</a>
{{ end }}
</div>
</div>
@ -196,7 +196,7 @@
{{ if .Editing }}
<input type="submit" value="Save" />
{{ else }}
<a class="button" href="javascript:;" onclick="gotoTab('assets');">Next</a>
<a class="button submit" href="javascript:;" onclick="gotoTab('assets');">Next</a>
{{ end }}
</div>
</div>

2
src/templates/src/user_profile.html
View File

@ -137,7 +137,7 @@
{{ end }}
{{ if .OwnProfile }}
{{ if .CanAddProject }}
<a href="{{ .NewProjectUrl }}" class="button pv2 ph3">Add New Project</a>
<a href="{{ .NewProjectUrl }}" class="button submit pv2 ph3">Add New Project</a>
{{ else }}
<span class="c--dim i">You have reached the maximum number of personal projects.</span>
{{ end }}