hmn
/
hmn
4
Fork 10
Code Issues 59 Pull Requests 1 Releases Activity

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

Following the discussion on [#74](#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: #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

37
public/style.css
View File

@ -2519,39 +2519,39 @@ img, video {
/* Monospaced Typefaces (for code) */ /* Monospaced Typefaces (for code) */
/* From http://cssfontstack.com */ /* From http://cssfontstack.com */
code, .code { code, .code {
font-family: Consolas, monaco, monospace; } font-family: Consolas, monaco, monospace; }
.courier { .courier {
font-family: 'Courier Next', courier, monospace; } font-family: 'Courier Next', courier, monospace; }
/* Sans-Serif Typefaces */ /* Sans-Serif Typefaces */
.helvetica { .helvetica {
font-family: 'helvetica neue', helvetica, sans-serif; } font-family: 'helvetica neue', helvetica, sans-serif; }
.avenir { .avenir {
font-family: 'avenir next', avenir, sans-serif; } font-family: 'avenir next', avenir, sans-serif; }
/* Serif Typefaces */ /* Serif Typefaces */
.athelas { .athelas {
font-family: athelas, georgia, serif; } font-family: athelas, georgia, serif; }
.georgia { .georgia {
font-family: georgia, serif; } font-family: georgia, serif; }
.times { .times {
font-family: times, serif; } font-family: times, serif; }
.bodoni { .bodoni {
font-family: "Bodoni MT", serif; } font-family: "Bodoni MT", serif; }
.calisto { .calisto {
font-family: "Calisto MT", serif; } font-family: "Calisto MT", serif; }
.garamond { .garamond {
font-family: garamond, serif; } font-family: garamond, serif; }
.baskerville { .baskerville {
font-family: baskerville, serif; } font-family: baskerville, serif; }
/* /*
@ -8404,10 +8404,10 @@ input[type=button],
input[type=submit] { input[type=submit] {
color: black; color: black;
color: var(--form-button-color); color: var(--form-button-color);
background-color: #fff; background-color: #666;
background-color: var(--form-button-background); background-color: var(--theme-color);
border-color: #ccc; border-color: #666;
border-color: var(--form-button-border-color); border-color: var(--theme-color);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
display: inline-block; display: inline-block;
@ -8422,8 +8422,10 @@ input[type=submit] {
input[type=submit]:hover { input[type=submit]:hover {
color: #4c9ed9; color: #4c9ed9;
color: var(--form-button-color-active); color: var(--form-button-color-active);
background-color: #f2f2f2; background-color: #aaa;
background-color: var(--form-button-background-active); } background-color: var(--theme-color-dim);
border-color: #aaa;
border-color: var(--theme-color-dim); }
button.lite, button.lite,
.button.lite, .button.lite,
@ -8527,6 +8529,7 @@ input[type=submit] {
width: 40px; width: 40px;
height: 40px; height: 40px;
flex-shrink: 0; flex-shrink: 0;
object-fit: cover;
border-radius: 100%; border-radius: 100%;
overflow: hidden; overflow: hidden;
object-fit: cover; object-fit: cover;

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

@ -270,7 +270,7 @@ pre, code, .codeblock {
--landing-search-background-hover: #181818; --landing-search-background-hover: #181818;
--editor-toolbar-background: #282828; --editor-toolbar-background: #282828;
--editor-toolbar-border-color: #333; --editor-toolbar-border-color: #333;
--editor-toolbar-button-background: 282828; --editor-toolbar-button-background: #282828;
--editor-toolbar-button-background-hover: #333; --editor-toolbar-button-background-hover: #333;
--editor-toolbar-button-border-color: #333; --editor-toolbar-button-border-color: #333;
--post-blockquote-border-color: #555; --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('color', 'form-button-color');
@include usevar('background-color', 'form-button-background'); @include usevar('background-color', 'theme-color');
@include usevar('border-color', 'form-button-border-color'); @include usevar('border-color', 'theme-color');
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
@ -163,7 +163,8 @@ input, select, textarea {
&:hover { &:hover {
@include usevar('color', 'form-button-color-active'); @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 { &.lite {

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

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

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

@ -77,7 +77,7 @@ $vars: (
editor-toolbar-background: #282828, editor-toolbar-background: #282828,
editor-toolbar-border-color: #333, editor-toolbar-border-color: #333,
editor-toolbar-button-background: 282828, editor-toolbar-button-background: #282828,
editor-toolbar-button-background-hover: #333, editor-toolbar-button-background-hover: #333,
editor-toolbar-button-border-color: #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); 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: {{ $linkColor }};
color: var(--link-color); 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: {{ $linkHoverColor }};
color: var(--link-hover-color); color: var(--link-hover-color);
} }

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

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

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

@ -137,7 +137,7 @@
{{ end }} {{ end }}
{{ if .OwnProfile }} {{ if .OwnProfile }}
{{ if .CanAddProject }} {{ 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 }} {{ else }}
<span class="c--dim i">You have reached the maximum number of personal projects.</span> <span class="c--dim i">You have reached the maximum number of personal projects.</span>
{{ end }} {{ end }}