Initial Commit
This commit is contained in:
139
dist/y2k-alerts-generic.css
vendored
Normal file
139
dist/y2k-alerts-generic.css
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-title-start: #4457d9;
|
||||
--y2k-title-end: #1a2d8f;
|
||||
--y2k-bg: rgba(20, 20, 20, 0.22);
|
||||
}
|
||||
1
dist/y2k-alerts-generic.min.css
vendored
Normal file
1
dist/y2k-alerts-generic.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-title-start:#4457d9;--y2k-title-end:#1a2d8f;--y2k-bg:rgba(20,20,20,0.22)}
|
||||
145
dist/y2k-alerts-win98.css
vendored
Normal file
145
dist/y2k-alerts-win98.css
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-font: "MS Sans Serif", "Tahoma", sans-serif;
|
||||
--y2k-surface: #c0c0c0;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #808080;
|
||||
--y2k-title-start: #000080;
|
||||
--y2k-title-end: #1084d0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-button-bg: #c0c0c0;
|
||||
--y2k-button-border-dark: #808080;
|
||||
}
|
||||
1
dist/y2k-alerts-win98.min.css
vendored
Normal file
1
dist/y2k-alerts-win98.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-font:"MS Sans Serif","Tahoma",sans-serif;--y2k-surface:#c0c0c0;--y2k-border-light:#ffffff;--y2k-border-dark:#808080;--y2k-title-start:#000080;--y2k-title-end:#1084d0;--y2k-title-text:#ffffff;--y2k-button-bg:#c0c0c0;--y2k-button-border-dark:#808080}
|
||||
146
dist/y2k-alerts-winxp.css
vendored
Normal file
146
dist/y2k-alerts-winxp.css
vendored
Normal file
@@ -0,0 +1,146 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-surface: #ece9d8;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #7f9db9;
|
||||
--y2k-title-start: #0a246a;
|
||||
--y2k-title-end: #3a6ea5;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-button-bg: #f0f4ff;
|
||||
--y2k-button-border-dark: #7f9db9;
|
||||
--y2k-focus: #3257d6;
|
||||
}
|
||||
1
dist/y2k-alerts-winxp.min.css
vendored
Normal file
1
dist/y2k-alerts-winxp.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-surface:#ece9d8;--y2k-border-light:#ffffff;--y2k-border-dark:#7f9db9;--y2k-title-start:#0a246a;--y2k-title-end:#3a6ea5;--y2k-title-text:#ffffff;--y2k-button-bg:#f0f4ff;--y2k-button-border-dark:#7f9db9;--y2k-focus:#3257d6}
|
||||
139
dist/y2k-alerts.css
vendored
Normal file
139
dist/y2k-alerts.css
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-title-start: #4457d9;
|
||||
--y2k-title-end: #1a2d8f;
|
||||
--y2k-bg: rgba(20, 20, 20, 0.22);
|
||||
}
|
||||
229
dist/y2k-alerts.js
vendored
Normal file
229
dist/y2k-alerts.js
vendored
Normal file
@@ -0,0 +1,229 @@
|
||||
// CONSTANTS
|
||||
((global) => {
|
||||
|
||||
global.Y2K = {
|
||||
TYPE_INFO: "info",
|
||||
TYPE_WARNING: "warning",
|
||||
TYPE_ERROR: "error",
|
||||
TYPE_SUCCESS: "success"
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
((global) => {
|
||||
|
||||
function createElement(tagName, attributes, text) {
|
||||
var element = document.createElement(tagName);
|
||||
var attrs = attributes || {};
|
||||
var keys = Object.keys(attrs);
|
||||
|
||||
for (var i = 0; i < keys.length; i += 1) {
|
||||
element.setAttribute(keys[i], attrs[keys[i]]);
|
||||
}
|
||||
|
||||
if (text !== undefined && text !== null) {
|
||||
element.textContent = text;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
function appendChildren(parent, children) {
|
||||
for (var i = 0; i < children.length; i += 1) {
|
||||
parent.appendChild(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
global.Y2KDom = {
|
||||
createElement: createElement,
|
||||
appendChildren: appendChildren
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
((global) => {
|
||||
|
||||
var Y2K = global.Y2K;
|
||||
var createElement = global.Y2KDom.createElement;
|
||||
var appendChildren = global.Y2KDom.appendChildren;
|
||||
|
||||
class y2kAlert extends EventTarget {
|
||||
constructor(title, type, message, options) {
|
||||
super();
|
||||
this.title = title || "Alert";
|
||||
this.type = type || Y2K.TYPE_INFO;
|
||||
this.message = message || "";
|
||||
this.options = options || {};
|
||||
this.isVisible = false;
|
||||
this.inputElement = null;
|
||||
this.overlayElement = null;
|
||||
this.dialogElement = null;
|
||||
this.submitButton = null;
|
||||
this.closeButton = null;
|
||||
|
||||
this._build();
|
||||
this._bindEvents();
|
||||
}
|
||||
|
||||
_build() {
|
||||
this.overlayElement = createElement("div", {
|
||||
class: "y2k-alert-overlay"
|
||||
});
|
||||
|
||||
this.dialogElement = createElement("section", {
|
||||
class: "y2k-alert y2k-alert--" + this.type,
|
||||
role: "dialog",
|
||||
"aria-modal": "true",
|
||||
"aria-label": this.title
|
||||
});
|
||||
|
||||
var titleBar = createElement("header", {
|
||||
class: "y2k-alert__titlebar"
|
||||
});
|
||||
|
||||
var titleElement = createElement("h2", {
|
||||
class: "y2k-alert__title"
|
||||
}, this.title);
|
||||
|
||||
this.closeButton = createElement("button", {
|
||||
class: "y2k-btn y2k-btn--close",
|
||||
type: "button",
|
||||
"aria-label": "Close alert"
|
||||
}, "x");
|
||||
|
||||
appendChildren(titleBar, [titleElement, this.closeButton]);
|
||||
|
||||
var content = createElement("div", {
|
||||
class: "y2k-alert__content"
|
||||
});
|
||||
|
||||
var textElement = createElement("p", {
|
||||
class: "y2k-alert__text"
|
||||
}, this.message);
|
||||
|
||||
content.appendChild(textElement);
|
||||
|
||||
if (this.options.input) {
|
||||
var inputConfig = typeof this.options.input === "object" ? this.options.input : {};
|
||||
this.inputElement = createElement("input", {
|
||||
class: "y2k-alert__input",
|
||||
type: inputConfig.type || "text",
|
||||
placeholder: inputConfig.placeholder || ""
|
||||
});
|
||||
|
||||
if (inputConfig.value) {
|
||||
this.inputElement.setAttribute("value", inputConfig.value);
|
||||
}
|
||||
|
||||
content.appendChild(this.inputElement);
|
||||
}
|
||||
|
||||
var actions = createElement("footer", {
|
||||
class: "y2k-alert__actions"
|
||||
});
|
||||
|
||||
this.submitButton = createElement("button", {
|
||||
class: "y2k-btn",
|
||||
type: "button"
|
||||
}, this.options.submitText || "OK");
|
||||
|
||||
actions.appendChild(this.submitButton);
|
||||
appendChildren(content, [actions]);
|
||||
appendChildren(this.dialogElement, [titleBar, content]);
|
||||
this.overlayElement.appendChild(this.dialogElement);
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
var self = this;
|
||||
|
||||
this.closeButton.addEventListener("click", function () {
|
||||
self.close("close-button");
|
||||
});
|
||||
|
||||
this.submitButton.addEventListener("click", function () {
|
||||
self.submit();
|
||||
});
|
||||
|
||||
if (this.inputElement) {
|
||||
this.inputElement.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Enter") {
|
||||
self.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
show(parent) {
|
||||
var mountPoint = parent || document.body;
|
||||
if (!this.isVisible) {
|
||||
mountPoint.appendChild(this.overlayElement);
|
||||
this.isVisible = true;
|
||||
}
|
||||
|
||||
if (this.inputElement) {
|
||||
this.inputElement.focus();
|
||||
} else {
|
||||
this.submitButton.focus();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this.isVisible && this.overlayElement.parentNode) {
|
||||
this.overlayElement.parentNode.removeChild(this.overlayElement);
|
||||
}
|
||||
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
}
|
||||
|
||||
close(reason) {
|
||||
this.hide();
|
||||
this.dispatchEvent(new CustomEvent("close", {
|
||||
detail: {
|
||||
reason: reason || "close"
|
||||
}
|
||||
}));
|
||||
return this;
|
||||
}
|
||||
|
||||
submit() {
|
||||
var value = this.inputElement ? this.inputElement.value : null;
|
||||
this.dispatchEvent(new CustomEvent("submit", {
|
||||
detail: {
|
||||
value: value,
|
||||
title: this.title,
|
||||
message: this.message,
|
||||
type: this.type
|
||||
}
|
||||
}));
|
||||
this.hide();
|
||||
return this;
|
||||
}
|
||||
|
||||
static quick(title, type, message, options) {
|
||||
var alertInstance = new y2kAlert(title, type, message, options);
|
||||
alertInstance.show();
|
||||
return alertInstance;
|
||||
}
|
||||
}
|
||||
|
||||
global.y2kAlert = y2kAlert;
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
((global) => {
|
||||
|
||||
global.Y2KAlerts = {
|
||||
y2kAlert: global.y2kAlert,
|
||||
Y2K: global.Y2K,
|
||||
quick: function (title, type, message, options) {
|
||||
return global.y2kAlert.quick(title, type, message, options);
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
1
dist/y2k-alerts.min.css
vendored
Normal file
1
dist/y2k-alerts.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-title-start:#4457d9;--y2k-title-end:#1a2d8f;--y2k-bg:rgba(20,20,20,0.22)}
|
||||
1
dist/y2k-alerts.min.js
vendored
Normal file
1
dist/y2k-alerts.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
((global) => { global.Y2K = { TYPE_INFO: "info", TYPE_WARNING: "warning", TYPE_ERROR: "error", TYPE_SUCCESS: "success" }; })(window); ((global) => { function createElement(tagName, attributes, text) { var element = document.createElement(tagName); var attrs = attributes || {}; var keys = Object.keys(attrs); for (var i = 0; i < keys.length; i += 1) { element.setAttribute(keys[i], attrs[keys[i]]); } if (text !== undefined && text !== null) { element.textContent = text; } return element; } function appendChildren(parent, children) { for (var i = 0; i < children.length; i += 1) { parent.appendChild(children[i]); } } global.Y2KDom = { createElement: createElement, appendChildren: appendChildren }; })(window); ((global) => { var Y2K = global.Y2K; var createElement = global.Y2KDom.createElement; var appendChildren = global.Y2KDom.appendChildren; class y2kAlert extends EventTarget { constructor(title, type, message, options) { super(); this.title = title || "Alert"; this.type = type || Y2K.TYPE_INFO; this.message = message || ""; this.options = options || {}; this.isVisible = false; this.inputElement = null; this.overlayElement = null; this.dialogElement = null; this.submitButton = null; this.closeButton = null; this._build(); this._bindEvents(); } _build() { this.overlayElement = createElement("div", { class: "y2k-alert-overlay" }); this.dialogElement = createElement("section", { class: "y2k-alert y2k-alert--" + this.type, role: "dialog", "aria-modal": "true", "aria-label": this.title }); var titleBar = createElement("header", { class: "y2k-alert__titlebar" }); var titleElement = createElement("h2", { class: "y2k-alert__title" }, this.title); this.closeButton = createElement("button", { class: "y2k-btn y2k-btn--close", type: "button", "aria-label": "Close alert" }, "x"); appendChildren(titleBar, [titleElement, this.closeButton]); var content = createElement("div", { class: "y2k-alert__content" }); var textElement = createElement("p", { class: "y2k-alert__text" }, this.message); content.appendChild(textElement); if (this.options.input) { var inputConfig = typeof this.options.input === "object" ? this.options.input : {}; this.inputElement = createElement("input", { class: "y2k-alert__input", type: inputConfig.type || "text", placeholder: inputConfig.placeholder || "" }); if (inputConfig.value) { this.inputElement.setAttribute("value", inputConfig.value); } content.appendChild(this.inputElement); } var actions = createElement("footer", { class: "y2k-alert__actions" }); this.submitButton = createElement("button", { class: "y2k-btn", type: "button" }, this.options.submitText || "OK"); actions.appendChild(this.submitButton); appendChildren(content, [actions]); appendChildren(this.dialogElement, [titleBar, content]); this.overlayElement.appendChild(this.dialogElement); } _bindEvents() { var self = this; this.closeButton.addEventListener("click", function () { self.close("close-button"); }); this.submitButton.addEventListener("click", function () { self.submit(); }); if (this.inputElement) { this.inputElement.addEventListener("keydown", function (event) { if (event.key === "Enter") { self.submit(); } }); } } show(parent) { var mountPoint = parent || document.body; if (!this.isVisible) { mountPoint.appendChild(this.overlayElement); this.isVisible = true; } if (this.inputElement) { this.inputElement.focus(); } else { this.submitButton.focus(); } return this; } hide() { if (this.isVisible && this.overlayElement.parentNode) { this.overlayElement.parentNode.removeChild(this.overlayElement); } this.isVisible = false; return this; } close(reason) { this.hide(); this.dispatchEvent(new CustomEvent("close", { detail: { reason: reason || "close" } })); return this; } submit() { var value = this.inputElement ? this.inputElement.value : null; this.dispatchEvent(new CustomEvent("submit", { detail: { value: value, title: this.title, message: this.message, type: this.type } })); this.hide(); return this; } static quick(title, type, message, options) { var alertInstance = new y2kAlert(title, type, message, options); alertInstance.show(); return alertInstance; } } global.y2kAlert = y2kAlert; })(window); ((global) => { global.Y2KAlerts = { y2kAlert: global.y2kAlert, Y2K: global.Y2K, quick: function (title, type, message, options) { return global.y2kAlert.quick(title, type, message, options); } }; })(window);
|
||||
Reference in New Issue
Block a user