From 93a4b99132a3881683f6af5b90d7f7955f2b264a Mon Sep 17 00:00:00 2001 From: Nurila Date: Fri, 31 Jul 2026 10:16:08 +0000 Subject: [PATCH] light minimal style --- package-lock.json | 10 +++++ style.css | 93 +++++++++++++++++++++++------------------------ 2 files changed, 56 insertions(+), 47 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0a7e694 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,10 @@ +{ + "name": "planner", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "planner" + } + } +} diff --git a/style.css b/style.css index 1f1ae51..1f53347 100644 --- a/style.css +++ b/style.css @@ -1,72 +1,71 @@ -:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7} +:root{--bg:#f7f8fa;--surface:#fff;--border:#e8eaed;--text:#1c1f24;--muted:#8a8f98;--accent:#3b6fd4;--accent-soft:#eef3fc} *{box-sizing:border-box;margin:0;padding:0} -body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--gray-100);min-height:100vh} -.container{max-width:1060px;margin:0 auto;padding:40px 24px} +body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);min-height:100vh} +.container{max-width:1000px;margin:0 auto;padding:48px 24px} .hidden{display:none!important} -.top{background:var(--ink);color:#fff} -.top h1{font-size:40px;font-weight:800;line-height:1.1} -.top .sub{color:#9aa3b2;margin-top:8px} +.top{padding-bottom:8px} +.top h1{font-size:30px;font-weight:700;letter-spacing:-.02em} +.top .sub{color:var(--muted);font-size:15px;margin-top:4px} -.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start} +.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start} /* ===== Календарь ===== */ -.cal{background:var(--white);border-radius:16px;box-shadow:0 12px 32px rgba(15,18,24,.08);padding:24px} +.cal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} -.month-name{font-size:24px;font-weight:800;text-transform:capitalize} -.arrow{border:none;background:var(--ink);color:#fff;width:42px;height:42px;border-radius:10px;font-size:20px;cursor:pointer;transition:transform .15s ease,opacity .15s ease} -.arrow:hover{transform:scale(1.06);opacity:.85} -.arrow:active{transform:scale(.95)} +.month-name{font-size:20px;font-weight:600;text-transform:capitalize} +.arrow{border:1px solid var(--border);background:var(--surface);color:var(--text);width:36px;height:36px;border-radius:8px;font-size:16px;cursor:pointer;transition:background .15s ease,border-color .15s ease} +.arrow:hover{background:var(--accent-soft);border-color:var(--accent)} .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px} -.weekdays span{text-align:center;font-size:13px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em} +.weekdays span{text-align:center;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} -.day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border-radius:10px;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:background .15s ease,transform .15s ease} -.day:hover{background:var(--cyan-50);transform:scale(1.05)} +.day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);transition:background .15s ease} +.day:hover{background:var(--accent-soft)} .day.empty{pointer-events:none} -.day.today{background:var(--ink);color:#fff;box-shadow:0 4px 12px rgba(15,18,24,.25)} -.day.today:hover{background:var(--ink)} -.day.selected{background:var(--cyan);color:var(--ink);box-shadow:0 4px 12px rgba(0,229,255,.4)} -.day.selected:hover{background:var(--cyan)} -.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)} -.day.today .dot,.day.selected .dot{background:#fff} +.day.today{background:var(--accent);color:#fff;font-weight:600} +.day.today:hover{background:var(--accent)} +.day.selected{background:var(--accent-soft);color:var(--accent);font-weight:600} +.day.selected:hover{background:var(--accent-soft)} +.dot{width:5px;height:5px;border-radius:50%;background:var(--accent)} +.day.today .dot,.day.selected .dot{background:var(--accent)} -.cal-foot{text-align:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--gray-100)} -.today-btn{border:none;background:var(--cyan-50);color:var(--ink);padding:10px 24px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s ease} -.today-btn:hover{background:var(--cyan)} +.cal-foot{text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)} +.today-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:9px 22px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s ease} +.today-btn:hover{background:var(--accent-soft);border-color:var(--accent)} /* ===== Панель дел ===== */ -.panel{background:var(--white);border-radius:16px;box-shadow:0 12px 32px rgba(15,18,24,.08);padding:24px;min-height:320px} -.panel-empty{text-align:center;color:var(--gray-500);padding:70px 10px} -.pe-emoji{font-size:44px;margin-bottom:12px} +.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;min-height:300px} +.panel-empty{text-align:center;color:var(--muted);padding:64px 10px} +.pe-emoji{font-size:36px;margin-bottom:10px} .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} -.panel-date{font-size:22px;font-weight:800} -.close-btn{border:none;background:var(--gray-100);width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer;color:var(--gray-500)} -.close-btn:hover{background:var(--cyan-50);color:var(--ink)} +.panel-date{font-size:19px;font-weight:600} +.close-btn{border:none;background:var(--bg);width:30px;height:30px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer;color:var(--muted)} +.close-btn:hover{background:var(--accent-soft);color:var(--accent)} -.count{font-size:14px;color:var(--gray-500);margin-bottom:14px} -.notes{list-style:none;margin-bottom:18px;max-height:340px;overflow-y:auto} -.notes:empty::after{content:"Пока пусто — добавь первое дело ниже";color:#b4bcc7;font-size:15px;display:block;padding:8px 0} +.count{font-size:13px;color:var(--muted);margin-bottom:12px} +.notes{list-style:none;margin-bottom:16px;max-height:320px;overflow-y:auto} +.notes:empty::after{content:"Пока пусто — добавь первое дело ниже";color:#c2c7cf;font-size:14px;display:block;padding:8px 0} -.note{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100)} +.note{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)} .note:last-child{border-bottom:none} -.chk{width:24px;height:24px;border:2px solid #c4ccd6;border-radius:8px;background:var(--white);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:background .15s ease,border-color .15s ease} -.chk.on{background:var(--cyan);border-color:var(--cyan)} -.note-text{flex:1;font-size:16px} -.note.done .note-text{text-decoration:line-through;color:#aab3bf} -.del{border:none;background:none;color:#c4ccd6;font-size:20px;cursor:pointer;padding:4px;line-height:1} +.chk{width:22px;height:22px;border:1.5px solid #c9ced6;border-radius:6px;background:var(--surface);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:background .15s ease,border-color .15s ease} +.chk.on{background:var(--accent);border-color:var(--accent)} +.note-text{flex:1;font-size:15px} +.note.done .note-text{text-decoration:line-through;color:#a9aeb6} +.del{border:none;background:none;color:#c9ced6;font-size:18px;cursor:pointer;padding:4px;line-height:1} .del:hover{color:#e5484d} -.add-form{display:flex;gap:10px} -.add-form input{flex:1;border:2px solid var(--gray-100);border-radius:10px;padding:12px 14px;font-size:16px;font-family:inherit;outline:none;transition:border-color .15s ease} -.add-form input:focus{border-color:var(--cyan)} -.add-form button{border:none;background:var(--ink);color:#fff;width:50px;border-radius:10px;font-size:26px;cursor:pointer;flex-shrink:0} -.add-form button:hover{background:#232a35} +.add-form{display:flex;gap:8px} +.add-form input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:11px 14px;font-size:15px;font-family:inherit;outline:none;transition:border-color .15s ease} +.add-form input:focus{border-color:var(--accent)} +.add-form button{border:none;background:var(--accent);color:#fff;width:46px;border-radius:8px;font-size:22px;cursor:pointer;flex-shrink:0} +.add-form button:hover{opacity:.88} @media (max-width:860px){ .layout{grid-template-columns:1fr} - .container{padding:28px 16px} - .top h1{font-size:30px} - .day{height:48px} + .container{padding:32px 16px} + .top h1{font-size:26px} + .day{height:46px} }