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",
"laravel-vite-plugin": "^1.2.0",
"postcss": "^8.4.31",
"postcss-calc": "^10.1.1",
"prettier": "^3.5.1",
"prettier-plugin-blade": "^2.1.19",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^4.0.7",
"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 {
/* Color */
--text-color: #222222;
--surface: #c0c0c0;
--button-highlight: #ffffff;
--button-face: #dfdfdf;
--button-shadow: #808080;
--window-frame: #0a0a0a;
--dialog-blue: #000080;
--dialog-blue-light: #1084d0;
--dialog-gray: #808080;
--dialog-gray-light: #b5b5b5;
--link-blue: #0000ff;
/* https://www.deviantart.com/tpenguinltg/art/Peggy-s-Pastels-505540096 */
--active-border: rgb(0, 191, 188);
--active-title: rgb(0, 191, 188);
--app-workspace: rgb(255, 184, 182);
--background: rgb(162, 219, 210);
--button-alternate-face: rgb(181, 181, 181);
--button-dk-shadow: rgb(64, 64, 64);
--button-face: rgb(244, 193, 202);
--button-hilight: rgb(250, 224, 228);
--button-light: rgb(247, 219, 215);
--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 */
--element-spacing: 8px;
@ -46,37 +66,48 @@ :root {
/* Borders */
--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),
inset 2px 2px var(--button-face);
--border-sunken-outer: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow);
--default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
--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-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-light);
--border-sunken-outer: inset -1px -1px var(--button-hilight),
inset 1px 1px var(--button-shadow);
--border-sunken-inner: inset -2px -2px var(--button-light),
inset 2px 2px var(--button-dk-shadow);
--default-button-border-raised-outer: inset -2px -2px var(--button-dk-shadow),
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 */
--border-window-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-face);
/* Window borders flip button-light and button-hilight */
--border-window-outer: inset -1px -1px var(--button-dk-shadow),
inset 1px 1px var(--button-light);
--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 */
--border-field: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
inset 2px 2px var(--window-frame);
--border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
/* Field borders (checkbox, input, etc) flip button-dk-shadow and button-shadow of sunken */
--border-field: inset -1px -1px var(--button-hilight),
inset 1px 1px var(--button-shadow),
inset -2px -2px var(--button-light),
inset 2px 2px var(--button-dk-shadow);
--border-status-field: inset -1px -1px var(--button-hilight),
inset 1px 1px var(--button-shadow);
/* Tabs */
--border-tab: inset -1px 0 var(--window-frame),
inset 1px 1px var(--button-face),
--border-tab: inset -1px 0 var(--button-dk-shadow),
inset 1px 1px var(--button-hilight),
inset -2px 0 var(--button-shadow),
inset 2px 2px var(--button-highlight)
inset 2px 2px var(--button-light);
}
@font-face {
@ -98,7 +129,7 @@ @font-face {
body {
font-family: Arial, sans-serif;
font-size: 12px;
color: var(--text-color);
color: var(--window-text);
}
button,
@ -138,7 +169,7 @@ h4 {
u {
text-decoration: none;
/*noinspection CssNonIntegerLengthInPixels*/
border-bottom: 0.5px solid #222222;
border-bottom: 0.5px solid var(--window-text);
}
button,
@ -148,8 +179,8 @@ input[type="reset"] {
box-sizing: border-box;
border: none;
color: transparent;
text-shadow: 0 0 var(--text-color);
background: var(--surface);
text-shadow: 0 0 var(--window-text);
background: var(--button-face);
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
border-radius: 0;
@ -162,7 +193,7 @@ button.default,
.button.default,
input[type="submit"].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 {
@ -177,7 +208,7 @@ .button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active {
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,
@ -188,11 +219,12 @@ input[type="reset"].default:not(:disabled):active {
}
/* @formatter:off */
@media(not(hover)) {
@media (not(hover)) {
button:not(:disabled):hover,
.button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover {
/*noinspection CssUnknownProperty*/
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}
}
@ -202,7 +234,7 @@ button:focus,
.button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
outline: 1px dotted #000000;
outline: 1px dotted var(--window-frame);
outline-offset: -4px;
}
@ -225,20 +257,20 @@ .button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
:disabled + label {
text-shadow: 1px 1px 0 var(--button-highlight);
text-shadow: 1px 1px 0 var(--button-hilight);
}
.window {
box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface);
background: var(--button-face);
padding: 3px;
}
.title-bar {
background: linear-gradient(
90deg,
var(--dialog-blue),
var(--dialog-blue-light)
var(--active-title),
var(--gradient-active-title)
);
padding: 3px 2px 3px 3px;
display: flex;
@ -249,8 +281,8 @@ .title-bar {
.title-bar.inactive {
background: linear-gradient(
90deg,
var(--dialog-gray),
var(--dialog-gray-light)
var(--inactive-title),
var(--gradient-inactive-title)
);
}
@ -282,45 +314,35 @@ .title-bar-controls button:focus {
.title-bar-controls button[aria-label="Minimize"],
.title-bar-controls button.minimize {
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/minimize.svg");
background-repeat: no-repeat;
background-position: bottom 3px left 4px;
}
.title-bar-controls button[aria-label="Maximize"],
.title-bar-controls button.maximize {
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/maximize.svg");
background-repeat: no-repeat;
background-position: top 2px left 3px;
}
.title-bar-controls button[aria-label="Maximize"]:disabled,
.title-bar-controls button.maximize:disabled {
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/maximize-disabled.svg");
background-repeat: no-repeat;
background-position: top 2px left 3px;
}
.title-bar-controls button[aria-label="Restore"],
.title-bar-controls button.restore {
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/restore.svg");
background-repeat: no-repeat;
background-position: top 2px left 3px;
}
.title-bar-controls button[aria-label="Help"],
.title-bar-controls button.help {
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/help.svg");
background-repeat: no-repeat;
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.close {
margin-left: 2px;
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/close.svg");
background-repeat: no-repeat;
background-position: top 3px left 4px;
}
@ -354,14 +374,14 @@ .window-body {
fieldset {
/*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-block-start: var(--element-spacing);
margin: 0;
}
legend {
background: var(--surface);
background: var(--button-face);
}
.field-row {
@ -423,15 +443,11 @@ input[type="radio"] + label::before {
width: var(--radio-width);
height: var(--radio-width);
margin-right: var(--radio-label-spacing);
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/radio-border.svg");
}
input[type="radio"]:active + label::before {
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/radio-border-disabled.svg");
}
input[type="radio"]:checked + label::after {
@ -442,26 +458,20 @@ input[type="radio"]:checked + label::after {
top: var(--radio-dot-top);
left: var(--radio-dot-left);
position: absolute;
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/radio-dot.svg");
}
input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
outline: 1px dotted #000000;
outline: 1px dotted var(--window-frame);
}
input[type="radio"][disabled] + label::before {
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/radio-border-disabled.svg");
}
input[type="radio"][disabled]:checked + label::after {
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/radio-dot-disabled.svg");
}
input[type="checkbox"] + label {
@ -476,13 +486,13 @@ input[type="checkbox"] + label::before {
display: inline-block;
width: var(--checkbox-width);
height: var(--checkbox-width);
background: var(--button-highlight);
background: var(--window);
box-shadow: var(--border-field);
margin-right: var(--radio-label-spacing);
}
input[type="checkbox"]:active + label::before {
background: var(--surface);
background: var(--button-face);
}
input[type="checkbox"]:checked + label::after {
@ -494,19 +504,15 @@ input[type="checkbox"]:checked + label::after {
left: calc(
-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
);
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/checkmark.svg");
}
input[type="checkbox"][disabled] + label::before {
background: var(--surface);
background: var(--button-face);
}
input[type="checkbox"][disabled]:checked + label::after {
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/checkmark-disabled.svg");
}
input[type="text"],
@ -521,7 +527,7 @@ textarea {
padding: 3px 4px;
border: none;
box-shadow: var(--border-field);
background-color: var(--button-highlight);
background-color: var(--window);
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
@ -591,7 +597,7 @@ input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="search"]:read-only,
textarea:disabled {
background-color: var(--surface);
background-color: var(--button-face);
}
select {
@ -600,9 +606,7 @@ select {
-moz-appearance: none;
position: relative;
padding-right: 32px;
/*noinspection CssInvalidFunction*/
/*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-image: url("../images/icon/button-down.svg");
background-position: top 2px right 2px;
background-repeat: no-repeat;
border-radius: 0;
@ -634,18 +638,14 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 21px;
width: 11px;
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/indicator-horizontal.svg");
transform: translateY(-8px);
box-shadow: none;
border: none;
}
input[type="range"].has-box-indicator::-webkit-slider-thumb {
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/indicator-rectangle-horizontal.svg");
transform: translateY(-10px);
}
@ -654,39 +654,31 @@ input[type="range"]::-moz-range-thumb {
width: 11px;
border: 0;
border-radius: 0;
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/icon/indicator-horizontal.svg");
transform: translateY(2px);
}
input[type="range"].has-box-indicator::-moz-range-thumb {
/*noinspection CssInvalidFunction*/
/*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");
background: url("../images/./icon/indicator-rectangle-horizontal.svg");
transform: translateY(0px);
}
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"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-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;
background: var(--button-dk-shadow);
border-right: 1px solid var(--button-light);
border-bottom: 1px solid var(--button-light);
box-shadow: 1px 0 0 var(--button-hilight),
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 {
@ -704,20 +696,19 @@ .is-vertical > input[type="range"] {
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 {
border-left: 1px solid grey;
border-left: 1px solid var(--button-light);
border-right: 0;
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;
}
.is-vertical > input[type="range"]::-moz-range-track {
border-left: 1px solid grey;
border-right: 0;
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;
border-bottom: 1px solid var(--button-light);
box-shadow: -1px 0 0 var(--button-hilight),
-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 > input[type="range"]::-webkit-slider-thumb {
@ -737,32 +728,30 @@ .is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
}
select:focus {
color: var(--button-highlight);
background-color: var(--dialog-blue);
color: var(--hilight-text);
background-color: var(--hilight);
}
select:focus option {
color: #000;
background-color: #fff;
color: var(--menu-text);
background-color: var(--window);
}
select:active {
/*noinspection CssInvalidFunction*/
/*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");
background-image: url("../images/./icon/button-down-active.svg");
}
a {
color: var(--link-blue);
color: var(--hot-tracking-color);
}
a:focus {
outline: 1px dotted var(--link-blue);
outline: 1px dotted var(--window-frame);
}
ul.tree-view {
display: block;
background: var(--button-highlight);
background: var(--window);
box-shadow: var(--border-field);
padding: 6px;
margin: 0;
@ -774,12 +763,12 @@ ul.tree-view li {
ul.tree-view a {
text-decoration: none;
color: #000;
color: var(--window-text);
}
ul.tree-view a:focus {
background-color: var(--dialog-blue);
color: var(--button-highlight);
background-color: var(--hilight);
color: var(--hilight-text);
}
ul.tree-view ul,
@ -791,7 +780,7 @@ ul.tree-view ul {
margin-left: 16px;
padding-left: 16px;
/* Goes down too far */
border-left: 1px dotted #808080;
border-left: 1px dotted var(--button-shadow);
}
ul.tree-view ul > li {
@ -805,7 +794,7 @@ ul.tree-view ul > li::before {
left: -16px;
top: 6px;
width: 12px;
border-bottom: 1px dotted #808080;
border-bottom: 1px dotted var(--button-shadow);
}
/* Cover the bottom of the left dotted border */
@ -817,7 +806,7 @@ ul.tree-view ul > li:last-child::after {
top: 7px;
bottom: 0;
width: 8px;
background: var(--button-highlight);
background: var(--window);
}
ul.tree-view details {
@ -839,13 +828,13 @@ ul.tree-view details > summary:before {
display: block;
float: left;
content: "+";
border: 1px solid #808080;
border: 1px solid var(--button-shadow);
width: 8px;
height: 9px;
line-height: 8px;
margin-right: 5px;
padding-left: 1px;
background-color: #fff;
background-color: var(--window);
}
ul.tree-view details[open] > summary:before {
@ -859,7 +848,7 @@ ul.tree-view details > summary::-webkit-details-marker {
pre {
display: block;
background: var(--button-highlight);
background: var(--window);
box-shadow: var(--border-field);
padding: 12px 8px;
margin: 0;
@ -871,7 +860,7 @@ code * {
}
summary:focus {
outline: 1px dotted #000000;
outline: 1px dotted var(--window-frame);
}
::-webkit-scrollbar {
@ -887,8 +876,7 @@ summary:focus {
}
::-webkit-scrollbar-track {
/*noinspection CssInvalidFunction*/
background-image: svg-load("./icon/scrollbar-background.svg");
background-image: url("../images/icon/scrollbar-background.svg");
}
::-webkit-scrollbar-thumb {
@ -905,26 +893,22 @@ summary:focus {
::-webkit-scrollbar-button:vertical:start {
height: 17px;
/*noinspection CssInvalidFunction*/
background-image: svg-load("./icon/button-up.svg");
background-image: url("../images/icon/button-up.svg");
}
::-webkit-scrollbar-button:vertical:end {
height: 17px;
/*noinspection CssInvalidFunction*/
background-image: svg-load("./icon/button-down.svg");
background-image: url("../images/icon/button-down.svg");
}
::-webkit-scrollbar-button:horizontal:start {
width: 16px;
/*noinspection CssInvalidFunction*/
background-image: svg-load("./icon/button-left.svg");
background-image: url("../images/icon/button-left.svg");
}
::-webkit-scrollbar-button:horizontal:end {
width: 16px;
/*noinspection CssInvalidFunction*/
background-image: svg-load("./icon/button-right.svg");
background-image: url("../images/icon/button-right.svg");
}
.window[role=tabpanel] {
@ -951,7 +935,7 @@ menu[role=tablist] > li {
menu[role=tablist] > li[aria-selected=true] {
padding-bottom: 2px;
margin-top: -2px;
background-color: var(--surface);
background-color: var(--button-face);
position: relative;
z-index: 8;
margin-left: -3px;
@ -959,7 +943,7 @@ menu[role=tablist] > li[aria-selected=true] {
menu[role=tablist] > li > a {
display: block;
color: #222;
color: var(--window-text);
margin: 6px;
text-decoration: none;
}
@ -969,7 +953,7 @@ menu[role=tablist] > li[aria-selected=true] > a:focus {
}
menu[role=tablist] > li > a:focus {
outline: 1px dotted #222;
outline: 1px dotted var(--window-frame);
}
menu[role=tablist].multirows > li {
@ -980,10 +964,9 @@ menu[role=tablist].multirows > li {
.sunken-panel {
box-sizing: border-box;
border: 2px groove transparent;
/*noinspection CssInvalidFunction*/
border-image: svg-load("./icon/sunken-panel-border.svg") 2;
border-image: url("../images/icon/sunken-panel-border.svg") 2;
overflow: auto;
background-color: #fff;
background-color: var(--window);
}
table {
@ -991,7 +974,7 @@ table {
position: relative;
text-align: left;
white-space: nowrap;
background-color: #fff;
background-color: var(--window);
}
table > thead > tr > * {
@ -999,7 +982,7 @@ table > thead > tr > * {
top: 0;
height: 17px;
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
background: var(--surface);
background: var(--button-face);
box-sizing: border-box;
font-weight: normal;
padding: 0 var(--grouped-element-spacing);
@ -1010,8 +993,8 @@ table.interactive > tbody > tr {
}
table > tbody > tr.highlighted {
color: #fff;
background-color: var(--dialog-blue);
color: var(--hilight-text);
background-color: var(--hilight);
}
table > tbody > tr > * {
@ -1036,7 +1019,7 @@ .progress-indicator {
.progress-indicator > .progress-indicator-bar {
height: 100%;
display: block;
background-color: var(--dialog-blue);
background-color: var(--hilight);
}
.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-image: linear-gradient(
90deg,
var(--dialog-blue) 0 16px,
var(--hilight) 0 16px,
transparent 0 2px
);
background-repeat: repeat;
@ -1052,19 +1035,19 @@ .progress-indicator.segmented > .progress-indicator-bar {
}
.field-border {
background: var(--button-highlight);
background: var(--button-hilight);
box-shadow: var(--border-field);
padding: 2px;
}
.field-border-disabled {
background: var(--surface);
background: var(--button-face);
box-shadow: var(--border-field);
padding: 2px;
}
.status-field-border {
background: var(--surface);
background: var(--button-face);
box-shadow: var(--border-status-field);
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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z" fill="#808080"/>
<rect x="1" y="1" width="14" height="15" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="black"/>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="black"/>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
fill="rgb(250, 224, 228)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
fill="rgb(250, 224, 228)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
fill="rgb(250, 224, 228)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z"
fill="rgb(247, 219, 215)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z"
fill="rgb(250, 224, 228)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="#808080"/>
<svg width="7" height="7" viewBox="0 0 7 7" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z"
fill="rgb(222, 69, 06)"/>
</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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="black"/>
<svg width="7" height="7" viewBox="0 0 7 7" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z"
fill="rgb(0, 0, 0)"/>
</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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
<svg width="8" height="7" viewBox="0 0 8 7" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z"
fill="rgb(0, 0, 0)"/>
</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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0" fill="#808080" />
<svg width="5" height="5" viewBox="0 0 5 5" fill="grey"
xmlns="http://www.w3.org/2000/svg">
<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>

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

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/>
<svg width="11" height="21" viewBox="0 0 11 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="rgb(250, 224, 228)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/>
<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/>
<svg width="11" height="21" viewBox="0 0 11 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z"
fill="rgb(250, 224, 228)"/>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 509 B

12
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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1H1V3V9V10H2H9H10V9V3V1ZM9 3H2V9H9V3Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="#808080"/>
</svg>
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/>
<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="rgb(0, 0, 0)"/>
</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">
<rect width="6" height="2" fill="black"/>
<svg width="6" height="2" viewBox="0 0 6 2" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="6" height="2" fill="rgb(0, 0, 0)"/>
</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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z"
fill="rgb(222, 69, 96)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z"
fill="rgb(222, 69, 96)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/>
<svg width="4" height="4" viewBox="0 0 4 4" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="rgb(222, 69, 96)"/>
</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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/>
<svg width="4" height="4" viewBox="0 0 4 4" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="rgb(0, 0, 0)"/>
</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">
<rect x="2" width="6" height="2" fill="black"/>
<rect x="7" y="2" width="1" height="4" fill="black"/>
<rect x="2" y="2" width="1" height="1" fill="black"/>
<rect x="6" y="5" width="1" height="1" fill="black"/>
<rect y="3" width="6" height="2" fill="black"/>
<rect x="5" y="5" width="1" height="4" fill="black"/>
<rect y="5" width="1" height="4" fill="black"/>
<rect x="1" y="8" width="4" height="1" fill="black"/>
<svg width="8" height="9" viewBox="0 0 8 9" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="2" width="6" height="2" fill="rgb(0, 0, 0)"/>
<rect x="7" y="2" width="1" height="4" fill="rgb(0, 0, 0)"/>
<rect x="2" y="2" width="1" height="1" fill="rgb(0, 0, 0)"/>
<rect x="6" y="5" width="1" height="1" fill="rgb(0, 0, 0)"/>
<rect y="3" width="6" height="2" fill="rgb(0, 0, 0)"/>
<rect x="5" y="5" width="1" height="4" fill="rgb(0, 0, 0)"/>
<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>

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">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/>
<svg width="2" height="2" viewBox="0 0 2 2" fill="none"
xmlns="http://www.w3.org/2000/svg">
<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>

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">
<rect width="4" height="1" x="0" y="0" fill="#808080"/>
<rect width="1" height="4" x="0" y="0" fill="#808080"/>
<rect width="2" height="1" x="1" y="1" fill="#0a0a0a"/>
<rect width="1" height="2" x="1" y="1" fill="#0a0a0a"/>
<rect width="5" height="1" x="0" y="4" fill="#fff"/>
<rect width="1" height="5" x="4" y="0" fill="#fff"/>
<rect width="1" height="3" x="3" y="1" fill="#dfdfdf"/>
<rect width="3" height="1" x="1" y="3" fill="#dfdfdf"/>
<rect width="4" height="1" x="0" y="0" fill="rgb(222, 69, 96)"/>
<rect width="1" height="4" x="0" y="0" fill="rgb(222, 69, 96)"/>
<rect width="2" height="1" x="1" y="1" fill="rgb(64, 64, 64)"/>
<rect width="1" height="2" x="1" y="1" fill="rgb(64, 64, 64)"/>
<rect width="5" height="1" x="0" y="4" fill="rgb(250, 224, 228)"/>
<rect width="1" height="5" x="4" y="0" fill="rgb(250, 224, 228)"/>
<rect width="1" height="3" x="3" y="1" fill="rgb(247, 219, 215)"/>
<rect width="3" height="1" x="1" y="3" fill="rgb(247, 219, 215)"/>
</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-slot:header>Admin</x-slot>
<x-slot:title>Admin</x-slot>
<p>You're logged in!</p>

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

@ -1,27 +1,29 @@
<x-guest-layout>
<x-app-layout>
<x-slot:title>Confirm Password</x-slot>
<div>
This is a secure area of the application. Please confirm your password
before continuing.
</div>
<form method="POST" action="{{ route('password.confirm') }}">
@csrf
<div class="field-row">
<label for="password">Password</label>
<input
id="password"
type="password"
name="password"
required
autocomplete="current-password"
/>
<x-input-error :messages="$errors->get('password')" />
<x-window title="Confirm Password">
<div>
This is a secure area of the application. Please confirm your password
before continuing.
</div>
<button type="submit">Confirm</button>
</form>
</x-guest-layout>
<form method="POST" action="{{ route('password.confirm') }}">
@csrf
<div class="field-row">
<label for="password">Password</label>
<input
id="password"
type="password"
name="password"
required
autocomplete="current-password"
/>
<x-input-error :messages="$errors->get('password')" />
</div>
<button type="submit">Confirm</button>
</form>
</x-window>
</x-app-layout>

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

@ -1,52 +1,54 @@
<x-guest-layout>
<x-app-layout>
<x-slot:title>Login</x-slot>
<!-- Session Status -->
<x-auth-session-status :status="session('status')" />
<x-window title="Login">
<!-- Session Status -->
<x-auth-session-status :status="session('status')" />
<form method="POST" action="{{ route('login') }}">
@csrf
<form method="POST" action="{{ route('login') }}">
@csrf
<!-- Email Address -->
<div class="field-row">
<label for="email">Email</label>
<input
id="email"
type="email"
name="email"
value="{{ old('email') }}"
required
autofocus
autocomplete="username"
/>
<!-- Email Address -->
<div class="field-row">
<label for="email">Email</label>
<input
id="email"
type="email"
name="email"
value="{{ old('email') }}"
required
autofocus
autocomplete="username"
/>
<x-input-error :messages="$errors->get('email')" />
</div>
<x-input-error :messages="$errors->get('email')" />
</div>
<!-- Password -->
<div class="field-row">
<label for="password">Password</label>
<input
id="password"
type="password"
name="password"
required
autocomplete="current-password"
/>
<!-- Password -->
<div class="field-row">
<label for="password">Password</label>
<input
id="password"
type="password"
name="password"
required
autocomplete="current-password"
/>
<x-input-error :messages="$errors->get('password')" />
</div>
<x-input-error :messages="$errors->get('password')" />
</div>
<!-- Remember Me -->
<input id="remember_me" type="checkbox" name="remember" />
<label for="remember_me">Remember me</label>
<!-- Remember Me -->
<input id="remember_me" type="checkbox" name="remember" />
<label for="remember_me">Remember me</label>
<div>
@if (Route::has('password.request'))
<a href="{{ route('password.request') }}">Forgot your password?</a>
@endif
<div>
@if (Route::has('password.request'))
<a href="{{ route('password.request') }}">Forgot your password?</a>
@endif
<button type="submit">Log in</button>
</div>
</form>
</x-guest-layout>
<button type="submit">Log in</button>
</div>
</form>
</x-window>
</x-app-layout>

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

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

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

@ -1,5 +1,5 @@
<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-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>