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" id="svg6"
sodipodi:docname="logo.svg" sodipodi:docname="logo.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)" inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox128.png" inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox1024.png"
inkscape:export-xdpi="512" inkscape:export-xdpi="4096"
inkscape:export-ydpi="512"> inkscape:export-ydpi="4096">
<metadata <metadata
id="metadata12"> id="metadata12">
<rdf:RDF> <rdf:RDF>
@ -50,8 +50,8 @@
id="namedview8" id="namedview8"
showgrid="false" showgrid="false"
inkscape:zoom="45.254834" inkscape:zoom="45.254834"
inkscape:cx="9.0192696" inkscape:cx="12.300687"
inkscape:cy="11.978294" inkscape:cy="13.723964"
inkscape:window-x="1920" inkscape:window-x="1920"
inkscape:window-y="32" inkscape:window-y="32"
inkscape:window-maximized="1" inkscape:window-maximized="1"
@ -63,7 +63,7 @@
id="grid4542" /> id="grid4542" />
</sodipodi:namedview> </sodipodi:namedview>
<path <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" 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" id="path4"
inkscape:connector-curvature="0" 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; $primaryForeground: #f0f0f0;
$secondary: #00766c; $secondary: lighten(#00766c, 10%);
$secondaryForeground: $primaryForeground; $secondaryForeground: $primaryForeground;
$backgroundColor: $primary; $backgroundColor: darken($primary, 4%);
$defaultTextColor: $primaryForeground; $defaultTextColor: #ffffff;
$info: #49fb; $headerBackground: darken($primary, 7.5%);
$footerBackground: lighten($headerBackground, 1%);
$panelBackground: lighten($headerBackground, 1%);
$info: #4499ff;
$infoText: darken($info, 42%); $infoText: darken($info, 42%);
$infoColor: desaturate($infoText, 50%); $infoColor: desaturate($infoText, 50%);
$success: #5f5b; $success: #55ff55;
$successText: darken($success, 45%); $successText: darken($success, 45%);
$successColor: desaturate($successText, 50%); $successColor: desaturate($successText, 50%);
$warning: #fc0b; $warning: #ffcc00;
$warningText: darken($warning, 30%); $warningText: darken($warning, 30%);
$warningColor: desaturate($warningText, 50%); $warningColor: desaturate($warningText, 50%);
$error: #f00b; $error: #ff0000;
$errorText: darken($error, 30%); $errorText: darken($error, 30%);
$errorColor: desaturate($errorText, 50%); $errorColor: desaturate($errorText, 50%);

36
assets/sass/layout.scss
View File

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