-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
114 lines (101 loc) · 8.1 KB
/
style.css
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
:root {--main-bg:#383C43; --menu-bg:#282B2F; --menu-border:#000; --title:#A0ADBB; --text:#F0F0F0; --accent:#175CA2;}
body {font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text);background-color:var(--main-bg);font-size:14px;line-height:18px;text-align:left;margin:0;padding:0;}
div,span,input,select,button,textarea {border:none;margin:0;padding:0;font-size:14px;}
button,select {cursor:pointer;}
a {color:var(--accent);text-decoration:none;}
h1 {display:inline;font-size:28px;line-height:28px;margin:0;vertical-align:top;}
h2 {display:block;color:var(--text);font-size:16px;line-height:20px;font-weight:bold;margin:0;padding:6px 8px;text-align:center;}
/* HEAD */
.head {color:var(--title);background-color:var(--menu-bg);border-bottom:1px solid var(--menu-border);}
.menuBtn {background:none;padding:4px 10px 3px 10px;}
.menuBtn:hover {transform:scale(1.2);}
.menuBtn svg {height:24px;width:24px;stroke:var(--title);}
.head select {vertical-align:super;margin-left:12px;color:var(--text);background-color:#0003;padding:4px 8px;border-left:2px solid #33f;border-right:2px solid #b33;border-radius:24px;}
.head select:hover {border-color:var(--accent);}
.orientationBtn {float:right;padding:0 8px;background:none;}
.orientationBtn svg {display:block;stroke:var(--title);height:34px;width:34px;}
.orientationBtn:hover svg {stroke:var(--accent);}
/* MENU */
.menu {position:fixed;width:220px;padding-top:7px;overflow-y:auto;top:34px;bottom:0;left:0;word-break:break-all;text-align:center;z-index:1;background-color:var(--menu-bg);border-right:1px solid var(--menu-border);scrollbar-color:#0000 #0000 !important;transition:left ease .5s,scrollbar-color linear .5s;}
.menu button {width:78%;color:#999;line-height:19px;padding:4px;background-color:#222426;margin:4px 0;border-radius:12px;border-left:2px solid black;border-right:2px solid black;}
.menu button:hover {background-color:#1E2022;border-color:var(--accent);}
.menu a {display:block;color:#A0A0A0;padding:3px 4px 5px 4px;margin:8px;border-radius:14px;border-top:1px solid #515151;border-bottom:1px solid #000;}
.menu a:hover {background:#203040;}
.menu a.activeBoard {color:var(--accent);background:none;border-left:2px solid var(--accent);border-right:2px solid var(--accent);}
/* MAIN CARDS */
.main {display:flex;flex-flow:row nowrap;justify-content:start;align-items:start;position:absolute;top:35px;left:220px;right:0;bottom:0;padding:10px;background-size:cover;background-position:center;box-sizing:border-box;overflow-y:hidden;overflow-x:auto;scrollbar-width:thin;transition:left ease .5s;}
.main.vertical {flex-wrap:wrap;row-gap:10px;overflow-y:auto;overflow-x:hidden;}
.dragster {position:absolute;pointer-events:none;cursor:grabbing;contain:content;}
.spacer {height:35px;}
/* lists */
.list {display:flex;flex-flow:column nowrap;flex:0 0 284px;width:284px;max-height:100%;margin-right:10px;padding:5px 0;background-color:#101204;border-radius:9px;box-sizing:border-box;contain:content;}
.listTitle {display:flex;flex-flow:row nowrap;justify-content:start;align-items:start;margin:0 8px 3px 8px;}
.listTitle .listName {flex:1 1 50%;padding:0 0 2px 2px;margin-right:5px;border-radius:6px;white-space:pre-wrap;}
.listTitle .listName:focus {outline:2px solid var(--accent);outline-offset:2px;}
.moveListBtn, .deleteListBtn {color:#bbb;background:none;font-size:18px;line-height:18px;}
.moveListBtn:hover {color:var(--accent);}
.deleteListBtn {display:none;color:#911;margin-left:4px;}
.listTitle .listName:focus ~ .moveListBtn {display:none;}
.listTitle .listName:focus ~ .deleteListBtn, .listTitle .deleteListBtn:hover {display:block;}
#newListName {margin:8px 0;padding:3px 5px;background:none;border:2px solid var(--accent);color:#ccc;border-radius:6px;}
#newListBtn {padding:3px 7px;background:none;border:2px solid var(--accent);border-radius:9px;color:#ccc;font-size:12px;}
#newListBtn:hover {background:#0002;}
/* cards */
.cardContainer {padding:0 8px;overflow-y:auto;scrollbar-width:thin;}
.card {background-color:#22272B;border-radius:7px;margin:6px 0;padding:0 8px 6px 8px;box-sizing:border-box;white-space:pre-wrap;cursor:pointer;}
.card:first-child {margin-top:0;}
.card:last-child {margin-bottom:0;}
.xxx {box-shadow:0px 1px 1px #091e4240, 0px 0px 1px #091e424f;box-shadow:0 0 0 1px #000, 0 1px 1px #03040480, 0 0 1px #03040480;}
.card:hover {background-color:#2a2e32;}
.addCardBtn {border-radius:7px;margin:4px 8px 0 8px;padding:1px 6px;cursor:pointer;}
.addCardBtn:hover {background-color:#282C30;}
.hasDescription {border-left:4px solid var(--accent);}
/* POPUPS */
/* EDIT BOARD */
#popupBG {display:none;flex-flow:row nowrap;justify-content:center;align-items:center;position:fixed;inset:0;z-index:2;background-color:#80808060;content-visibility:auto;contain:strict;}
#newBoardBox, #editBoardBox, #importExportBox {display:none;overflow:hidden;border-radius:13px;background:linear-gradient(150deg,var(--main-bg),var(--accent),var(--main-bg),var(--accent));}
.popupBody {text-align:center;padding:6px 8px 0 8px;}
.popupBody input[type="text"] {background:#80808024;padding:4px 10px;color:#FFF;border-top:1px solid #000;border-bottom:1px solid #fff5;border-radius:16px;}
.popupBody input[type="text"]:focus {outline:none;background:none;}
/* bottom buttons */
.bottomBtnsBar {display:flex;flex-flow:row nowrap;gap:2px;margin-top:12px;padding-top:1px;background-color:#000;}
.bottomBtnsBar button {flex-grow:1;border:none;color:#000;padding:8px;text-align:center;}
.bottomBtnsBar button:first-child {background-color:#8060ff;}
.bottomBtnsBar button:last-child {background-color:#0BB;}
.bottomBtnsBar button:hover {box-shadow: 3px 3px 8px -1px #000 inset;}
.bottomBtnsBar button:first-child:hover {box-shadow:-3px 3px 8px -1px #000 inset;}
#delBoardBtn {background-color:#911;}
#delChk {accent-color:#911;}
/* VIEW CARD DETAILS */
.viewCardBox {display:none;width:768px;max-width:90vw;padding:6px 12px;background-color:#282E33;border-radius:9px;}
.cardTitle {display:block;font-size:16px;line-height:22px;margin-bottom:10px;padding:6px;border-radius:7px;background:none;}
.cardTitle:focus {background-color:#1a1e22;outline:1px solid var(--accent);}
.cardDescription {display:none;font-family:monospace;line-height:16px;min-height:130px;width:100%;padding:4px;color:var(--text);background:#343a3f;border:1px solid #21272c;overflow-wrap:break-word;box-sizing:border-box;white-space:pre-wrap;}
.saveDescriptionBtns {display:none;}
#cardDescTA:focus {outline:2px solid var(--accent);}
#cardDescTA:focus + .saveDescriptionBtns, .saveDescriptionBtns:hover {display:inline-block;}
.saveDescriptionBtns {margin-top:6px;}
#sav {color:var(--accent);font-size:16px;line-height:18px;padding:5px 10px;margin-right:8px;border:2px solid var(--accent);border-radius:7px;background:none;}
#sav:hover {color:#000;background:var(--accent);}
#can {color:var(--title);font-size:16px;line-height:18px;padding:7px 10px;border-radius:7px;background:none;}
#can:hover {background:#383c40;}
#archiveBtn {float:right;padding:3px 8px;margin:10px 0 2px 8px;background:none;border:2px solid #911;color:#911;border-radius:7px;}
#archiveBtn:hover {background:#911;color:#000;border-color:#000;}
/* TAGS */
.tags {padding:2px 4px;line-height:0;pointer-events:none;}
.tags div {display:inline-block;width:60px;height:8px;transform:skewX(135deg) scaleY(cos(135deg));}
#tagsBox div, #tagsBox button {display:inline-block;height:18px;width:48px;vertical-align:top;transform:skewX(135deg) scaleY(cos(135deg));cursor:pointer;}
#addTagBox {display:flex;flex-flow:row nowrap;height:0;}
#addTagBox div {flex:1 1 7.69%;transform:skewX(135deg) scaleY(cos(135deg));cursor:pointer;}
#addTagBox div:hover {transform:skewX(135deg) scaleY(cos(135deg)) scale(1.25);z-index:1;}
/* MISC */
#loader {display:none;width:40px;height:40px;border-radius:50%;border-top:3px solid #FFF;border-right:3px solid transparent;animation:rotation 1s linear infinite;}
@keyframes rotation {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
body.menu-closed .menu {left:-222px;}
body.menu-closed .main {left:0;}
@media (max-width:1000px) {
.menu {left:-222px;}
.main, body.menu-closed .menu {left:0;}
}
::selection {color:var(--accent);background-color:#000;}
:root {scrollbar-width:thin !important;scrollbar-color:#338 #0000 !important;}