simple-details/dist/styles.css

simple animated details package

.SimpleDetails{overflow:hidden;flex:0 0 auto;min-width:0;min-height:0}.SimpleDetailsSummary{display:flex;align-items:center;justify-content:space-between;min-width:0;min-height:0;flex:0 0 auto;margin:0;padding:0;box-sizing:border-box;cursor:pointer}.SimpleDetailsSummary::marker,.SimpleDetailsSummary::-webkit-details-marker,.SimpleDetailsSummary:before{display:none;content:none}.SimpleDetailsSummary a{color:inherit;text-decoration:none;background:none}.SimpleDetailsButton{cursor:pointer;text-align:center;all:unset;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-user-drag:none;user-select:none;width:auto;height:auto;min-width:0;min-height:0;flex:0 0 auto;transition:none;transform:none;transform-origin:center}.SimpleDetailsBody{display:none;flex-direction:column;min-width:0;min-height:0;flex:0 0 auto}.is-opening>.SimpleDetailsBody,.open>.SimpleDetailsBody{display:flex}:root{--sd_colorText: #000000;--sd_colorTextSecondary: #484848;--sd_colorBg: #ffffff;--sd_colorBorder: #e0e0e0;--sd_colorBorderLight: #f2f2f2;--sd_colorHover: #fafafa;--sd_colorButtonHover: #ebebeb;--sd_colorLink: #ff5a5f;--sd_colorLinkHover: #e04a50;--sd_colorFocus: #007aff;--sd_colorActive: #d6d6d6;--sd_radiusBase: 12px;--sd_radiusMd: 16px;--sd_radiusRound: 50%;--sd_shadowCard: 0 2px 6px rgba(0, 0, 0, .08);--sd_shadowButton: 2px 2px 8px rgba(0, 0, 0, .08);--sd_fontSizeBase: 14px;--sd_fontSizeMd: 16px;--sd_fontSizeButton: 14px;--sd_lineHeightBase: 1.4;--sd_letterSpacingBase: .03em;--sd_gapSm: 8px;--sd_gapMd: 12px;--sd_gapLg: 16px;--sd_scrollbarWidth: 6px;--sd_scrollbarThumb: #484848;--sd_scrollbarTrack: #ffffff;--sd_scrollbarThumbBorder: #ffffff}@media screen and (min-width: 375px){:root{--sd_radiusBase: 16px;--sd_fontSizeBase: 15px;--sd_fontSizeButton: 16px}}@media screen and (min-width: 1024px){:root{--sd_fontSizeBase: 16px}}.sd_cute{--sd_colorText: #000000;--sd_colorTextSecondary: #333333;--sd_colorBg: #ffffff;--sd_colorBorder: #f7f7f7;--sd_colorBorderLight: transparent;--sd_colorHover: rgba(255, 90, 95, .05);--sd_colorButtonHover: #ff5a5f;--sd_colorLink: #ff5a5f;--sd_colorLinkHover: #ff5a5f;--sd_colorFocus: #ff5a5f;--sd_colorActive: #ff5a5f;--sd_radiusBase: 12px;--sd_radiusRound: 50%;--sd_shadowCard: 0 4px 12px rgba(0, 0, 0, .08);--sd_shadowButton: none;--sd_fontSizeBase: 14px;--sd_fontSizeMd: 15px;--sd_fontSizeButton: 16px;--sd_lineHeightBase: 1.6;--sd_letterSpacingBase: normal;--sd_gapSm: 16px;--sd_gapMd: 16px;--sd_gapLg: 20px;--sd_scrollbarWidth: 6px;--sd_scrollbarThumb: #484848;--sd_scrollbarTrack: #ffffff;--sd_scrollbarThumbBorder: #ffffff}@media screen and (min-width: 768px){.sd_cute{--sd_fontSizeBase: 15px;--sd_gapMd: 20px}}@media screen and (min-width: 1024px){.sd_cute{--sd_fontSizeBase: 16px}}.sd_dark{--sd_colorText: #ffffff;--sd_colorTextSecondary: #d1d1d1;--sd_colorBg: #1a1a1a;--sd_colorBorder: #333333;--sd_colorBorderLight: #2a2a2a;--sd_colorHover: #3a3a3a;--sd_colorButtonHover: #3a3a3a;--sd_colorLink: #ff6b6f;--sd_colorLinkHover: #ff4a50;--sd_colorFocus: #ff6b6f;--sd_colorActive: #3a3a3a;--sd_radiusBase: 12px;--sd_radiusRound: 50%;--sd_shadowCard: 0 2px 6px rgba(0, 0, 0, .2);--sd_shadowButton: none;--sd_fontSizeBase: 16px;--sd_fontSizeButton: 16px;--sd_lineHeightBase: 1.4;--sd_letterSpacingBase: normal;--sd_gapSm: 8px;--sd_gapMd: 16px;--sd_gapLg: 16px;--sd_scrollbarWidth: 6px;--sd_scrollbarThumb: #484848;--sd_scrollbarTrack: #1a1a1a;--sd_scrollbarThumbBorder: #1a1a1a}.sd_material{--sd_colorText: #1a3c34;--sd_colorTextSecondary: #1a3c34;--sd_colorBg: #f5f6f5;--sd_colorBorder: #c8e6c9;--sd_colorBorderLight: #c8e6c9;--sd_colorHover: #c8e6c9;--sd_colorButtonHover: #388e3c;--sd_colorLink: #4caf50;--sd_colorLinkHover: #388e3c;--sd_colorFocus: #4caf50;--sd_colorActive: #c8e6c9;--sd_radiusBase: 8px;--sd_radiusRound: 50%;--sd_shadowCard: 0 4px 8px rgba(0, 0, 0, .1);--sd_shadowButton: 0 2px 4px rgba(0, 0, 0, .2);--sd_fontSizeBase: 16px;--sd_fontSizeButton: 16px;--sd_lineHeightBase: 1.6;--sd_letterSpacingBase: normal;--sd_gapSm: 12px;--sd_gapMd: 16px;--sd_gapLg: 16px;--sd_scrollbarWidth: 6px;--sd_scrollbarThumb: #c8e6c9;--sd_scrollbarTrack: #f5f6f5;--sd_scrollbarThumbBorder: #f5f6f5}.sd_sunny{--sd_colorText: #3e2723;--sd_colorTextSecondary: #3e2723;--sd_colorBg: #fff3e0;--sd_colorBorder: #ffcc80;--sd_colorBorderLight: #ffcc80;--sd_colorHover: #ffb300;--sd_colorButtonHover: #ffb300;--sd_colorLink: #ef6c00;--sd_colorLinkHover: #ff8f00;--sd_colorFocus: #ef6c00;--sd_colorActive: #ffcc80;--sd_radiusBase: 12px;--sd_radiusRound: 50%;--sd_shadowCard: 0 4px 12px rgba(255, 111, 0, .2);--sd_shadowButton: 0 2px 6px rgba(255, 111, 0, .3);--sd_fontSizeBase: 16px;--sd_fontSizeButton: 16px;--sd_lineHeightBase: 1.6;--sd_letterSpacingBase: normal;--sd_gapSm: 8px;--sd_gapMd: 16px;--sd_gapLg: 16px;--sd_scrollbarWidth: 6px;--sd_scrollbarThumb: #ffcc80;--sd_scrollbarTrack: #fff3e0;--sd_scrollbarThumbBorder: #fff3e0}.sd_blood_dragon{--sd_colorText: #ffffff;--sd_colorTextSecondary: #e0e0e0;--sd_colorBg: #0d0d1a;--sd_colorBorder: #ff00ff;--sd_colorBorderLight: #00f7ff;--sd_colorHover: #2a2a4d;--sd_colorButtonHover: #2a2a4d;--sd_colorLink: #ff00ff;--sd_colorLinkHover: #00f7ff;--sd_colorFocus: #ff00ff;--sd_colorActive: #1a1a33;--sd_radiusBase: 4px;--sd_radiusRound: 4px;--sd_shadowCard: 0 0 12px rgba(255, 0, 255, .3);--sd_shadowButton: 0 0 8px rgba(255, 0, 255, .4);--sd_fontSizeBase: 15px;--sd_fontSizeButton: 16px;--sd_lineHeightBase: 1.4;--sd_letterSpacingBase: .03em;--sd_gapSm: 12px;--sd_gapMd: 16px;--sd_gapLg: 16px;--sd_scrollbarWidth: 6px;--sd_scrollbarThumb: #e1156e;--sd_scrollbarTrack: #0d0d1a;--sd_scrollbarThumbBorder: #0d0d1a}@keyframes glitch{0%{transform:translateY(0)}20%{transform:translateY(-2px)}40%{transform:translateY(2px)}60%{opacity:.8}80%{filter:hue-rotate(10deg)}}@keyframes pulse{0%{box-shadow:0 0 8px #f0f}50%{box-shadow:0 0 20px #f0f}to{box-shadow:0 0 8px #f0f}}@keyframes blink{0%,to{opacity:0}50%{opacity:1}}@keyframes flicker{0%,19%,21%,23%,25%,54%,56%,to{text-shadow:0 0 5px #ff00ff,0 0 10px rgba(255,0,255,.5)}20%,24%,55%{text-shadow:0 0 10px #00f7ff,0 0 20px rgba(0,247,255,.8),0 0 30px rgba(0,247,255,.6)}}.sd_blood_dragon.SimpleDetails{position:relative;box-shadow:4px 4px #f0f9,8px 8px #00f7ff4d;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><polygon points="12,2 22,12 12,22 2,12" fill="none" stroke="%2300f7ff" stroke-width="1"/></svg>'),pointer}.sd_blood_dragon.SimpleDetails:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(0,255,229,.15) 50%,transparent 100%);opacity:1;pointer-events:none;animation:glitch 3s infinite}.sd_blood_dragon.SimpleDetailsSummary{position:relative;text-shadow:0 0 5px #ff00ff,0 0 10px rgba(255,0,255,.5);animation:flicker 2s infinite alternate;animation-delay:4s}.sd_blood_dragon.SimpleDetailsSummary:after{content:"|";position:absolute;right:16px;color:#f0f;animation:blink 1s infinite steps(1)}.sd_blood_dragon.SimpleDetailsButton{border:1px solid #ff00ff;text-shadow:0 0 8px #ff00ff}.sd_blood_dragon.SimpleDetailsButton:hover{animation:pulse 1.5s infinite}.sd_blood_dragon.SimpleDetailsSummary,.sd_blood_dragon.SimpleDetailsButton{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="none" stroke="%23ff00ff" stroke-width="1"/><line x1="12" y1="0" x2="12" y2="6" stroke="%2300f7ff" stroke-width="1"/><line x1="12" y1="18" x2="12" y2="24" stroke="%2300f7ff" stroke-width="1"/><line x1="0" y1="12" x2="6" y2="12" stroke="%2300f7ff" stroke-width="1"/><line x1="18" y1="12" x2="24" y2="12" stroke="%2300f7ff" stroke-width="1"/></svg>'),auto}.SimpleDetails{color:var(--sd_colorText);background-color:var(--sd_colorBg);border:1px solid var(--sd_colorBorder);border-radius:var(--sd_radiusBase);box-shadow:var(--sd_shadowCard)}.SimpleDetailsSummary{width:100%;gap:var(--sd_gapMd);padding:var(--sd_gapMd);background-color:var(--sd_colorBg);border-bottom:1px solid var(--sd_colorBorderLight);border-radius:var(--sd_radiusBase) var(--sd_radiusBase) 0 0;transition:background-color .33s}.SimpleDetailsSummary:active{background-color:var(--sd_colorActive)}@media screen and (hover: hover){.SimpleDetailsSummary:hover{background-color:var(--sd_colorHover)}}.SimpleDetailsButton{font-size:var(--sd_fontSizeButton);line-height:1;width:24px;height:24px;background-color:var(--sd_colorBg);color:var(--sd_colorTextSecondary);transition:transform .33s,background-color .33s,color .33s;transform-origin:center;border-radius:var(--sd_radiusRound);box-shadow:var(--sd_shadowButton)}@media screen and (min-width: 375px){.SimpleDetailsButton{width:32px;height:32px}}@media screen and (hover: hover){.SimpleDetailsButton:hover{background-color:var(--sd_colorButtonHover)}}.SimpleDetailsButton:active{background-color:var(--sd_colorActive)}.SimpleDetails.is-opening>.SimpleDetailsButton,.SimpleDetails.open>.SimpleDetailsButton{transform:rotate(180deg)}.SimpleDetails.is-closing>.SimpleDetailsButton{transform:rotate(0)}.SimpleDetailsBody{font-size:var(--sd_fontSizeBase);letter-spacing:var(--sd_letterSpacingBase);line-height:var(--sd_lineHeightBase);padding:var(--sd_gapLg);row-gap:var(--sd_gapSm);background-color:var(--sd_colorBg);color:var(--sd_colorTextSecondary);border-radius:0 0 var(--sd_radiusBase) var(--sd_radiusBase);max-height:480px;overflow-y:auto}@media screen and (hover: hover){.SimpleDetailsBody::-webkit-scrollbar{width:var(--sd_scrollbarWidth)}.SimpleDetailsBody::-webkit-scrollbar-track{background:var(--sd_scrollbarTrack);border-radius:var(--sd_radiusBase)}.SimpleDetailsBody::-webkit-scrollbar-thumb{background:var(--sd_scrollbarThumb);border:1px solid var(--sd_scrollbarThumbBorder);border-radius:20px}}.SimpleDetailsBody a{color:var(--sd_colorLink);text-decoration:none}@media screen and (hover: hover){.SimpleDetailsBody a:hover{color:var(--sd_colorLinkHover);text-decoration:underline}}