1088 lines
19 KiB
CSS
1088 lines
19 KiB
CSS
:root {
|
|
--pink-sky-1: #ffdff1;
|
|
--pink-sky-2: #ffc5e6;
|
|
--pink-sky-3: #f6a8d4;
|
|
--panel: #fff7fc;
|
|
--line: #e7a8ca;
|
|
--titlebar-1: #ff9acb;
|
|
--titlebar-2: #f07cb6;
|
|
--titlebar-border: #c65b93;
|
|
--taskbar-1: #ffb3d9;
|
|
--taskbar-2: #ef8dc1;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Tahoma", "MS Sans Serif", "Segoe UI", Verdana, sans-serif;
|
|
font-size: 12px;
|
|
background-color: #f6a8d4;
|
|
background-image: url('https://wallpaperaccess.com/full/4810999.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
color: #4b1c39;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#desktop {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
#topbar {
|
|
background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
|
|
color: #fff;
|
|
padding: 5px 8px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid var(--titlebar-border);
|
|
display: flex;
|
|
align-items: center;
|
|
text-shadow: 0 1px 0 rgba(106, 25, 76, 0.45);
|
|
}
|
|
|
|
#topbar-title {
|
|
white-space: nowrap;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
#reset-layout-btn,
|
|
#show-desktop-btn {
|
|
margin-left: 0;
|
|
width: 22px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background: linear-gradient(#ffeef8, #e8a8cc);
|
|
color: #4c1431;
|
|
border-top: 1px solid #fff5fb;
|
|
border-left: 1px solid #fff5fb;
|
|
border-right: 1px solid #8f3e6b;
|
|
border-bottom: 1px solid #8f3e6b;
|
|
border-radius: 0;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 220, 241, 0.35);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#reset-layout-btn > span {
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
#reset-layout-btn:hover,
|
|
#show-desktop-btn:hover {
|
|
background: linear-gradient(#fff4fb, #efb7d6);
|
|
}
|
|
|
|
#reset-layout-btn:active,
|
|
#show-desktop-btn:active,
|
|
#show-desktop-btn.active {
|
|
border-top-color: #8f3e6b;
|
|
border-left-color: #8f3e6b;
|
|
border-right-color: #fff5fb;
|
|
border-bottom-color: #fff5fb;
|
|
background: linear-gradient(#dc95be, #f2bbd9);
|
|
}
|
|
|
|
#reset-layout-btn:focus-visible,
|
|
#show-desktop-btn:focus-visible {
|
|
outline: 1px dotted #fff;
|
|
outline-offset: -4px;
|
|
}
|
|
|
|
#icons {
|
|
position: relative;
|
|
padding: 16px;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.desktop-icon {
|
|
position: absolute;
|
|
width: 112px;
|
|
border: none;
|
|
background: transparent;
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px rgba(70, 25, 52, 0.65);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
cursor: default;
|
|
padding: 8px 6px;
|
|
border-radius: 4px;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.desktop-icon:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.desktop-icon.dragging {
|
|
cursor: grabbing;
|
|
background: rgba(255, 255, 255, 0.28);
|
|
}
|
|
|
|
.desktop-icon .emoji {
|
|
font-size: 36px;
|
|
width: 100%;
|
|
text-align: center;
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
|
|
.desktop-icon span:last-child {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
width: 100%;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.desktop-icon.selected {
|
|
background: rgba(115, 185, 255, 0.34);
|
|
outline: 1px dotted rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
#taskbar {
|
|
background: linear-gradient(var(--taskbar-1), var(--taskbar-2));
|
|
border-top: 1px solid #f8d3e9;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 4px 6px;
|
|
color: #fff;
|
|
min-height: 34px;
|
|
position: relative;
|
|
z-index: 40;
|
|
}
|
|
|
|
#start-btn {
|
|
background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
|
|
color: #fff;
|
|
border-top: 1px solid #ffd4ea;
|
|
border-left: 1px solid #ffd4ea;
|
|
border-right: 1px solid #9f3972;
|
|
border-bottom: 1px solid #9f3972;
|
|
border-radius: 16px;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
padding: 5px 16px;
|
|
text-transform: lowercase;
|
|
cursor: pointer;
|
|
text-shadow: 0 1px 0 rgba(94, 20, 64, 0.45);
|
|
}
|
|
|
|
#start-btn:active,
|
|
#start-btn.active {
|
|
border-top-color: #9f3972;
|
|
border-left-color: #9f3972;
|
|
border-right-color: #ffd4ea;
|
|
border-bottom-color: #ffd4ea;
|
|
background: linear-gradient(var(--titlebar-2), var(--titlebar-1));
|
|
}
|
|
|
|
#taskbar-windows {
|
|
display: flex;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
padding: 1px;
|
|
}
|
|
|
|
.taskbar-btn {
|
|
min-width: 120px;
|
|
max-width: 180px;
|
|
background: linear-gradient(#ffeaf7, #efb5d5);
|
|
color: #5a1b3b;
|
|
border-top: 1px solid #fff6fd;
|
|
border-left: 1px solid #fff6fd;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.taskbar-btn.active {
|
|
background: linear-gradient(#e7a2c8, #f8d4e9);
|
|
border-top-color: #9f4a78;
|
|
border-left-color: #9f4a78;
|
|
border-right-color: #fff6fd;
|
|
border-bottom-color: #fff6fd;
|
|
}
|
|
|
|
#taskbar-right {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
#taskbar-brand {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #ffeef9;
|
|
text-shadow: 0 1px 0 rgba(94, 20, 64, 0.45);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#taskbar-tray-buttons {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
#clock {
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-top: 1px solid rgba(255, 233, 247, 0.85);
|
|
border-left: 1px solid rgba(255, 233, 247, 0.85);
|
|
border-right: 1px solid rgba(163, 69, 122, 0.8);
|
|
border-bottom: 1px solid rgba(163, 69, 122, 0.8);
|
|
background: rgba(255, 207, 232, 0.48);
|
|
min-height: 30px;
|
|
min-width: 72px;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
#clock .clock-time {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#clock .clock-date {
|
|
font-size: 10px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#start-menu {
|
|
position: absolute;
|
|
left: 8px;
|
|
bottom: 36px;
|
|
width: 420px;
|
|
border-top: 1px solid #f6bfdc;
|
|
border-left: 1px solid #f6bfdc;
|
|
border-right: 1px solid #7f2f5a;
|
|
border-bottom: 1px solid #7f2f5a;
|
|
border-radius: 7px 7px 0 0;
|
|
overflow: hidden;
|
|
background: #fff6fc;
|
|
box-shadow: 0 10px 30px rgba(90, 27, 59, 0.42);
|
|
z-index: 1200;
|
|
}
|
|
|
|
.start-menu-top {
|
|
background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
|
|
color: #fff;
|
|
padding: 10px 14px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
text-shadow: 0 1px 0 rgba(94, 20, 64, 0.55);
|
|
}
|
|
|
|
.start-menu-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 0.95fr;
|
|
min-height: 280px;
|
|
}
|
|
|
|
.start-col {
|
|
padding: 8px 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.start-col-left {
|
|
background: #fff;
|
|
border-right: 1px solid #efbfd9;
|
|
}
|
|
|
|
.start-col-right {
|
|
background: #ffe7f4;
|
|
}
|
|
|
|
.start-item {
|
|
border: none;
|
|
background: transparent;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
padding: 7px 8px;
|
|
color: #7d2756;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.start-item.secondary {
|
|
color: #7a3a61;
|
|
}
|
|
|
|
.start-item:hover {
|
|
background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
|
|
color: #fff;
|
|
}
|
|
|
|
.start-menu-footer {
|
|
background: linear-gradient(var(--titlebar-2), #d868a8);
|
|
padding: 7px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.start-footer-btn {
|
|
background: linear-gradient(#fff3fb, #f2c0de);
|
|
color: #6f2750;
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
padding: 4px 9px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.start-footer-btn:active {
|
|
border-top-color: #9f4a78;
|
|
border-left-color: #9f4a78;
|
|
border-right-color: #fff;
|
|
border-bottom-color: #fff;
|
|
}
|
|
|
|
.app-window {
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: min(760px, 92vw);
|
|
min-width: 360px;
|
|
min-height: 240px;
|
|
background: var(--panel);
|
|
border-top: 1px solid #ffd9ed;
|
|
border-left: 1px solid #ffd9ed;
|
|
border-right: 1px solid #a55282;
|
|
border-bottom: 1px solid #a55282;
|
|
box-shadow: 0 12px 26px rgba(112, 34, 82, 0.32);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-window.dragging {
|
|
user-select: none;
|
|
}
|
|
|
|
.app-window.dragging .window-titlebar {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.hidden { display: none !important; }
|
|
|
|
.window-titlebar {
|
|
background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 6px;
|
|
border-bottom: 1px solid var(--titlebar-border);
|
|
cursor: grab;
|
|
text-shadow: 0 1px 0 rgba(106, 25, 76, 0.45);
|
|
}
|
|
|
|
.window-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.window-title::before {
|
|
content: "▣";
|
|
font-size: 11px;
|
|
color: #ffe8f6;
|
|
}
|
|
|
|
.window-controls {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.window-minimize,
|
|
.window-close {
|
|
width: 24px;
|
|
height: 20px;
|
|
border-top: 1px solid #ffe8f5;
|
|
border-left: 1px solid #ffe8f5;
|
|
border-right: 1px solid #8f3e6b;
|
|
border-bottom: 1px solid #8f3e6b;
|
|
background: linear-gradient(#ffd9ee, #e499c2);
|
|
color: #4c1431;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.window-minimize:active,
|
|
.window-close:active {
|
|
border-top-color: #8f3e6b;
|
|
border-left-color: #8f3e6b;
|
|
border-right-color: #ffe8f5;
|
|
border-bottom-color: #ffe8f5;
|
|
}
|
|
|
|
.window-content {
|
|
margin: 4px;
|
|
padding: 12px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
background: #fff;
|
|
border-top: 1px solid #a14f7d;
|
|
border-left: 1px solid #a14f7d;
|
|
border-right: 1px solid #ffe1f1;
|
|
border-bottom: 1px solid #ffe1f1;
|
|
}
|
|
|
|
.window-resize-handle {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
cursor: nwse-resize;
|
|
background:
|
|
linear-gradient(135deg, transparent 0 40%, #b56a95 40% 46%, transparent 46% 56%, #b56a95 56% 62%, transparent 62% 72%, #b56a95 72% 78%, transparent 78% 100%);
|
|
}
|
|
|
|
.app-window.resizing {
|
|
user-select: none;
|
|
}
|
|
|
|
#selection-box {
|
|
position: absolute;
|
|
border: 1px dashed rgba(255, 255, 255, 0.95);
|
|
background: rgba(130, 200, 255, 0.22);
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
.xp-loading {
|
|
color: #8c3b67;
|
|
padding: 10px;
|
|
}
|
|
|
|
.xp-explorer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.xp-toolbar {
|
|
display: grid;
|
|
grid-template-columns: 28px 28px 28px 34px 1fr;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.xp-nav-btn {
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
background: linear-gradient(#fff3fb, #f2c0de);
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xp-nav-icon {
|
|
width: 28px;
|
|
height: 24px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.xp-nav-btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: default;
|
|
}
|
|
|
|
.xp-breadcrumb {
|
|
background: #fff;
|
|
border: 1px solid #e5b4cf;
|
|
padding: 5px 8px;
|
|
font-size: 11px;
|
|
color: #7d2756;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.xp-explorer-body {
|
|
display: grid;
|
|
grid-template-columns: 170px 1fr;
|
|
gap: 8px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.xp-main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 210px;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.xp-sidebar {
|
|
background: #fff0f9;
|
|
border: 1px solid #e7a8ca;
|
|
padding: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.xp-side-title {
|
|
font-weight: 700;
|
|
color: #8c3b67;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.xp-side-link {
|
|
border: none;
|
|
background: transparent;
|
|
text-align: left;
|
|
color: #7d2756;
|
|
font-size: 11px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.xp-side-link:hover {
|
|
background: #ffdff1;
|
|
}
|
|
|
|
.xp-files {
|
|
min-height: 0;
|
|
border: 1px solid #e7a8ca;
|
|
background: #fff;
|
|
padding: 6px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
|
grid-auto-rows: 96px;
|
|
align-content: start;
|
|
gap: 6px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.xp-file-item {
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
text-align: center;
|
|
color: #5f2244;
|
|
padding: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: default;
|
|
width: 92px;
|
|
height: 92px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.xp-file-item:hover {
|
|
border-color: #f0c3dc;
|
|
background: #fff4fb;
|
|
}
|
|
|
|
.xp-file-item.selected {
|
|
border-color: #d88db8;
|
|
background: #ffe8f5;
|
|
}
|
|
|
|
.xp-file-icon {
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.xp-file-label {
|
|
font-size: 11px;
|
|
word-break: break-word;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.xp-empty {
|
|
color: #8c3b67;
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.xp-details {
|
|
border: 1px solid #e7a8ca;
|
|
background: #fff0f9;
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: #6e2b52;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.xp-details-title {
|
|
font-weight: 700;
|
|
color: #8c3b67;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.xp-notepad {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
height: 100%;
|
|
}
|
|
|
|
.xp-notepad-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: 1px solid #e5b4cf;
|
|
background: #fff0f9;
|
|
padding: 5px;
|
|
}
|
|
|
|
.xp-note-btn {
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
background: linear-gradient(#fff3fb, #f2c0de);
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xp-note-file {
|
|
margin-left: auto;
|
|
font-size: 11px;
|
|
color: #7a3a61;
|
|
}
|
|
|
|
.xp-note-editor {
|
|
width: 100%;
|
|
min-height: 360px;
|
|
height: 100%;
|
|
resize: none;
|
|
border: 1px solid #d58cb8;
|
|
background: #fff;
|
|
color: #3d1530;
|
|
font-family: "Lucida Console", "Courier New", monospace;
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
padding: 10px;
|
|
}
|
|
|
|
.xp-paint {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
height: 100%;
|
|
}
|
|
|
|
.xp-paint-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
border: 1px solid #e5b4cf;
|
|
background: #fff0f9;
|
|
padding: 5px;
|
|
font-size: 11px;
|
|
color: #7a3a61;
|
|
}
|
|
|
|
.xp-paint-toolbar label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.xp-paint-tool,
|
|
.xp-paint-size,
|
|
.xp-paint-color {
|
|
font-size: 11px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
accent-color: #d24b95;
|
|
}
|
|
|
|
.xp-paint-btn {
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
background: linear-gradient(#fff3fb, #f2c0de);
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xp-paint-stage {
|
|
border: 1px solid #d58cb8;
|
|
background: #fff;
|
|
overflow: auto;
|
|
flex: 1;
|
|
min-height: 160px;
|
|
}
|
|
|
|
.xp-paint-canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.xp-ie {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
height: 100%;
|
|
}
|
|
|
|
.xp-ie-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
border: 1px solid #e5b4cf;
|
|
background: #fff0f9;
|
|
padding: 5px;
|
|
}
|
|
|
|
.xp-ie-btn {
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
background: linear-gradient(#fff3fb, #f2c0de);
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xp-ie-btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: default;
|
|
}
|
|
|
|
.xp-ie-address-row {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 6px;
|
|
align-items: center;
|
|
border: 1px solid #e5b4cf;
|
|
background: #fff0f9;
|
|
padding: 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
.xp-ie-address-row span {
|
|
color: #7a3a61;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.xp-ie-address {
|
|
border: 1px solid #d58cb8;
|
|
padding: 5px 7px;
|
|
font-size: 12px;
|
|
color: #5a1b3b;
|
|
background: #fff;
|
|
}
|
|
|
|
.xp-ie-content {
|
|
border: 1px solid #d58cb8;
|
|
background: #fff;
|
|
min-height: 220px;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.ie-loading {
|
|
color: #8c3b67;
|
|
}
|
|
|
|
.ie-error h3 {
|
|
margin-top: 0;
|
|
color: #8d1f54;
|
|
}
|
|
|
|
.ie-page h2 {
|
|
margin-top: 0;
|
|
color: #8c3b67;
|
|
}
|
|
|
|
.ie-page a {
|
|
color: #b32972;
|
|
}
|
|
|
|
.ie-page a:hover {
|
|
color: #7f1f54;
|
|
}
|
|
|
|
.ie-results li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.ie-results li div {
|
|
color: #8d5780;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.xp-image-viewer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
height: 100%;
|
|
}
|
|
|
|
.xp-image-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: 1px solid #e5b4cf;
|
|
background: #fff0f9;
|
|
padding: 5px;
|
|
}
|
|
|
|
.xp-image-btn {
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #9f4a78;
|
|
border-bottom: 1px solid #9f4a78;
|
|
background: linear-gradient(#fff3fb, #f2c0de);
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xp-image-title {
|
|
margin-left: auto;
|
|
color: #7a3a61;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.xp-image-stage {
|
|
border: 1px solid #d58cb8;
|
|
background: #fff;
|
|
flex: 1;
|
|
min-height: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
.xp-image-content {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
image-rendering: auto;
|
|
}
|
|
|
|
.xp-audio-player {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
height: 100%;
|
|
background: linear-gradient(#f7d9ec, #e9acd0);
|
|
border: 1px solid #a25a85;
|
|
padding: 8px;
|
|
}
|
|
|
|
.xp-audio-top {
|
|
display: grid;
|
|
grid-template-columns: 44px 1fr;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.xp-audio-logo {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
background: linear-gradient(#bf3f8a, #7e1f54);
|
|
border: 1px solid #5f123d;
|
|
}
|
|
|
|
.xp-audio-track-wrap {
|
|
border: 1px solid #8f4a72;
|
|
background: #220b17;
|
|
color: #8dff9e;
|
|
font-family: "Lucida Console", "Courier New", monospace;
|
|
font-size: 11px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.xp-audio-track-marquee {
|
|
display: inline-block;
|
|
padding: 6px 8px;
|
|
min-width: 100%;
|
|
animation: xp-audio-scroll 12s linear infinite;
|
|
}
|
|
|
|
@keyframes xp-audio-scroll {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
|
|
.xp-audio-controls {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto 1fr;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.xp-audio-btn {
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #7b355d;
|
|
border-bottom: 1px solid #7b355d;
|
|
background: linear-gradient(#fff2fb, #efbfdc);
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xp-audio-seek {
|
|
width: 100%;
|
|
}
|
|
|
|
.xp-audio-time {
|
|
margin-top: auto;
|
|
border: 1px solid #8f4a72;
|
|
background: #fff6fc;
|
|
color: #6f2750;
|
|
font-family: "Lucida Console", "Courier New", monospace;
|
|
font-size: 11px;
|
|
padding: 4px 6px;
|
|
text-align: right;
|
|
}
|
|
|
|
#context-menu {
|
|
position: fixed;
|
|
z-index: 3000;
|
|
min-width: 170px;
|
|
background: #fff5fc;
|
|
border-top: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #8e3f6c;
|
|
border-bottom: 1px solid #8e3f6c;
|
|
box-shadow: 2px 2px 0 rgba(110, 41, 78, 0.35);
|
|
padding: 3px;
|
|
}
|
|
|
|
.context-menu-item {
|
|
width: 100%;
|
|
text-align: left;
|
|
border: none;
|
|
background: transparent;
|
|
color: #6f2750;
|
|
font-size: 11px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.context-menu-item:hover:not(:disabled),
|
|
.context-menu-item:focus-visible {
|
|
background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.context-menu-item:disabled {
|
|
color: #b78aa4;
|
|
cursor: default;
|
|
}
|
|
|
|
.context-menu-sep {
|
|
height: 1px;
|
|
background: #e2a9cb;
|
|
margin: 3px 2px;
|
|
}
|
|
|
|
.xp-props {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.xp-props-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #7c2e5b;
|
|
}
|
|
|
|
.xp-props-body {
|
|
border: 1px solid #e7a8ca;
|
|
background: #fff;
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: #5f2244;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|