@import url('./lib/pico.min.css');

/* CSS变量定义 */
:root {
  /* 默认浅色主题 - 使用具体颜色值而不是Pico.css变量 */
  --background-color: #ebeef2;
  --text-color: #3a3b3c;
  --note-background: #fdfeff;
  --note-border: #dcdde1;
  --note-text: #3a3b3c;
  --shadow-color-1: rgba(121, 126, 133, 0.15);
  --shadow-color-2: rgba(80, 83, 87, 0.25);
  --shadow-color-3: rgba(61, 64, 67, 0.2);
  --scrollbar-track: #f2f4f8;
  --scrollbar-thumb: #d5d9df;
  --button-background: #3a86ff;
  --button-hover: #3a86ffd4;
  --button-active: #3275df;
  --github-link: #00000073;
  --github-link-hover: #000000d9;
  --tips-color: #bbb;
  --modal-background: white;
  --input-border: #999;
  --input-border-hover: #3a86ffd4;
  --loading-border: #9ba0a5;
  /* 主题过渡动画 */
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 黑夜主题 */
[data-theme="dark"] {
  --background-color: #1a1a1a;
  --text-color: #e0e0e0;
  --note-background: #2d2d2d;
  --note-border: #444;
  --note-text: #e0e0e0;
  --shadow-color-1: rgba(0, 0, 0, 0.3);
  --shadow-color-2: rgba(0, 0, 0, 0.4);
  --shadow-color-3: rgba(0, 0, 0, 0.3);
  --scrollbar-track: #2d2d2d;
  --scrollbar-thumb: #555;
  --button-background: #4a86ff;
  --button-hover: #5a96ff;
  --button-active: #3a75df;
  --github-link: #cccccc73;
  --github-link-hover: #ccccccd9;
  --tips-color: #666;
  --modal-background: #333;
  --input-border: #666;
  --input-border-hover: #4a86ff;
  --loading-border: #555;
}

body {
    padding: 0;
    margin: 0;
    background: var(--background-color);
    font: normal 14px Arial, Helvetica, sans-serif;
    color: var(--text-color);
    transition: var(--theme-transition);
}

/* scrollbar style from http://maxvoltar.com/, http://almaer.com/scrollbar/debug.html */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track-piece {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 12px;
    background-color: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:vertical {
    height: 25px;
    background-color: var(--scrollbar-thumb);
}

::-webkit-scrollbar-button:start:decrement {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

::-webkit-scrollbar-button:end:increment {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

textarea:focus {
    border: none;
    outline: 0;
}

*::-moz-focus-inner {
    border: 0;
}

#loading {
    position: absolute;
    top: 12px;
    left: 30px;
    width: 14px;
    height: 7px;
    background: url('../img/loading.gif') -1px -4px no-repeat transparent;
    border: 1px solid var(--loading-border);
/*    opacity: 0.4;
    -moz-opacity: 0.4;
    filter: alpha(opacity=40);*/

    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;

    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.note-container {
    padding: 15px 15px 0 15px;
}

.stack {
    border-radius: 8px;
    box-shadow: 
        0 1px 2px var(--shadow-color-2),
        0 2px 4px var(--shadow-color-3),
        0 0 9px var(--shadow-color-1);
    background-color: var(--note-background);
    transition: var(--theme-transition), box-shadow 0.3s ease;
}

.stack:hover {
    box-shadow: 
        0 1px 2px var(--shadow-color-2),
        0 4px 8px var(--shadow-color-3),
        0 0 12px var(--shadow-color-1);
}

.layer {
    border: 1px solid var(--note-border);
    border-radius: 5px;
    padding: 15px;
    background-color: var(--note-background);
    display: flex;
    font: normal 15px Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--note-text);
    transition: var(--theme-transition);
}

#preview-plain, #preview-md {
    height: calc(100vh - 120px);
    width: 100%;
    margin: 0;
    padding: 12px;
    border: none;
    background: var(--note-background);
    overflow-y: auto;
    overflow-wrap: break-word;
    font: normal 15px Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--note-text);
    transition: var(--theme-transition);
    border-radius: 0;
    box-sizing: border-box;
    cursor: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    outline: none;
    caret-color: transparent;
}

#preview-plain:focus, #preview-md:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--note-border);
    caret-color: transparent;
}

.layer .contents:focus {
    outline: none;
    box-shadow: none;
}

.layer .contents {
    height: calc(100vh - 120px);
    width: 100%;
    margin: 0;
    padding: 12px;
    border: none;
    background: var(--note-background);
    resize: none;
    overflow-y: auto;
    overflow-wrap: break-word;
    font: normal 15px Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--note-text);
    transition: var(--theme-transition);
    border-radius: 0;
    box-sizing: border-box;
}

