@jjlmoya/utils-developer 1.31.0 → 1.32.0

package/src/tool/dualOsIconPreview/dual-ios-android-app-icon-preview.css

@@ -0,0 +1,861 @@
+.dual-os-icon-preview {
+  --n-ink: #171717;
+  --n-muted: #6b6b69;
+  --n-paper: #f3efe6;
+  --n-card: #fffdf8;
+  --n-line: #d8d1c3;
+  --n-accent: #f4b942;
+  --n-accent-ink: #2b2008;
+  --n-stage: #d5d9d5;
+  --n-phone: #181a1b;
+  --n-phone-edge: #3c4143;
+  --n-screen: #f4f1e9;
+  --n-wallpaper: #718a80;
+  --n-wallpaper-alt: #53627e;
+  --n-shadow: #17171735;
+  --n-white: #fff;
+  --n-danger: #a52f2f;
+  --n-pass: #245d4d;
+  --n-ios-dark: #2d3442;
+
+  width: 100%;
+  display: grid;
+  align-items: start;
+  grid-template-columns: minmax(255px, 0.72fr) minmax(600px, 1.8fr);
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 28px;
+  background: var(--n-card);
+  color: var(--n-ink);
+  box-shadow: 0 24px 55px var(--n-shadow);
+}
+
+.theme-dark .dual-os-icon-preview {
+  --n-ink: #f4f1e9;
+  --n-muted: #b6b1a7;
+  --n-paper: #242421;
+  --n-card: #302f2b;
+  --n-line: #504d46;
+  --n-accent-ink: #201707;
+  --n-stage: #1f211f;
+  --n-phone: #090909;
+  --n-phone-edge: #4b4b48;
+  --n-screen: #d8ddd6;
+  --n-wallpaper: #597066;
+  --n-wallpaper-alt: #596278;
+  --n-shadow: #0008;
+  --n-pass: #9bd3bb;
+}
+
+.theme-dark .dual-os-icon-preview .choice-grid button[aria-pressed="true"] {
+  background: #ffd56a;
+  color: #211805;
+  border-color: #ffe5a1;
+  box-shadow: inset 0 0 0 1px #211805;
+}
+
+.preview-controls {
+  display: flex;
+  flex-direction: column;
+  background: var(--n-paper);
+  border-right: 1px solid var(--n-line);
+}
+
+.control-block {
+  padding: 22px;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.control-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 15px;
+}
+
+.control-heading strong,
+.control-heading small,
+.upload-button strong,
+.upload-button small,
+.toggle-row strong,
+.toggle-row small {
+  display: block;
+}
+
+.control-heading strong {
+  font-size: 0.88rem;
+}
+
+.control-heading small,
+.upload-button small,
+.toggle-row small,
+.audit-heading small {
+  margin-top: 4px;
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.step-number {
+  padding-top: 3px;
+  color: var(--n-accent-ink);
+  font: 800 0.68rem/1 "Courier New", monospace;
+}
+
+.upload-button,
+.choice-grid button,
+.text-input,
+.color-row,
+.toggle-row {
+  border: 1px solid var(--n-line);
+  background: var(--n-card);
+  color: var(--n-ink);
+  font: inherit;
+}
+
+.upload-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px;
+  border-style: dashed;
+  border-color: var(--n-accent-ink);
+  border-radius: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.upload-button:hover,
+.upload-button:focus-visible {
+  background: var(--n-accent);
+}
+
+.upload-glyph {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--n-accent);
+  color: var(--n-accent-ink);
+  font-size: 1.3rem;
+}
+
+.field-error {
+  min-height: 16px;
+  margin: 8px 0 0;
+  color: var(--n-danger);
+  font-size: 0.72rem;
+}
+
+.text-input {
+  width: 100%;
+  min-height: 42px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  outline: none;
+}
+
+.text-input:focus-visible,
+.choice-grid button:focus-visible,
+.upload-button:focus-visible,
+.toggle-row:focus-within,
+.color-row:focus-within {
+  border-color: var(--n-accent-ink);
+  box-shadow: 0 0 0 3px var(--n-accent);
+}
+
+.color-row,
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 10px;
+  padding: 8px 11px;
+  border-radius: 10px;
+  font-size: 0.72rem;
+}
+
+.color-row input {
+  width: 34px;
+  height: 25px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.toggle-row {
+  justify-content: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+}
+
+.toggle-row input {
+  accent-color: var(--n-accent-ink);
+  margin-top: 3px;
+}
+
+.choice-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.choice-grid button {
+  min-height: 36px;
+  padding: 7px 5px;
+  border-radius: 9px;
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+
+.choice-grid button:hover {
+  color: var(--n-ink);
+  border-color: var(--n-accent-ink);
+}
+
+.choice-grid button[aria-pressed="true"] {
+  border-color: var(--n-accent-ink);
+  background: var(--n-accent);
+  color: var(--n-accent-ink);
+  font-weight: 800;
+}
+
+.preview-stage {
+  align-self: start;
+  min-width: 0;
+  height: max-content;
+  padding: 22px clamp(18px, 3.2vw, 40px) 25px;
+  background: var(--n-stage);
+}
+
+.stage-topline,
+.device-caption,
+.device-caption strong {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.stage-topline {
+  margin-bottom: 18px;
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.stage-kicker {
+  color: var(--n-ink);
+  font-weight: 800;
+}
+
+.device-pair {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: clamp(14px, 3.4vw, 38px);
+}
+
+.device-card {
+  min-width: 0;
+  flex: 1;
+}
+
+.device-shell {
+  position: relative;
+  width: min(100%, 230px);
+  height: 455px;
+  margin: 0 auto;
+  padding: 8px;
+  border: 2px solid var(--n-phone-edge);
+  border-radius: 34px;
+  background: var(--n-phone);
+  box-shadow: 12px 16px 0 var(--n-shadow);
+}
+
+.device-screen {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 27px;
+  background: var(--n-screen);
+}
+
+.device-island,
+.device-camera {
+  position: absolute;
+  z-index: 3;
+  top: 14px;
+  left: 50%;
+  width: 34%;
+  height: 18px;
+  transform: translateX(-50%);
+  border-radius: 20px;
+  background: var(--n-phone);
+}
+
+.device-camera {
+  top: 13px;
+  width: 18px;
+  height: 18px;
+  border: 4px solid var(--n-phone);
+  background: var(--n-accent);
+}
+
+.system-status {
+  position: absolute;
+  z-index: 4;
+  top: 9px;
+  right: 15px;
+  left: 15px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--n-ink);
+  font: 700 0.52rem/1 "Courier New", monospace;
+}
+
+.home-wallpaper {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ios-wallpaper {
+  background: #394f96;
+}
+
+.ios-wallpaper::before,
+.ios-wallpaper::after {
+  position: absolute;
+  z-index: -1;
+  display: block;
+  content: "";
+  pointer-events: none;
+}
+
+.ios-wallpaper::before {
+  inset: -22% -35%;
+  background:
+    radial-gradient(ellipse at 19% 14%, #ffd1db 0 11%, transparent 30%),
+    radial-gradient(ellipse at 78% 18%, #9ce6db 0 13%, transparent 31%),
+    radial-gradient(ellipse at 66% 65%, #ffb58c 0 16%, transparent 33%),
+    radial-gradient(ellipse at 23% 82%, #71d2c2 0 17%, transparent 35%),
+    linear-gradient(145deg, #263b91 8%, #5668bd 46%, #764f92 100%);
+  filter: blur(9px) saturate(1.12);
+  transform: rotate(-9deg) scale(1.08);
+}
+
+.ios-wallpaper::after {
+  top: 20%;
+  left: -35%;
+  width: 170%;
+  height: 38%;
+  border: 12px solid #ffffff2e;
+  border-radius: 50%;
+  box-shadow: 0 0 35px #ffffff26, inset 0 0 35px #ffffff1c;
+  transform: rotate(-18deg);
+}
+
+.android-wallpaper {
+  background: #a9c6bd;
+}
+
+.android-wallpaper::before,
+.android-wallpaper::after {
+  position: absolute;
+  display: block;
+  content: "";
+  pointer-events: none;
+}
+
+.android-wallpaper::before {
+  inset: -12%;
+  background:
+    radial-gradient(ellipse at 78% 18%, #f4d28e 0 12%, transparent 30%),
+    radial-gradient(ellipse at 16% 72%, #6f9d95 0 18%, transparent 37%),
+    linear-gradient(125deg, #d8e5c5 0 36%, #93bbb2 37% 66%, #607f8b 67%);
+  filter: blur(8px) saturate(.9);
+  transform: rotate(12deg);
+}
+
+.android-wallpaper::after {
+  right: -28%;
+  bottom: 15%;
+  width: 145%;
+  height: 22%;
+  border: 8px solid #ffffff30;
+  border-radius: 50%;
+  transform: rotate(-20deg);
+}
+
+.wallpaper-glow {
+  position: absolute;
+  width: 130%;
+  height: 25%;
+  border: 1px solid var(--n-white);
+  border-radius: 50%;
+  opacity: 0.45;
+  transform: rotate(-22deg);
+}
+
+.glow-one {
+  top: 22%;
+  left: -20%;
+}
+
+.glow-two {
+  top: 39%;
+  left: 6%;
+  transform: rotate(18deg);
+}
+
+.home-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  width: 92%;
+  margin-top: 64px;
+  gap: 15px 7px;
+}
+
+.ios-grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.android-grid {
+  grid-template-columns: repeat(5, 1fr);
+  margin-top: 104px;
+  gap: 14px 5px;
+}
+
+.launcher-item {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+}
+
+.launcher-item small {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--n-white);
+  font-size: 0.48rem;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 2px var(--n-shadow);
+  white-space: nowrap;
+}
+
+.app-tile {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  width: 39px;
+  height: 39px;
+  place-items: center;
+  border-radius: 11px;
+  color: var(--n-white);
+  font-size: 1.08rem;
+  font-weight: 700;
+  box-shadow: 0 4px 8px var(--n-shadow);
+}
+
+.audited-icon {
+  overflow: hidden;
+  background: var(--n-brand);
+  color: var(--n-accent-ink);
+  text-align: center;
+}
+
+.audited-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.launcher-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.audited-icon img[hidden],
+.audited-icon [data-empty-logo][hidden] {
+  display: none;
+}
+
+.ios-icon {
+  border-radius: 12px;
+}
+
+.android-icon {
+  border-radius: 11px;
+}
+
+[data-android-shape="circle"] .device-android .launcher-icon {
+  border-radius: 50%;
+}
+
+[data-android-shape="rounded"] .device-android .launcher-icon {
+  border-radius: 7px;
+}
+
+[data-android-shape="teardrop"] .device-android .launcher-icon {
+  border-radius: 50% 50% 50% 7px;
+}
+
+[data-android-shape="squircle"] .device-android .launcher-icon {
+  border-radius: 11px;
+}
+
+[data-android-themed="true"] .device-android .launcher-icon {
+  background: var(--n-brand);
+  box-shadow: 0 4px 8px var(--n-shadow), inset 0 0 0 1px #ffffff38;
+}
+
+[data-android-themed="true"] .device-android .launcher-icon img {
+  filter: grayscale(1) brightness(.62) contrast(1.28);
+  mix-blend-mode: multiply;
+  opacity: .9;
+}
+
+[data-ios-appearance="dark"] .device-ios .ios-wallpaper {
+  background: #121c4b;
+}
+
+[data-ios-appearance="dark"] .device-ios .ios-wallpaper::before {
+  filter: brightness(.52) saturate(.88) blur(10px);
+}
+
+[data-ios-appearance="clear"] .device-ios .ios-wallpaper {
+  background: #c3d5e2;
+}
+
+[data-ios-appearance="clear"] .device-ios .ios-wallpaper::before {
+  filter: brightness(1.22) saturate(.62) blur(9px);
+}
+
+[data-ios-appearance="clear"] .device-ios .ios-icon {
+  border: 1px solid #ffffffad;
+  background: #ffffff4a;
+  box-shadow: 0 4px 12px #1a355333, inset 0 0 0 1px #ffffff4d;
+  backdrop-filter: blur(6px);
+}
+
+[data-ios-appearance="tinted"] .device-ios .ios-wallpaper {
+  background: #594f75;
+}
+
+[data-ios-appearance="tinted"] .device-ios .ios-wallpaper::before {
+  filter: hue-rotate(18deg) saturate(.75) brightness(.78) blur(10px);
+}
+
+[data-ios-appearance="tinted"] .device-ios .ios-icon,
+[data-ios-appearance="tinted"] .device-ios .ios-icon img {
+  filter: grayscale(1) saturate(0) contrast(.92);
+}
+
+[data-ios-appearance="tinted"] .device-ios .ios-icon {
+  background: color-mix(in srgb, var(--n-brand) 72%, #fff 28%);
+}
+
+[data-ios-appearance="dark"] .device-ios .ios-icon img {
+  filter: brightness(.78) saturate(.8);
+}
+
+.tile-blue { background: #3974c9; }
+.tile-green { background: #3d996d; }
+.tile-orange { background: #e47f39; }
+.tile-purple { background: #8365c7; }
+.tile-red { background: #d95155; }
+.tile-teal { background: #258f9a; }
+.tile-yellow { background: #d9ad38; }
+.tile-pink { background: #d86390; }
+.tile-navy { background: #3c5279; }
+.tile-cyan { background: #3ca4bd; }
+.tile-slate { background: #65727e; }
+
+.device-dock,
+.android-dock {
+  position: absolute;
+  z-index: 2;
+  bottom: 25px;
+  display: flex;
+  gap: 8px;
+  padding: 7px 9px;
+  border: 1px solid var(--n-white);
+  border-radius: 16px;
+  background: var(--n-white);
+  opacity: 0.88;
+}
+
+.android-dock {
+  bottom: 27px;
+  gap: 9px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.device-dock .app-tile,
+.android-dock .app-tile {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  box-shadow: 0 3px 5px var(--n-shadow);
+  font-size: 0.85rem;
+}
+
+[data-android-shape="circle"] .android-dock .launcher-icon { border-radius: 50%; }
+[data-android-shape="squircle"] .android-dock .launcher-icon { border-radius: 11px; }
+[data-android-shape="rounded"] .android-dock .launcher-icon { border-radius: 7px; }
+[data-android-shape="teardrop"] .android-dock .launcher-icon { border-radius: 50% 50% 50% 7px; }
+
+.android-search {
+  position: absolute;
+  top: 61px;
+  right: 10%;
+  left: 10%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border-radius: 20px;
+  background: var(--n-white);
+  color: var(--n-muted);
+  font-size: 0.62rem;
+  opacity: 0.9;
+}
+
+.android-search span {
+  color: #3d74c9;
+  font-weight: 900;
+}
+
+.android-search small {
+  flex: 1;
+}
+
+.android-search b {
+  color: var(--n-muted);
+  font-size: 0.9rem;
+}
+
+.home-indicator,
+.android-navigation {
+  position: absolute;
+  z-index: 4;
+  bottom: 9px;
+  left: 50%;
+  width: 34%;
+  height: 3px;
+  transform: translateX(-50%);
+  border-radius: 4px;
+  background: var(--n-ink);
+}
+
+.android-navigation {
+  right: 17%;
+  bottom: 8px;
+  left: 17%;
+  width: auto;
+  height: 14px;
+  display: flex;
+  justify-content: space-between;
+  background: transparent;
+}
+
+.android-navigation span {
+  width: 5px;
+  height: 5px;
+  margin-top: 4px;
+  border: 1px solid var(--n-white);
+  border-radius: 50%;
+}
+
+.device-caption {
+  margin-top: 12px;
+  color: var(--n-muted);
+  font-size: 0.62rem;
+}
+
+.device-caption strong {
+  color: var(--n-ink);
+  font-size: 0.7rem;
+}
+
+.platform-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.dot-ios { background: var(--n-ink); }
+.dot-android { background: var(--n-accent-ink); }
+.audit-report {
+  margin-top: 22px;
+  padding: 15px;
+  border: 1px solid var(--n-line);
+  border-radius: 15px;
+  background: var(--n-card);
+}
+
+.audit-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.audit-heading strong {
+  display: block;
+  font-size: 0.82rem;
+}
+
+.audit-score {
+  padding: 7px 10px;
+  border-radius: 8px;
+  background: var(--n-paper);
+  color: var(--n-muted);
+  font: 800 0.75rem/1 "Courier New", monospace;
+}
+
+[data-audit-state="ready"] .audit-score {
+  background: var(--n-accent);
+  color: var(--n-accent-ink);
+}
+
+.audit-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 10px;
+  padding-top: 13px;
+}
+
+.audit-metric {
+  min-width: 0;
+  padding-right: 9px;
+  border-right: 1px solid var(--n-line);
+}
+
+.audit-metric:last-child { border-right: 0; }
+.audit-metric small, .audit-metric strong { display: block; }
+.audit-metric small {
+  color: var(--n-muted);
+  font-size: 0.59rem;
+  line-height: 1.35;
+}
+.audit-metric strong {
+  margin-top: 5px;
+  color: var(--n-ink);
+  font: 800 0.7rem/1.2 "Courier New", monospace;
+}
+.audit-metric strong[data-audit-status="pass"] { color: var(--n-pass); }
+.audit-metric strong[data-audit-status="review"] { color: var(--n-danger); }
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+@media (max-width: 980px) {
+  .dual-os-icon-preview {
+    grid-template-columns: 1fr;
+  }
+  .preview-controls {
+    border-right: 0;
+  }
+}
+
+@media (max-width: 620px) {
+  .preview-stage {
+    padding: 18px 12px 20px;
+  }
+  .stage-topline {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .device-pair {
+    gap: 4px;
+  }
+  .device-shell {
+    height: 325px;
+    padding: 5px;
+    border-radius: 25px;
+  }
+  .device-screen {
+    border-radius: 19px;
+  }
+  .device-island {
+    top: 9px;
+  }
+  .device-camera {
+    top: 8px;
+    width: 14px;
+    height: 14px;
+    border-width: 3px;
+  }
+  .system-status {
+    top: 6px;
+    right: 9px;
+    left: 9px;
+    font-size: 0.4rem;
+  }
+  .home-grid {
+    margin-top: 44px;
+    gap: 10px 3px;
+  }
+  .android-grid {
+    margin-top: 75px;
+    gap: 9px 2px;
+  }
+  .app-tile {
+    width: 29px;
+    height: 29px;
+    border-radius: 8px;
+    font-size: 0.8rem;
+  }
+  .device-dock .app-tile,
+  .android-dock .app-tile {
+    width: 25px;
+    height: 25px;
+    font-size: 0.65rem;
+  }
+  .device-dock,
+  .android-dock {
+    bottom: 18px;
+    gap: 4px;
+    padding: 5px;
+  }
+  .android-search {
+    top: 39px;
+    padding: 5px 7px;
+    font-size: 0.45rem;
+  }
+  .audit-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .audit-metric {
+    border-right: 0;
+  }
+}