From 647f2c663aaf756bee8474e75dff72422ba240c5 Mon Sep 17 00:00:00 2001 From: pack Date: Wed, 12 Aug 2026 17:19:51 +0000 Subject: final commit II forgot to add 'public/' as well. --- public/style.css | 284 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 public/style.css (limited to 'public/style.css') diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..72d0f9f --- /dev/null +++ b/public/style.css @@ -0,0 +1,284 @@ +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body +{ + font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif; + background: linear-gradient(#cccccc, #ffffff);; + color: #000; + min-height: 100vh; + display: flex; + justify-content: center; + padding: 2rem 1rem; +} + +.container +{ + width: 100%; + max-width: 600px; + background: #c0c0c0; + border-radius: 0; + box-shadow: + inset -1px -1px 0 #000, + inset 1px 1px 0 #fff, + inset -2px -2px 0 #808080, + inset 2px 2px 0 #dfdfdf, + 2px 2px 0 rgba(0, 0, 0, 0.4); + padding: 0; +} + +h1 +{ + text-align: left; + margin: 0; + padding: 0.35rem 0.6rem; + font-size: 0.95rem; + font-weight: bold; + color: #fff; + background: linear-gradient(to bottom, #5a9bd4 0%, #2c689c 48%, #1f5689 52%, #3a7fb8 100%); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + border-bottom: 1px solid #000; +} + +h2 +{ + font-size: 0.95rem; + font-weight: bold; + margin-bottom: 0.6rem; +} + +/* Tabs. */ +.tabs +{ + display: flex; + gap: 2px; + margin-bottom: 0.6rem; + padding: 0.6rem 0.6rem 0; +} + +.tab-btn +{ + flex: 1; + padding: 0.4rem; + border: 1px solid #000; + background: linear-gradient(to bottom, #cfcfcf, #a0a0a0); + color: #000; + border-radius: 0; + cursor: pointer; + font-size: 0.8rem; + font-family: inherit; + box-shadow: + inset -1px -1px 0 #808080, + inset 1px 1px 0 #fff; + transition: none; +} + +.tab-btn.active +{ + background: linear-gradient(to bottom, #7db8e8 0%, #3a7fb8 50%, #2c689c 51%, #5a9bd4 100%); + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); +} + +/* Forms. */ +form +{ + display: flex; + flex-direction: column; + gap: 0.4rem; + margin-bottom: 0.6rem; + padding: 0 0.6rem; +} + +input[type="text"], +input[type="password"] +{ + padding: 0.3rem; + border: 1px solid #000; + border-radius: 0; + font-size: 0.8rem; + font-family: inherit; + outline: none; + background: #fff; + box-shadow: + inset 1px 1px 0 #808080, + inset -1px -1px 0 #fff; + transition: none; +} + +input:focus +{ + border-color: #000; +} + +button[type="submit"] +{ + padding: 0.35rem; + background: linear-gradient(to bottom, #7db8e8 0%, #3a7fb8 50%, #2c689c 51%, #5a9bd4 100%); + color: #fff; + border: 1px solid #000; + border-radius: 0; + font-size: 0.8rem; + font-family: inherit; + cursor: pointer; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + box-shadow: + inset -1px -1px 0 #1f5689, + inset 1px 1px 0 #b0d8f0; + transition: none; +} + +button[type="submit"]:hover +{ + background: linear-gradient(to bottom, #8fc8f0 0%, #4a90d9 50%, #357ab8 51%, #6aabe0 100%); +} + +button[type="submit"]:active +{ + box-shadow: + inset 1px 1px 0 #1f5689, + inset -1px -1px 0 #b0d8f0; +} + +/* Header. */ +.header +{ + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.6rem; + padding: 0 0.6rem; +} + +.logout-btn +{ + padding: 0.3rem 0.8rem; + background: linear-gradient(to bottom, #e88080 0%, #c0392b 50%, #a5281b 51%, #d05040 100%); + color: #fff; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; + font-size: 0.8rem; + font-family: inherit; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + box-shadow: + inset -1px -1px 0 #802018, + inset 1px 1px 0 #f0b0a0; +} + +.logout-btn:hover +{ + background: linear-gradient(to bottom, #f09090 0%, #d04030 50%, #b53020 51%, #e06050 100%); +} + +.logout-btn:active +{ + box-shadow: + inset 1px 1px 0 #802018, + inset -1px -1px 0 #f0b0a0; +} + +#task-list +{ + list-style: none; + margin-top: 0.6rem; + padding: 0 0.6rem; +} + +.task-item +{ + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem; + border: 1px solid #000; + background: #fff; + box-shadow: + inset 1px 1px 0 #808080, + inset -1px -1px 0 #fff; + margin-bottom: 3px; + transition: none; +} + +.task-item:hover +{ + background: #e8eef5; +} + +.task-item input[type="checkbox"] +{ + width: 16px; + height: 16px; + cursor: pointer; +} + +.task-info +{ + flex: 1; +} + +.task-title +{ + font-weight: bold; + font-size: 0.8rem; +} + +.task-title.done +{ + text-decoration: line-through; + color: #808080; +} + +.task-desc +{ + font-size: 0.75rem; + color: #606060; + margin-top: 0.1rem; +} + +.delete-btn +{ + background: #c0c0c0; + border: 1px solid #000; + color: #000; + cursor: pointer; + font-size: 0.9rem; + font-family: inherit; + padding: 0.1rem 0.4rem; + box-shadow: + inset -1px -1px 0 #808080, + inset 1px 1px 0 #fff; +} + +.delete-btn:hover +{ + color: #c0392b; +} + +.delete-btn:active +{ + box-shadow: + inset 1px 1px 0 #808080, + inset -1px -1px 0 #fff; +} + +/* Messages. */ +.error +{ + color: #c0392b; + font-size: 0.8rem; + text-align: center; + padding: 0 0.6rem; +} + +.empty-msg +{ + text-align: center; + color: #606060; + padding: 1.5rem 0; + font-size: 0.8rem; +} -- cgit v1.2.3