.layer .contents.hide {
    display: none;
}

.footer {
    position: absolute;
    bottom: 15px;
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.opt {
    display: flex;
    align-items: center;
    user-select: none;
}

.metadata {
    display: flex;
    align-items: center;
    gap: 15px;
}

.github-link {
    height: 14px;
    color: var(--github-link);
    transition: var(--theme-transition);
}

.last-modified {
    transition: var(--theme-transition);
    font-size: 12px;
    color: var(--text-color);
}

.github-link:hover {
    color: var(--github-link-hover);
}

.divide-line {
    margin: 0 10px;
    width: 1px;
    background: var(--note-border);
    transition: var(--theme-transition);
}

#loading {
    position: relative;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: url('../img/loading.gif') center center no-repeat transparent;
    background-size: contain;
    border: 1px solid var(--loading-border);
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.opt-button {
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--button-background);
    color: white;
    border: none;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    font-size: 12px;
}

.opt-button:hover {
    background: var(--button-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.opt-button:active {
    background: var(--button-active);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

.opt-button:first-child {
    margin-left: 0;
}

.opt-desc {
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-color);
    font-size: 12px;
}

/* Markdown激活状态下的图标高亮 */
.markdown-icon.markdown-active {
    color: var(--button-background);
}

.opt-switcher {
    margin: 5px;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.opt-switcher .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
    width: 40px;
}

.opt-switcher .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%22-10%20-5%201034%201034%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M922%20319q-1%200-2%201H73q-18%200-33.5%208.5T14%20351q-17%2026-13%2057v461q1%2018%2011%2032.5T36%20924q25%2014%2055%2010v1l843-1q18-1%2032.5-11t22.5-24q14-24%2010-55h1l-1-459q-1-17-11-31.5T964%20330q-19-10-42-11m-4%2048h2q12%200%2020%205%206%203%208.5%206.5t2.5%209.5l1%20456v3q2%2016-5%2029-3%205-6.5%207.5T931%20886l-840%201h-3q-16%202-28-5-6-3-8.5-6.5T49%20866V408l-1-4q-2-14%205.5-25T72%20368h837zm-773%2097v327h96V603l96%20120%2096-120v188h96V464h-96l-96%20120-96-120zm552%200v168h-96l144%20159%20144-159h-96V464z%22%2F%3E%3C%2Fsvg%3E");
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.opt-switcher .slider:after {
    position: absolute;
    content: "M";
    height: 12px;
    width: 12px;
    left: 6px;
    bottom: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: .4s;
}

.opt-switcher input:checked + .slider {
    background-color: var(--button-background);
}

.opt-switcher input:focus + .slider {
    box-shadow: 0 0 1px var(--button-background);
}

.opt-switcher input:checked + .slider:before {
    transform: translateX(16px);
}

.opt-switcher input:checked + .slider:after {
    transform: translateX(16px);
}
/* 主题切换按钮样式 */
.opt-button.theme-toggle {
    margin-left: 8px;
    border-radius: 50%;
    padding: 0;
    width: 26px;
    height: 26px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--button-background);
    background: var(--note-background);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 主题图标容器 */
.theme-toggle-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 太阳和月亮图标 */
.theme-toggle-sun,
.theme-toggle-moon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 14px;
    height: 14px;
}

/* 默认状态下显示太阳 */
.theme-toggle-sun {
    transform: rotate(0deg);
    opacity: 1;
    color: #f59e0b;
}

.theme-toggle-moon {
    transform: rotate(90deg);
    opacity: 0;
    color: #f59e0b;
}

/* 暗色主题下显示月亮 */
[data-theme="dark"] .theme-toggle-sun {
    transform: rotate(-90deg);
    opacity: 0;
}

[data-theme="dark"] .theme-toggle-moon {
    transform: rotate(0deg);
    opacity: 1;
    color: #fbbf24;
}

/* 主题切换按钮悬停效果 */
.opt-button.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: var(--button-background);
}

[data-theme="dark"] .opt-button.theme-toggle:hover {
    background: var(--button-background);
}

.opt-button.theme-toggle:hover .theme-toggle-sun,
.opt-button.theme-toggle:hover .theme-toggle-moon {
    color: white;
}

/* 主题切换按钮激活动画 */
.opt-button.theme-toggle.theme-toggle-active {
    animation: themeTogglePulse 0.3s ease;
}

@keyframes themeTogglePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(58, 134, 255, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(58, 134, 255, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(58, 134, 255, 0);
    }
}

/* 主题过渡期间的body样式 */
body.theme-transition * {
    transition: var(--theme-transition) !important;
}

/* 禁用主题过渡效果 */
body.no-theme-transition * {
    transition: none !important;
}