ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix color contrasts and improve theme colors

Browse Source
This commit is contained in:
Alice Gaudon 2020-05-02 12:56:40 +02:00
parent 50b01619ed
commit 1542c950ef
5 changed files with 32 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/img/logo.svg
View File

@ -19,9 +19,9 @@
id="svg6"
sodipodi:docname="logo.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox128.png"
inkscape:export-xdpi="512"
inkscape:export-ydpi="512">
inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox1024.png"
inkscape:export-xdpi="4096"
inkscape:export-ydpi="4096">
<metadata
id="metadata12">
<rdf:RDF>
@ -50,8 +50,8 @@
id="namedview8"
showgrid="false"
inkscape:zoom="45.254834"
inkscape:cx="9.0192696"
inkscape:cy="11.978294"
inkscape:cx="12.300687"
inkscape:cy="13.723964"
inkscape:window-x="1920"
inkscape:window-y="32"
inkscape:window-maximized="1"
@ -63,7 +63,7 @@
id="grid4542" />
</sodipodi:namedview>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00766c;fill-opacity:1;fill-rule:nonzero;stroke:#00766c;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00c3b2;fill-opacity:1;fill-rule:nonzero;stroke:#00c3b2;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 4.6020263,4.6020261 c -4.08077722,4.0820101 -4.08077722,10.7139369 0,14.7959479 m 0,0 0.6656889,-0.665689 c -3.7210992,-3.722224 -3.7210992,-9.7423466 0,-13.4645699 L 4.6020263,4.6020261 m 14.7959477,0 -0.665689,0.665689 c 3.721099,3.7222233 3.721099,9.7423459 0,13.4645699 l 0.665689,0.665689 m 0,0 c 4.080777,-4.082011 4.080777,-10.7139378 0,-14.7959479 M 8.0959735,15.904026 c -2.1644289,-2.162022 -2.1644289,-5.655225 0,-7.8172472 m 0,0 L 7.4302847,7.419251 c -2.5246945,2.5218873 -2.5246945,6.628577 0,9.150465 l 0.6656888,-0.66569 M 15.904026,8.0959736 c 2.164429,2.1620214 2.164429,5.6552244 0,7.8172474 m 0,0 0.66569,0.667527 c 2.524693,-2.521887 2.524693,-6.6285761 0,-9.1504633 l -0.66569,0.6656889"
id="path4"
inkscape:connector-curvature="0"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
assets/img/logox1024.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
assets/img/logox128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

20
assets/sass/_vars.scss
View File

@ -1,23 +1,27 @@
$primary: #1e2932;
$primary: darken(#242b33, 2%);
$primaryForeground: #f0f0f0;
$secondary: #00766c;
$secondary: lighten(#00766c, 10%);
$secondaryForeground: $primaryForeground;
$backgroundColor: $primary;
$defaultTextColor: $primaryForeground;
$backgroundColor: darken($primary, 4%);
$defaultTextColor: #ffffff;
$info: #49fb;
$headerBackground: darken($primary, 7.5%);
$footerBackground: lighten($headerBackground, 1%);
$panelBackground: lighten($headerBackground, 1%);
$info: #4499ff;
$infoText: darken($info, 42%);
$infoColor: desaturate($infoText, 50%);
$success: #5f5b;
$success: #55ff55;
$successText: darken($success, 45%);
$successColor: desaturate($successText, 50%);
$warning: #fc0b;
$warning: #ffcc00;
$warningText: darken($warning, 30%);
$warningColor: desaturate($warningText, 50%);
$error: #f00b;
$error: #ff0000;
$errorText: darken($error, 30%);
$errorColor: desaturate($errorText, 50%);

36
assets/sass/layout.scss
View File

@ -30,7 +30,6 @@ header {
height: $headerHeight;
line-height: $headerHeight;
$headerBackground: darken($primary, 1.75%);
background-color: $headerBackground;
.logo {
@ -77,7 +76,7 @@ header {
}
a:hover {
background-color: #fff1;
background-color: rgba(255, 255, 255, 0.07);
}
}
}
@ -87,7 +86,7 @@ footer {
padding: 8px;
margin-top: 8px;
text-align: center;
background-color: darken($primary, 3%);
background-color: $footerBackground;
}
main {
@ -144,7 +143,7 @@ a {
text-decoration: none;
&:hover {
color: lighten($secondary, 10%);
color: lighten($secondary, 5%);
}
.feather.feather-external-link {
@ -190,10 +189,9 @@ form {
input, select, .input-group {
border: 0;
border-bottom: 2px solid #0008;
color: $defaultTextColor;
background: rgba(255, 255, 255, 0.05);
border-radius: 3px 3px 0 0;
background: lighten($panelBackground, 4%);
border-radius: 5px;
font-size: 16px;
&:focus, &:not([value=""]) {
@ -349,10 +347,10 @@ button, .button {
&, &.primary {
color: $primaryForeground;
background-color: $secondary;
background-color: darken($secondary, 10%);
&:hover {
background-color: lighten($secondary, 10%);
background-color: $secondary;
}
}
@ -395,15 +393,15 @@ button, .button {
}
th {
border-bottom: 1px solid #ffffff17;
border-bottom: 1px solid #39434a;
}
tr:nth-child(even) {
background-color: #ffffff08;
background-color: rgba(255, 255, 255, 0.03);
}
tr:hover {
background-color: #ffffff18;
background-color: rgba(255, 255, 255, 0.09);
}
thead tr:hover {
@ -427,8 +425,7 @@ button, .button {
.panel {
margin: 16px 0;
padding: 8px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.03);
background-color: $panelBackground;
border-radius: 5px;
p {
@ -439,13 +436,8 @@ button, .button {
.sub-panel {
margin: 32px -18px;
padding: 1px 16px;
border: 2px solid rgba(255, 255, 255, 0.05);
border: 2px solid lighten($panelBackground, 4%);
border-radius: 5px;
input, select, .input-group {
border-radius: 5px !important;
border-width: 0 !important;
}
}
@ -483,7 +475,7 @@ button, .button {
}
&:not(&-discreet) {
background-color: #fff5;
background-color: rgba(255, 255, 255, 0.33);
&[data-type=info], &[data-type=question] {
background-color: $infoColor;
@ -503,7 +495,7 @@ button, .button {
}
&-discreet {
opacity: 0.75;
color: mix($panelBackground, #fff, 35%);
.feather {
--icon-size: 20px;