mirror_html/nullboard
1
0
Fork 0
mirror of https://github.com/apankrat/nullboard.git synced 2025-08-05 12:47:48 +02:00
Code Issues Projects Releases Wiki Activity

redo dark theme, disable native drag-n-drop, cosmetic fixes

Browse Source
This commit is contained in:
Alex Pankratov
2021-04-06 23:54:46 +02:00
parent 4fb171529a
commit 8441ea0a69
1 changed files with 71 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
nullboard.html
View File

@@ -209,6 +209,7 @@
background: #f8f9fb; background: #f8f9fb;
} }
/***/
@keyframes shake { @keyframes shake {
33% { margin-left: -5px; } 33% { margin-left: -5px; }
66% { margin-left: 5px; } 66% { margin-left: 5px; }
@@ -228,6 +229,7 @@
display: none; display: none;
} }
/***/
.ding { .ding {
animation-name: shake; animation-name: shake;
animation-duration: 200ms; animation-duration: 200ms;
@@ -288,7 +290,7 @@
/***/ /***/
.board .head { .board .head {
padding: 5px 0; padding: 5px 0;
margin: 0 5px; margin: 1px 5px 0;
position: relative; position: relative;
} }
@@ -737,7 +739,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 21px; right: 21px;
line-height: calc(19rem / 11); line-height: calc(19 / 11);
z-index: 3; z-index: 3;
background: #f8f9fb; background: #f8f9fb;
} }
@@ -778,6 +780,9 @@
.config .bulk .boards a.load-board { .config .bulk .boards a.load-board {
display: block; display: block;
padding-left: 5px;
margin-left: -5px;
transition: none;
} }
.config .bulk .boards a.load-board.active { .config .bulk .boards a.load-board.active {
@@ -799,9 +804,14 @@
background: #DDE1E5; background: #DDE1E5;
border-radius: 2px; border-radius: 2px;
color: transparent; color: transparent;
transition: none;
box-shadow: 0 0 1px #0002 inset; box-shadow: 0 0 1px #0002 inset;
} }
.config .bulk .boards a.load-board.dragging.active:before {
content: '';
}
.load-dragster { .load-dragster {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
@@ -812,12 +822,8 @@
color: #000; color: #000;
border-radius: 2px; border-radius: 2px;
cursor: move; cursor: move;
outline: 1px solid #ACB4BC;
box-shadow: 0 +1px 0 #ACB4BC inset, box-shadow: 0px 1px 3px #00000030;
0 -1px 0 #ACB4BC inset,
+1px 0 0 #ACB4BC inset,
-1px 0 0 #ACB4BC inset,
0px 1px 3px #00000030;
} }
.config .bulk a i, .config .bulk a i,
@@ -1072,18 +1078,18 @@
/* /*
* Dark mode * Dark mode
*/ */
html.theme-dark body { .theme-dark body {
background-color: #15171A; background: #09090A;
color: #d6d6d6; color: #d6d6d6;
} }
.theme-dark .board .head { .theme-dark .board .head {
background: #202224; background: #17171a;
} }
/***/ /***/
.theme-dark .board .menu { .theme-dark .board .menu {
background: linear-gradient(to right, #20222400, #202224 10px); background: linear-gradient(to right, #17171a00, #17171a 10px);
} }
.theme-dark .board .menu a { .theme-dark .board .menu a {
@@ -1108,20 +1114,24 @@
color: #bf9d21; color: #bf9d21;
} }
.theme-dark .board > .head {
box-shadow: 0 0 2px #fff1 inset;
}
/***/ /***/
.theme-dark .board .list { .theme-dark .board .list {
background: #202224; background: #17171a;
box-shadow: 0 0 2px #fff1 inset;
} }
.theme-dark .board .note { .theme-dark .board .note {
background: #2B2C2F; background: linear-gradient(#242426, #202022);
background: linear-gradient(#2B2C2F, #27282B); box-shadow: 0 1px 3px #000a;
box-shadow: 0 1px 3px #0005;
text-shadow: 0 0 4px #0008; text-shadow: 0 0 4px #0008;
} }
.theme-dark.reveal .board .head .text a, .theme-dark .reveal .board .head .text a,
.theme-dark.reveal .board .note .text a { .theme-dark .reveal .board .note .text a {
color: #fc0; color: #fc0;
} }
@@ -1152,7 +1162,7 @@
} }
.theme-dark .board .note .ops .bulk { .theme-dark .board .note .ops .bulk {
background: #202224; background: #202022;
border-left: 1px solid #111; border-left: 1px solid #111;
border-bottom: 1px solid #111; border-bottom: 1px solid #111;
} }
@@ -1172,16 +1182,14 @@
/***/ /***/
.theme-dark .board .note.dragging, .theme-dark .board .note.dragging,
.theme-dark .board .note.dragging.raw { .theme-dark .board .note.dragging.raw {
background: #15171A; background: #09090A;
box-shadow: 0 +1px 0 #000 inset, outline: 1px solid #fff2;
0 -1px 0 #000 inset,
+1px 0 0 #000 inset,
-1px 0 0 #000 inset;
} }
.theme-dark .note-dragster { .theme-dark .note-dragster {
box-shadow: 0px 1px 4px #000000; box-shadow: 0px 1px 4px #000;
background: #2e3032; background: linear-gradient(#242426, #202022);
outline: 1px solid #fc28;
} }
.theme-dark .note-dragster a { .theme-dark .note-dragster a {
@@ -1204,10 +1212,28 @@
outline: 1px solid #bc9908; outline: 1px solid #bc9908;
} }
/***/
.theme-dark .logo a {
color: #ccc;
}
.theme-dark .logo,
.theme-dark.crowded .logo:hover {
background: #09090A;
}
.theme-dark .logo a:hover {
color: #fc2;
}
.theme-dark .logo > a:hover {
color: #fff;
}
/***/ /***/
.theme-dark .config, .theme-dark .config,
.theme-dark.crowded .config:hover { .theme-dark.crowded .config:hover {
background: #15171A !important; background: #09090A !important;
} }
.theme-dark .config a { .theme-dark .config a {
@@ -1235,7 +1261,9 @@
border-top: 1px solid #fff2; border-top: 1px solid #fff2;
} }
.theme-dark .config .bulk .ui-prefs .f-prefs tr.custom td.val { .theme-dark.fs-set .config .bulk .ui-prefs .f-prefs tr.ui-fs td.val,
.theme-dark.lh-set .config .bulk .ui-prefs .f-prefs tr.ui-lh td.val,
.theme-dark.lw-set .config .bulk .ui-prefs .f-prefs tr.ui-lw td.val {
color: #fc2; color: #fc2;
} }
@@ -1248,37 +1276,19 @@
} }
/***/ /***/
.theme-dark .config .bulk .boards .load-board.dragging { .theme-dark .config .bulk .boards .load-board.dragging,
background: #fff1; .theme-dark .config .bulk .boards .load-board.active.dragging {
color: transparent background: #fff2;
color: transparent;
} }
.theme-dark .load-dragster { .theme-dark .load-dragster {
background: rgb(230, 177, 2); background: #09090A;
box-shadow: 0px 2px 4px #000; box-shadow: 0px 2px 4px #000;
outline: 1px solid #fc2; outline: 1px solid #fc2a;
color: #111; color: #ddd;
} }
/***/
.theme-dark .logo a {
color: #ccc;
}
.theme-dark .logo,
.theme-dark.crowded .logo:hover {
background: #15171A;
}
.theme-dark .logo a:hover {
color: #fc2;
}
.theme-dark .logo > a:hover {
color: #fff;
}
</style> </style>
</head> </head>
@@ -1298,7 +1308,7 @@
<div class=bulk> <div class=bulk>
<a href=# class=add-board>Add new board...</a> <a href=# class=add-board>Add new board...</a>
<div class=boards> <div class=boards draggable=false>
<!-- here'll be boards --> <!-- here'll be boards -->
</div> </div>
@@ -1390,7 +1400,7 @@
<textarea class=edit spellcheck=false></textarea> <textarea class=edit spellcheck=false></textarea>
</div> </div>
<a href=# class=load-board draggable=false></a> <a href=# class=load-board></a>
<textarea class=encoder></textarea> <textarea class=encoder></textarea>
@@ -3343,6 +3353,7 @@ console.log('getListWidth -> ', lw)
{ {
$('html').css('--fs', fs + '').addClass('fs-set'); $('html').css('--fs', fs + '').addClass('fs-set');
updateFontSize(); updateFontSize();
adjustLayout();
if (getLineHeight() < fs) if (getLineHeight() < fs)
setLineHeight(fs); setLineHeight(fs);
@@ -3357,6 +3368,7 @@ console.log('getListWidth -> ', lw)
{ {
$('html').css('--lh', lh + '').addClass('lh-set'); $('html').css('--lh', lh + '').addClass('lh-set');
updateLineHeight(); updateLineHeight();
adjustLayout();
} }
return getLineHeight(); return getLineHeight();
} }
@@ -3376,12 +3388,14 @@ console.log('getListWidth -> ', lw)
function resetFontSize() function resetFontSize()
{ {
$('html').css('--fs', '').removeClass('fs-set'); $('html').css('--fs', '').removeClass('fs-set');
adjustLayout();
return updateFontSize(); return updateFontSize();
} }
function resetLineHeight() function resetLineHeight()
{ {
$('html').css('--lh', '').removeClass('lh-set'); $('html').css('--lh', '').removeClass('lh-set');
adjustLayout();
return updateLineHeight(); return updateLineHeight();
} }
@@ -3798,6 +3812,8 @@ console.log('getListWidth -> ', lw)
$(window).resize(adjustLayout); $(window).resize(adjustLayout);
$('body').on('dragstart', function(){ return false; });
/* /*
* the init() * the init()
*/ */