-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
116 lines (100 loc) · 5.96 KB
/
style.css
File metadata and controls
116 lines (100 loc) · 5.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
:root {
--bg: #f4f7f6; --text: #333; --card: #fff; --border: #e0e0e0; --header-bg: #fff; --accent: #0078d4;
}
body.dark-mode {
--bg: #1a1a1a; --text: #f0f0f0; --card: #2d2d2d; --border: #444; --header-bg: #252525;
}
body {
width: 360px; height: 580px; font-family: 'Segoe UI', sans-serif; margin: 0;
background: var(--bg); color: var(--text); overflow: hidden;
}
.container { display: flex; flex-direction: column; height: 100%; }
/* Fixed Top Section */
.fixed-top {
padding: 10px 15px 5px 15px; background: var(--header-bg);
border-bottom: 1px solid var(--border); box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex-shrink: 0;
}
header { border-bottom: 2px solid var(--accent); padding-bottom: 6px; margin-bottom: 8px; }
.header-main { display: flex; justify-content: space-between; align-items: center; }
.header-left { display: flex; align-items: center; gap: 8px; }
.title-icon { width: 32px; height: 32px; object-fit: contain; }
.title-container { display: flex; flex-direction: column; }
.title-row { display: flex; align-items: center; gap: 5px; }
.title-row h2 { margin: 0; font-size: 17px; color: var(--accent); }
.count-badge { background: var(--accent); color: white; font-size: 10px; padding: 1px 5px; border-radius: 10px; font-weight: bold; }
.dev-info { font-size: 10px; color: #777; margin-top: 1px; font-weight: normal; text-transform: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.action-icon { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--accent); }
.three-dot { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--accent); }
/* Inputs Area */
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-row { display: flex; gap: 4px; }
input, select, button {
background: var(--card); color: var(--text); border: 1px solid var(--border);
padding: 7px; border-radius: 5px; font-size: 12px; outline: none;
}
#content { flex-grow: 1; border: 1px solid var(--accent); }
#addBtn { background: var(--accent); color: white; border: none; cursor: pointer; font-weight: bold; padding: 0 12px; }
/* Tabs */
.filter-tabs {
display: flex; gap: 4px; overflow-x: auto; padding: 6px 0;
white-space: nowrap; scrollbar-width: none;
}
.tab { padding: 3px 10px; cursor: pointer; background: var(--border); border: none; border-radius: 12px; font-size: 10px; color: var(--text); }
.tab.active { background: var(--accent); color: white; }
/* Item List Styling */
.scrollable-content { flex-grow: 1; overflow-y: auto; padding: 10px 15px; background: var(--bg); }
.item {
background: var(--card); padding: 10px; margin-bottom: 10px;
border-radius: 8px; border-left: 4px solid var(--accent);
position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.item.pinned { border-left-color: #ff9800; background: rgba(255, 152, 0, 0.02); }
.pin-btn { position: absolute; top: 6px; right: 6px; background: none; border: none; cursor: pointer; font-size: 12px; z-index: 5; }
.item-info {
display: flex; justify-content: space-between; font-size: 9px;
color: #999; align-items: center; margin-bottom: 5px; padding-right: 15px;
}
.cat-tag { background: #eef2ff; color: var(--accent); padding: 1px 4px; border-radius: 3px; font-weight: bold; text-transform: uppercase; }
.reminder-icon { font-size: 10px; color: #ff9800; margin-left: 3px; }
.item-display-title { font-size: 13px; font-weight: bold; color: var(--accent); margin-bottom: 2px; display: block; word-break: break-word; }
.item-text {
font-size: 12px; line-height: 1.4; max-height: 50px; overflow: hidden;
display: block; color: var(--text); white-space: pre-wrap;
word-break: break-word; margin-bottom: 5px;
}
.item-text.expanded { max-height: none; }
.item-footer-actions {
display: flex; justify-content: space-between; align-items: center;
margin-top: 5px; min-height: 25px;
}
.see-more-btn { color: var(--accent); border: none; background: none; font-size: 10px; cursor: pointer; font-weight: bold; display: none; padding: 0; }
.copy-btn {
background: #28a745; color: white; border: none; padding: 3px 10px;
border-radius: 4px; cursor: pointer; font-size: 10px; margin-left: auto;
}
.delete-btn { background: #dc3545; color: white; border: none; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 9px; margin-top: 5px; float: right; }
/* Fireworks Particles */
.particle {
position: fixed;
width: var(--size);
height: var(--size);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
box-shadow: 0 0 10px var(--color);
background-color: var(--color);
animation: bigExplode 1.2s cubic-bezier(0, 0.5, 0.5, 1) forwards;
}
@keyframes bigExplode {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
/* Menus & Lock Screen */
.dropdown-content { position: absolute; right: 0; top: 32px; background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; padding: 8px; z-index: 100; width: 150px; border: 1px solid var(--border); }
.dropdown-content button { width: 100%; margin-bottom: 5px; font-size: 11px; cursor: pointer; background: var(--bg); border: 1px solid var(--border); padding: 5px; border-radius: 4px; color: var(--text); text-align: left; }
.del-unlock { font-size: 10px; display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.search-container { margin-top: 5px; }
#searchInput { width: 100%; padding: 5px; border: 1px solid var(--accent); border-radius: 4px; font-size: 12px; box-sizing: border-box; background: var(--card); color: var(--text); }
.hidden { display: none !important; }
#pinArea { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--card); z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; }