punkfairie/retrofairie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

98.css

Browse source
This commit is contained in:
punkfairie 2025-02-22 16:39:26 -08:00
parent 571d6021a1
commit 6a61edf7e1
Signed by: punkfairie
GPG key ID: B3C5488E9A1A7CA6
30 changed files with 432 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package.json
View file

@ -16,17 +16,11 @@
"concurrently": "^9.0.1", "concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.2.0", "laravel-vite-plugin": "^1.2.0",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"postcss-calc": "^10.1.1",
"prettier": "^3.5.1", "prettier": "^3.5.1",
"prettier-plugin-blade": "^2.1.19", "prettier-plugin-blade": "^2.1.19",
"prettier-plugin-tailwindcss": "^0.6.11", "prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^4.0.7", "tailwindcss": "^4.0.7",
"vite": "^6.0.11" "vite": "^6.0.11"
},
"dependencies": {
"postcss-calc": "^10.1.1",
"postcss-css-variables": "^0.19.0",
"postcss-inline": "^1.2.0",
"postcss-inline-svg": "^6.0.0",
"postcss-use": "^3.0.0"
} }
} }

349
resources/css/98.css
View file

@ -6,17 +6,37 @@
:root { :root {
/* Color */ /* Color */
--text-color: #222222; /* https://www.deviantart.com/tpenguinltg/art/Peggy-s-Pastels-505540096 */
--surface: #c0c0c0; --active-border: rgb(0, 191, 188);
--button-highlight: #ffffff; --active-title: rgb(0, 191, 188);
--button-face: #dfdfdf; --app-workspace: rgb(255, 184, 182);
--button-shadow: #808080; --background: rgb(162, 219, 210);
--window-frame: #0a0a0a; --button-alternate-face: rgb(181, 181, 181);
--dialog-blue: #000080; --button-dk-shadow: rgb(64, 64, 64);
--dialog-blue-light: #1084d0; --button-face: rgb(244, 193, 202);
--dialog-gray: #808080; --button-hilight: rgb(250, 224, 228);
--dialog-gray-light: #b5b5b5; --button-light: rgb(247, 219, 215);
--link-blue: #0000ff; --button-shadow: rgb(222, 69, 96);
--button-text: rgb(0, 0, 0);
--gradient-active-title: rgb(202, 156, 185);
--gradient-inactive-title: rgb(236, 145, 162);
--gray-text: rgb(222, 69, 96);
--hilight: rgb(162, 219, 210);
--hilight-text: rgb(0, 0, 0);
--hot-tracking-color: rgb(0, 128, 128);
--inactive-border: rgb(244, 193, 202);
--inactive-title: rgb(0, 187, 169);
--inactive-title-text: rgb(0, 85, 77);
--info-text: rgb(0, 0, 0);
--info-window: rgb(204, 255, 255);
--menu: rgb(244, 193, 202);
--menu-hilight: rgb(162, 219, 210);
--menu-text: rgb(0, 0, 0);
--scrollbar: rgb(250, 224, 228);
--title-text: rgb(255, 255, 255);
--window: rgb(244, 255, 255);
--window-frame: rgb(0, 0, 0);
--window-text: rgb(0, 0, 0);
/* Spacing */ /* Spacing */
--element-spacing: 8px; --element-spacing: 8px;
@ -46,37 +66,48 @@ :root {
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
--border-raised-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-highlight); --border-raised-outer: inset -1px -1px var(--button-dk-shadow),
inset 1px 1px var(--button-hilight);
--border-raised-inner: inset -2px -2px var(--button-shadow), --border-raised-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-face); inset 2px 2px var(--button-light);
--border-sunken-outer: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--window-frame); --border-sunken-outer: inset -1px -1px var(--button-hilight),
--border-sunken-inner: inset -2px -2px var(--button-face), inset 1px 1px var(--button-shadow);
inset 2px 2px var(--button-shadow); --border-sunken-inner: inset -2px -2px var(--button-light),
--default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame); inset 2px 2px var(--button-dk-shadow);
--default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
--default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame); --default-button-border-raised-outer: inset -2px -2px var(--button-dk-shadow),
--default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face); inset 2px 2px var(--button-hilight);
--default-button-border-raised-inner: inset -3px -3px var(--button-shadow),
inset 3px 3px var(--button-light);
--default-button-border-sunken-outer: inset 2px 2px var(--button-dk-shadow),
inset -1px -1px var(--button-dk-shadow);
--default-button-border-sunken-inner: inset -2px -2px var(--button-hilight),
inset -3px -3px var(--button-light),
inset 3px 3px var(--button-dk-shadow);
/* Window borders flip button-face and button-highlight */ /* Window borders flip button-light and button-hilight */
--border-window-outer: inset -1px -1px var(--window-frame), --border-window-outer: inset -1px -1px var(--button-dk-shadow),
inset 1px 1px var(--button-face); inset 1px 1px var(--button-light);
--border-window-inner: inset -2px -2px var(--button-shadow), --border-window-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-highlight); inset 2px 2px var(--button-hilight);
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ /* Field borders (checkbox, input, etc) flip button-dk-shadow and button-shadow of sunken */
--border-field: inset -1px -1px var(--button-highlight), --border-field: inset -1px -1px var(--button-hilight),
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 1px 1px var(--button-shadow),
inset 2px 2px var(--window-frame); inset -2px -2px var(--button-light),
--border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow); inset 2px 2px var(--button-dk-shadow);
--border-status-field: inset -1px -1px var(--button-hilight),
inset 1px 1px var(--button-shadow);
/* Tabs */ /* Tabs */
--border-tab: inset -1px 0 var(--window-frame), --border-tab: inset -1px 0 var(--button-dk-shadow),
inset 1px 1px var(--button-face), inset 1px 1px var(--button-hilight),
inset -2px 0 var(--button-shadow), inset -2px 0 var(--button-shadow),
inset 2px 2px var(--button-highlight) inset 2px 2px var(--button-light);
} }
@font-face { @font-face {
@ -98,7 +129,7 @@ @font-face {
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 12px; font-size: 12px;
color: var(--text-color); color: var(--window-text);
} }
button, button,
@ -138,7 +169,7 @@ h4 {
u { u {
text-decoration: none; text-decoration: none;
/*noinspection CssNonIntegerLengthInPixels*/ /*noinspection CssNonIntegerLengthInPixels*/
border-bottom: 0.5px solid #222222; border-bottom: 0.5px solid var(--window-text);
} }
button, button,
@ -148,8 +179,8 @@ input[type="reset"] {
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
color: transparent; color: transparent;
text-shadow: 0 0 var(--text-color); text-shadow: 0 0 var(--window-text);
background: var(--surface); background: var(--button-face);
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: var(--border-raised-outer), var(--border-raised-inner);
border-radius: 0; border-radius: 0;
@ -162,7 +193,7 @@ button.default,
.button.default, .button.default,
input[type="submit"].default, input[type="submit"].default,
input[type="reset"].default { input[type="reset"].default {
box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner); box-shadow: inset 0 0 0 1px var(--button-text), var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
} }
.vertical-bar { .vertical-bar {
@ -177,7 +208,7 @@ .button:not(:disabled):active,
input[type="submit"]:not(:disabled):active, input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active { input[type="reset"]:not(:disabled):active {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
text-shadow: 1px 1px var(--text-color); text-shadow: 1px 1px var(--window-text);
} }
button.default:not(:disabled):active, button.default:not(:disabled):active,
@ -188,11 +219,12 @@ input[type="reset"].default:not(:disabled):active {
} }
/* @formatter:off */ /* @formatter:off */
@media(not(hover)) { @media (not(hover)) {
button:not(:disabled):hover, button:not(:disabled):hover,
.button:not(:disabled):hover, .button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover { input[type="reset"]:not(:disabled):hover {
/*noinspection CssUnknownProperty*/
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
} }
} }
@ -202,7 +234,7 @@ button:focus,
.button:focus, .button:focus,
input[type="submit"]:focus, input[type="submit"]:focus,
input[type="reset"]:focus { input[type="reset"]:focus {
outline: 1px dotted #000000; outline: 1px dotted var(--window-frame);
outline-offset: -4px; outline-offset: -4px;
} }
@ -225,20 +257,20 @@ .button:disabled,
input[type="submit"]:disabled, input[type="submit"]:disabled,
input[type="reset"]:disabled, input[type="reset"]:disabled,
:disabled + label { :disabled + label {
text-shadow: 1px 1px 0 var(--button-highlight); text-shadow: 1px 1px 0 var(--button-hilight);
} }
.window { .window {
box-shadow: var(--border-window-outer), var(--border-window-inner); box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface); background: var(--button-face);
padding: 3px; padding: 3px;
} }
.title-bar { .title-bar {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--dialog-blue), var(--active-title),
var(--dialog-blue-light) var(--gradient-active-title)
); );
padding: 3px 2px 3px 3px; padding: 3px 2px 3px 3px;
display: flex; display: flex;
@ -249,8 +281,8 @@ .title-bar {
.title-bar.inactive { .title-bar.inactive {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--dialog-gray), var(--inactive-title),
var(--dialog-gray-light) var(--gradient-inactive-title)
); );
} }
@ -282,45 +314,35 @@ .title-bar-controls button:focus {
.title-bar-controls button[aria-label="Minimize"], .title-bar-controls button[aria-label="Minimize"],
.title-bar-controls button.minimize { .title-bar-controls button.minimize {
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/minimize.svg");
/*background-image: svg-load("./icon/minimize.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom 3px left 4px; background-position: bottom 3px left 4px;
} }
.title-bar-controls button[aria-label="Maximize"], .title-bar-controls button[aria-label="Maximize"],
.title-bar-controls button.maximize { .title-bar-controls button.maximize {
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/maximize.svg");
/*background-image: svg-load("./icon/maximize.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; background-position: top 2px left 3px;
} }
.title-bar-controls button[aria-label="Maximize"]:disabled, .title-bar-controls button[aria-label="Maximize"]:disabled,
.title-bar-controls button.maximize:disabled { .title-bar-controls button.maximize:disabled {
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/maximize-disabled.svg");
/*background-image: svg-load("./icon/maximize-disabled.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='gray'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; background-position: top 2px left 3px;
} }
.title-bar-controls button[aria-label="Restore"], .title-bar-controls button[aria-label="Restore"],
.title-bar-controls button.restore { .title-bar-controls button.restore {
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/restore.svg");
/*background-image: svg-load("./icon/restore.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; background-position: top 2px left 3px;
} }
.title-bar-controls button[aria-label="Help"], .title-bar-controls button[aria-label="Help"],
.title-bar-controls button.help { .title-bar-controls button.help {
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/help.svg");
/*background-image: svg-load("./icon/help.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 5px; background-position: top 2px left 5px;
} }
@ -328,9 +350,7 @@ .title-bar-controls button.help {
.title-bar-controls button[aria-label="Close"], .title-bar-controls button[aria-label="Close"],
.title-bar-controls button.close { .title-bar-controls button.close {
margin-left: 2px; margin-left: 2px;
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/close.svg");
/*background-image: svg-load("icon/close.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 3px left 4px; background-position: top 3px left 4px;
} }
@ -354,14 +374,14 @@ .window-body {
fieldset { fieldset {
/*noinspection CssInvalidFunction*/ /*noinspection CssInvalidFunction*/
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2; border-image: url("../images/icon/groupbox-border.svg");
padding: calc(2 * var(--border-width) + var(--element-spacing)); padding: calc(2 * var(--border-width) + var(--element-spacing));
padding-block-start: var(--element-spacing); padding-block-start: var(--element-spacing);
margin: 0; margin: 0;
} }
legend { legend {
background: var(--surface); background: var(--button-face);
} }
.field-row { .field-row {
@ -423,15 +443,11 @@ input[type="radio"] + label::before {
width: var(--radio-width); width: var(--radio-width);
height: var(--radio-width); height: var(--radio-width);
margin-right: var(--radio-label-spacing); margin-right: var(--radio-label-spacing);
/*noinspection CssInvalidFunction*/ background: url("../images/icon/radio-border.svg");
/*background: svg-load("./icon/radio-border.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E");
} }
input[type="radio"]:active + label::before { input[type="radio"]:active + label::before {
/*noinspection CssInvalidFunction*/ background: url("../images/icon/radio-border-disabled.svg");
/*background: svg-load("./icon/radio-border-disabled.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E");
} }
input[type="radio"]:checked + label::after { input[type="radio"]:checked + label::after {
@ -442,26 +458,20 @@ input[type="radio"]:checked + label::after {
top: var(--radio-dot-top); top: var(--radio-dot-top);
left: var(--radio-dot-left); left: var(--radio-dot-left);
position: absolute; position: absolute;
/*noinspection CssInvalidFunction*/ background: url("../images/icon/radio-dot.svg");
/*background: svg-load("./icon/radio-dot.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E");
} }
input[type="radio"]:focus + label, input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
outline: 1px dotted #000000; outline: 1px dotted var(--window-frame);
} }
input[type="radio"][disabled] + label::before { input[type="radio"][disabled] + label::before {
/*noinspection CssInvalidFunction*/ background: url("../images/icon/radio-border-disabled.svg");
/*background: svg-load("./icon/radio-border-disabled.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E");
} }
input[type="radio"][disabled]:checked + label::after { input[type="radio"][disabled]:checked + label::after {
/*noinspection CssInvalidFunction*/ background: url("../images/icon/radio-dot-disabled.svg");
/*background: svg-load("./icon/radio-dot-disabled.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E");
} }
input[type="checkbox"] + label { input[type="checkbox"] + label {
@ -476,13 +486,13 @@ input[type="checkbox"] + label::before {
display: inline-block; display: inline-block;
width: var(--checkbox-width); width: var(--checkbox-width);
height: var(--checkbox-width); height: var(--checkbox-width);
background: var(--button-highlight); background: var(--window);
box-shadow: var(--border-field); box-shadow: var(--border-field);
margin-right: var(--radio-label-spacing); margin-right: var(--radio-label-spacing);
} }
input[type="checkbox"]:active + label::before { input[type="checkbox"]:active + label::before {
background: var(--surface); background: var(--button-face);
} }
input[type="checkbox"]:checked + label::after { input[type="checkbox"]:checked + label::after {
@ -494,19 +504,15 @@ input[type="checkbox"]:checked + label::after {
left: calc( left: calc(
-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
); );
/*noinspection CssInvalidFunction*/ background: url("../images/icon/checkmark.svg");
/*background: svg-load("./icon/checkmark.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E");
} }
input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled] + label::before {
background: var(--surface); background: var(--button-face);
} }
input[type="checkbox"][disabled]:checked + label::after { input[type="checkbox"][disabled]:checked + label::after {
/*noinspection CssInvalidFunction*/ background: url("../images/icon/checkmark-disabled.svg");
/*background: svg-load("./icon/checkmark-disabled.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E");
} }
input[type="text"], input[type="text"],
@ -521,7 +527,7 @@ textarea {
padding: 3px 4px; padding: 3px 4px;
border: none; border: none;
box-shadow: var(--border-field); box-shadow: var(--border-field);
background-color: var(--button-highlight); background-color: var(--window);
box-sizing: border-box; box-sizing: border-box;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -591,7 +597,7 @@ input[type="text"]:read-only,
input[type="number"]:read-only, input[type="number"]:read-only,
input[type="search"]:read-only, input[type="search"]:read-only,
textarea:disabled { textarea:disabled {
background-color: var(--surface); background-color: var(--button-face);
} }
select { select {
@ -600,9 +606,7 @@ select {
-moz-appearance: none; -moz-appearance: none;
position: relative; position: relative;
padding-right: 32px; padding-right: 32px;
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/button-down.svg");
/*background-image: svg-load("./icon/button-down.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
background-position: top 2px right 2px; background-position: top 2px right 2px;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 0; border-radius: 0;
@ -634,18 +638,14 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
height: 21px; height: 21px;
width: 11px; width: 11px;
/*noinspection CssInvalidFunction*/ background: url("../images/icon/indicator-horizontal.svg");
/*background: svg-load("./icon/indicator-horizontal.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: none; box-shadow: none;
border: none; border: none;
} }
input[type="range"].has-box-indicator::-webkit-slider-thumb { input[type="range"].has-box-indicator::-webkit-slider-thumb {
/*noinspection CssInvalidFunction*/ background: url("../images/icon/indicator-rectangle-horizontal.svg");
/*background: svg-load("./icon/indicator-rectangle-horizontal.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");
transform: translateY(-10px); transform: translateY(-10px);
} }
@ -654,39 +654,31 @@ input[type="range"]::-moz-range-thumb {
width: 11px; width: 11px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
/*noinspection CssInvalidFunction*/ background: url("../images/icon/indicator-horizontal.svg");
/*background: svg-load("icon/indicator-horizontal.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");
transform: translateY(2px); transform: translateY(2px);
} }
input[type="range"].has-box-indicator::-moz-range-thumb { input[type="range"].has-box-indicator::-moz-range-thumb {
/*noinspection CssInvalidFunction*/ background: url("../images/./icon/indicator-rectangle-horizontal.svg");
/*background: svg-load("./icon/indicator-rectangle-horizontal.svg");*/
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");
transform: translateY(0px); transform: translateY(0px);
} }
input[type="range"]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track,
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
input[type="range"]::-moz-range-track { input[type="range"]::-moz-range-track {
width: 100%; width: 100%;
height: 2px; height: 2px;
box-sizing: border-box; box-sizing: border-box;
background: black; background: var(--button-dk-shadow);
border-right: 1px solid grey; border-right: 1px solid var(--button-light);
border-bottom: 1px solid grey; border-bottom: 1px solid var(--button-light);
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, box-shadow: 1px 0 0 var(--button-hilight),
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey; 1px 1px 0 var(--button-hilight),
0 1px 0 var(--button-hilight),
-1px 0 0 var(--button-shadow),
-1px -1px 0 var(--button-shadow),
0 -1px 0 var(--button-shadow),
-1px 1px 0 var(--button-hilight),
1px -1px var(--button-hilight);
} }
.is-vertical { .is-vertical {
@ -704,20 +696,19 @@ .is-vertical > input[type="range"] {
transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing))); transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
} }
.is-vertical > input[type="range"]::-webkit-slider-runnable-track,
.is-vertical > input[type="range"]::-webkit-slider-runnable-track { .is-vertical > input[type="range"]::-webkit-slider-runnable-track {
border-left: 1px solid grey; border-left: 1px solid var(--button-light);
border-right: 0; border-right: 0;
border-bottom: 1px solid grey; border-bottom: 1px solid var(--button-light);
box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, box-shadow: -1px 0 0 var(--button-hilight),
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey; -1px 1px 0 var(--button-hilight),
} 0 1px 0 var(--button-hilight),
1px 0 0 var(--button-shadow),
.is-vertical > input[type="range"]::-moz-range-track { 1px -1px 0 var(--button-shadow),
border-left: 1px solid grey; 0 -1px 0 var(--button-shadow),
border-right: 0; 1px 1px 0 var(--button-hilight),
border-bottom: 1px solid grey; -1px -1px var(--button-hilight);
box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
} }
.is-vertical > input[type="range"]::-webkit-slider-thumb { .is-vertical > input[type="range"]::-webkit-slider-thumb {
@ -737,32 +728,30 @@ .is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
} }
select:focus { select:focus {
color: var(--button-highlight); color: var(--hilight-text);
background-color: var(--dialog-blue); background-color: var(--hilight);
} }
select:focus option { select:focus option {
color: #000; color: var(--menu-text);
background-color: #fff; background-color: var(--window);
} }
select:active { select:active {
/*noinspection CssInvalidFunction*/ background-image: url("../images/./icon/button-down-active.svg");
/*background-image: svg-load("./icon/button-down-active.svg");*/
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E");
} }
a { a {
color: var(--link-blue); color: var(--hot-tracking-color);
} }
a:focus { a:focus {
outline: 1px dotted var(--link-blue); outline: 1px dotted var(--window-frame);
} }
ul.tree-view { ul.tree-view {
display: block; display: block;
background: var(--button-highlight); background: var(--window);
box-shadow: var(--border-field); box-shadow: var(--border-field);
padding: 6px; padding: 6px;
margin: 0; margin: 0;
@ -774,12 +763,12 @@ ul.tree-view li {
ul.tree-view a { ul.tree-view a {
text-decoration: none; text-decoration: none;
color: #000; color: var(--window-text);
} }
ul.tree-view a:focus { ul.tree-view a:focus {
background-color: var(--dialog-blue); background-color: var(--hilight);
color: var(--button-highlight); color: var(--hilight-text);
} }
ul.tree-view ul, ul.tree-view ul,
@ -791,7 +780,7 @@ ul.tree-view ul {
margin-left: 16px; margin-left: 16px;
padding-left: 16px; padding-left: 16px;
/* Goes down too far */ /* Goes down too far */
border-left: 1px dotted #808080; border-left: 1px dotted var(--button-shadow);
} }
ul.tree-view ul > li { ul.tree-view ul > li {
@ -805,7 +794,7 @@ ul.tree-view ul > li::before {
left: -16px; left: -16px;
top: 6px; top: 6px;
width: 12px; width: 12px;
border-bottom: 1px dotted #808080; border-bottom: 1px dotted var(--button-shadow);
} }
/* Cover the bottom of the left dotted border */ /* Cover the bottom of the left dotted border */
@ -817,7 +806,7 @@ ul.tree-view ul > li:last-child::after {
top: 7px; top: 7px;
bottom: 0; bottom: 0;
width: 8px; width: 8px;
background: var(--button-highlight); background: var(--window);
} }
ul.tree-view details { ul.tree-view details {
@ -839,13 +828,13 @@ ul.tree-view details > summary:before {
display: block; display: block;
float: left; float: left;
content: "+"; content: "+";
border: 1px solid #808080; border: 1px solid var(--button-shadow);
width: 8px; width: 8px;
height: 9px; height: 9px;
line-height: 8px; line-height: 8px;
margin-right: 5px; margin-right: 5px;
padding-left: 1px; padding-left: 1px;
background-color: #fff; background-color: var(--window);
} }
ul.tree-view details[open] > summary:before { ul.tree-view details[open] > summary:before {
@ -859,7 +848,7 @@ ul.tree-view details > summary::-webkit-details-marker {
pre { pre {
display: block; display: block;
background: var(--button-highlight); background: var(--window);
box-shadow: var(--border-field); box-shadow: var(--border-field);
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
@ -871,7 +860,7 @@ code * {
} }
summary:focus { summary:focus {
outline: 1px dotted #000000; outline: 1px dotted var(--window-frame);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -887,8 +876,7 @@ summary:focus {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/scrollbar-background.svg");
background-image: svg-load("./icon/scrollbar-background.svg");
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@ -905,26 +893,22 @@ summary:focus {
::-webkit-scrollbar-button:vertical:start { ::-webkit-scrollbar-button:vertical:start {
height: 17px; height: 17px;
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/button-up.svg");
background-image: svg-load("./icon/button-up.svg");
} }
::-webkit-scrollbar-button:vertical:end { ::-webkit-scrollbar-button:vertical:end {
height: 17px; height: 17px;
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/button-down.svg");
background-image: svg-load("./icon/button-down.svg");
} }
::-webkit-scrollbar-button:horizontal:start { ::-webkit-scrollbar-button:horizontal:start {
width: 16px; width: 16px;
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/button-left.svg");
background-image: svg-load("./icon/button-left.svg");
} }
::-webkit-scrollbar-button:horizontal:end { ::-webkit-scrollbar-button:horizontal:end {
width: 16px; width: 16px;
/*noinspection CssInvalidFunction*/ background-image: url("../images/icon/button-right.svg");
background-image: svg-load("./icon/button-right.svg");
} }
.window[role=tabpanel] { .window[role=tabpanel] {
@ -951,7 +935,7 @@ menu[role=tablist] > li {
menu[role=tablist] > li[aria-selected=true] { menu[role=tablist] > li[aria-selected=true] {
padding-bottom: 2px; padding-bottom: 2px;
margin-top: -2px; margin-top: -2px;
background-color: var(--surface); background-color: var(--button-face);
position: relative; position: relative;
z-index: 8; z-index: 8;
margin-left: -3px; margin-left: -3px;
@ -959,7 +943,7 @@ menu[role=tablist] > li[aria-selected=true] {
menu[role=tablist] > li > a { menu[role=tablist] > li > a {
display: block; display: block;
color: #222; color: var(--window-text);
margin: 6px; margin: 6px;
text-decoration: none; text-decoration: none;
} }
@ -969,7 +953,7 @@ menu[role=tablist] > li[aria-selected=true] > a:focus {
} }
menu[role=tablist] > li > a:focus { menu[role=tablist] > li > a:focus {
outline: 1px dotted #222; outline: 1px dotted var(--window-frame);
} }
menu[role=tablist].multirows > li { menu[role=tablist].multirows > li {
@ -980,10 +964,9 @@ menu[role=tablist].multirows > li {
.sunken-panel { .sunken-panel {
box-sizing: border-box; box-sizing: border-box;
border: 2px groove transparent; border: 2px groove transparent;
/*noinspection CssInvalidFunction*/ border-image: url("../images/icon/sunken-panel-border.svg") 2;
border-image: svg-load("./icon/sunken-panel-border.svg") 2;
overflow: auto; overflow: auto;
background-color: #fff; background-color: var(--window);
} }
table { table {
@ -991,7 +974,7 @@ table {
position: relative; position: relative;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
background-color: #fff; background-color: var(--window);
} }
table > thead > tr > * { table > thead > tr > * {
@ -999,7 +982,7 @@ table > thead > tr > * {
top: 0; top: 0;
height: 17px; height: 17px;
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: var(--border-raised-outer), var(--border-raised-inner);
background: var(--surface); background: var(--button-face);
box-sizing: border-box; box-sizing: border-box;
font-weight: normal; font-weight: normal;
padding: 0 var(--grouped-element-spacing); padding: 0 var(--grouped-element-spacing);
@ -1010,8 +993,8 @@ table.interactive > tbody > tr {
} }
table > tbody > tr.highlighted { table > tbody > tr.highlighted {
color: #fff; color: var(--hilight-text);
background-color: var(--dialog-blue); background-color: var(--hilight);
} }
table > tbody > tr > * { table > tbody > tr > * {
@ -1036,7 +1019,7 @@ .progress-indicator {
.progress-indicator > .progress-indicator-bar { .progress-indicator > .progress-indicator-bar {
height: 100%; height: 100%;
display: block; display: block;
background-color: var(--dialog-blue); background-color: var(--hilight);
} }
.progress-indicator.segmented > .progress-indicator-bar { .progress-indicator.segmented > .progress-indicator-bar {
@ -1044,7 +1027,7 @@ .progress-indicator.segmented > .progress-indicator-bar {
background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */ background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
var(--dialog-blue) 0 16px, var(--hilight) 0 16px,
transparent 0 2px transparent 0 2px
); );
background-repeat: repeat; background-repeat: repeat;
@ -1052,19 +1035,19 @@ .progress-indicator.segmented > .progress-indicator-bar {
} }
.field-border { .field-border {
background: var(--button-highlight); background: var(--button-hilight);
box-shadow: var(--border-field); box-shadow: var(--border-field);
padding: 2px; padding: 2px;
} }
.field-border-disabled { .field-border-disabled {
background: var(--surface); background: var(--button-face);
box-shadow: var(--border-field); box-shadow: var(--border-field);
padding: 2px; padding: 2px;
} }
.status-field-border { .status-field-border {
background: var(--surface); background: var(--button-face);
box-shadow: var(--border-status-field); box-shadow: var(--border-status-field);
padding: 1px; padding: 1px;
} }

12
resources/images/icon/button-down-active.svg
View file

@ -1,5 +1,9 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z" fill="#808080"/> xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="15" fill="#C0C0C0"/> <path fill-rule="evenodd" clip-rule="evenodd"
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="black"/> d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z"
fill="rgb(222, 69, 96)"/>
<rect x="1" y="1" width="14" height="15" fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 381 B

After

Width:  |  Height:  |  Size: 455 B

20
resources/images/icon/button-down.svg
View file

@ -1,8 +1,14 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/> fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/> fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z"
fill="rgb(64, 64, 64)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z"
fill="rgb(222, 69, 96)"/>
<rect x="2" y="2" width="12" height="13" fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 630 B

After

Width:  |  Height:  |  Size: 770 B

20
resources/images/icon/button-left.svg
View file

@ -1,8 +1,14 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/> fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/> fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z"
fill="rgb(64, 64, 64)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z"
fill="rgb(222, 69, 96)"/>
<rect x="2" y="2" width="12" height="13" fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 628 B

After

Width:  |  Height:  |  Size: 768 B

20
resources/images/icon/button-right.svg
View file

@ -1,8 +1,14 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/> fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/> fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z"
fill="rgb(64, 64, 64)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z"
fill="red(222, 69, 96)"/>
<rect x="2" y="2" width="12" height="13" fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 629 B

After

Width:  |  Height:  |  Size: 769 B

20
resources/images/icon/button-up.svg
View file

@ -1,8 +1,14 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/> fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/> fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z"
fill="rgb(64, 64, 64)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z"
fill="rgb(222, 69, 96)"/>
<rect x="2" y="2" width="12" height="13" fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 629 B

After

Width:  |  Height:  |  Size: 769 B

7
resources/images/icon/checkmark-disabled.svg
View file

@ -1,3 +1,6 @@
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="7" height="7" viewBox="0 0 7 7" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="#808080"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z"
fill="rgb(222, 69, 06)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 B

After

Width:  |  Height:  |  Size: 266 B

7
resources/images/icon/checkmark.svg
View file

@ -1,3 +1,6 @@
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="7" height="7" viewBox="0 0 7 7" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z"
fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 226 B

After

Width:  |  Height:  |  Size: 262 B

7
resources/images/icon/close.svg
View file

@ -1,3 +1,6 @@
<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="8" height="7" viewBox="0 0 8 7" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z"
fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 270 B

After

Width:  |  Height:  |  Size: 306 B

9
resources/images/icon/groupbox-border.svg
View file

@ -1,4 +1,7 @@
<svg width="5" height="5" viewBox="0 0 5 5" fill="grey" xmlns="http://www.w3.org/2000/svg"> <svg width="5" height="5" viewBox="0 0 5 5" fill="grey"
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0" fill="white" /> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0" fill="#808080" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0"
fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0"
fill="rgb(222, 69, 96)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 279 B

After

Width:  |  Height:  |  Size: 332 B

15
resources/images/icon/help.svg
View file

@ -1,8 +1,9 @@
<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="6" height="9" viewBox="0 0 6 9" fill="none"
<rect y="1" width="2" height="2" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<rect x="1" width="4" height="1" fill="black"/> <rect y="1" width="2" height="2" fill="rgb(0, 0, 0)"/>
<rect x="4" y="1" width="2" height="2" fill="black"/> <rect x="1" width="4" height="1" fill="rgb(0, 0, 0)"/>
<rect x="3" y="3" width="2" height="1" fill="black"/> <rect x="4" y="1" width="2" height="2" fill="rgb(0, 0, 0)"/>
<rect x="2" y="4" width="2" height="2" fill="black"/> <rect x="3" y="3" width="2" height="1" fill="rgb(0, 0, 0)"/>
<rect x="2" y="7" width="2" height="2" fill="black"/> <rect x="2" y="4" width="2" height="2" fill="rgb(0, 0, 0)"/>
<rect x="2" y="7" width="2" height="2" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 411 B

After

Width:  |  Height:  |  Size: 482 B

16
resources/images/icon/indicator-horizontal.svg
View file

@ -1,6 +1,12 @@
<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="11" height="21" viewBox="0 0 11 21" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/> <path fill-rule="evenodd" clip-rule="evenodd"
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/> d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z"
fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="rgb(222, 69, 96)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="rgb(64, 64, 64)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 523 B

After

Width:  |  Height:  |  Size: 637 B

14
resources/images/icon/indicator-rectangle-horizontal.svg
View file

@ -1,6 +1,10 @@
<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="11" height="21" viewBox="0 0 11 21" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/> xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/> fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/> <rect x="1" y="1" width="8" height="18" fill="rgb(244, 193, 202)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z"
fill="rgb(222, 69, 96)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z"
fill="rgb(64, 64, 64)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 509 B

10
resources/images/icon/maximize-disabled.svg
View file

@ -1,4 +1,8 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1H1V3V9V10H2H9H10V9V3V1ZM9 3H2V9H9V3Z" fill="white"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="#808080"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M10 1H1V3V9V10H2H9H10V9V3V1ZM9 3H2V9H9V3Z"
fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="rgb(222, 69, 96)"/>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 319 B

After

Width:  |  Height:  |  Size: 381 B

6
resources/images/icon/maximize.svg
View file

@ -1,3 +1,5 @@
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="9" height="9" viewBox="0 0 9 9" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 229 B

5
resources/images/icon/minimize.svg
View file

@ -1,3 +1,4 @@
<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="6" height="2" viewBox="0 0 6 2" fill="none"
<rect width="6" height="2" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<rect width="6" height="2" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 141 B

After

Width:  |  Height:  |  Size: 157 B

23
resources/images/icon/radio-border-disabled.svg
View file

@ -1,7 +1,18 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd"
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/> d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/> fill="rgb(222, 69, 96)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z"
fill="rgb(64, 64, 64)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z"
fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z"
fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z"
fill="rgb(244, 193, 202)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 923 B

24
resources/images/icon/radio-border.svg
View file

@ -1,8 +1,18 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd"
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/> d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/> fill="rgb(222, 69, 96)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z"
fill="rgb(64, 64, 64)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z"
fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z"
fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z"
fill="rgb(244, 255, 255)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 743 B

After

Width:  |  Height:  |  Size: 923 B

6
resources/images/icon/radio-dot-disabled.svg
View file

@ -1,3 +1,5 @@
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="4" height="4" viewBox="0 0 4 4" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="rgb(222, 69, 96)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 B

After

Width:  |  Height:  |  Size: 228 B

6
resources/images/icon/radio-dot.svg
View file

@ -1,3 +1,5 @@
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="4" height="4" viewBox="0 0 4 4" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 B

After

Width:  |  Height:  |  Size: 224 B

19
resources/images/icon/restore.svg
View file

@ -1,10 +1,11 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="8" height="9" viewBox="0 0 8 9" fill="none"
<rect x="2" width="6" height="2" fill="black"/> xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="2" width="1" height="4" fill="black"/> <rect x="2" width="6" height="2" fill="rgb(0, 0, 0)"/>
<rect x="2" y="2" width="1" height="1" fill="black"/> <rect x="7" y="2" width="1" height="4" fill="rgb(0, 0, 0)"/>
<rect x="6" y="5" width="1" height="1" fill="black"/> <rect x="2" y="2" width="1" height="1" fill="rgb(0, 0, 0)"/>
<rect y="3" width="6" height="2" fill="black"/> <rect x="6" y="5" width="1" height="1" fill="rgb(0, 0, 0)"/>
<rect x="5" y="5" width="1" height="4" fill="black"/> <rect y="3" width="6" height="2" fill="rgb(0, 0, 0)"/>
<rect y="5" width="1" height="4" fill="black"/> <rect x="5" y="5" width="1" height="4" fill="rgb(0, 0, 0)"/>
<rect x="1" y="8" width="4" height="1" fill="black"/> <rect y="5" width="1" height="4" fill="rgb(0, 0, 0)"/>
<rect x="1" y="8" width="4" height="1" fill="rgb(0, 0, 0)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 606 B

9
resources/images/icon/scrollbar-background.svg
View file

@ -1,4 +1,7 @@
<svg width="2" height="2" viewBox="0 0 2 2" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="2" height="2" viewBox="0 0 2 2" fill="none"
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z"
fill="rgb(250, 224, 228)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z"
fill="rgb(255, 255, 255)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 275 B

After

Width:  |  Height:  |  Size: 332 B

16
resources/images/icon/sunken-panel-border.svg
View file

@ -1,10 +1,10 @@
<svg width="5" height="5" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg"> <svg width="5" height="5" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="1" x="0" y="0" fill="#808080"/> <rect width="4" height="1" x="0" y="0" fill="rgb(222, 69, 96)"/>
<rect width="1" height="4" x="0" y="0" fill="#808080"/> <rect width="1" height="4" x="0" y="0" fill="rgb(222, 69, 96)"/>
<rect width="2" height="1" x="1" y="1" fill="#0a0a0a"/> <rect width="2" height="1" x="1" y="1" fill="rgb(64, 64, 64)"/>
<rect width="1" height="2" x="1" y="1" fill="#0a0a0a"/> <rect width="1" height="2" x="1" y="1" fill="rgb(64, 64, 64)"/>
<rect width="5" height="1" x="0" y="4" fill="#fff"/> <rect width="5" height="1" x="0" y="4" fill="rgb(250, 224, 228)"/>
<rect width="1" height="5" x="4" y="0" fill="#fff"/> <rect width="1" height="5" x="4" y="0" fill="rgb(250, 224, 228)"/>
<rect width="1" height="3" x="3" y="1" fill="#dfdfdf"/> <rect width="1" height="3" x="3" y="1" fill="rgb(247, 219, 215)"/>
<rect width="3" height="1" x="1" y="3" fill="#dfdfdf"/> <rect width="3" height="1" x="1" y="3" fill="rgb(247, 219, 215)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 545 B

After

Width:  |  Height:  |  Size: 645 B

2
resources/views/admin.blade.php
View file

@ -1,5 +1,5 @@
<x-app-layout> <x-app-layout>
<x-slot:header>Admin</x-slot> <x-slot:title>Admin</x-slot>
<p>You're logged in!</p> <p>You're logged in!</p>

6
resources/views/auth/confirm-password.blade.php
View file

@ -1,6 +1,7 @@
<x-guest-layout> <x-app-layout>
<x-slot:title>Confirm Password</x-slot> <x-slot:title>Confirm Password</x-slot>
<x-window title="Confirm Password">
<div> <div>
This is a secure area of the application. Please confirm your password This is a secure area of the application. Please confirm your password
before continuing. before continuing.
@ -24,4 +25,5 @@
</div> </div>
<button type="submit">Confirm</button> <button type="submit">Confirm</button>
</form> </form>
</x-guest-layout> </x-window>
</x-app-layout>

6
resources/views/auth/login.blade.php
View file

@ -1,6 +1,7 @@
<x-guest-layout> <x-app-layout>
<x-slot:title>Login</x-slot> <x-slot:title>Login</x-slot>
<x-window title="Login">
<!-- Session Status --> <!-- Session Status -->
<x-auth-session-status :status="session('status')" /> <x-auth-session-status :status="session('status')" />
@ -49,4 +50,5 @@
<button type="submit">Log in</button> <button type="submit">Log in</button>
</div> </div>
</form> </form>
</x-guest-layout> </x-window>
</x-app-layout>

4
resources/views/layouts/app.blade.php
View file

@ -2,11 +2,9 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('layouts.head') @include('layouts.head')
<body> <body class="max-w-[600px]">
@include('layouts.navigation') @include('layouts.navigation')
<x-window :title="$header" minimize restore close class="max-w-[600px]">
{{ $slot }} {{ $slot }}
</x-window>
</body> </body>
</html> </html>

2
resources/views/profile/edit.blade.php
View file

@ -1,5 +1,5 @@
<x-app-layout> <x-app-layout>
<x-slot:header>Profile</x-slot> <x-slot:title>Profile</x-slot>
@include('profile.partials.update-profile-information-form') @include('profile.partials.update-profile-information-form')
@include('profile.partials.update-password-form') @include('profile.partials.update-password-form')

2
resources/views/profile/partials/update-password-form.blade.php
View file

@ -1,4 +1,4 @@
<h2>Update Password</h2> <p>Update Password</p>
<p>Ensure your account is using a long, random password to stay secure.</p> <p>Ensure your account is using a long, random password to stay secure.</p>