diff --git a/extras/style.css b/extras/style.css
new file mode 100644
index 0000000..55aaa52
--- /dev/null
+++ b/extras/style.css
@@ -0,0 +1,706 @@
+/*
+Fonts
+================================ */
+@font-face {
+ font-family: 'Nullboard';
+ font-weight: 400;
+ font-style: normal;
+ src: url('Barlow-Regular.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Nullboard';
+ font-weight: 500;
+ font-style: normal;
+ src: url('Barlow-Medium.woff') format('woff');
+}
+
+/*
+General Styles
+================================ */
+html,
+body,
+h1,
+textarea,
+input {
+ padding: 0;
+ margin: 0;
+}
+
+body,
+input,
+textarea {
+ font-family: 'Nullboard', sans-serif;
+ font-size: 13px;
+}
+
+body {
+ background: #fff;
+ background: #f8f9fb;
+}
+
+body.dragging {
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -webkit-touch-callout: none;
+ -o-user-select: none;
+ -moz-user-select: none;
+}
+
+body.ding {
+ padding-top: 2px;
+}
+
+a {
+ text-decoration: none;
+ transition: color 400ms;
+}
+
+a,
+a:active,
+a:focus,
+textarea,
+input {
+ outline: none;
+}
+
+tt {
+ display: none;
+}
+
+.clearfix:after,
+.board:after,
+.lists:after,
+.notes:after,
+.head:after,
+.menu:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+/***/
+.board {
+ min-width: 250px;
+ width: -moz-max-content;
+ /* firefox */
+ width: -webkit-max-content;
+ /* chrome */
+ width: intrinsic;
+ /* safari */
+ margin: 0 auto;
+ padding: 20px;
+}
+
+body.crowded .board {
+ margin-top: 28px;
+}
+
+.board u {
+ text-decoration: none;
+}
+
+.board u:before {
+ content: '\00D7';
+ position: relative;
+ top: 2px;
+ font-size: 17px;
+ line-height: 10px;
+ font-weight: 400;
+}
+
+/***/
+.board .head {
+ padding: 5px 0;
+ margin: 0 5px;
+ position: relative;
+}
+
+.board .head .text,
+.board .head .edit {
+ font-weight: 500;
+ font-size: 13.5px;
+ line-height: 20px;
+ padding: 0 5px 2px;
+ border: none;
+}
+
+.board .head .text {
+ min-height: 20px;
+ white-space: pre;
+ overflow: hidden;
+}
+
+.board .head .edit {
+ display: none;
+}
+
+.board .head .edit::placeholder {
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 22px;
+ text-transform: uppercase;
+ color: #1489db;
+ opacity: 0.6;
+}
+
+.board .head.editing .text {
+ display: none;
+}
+
+.board .head.editing .edit {
+ display: block;
+ outline: 1px solid #8eaedd;
+}
+
+.board .menu {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 20px;
+ padding: 5px 6px 7px 30px;
+ background: linear-gradient(to right, #EAEDF000, #EAEDF0 10px);
+ font-size: 11px;
+ line-height: 20px;
+}
+
+.board .menu a,
+.board .ops a {
+ color: #000000A0;
+ transition: color 200ms;
+}
+
+.board .menu a {
+ padding-left: 10px;
+}
+
+.board .menu a:hover,
+.board .ops a:hover {
+ color: #000;
+}
+
+.board .menu a.warn:hover,
+.board .ops a.warn:hover {
+ color: #c40;
+}
+
+.board .menu .undo-board,
+.board .menu .redo-board {
+ display: none;
+}
+
+.board .head.editing .menu {
+ display: none;
+}
+
+.board>.head {
+ background: #EAEDF0;
+ padding: 5px;
+ margin: 0 0 10px;
+ border-radius: 2px;
+ position: relative;
+}
+
+.board>.head .menu {
+ margin-right: 5px;
+}
+
+/***/
+.board .lists-scroller {
+ height: auto;
+ margin: -1px 0 10px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ display: none;
+}
+
+.lists-scroller div {
+ height: 1px;
+}
+
+.board .lists {
+ white-space: nowrap;
+ overflow: auto;
+ scrollbar-width: none;
+}
+
+.board .list {
+ display: inline-block;
+ vertical-align: top;
+ width: 250px;
+ margin: 0 5px 10px;
+ background: linear-gradient(#EAEDF0 30px, #DDE1E5 90px);
+ border-radius: 2px;
+}
+
+.board .list::-webkit-scrollbar {
+ display: none;
+}
+
+.board .list:first-child {
+ margin-left: 0;
+}
+
+.board .list:last-child {
+ margin-right: 0;
+}
+
+.board .list .notes {
+ padding: 0 5px;
+}
+
+/***/
+.board .head .menu .teaser {
+ position: absolute;
+ right: 3px;
+ top: 5px;
+ padding: 0 3px;
+}
+
+.board .head .menu .bulk {
+ display: none;
+ opacity: 0;
+ z-index: 1;
+}
+
+.board .head .menu:hover .bulk {
+ display: block;
+ opacity: 1;
+}
+
+.board .head .menu:hover .teaser {
+ display: none;
+}
+
+/***/
+.board .list .menu .mov-list-r.half {
+ padding-left: 0;
+}
+
+.board .list .menu .full {
+ display: none;
+}
+
+.board .list:first-child .menu .half,
+.board .list:last-child .menu .half {
+ display: none;
+}
+
+.board .list:first-child .menu .mov-list-r.full,
+.board .list:last-child .menu .mov-list-l.full {
+ display: inline-block;
+}
+
+.board .list:first-child:last-child .menu .half,
+.board .list:first-child:last-child .menu .full {
+ display: none;
+}
+
+/***/
+.board .list .note {
+ background: #fff;
+ margin-top: 5px;
+ box-shadow: 0 1px 2px #bbb, 0 0 1px #ddd;
+ position: relative;
+}
+
+.board .list .note.dragging,
+.board .list .note.dragging.raw {
+ background: #CED4DA;
+ box-shadow: 0 +1px 0 #00000010 inset,
+ 0 -1px 0 #00000010 inset,
+ +1px 0 0 #00000010 inset,
+ -1px 0 0 #00000010 inset;
+}
+
+.board .list .note.dragging * {
+ opacity: 0 !important;
+}
+
+/***/
+.board .list .note:last-child {
+ margin-bottom: 5px;
+}
+
+.board .list .note .text,
+.board .list .note .edit {
+ padding: 5px 10px;
+ margin-right: 15px;
+ font-size: 11px;
+}
+
+.board .list .note .text {
+ min-height: 13px;
+ white-space: pre-wrap;
+}
+
+.board .list .note .edit {
+ display: none;
+ border: none;
+}
+
+.board .list .note.editing {
+ box-shadow: none;
+ outline: 1px solid #8eaedd;
+}
+
+.board .list .note.editing .text {
+ display: none;
+}
+
+.board .list .note.editing .edit {
+ display: block;
+ resize: none;
+}
+
+/***/
+.board .list .note .ops {
+ position: absolute;
+ top: 0;
+ right: 0;
+ opacity: 0;
+ transition: opacity 400ms;
+ cursor: default;
+}
+
+.board .list .note.editing .ops {
+ display: none;
+}
+
+.board .list .note:hover .ops {
+ opacity: 1;
+}
+
+.board .list .note .ops .teaser {
+ display: block;
+ margin-top: 2px;
+ margin-right: 1px;
+ padding-right: 3px;
+ font-size: 9px;
+}
+
+.board .list .note .ops .teaser:before {
+ content: '\2261';
+}
+
+.board .list .note .ops .bulk {
+ display: none;
+ background: #fff;
+ border-left: none;
+ padding: 0 0 1px 5px;
+ font-size: 9px;
+ font-weight: 500;
+ border-left: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+}
+
+.board .list .note .ops .bulk a {
+ padding-right: 4px;
+}
+
+.board .list .note .ops:hover .bulk {
+ display: block;
+}
+
+.board .list .note .ops:hover .teaser {
+ display: none;
+}
+
+/***/
+.board .list .note.raw {
+ background: transparent;
+ box-shadow: none;
+ font-weight: 500;
+}
+
+.board .list .note.raw.editing {
+ background: #fff;
+}
+
+.board .list .note.raw .text {}
+
+.board .list .note.collapsed {
+ height: 23px;
+}
+
+.board .list .note.collapsed .text {
+ height: 13px;
+ overflow: hidden;
+ line-height: 22px;
+ padding-top: 0;
+}
+
+.board .list .note.collapsed .ops {
+ opacity: 1;
+}
+
+.board .list .note.collapsed .ops .teaser {
+ padding: 1px 3px 0 1px;
+}
+
+.board .list .note.collapsed .ops .teaser:before {
+ content: '_';
+ top: 1px;
+}
+
+.board .list .note.collapsed:hover .ops .teaser:before {
+ content: '\2261';
+}
+
+/***/
+.dragster {
+ z-index: 2;
+ position: absolute;
+ opacity: 0;
+ box-shadow: 1px 2px 3px #00000050;
+ background: #fff;
+ white-space: pre-wrap;
+ cursor: move;
+ padding: 5px 25px 5px 10px;
+ font-size: 11px;
+ box-shadow: 0 +1px 0 #ACB4BC inset,
+ 0 -1px 0 #ACB4BC inset,
+ +1px 0 0 #ACB4BC inset,
+ -1px 0 0 #ACB4BC inset,
+ 0px 1px 3px #00000030;
+}
+
+.dragster.collapsed {
+ overflow: hidden;
+ line-height: 22px;
+ padding-top: 0;
+}
+
+/***/
+.logo {
+ position: absolute;
+ top: 9px;
+ left: 9px;
+ font-size: 11px;
+ line-height: 19px;
+ padding: 6px 12px;
+ opacity: 0.6;
+ z-index: 3;
+ background: #f8f9fb;
+}
+
+body.crowded .logo:hover {
+ background: #fff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.logo:hover {
+ opacity: 1.0;
+}
+
+.logo .bulk {
+ overflow: hidden;
+ height: 0;
+ opacity: 0;
+ transition: opacity 400ms;
+}
+
+.logo:hover .bulk {
+ height: auto;
+ opacity: 1;
+}
+
+.logo a {
+ color: #000;
+ display: block;
+}
+
+.logo a:hover {
+ color: #1489db;
+}
+
+.logo .bulk a:before {
+ display: inline-block;
+ content: '-';
+ width: 11px;
+}
+
+/***/
+.config {
+ position: absolute;
+ top: 10px;
+ right: 21px;
+ font-size: 11px;
+ line-height: 19px;
+ z-index: 3;
+ background: #f8f9fb;
+}
+
+body.crowded .config:hover {
+ background: #fff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.config a {
+ display: block;
+ color: #000;
+ transition: color 200ms;
+}
+
+.config a:hover {
+ color: #1489db;
+}
+
+.config .teaser {
+ padding: 5px;
+ color: #999;
+}
+
+.config .bulk {
+ margin-right: 20px;
+ padding: 5px 0 10px 22px;
+ transition: opacity 400ms;
+}
+
+.config .bulk div {
+ display: none;
+ padding: 6px 2px;
+ margin: 6px -2px;
+ border-top: 1px solid #00000028;
+ border-bottom: 1px solid #00000028;
+}
+
+.config .bulk div a {
+ display: block;
+ margin-right: 10px;
+}
+
+.config .bulk div a.active {
+ color: #1489db;
+}
+
+.config .bulk div a.active:before {
+ content: '\2022 ';
+ display: inline-block;
+ width: 13px;
+ margin-left: -13px;
+}
+
+.config .bulk div a.active:hover {
+ color: #000;
+}
+
+.config .bulk input.imp-board-select {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ visibility: hidden;
+}
+
+/***/
+.config .bulk {
+ display: none;
+ opacity: 0;
+}
+
+.config:hover .teaser {
+ display: none;
+}
+
+.config:hover .bulk {
+ display: block;
+ opacity: 1;
+}
+
+/***/
+.overlay {
+ position: fixed;
+ z-index: 10;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.9);
+ display: none;
+}
+
+/***/
+.overlay .license {
+ font-size: 12px;
+ line-height: 16px;
+ white-space: pre-wrap;
+ width: 384px;
+ height: auto;
+ max-height: 600px;
+ padding: 20px 25px 22px;
+ overflow-y: auto;
+ background: #fff;
+ position: absolute;
+ top: 100px;
+ left: 50%;
+ margin-left: -192px;
+}
+
+.overlay .license a {
+ color: #1489db;
+}
+
+.overlay .license span {
+ display: inline-block;
+ padding-right: 8px;
+}
+
+/***/
+.overlay .about {
+ font-size: 12px;
+ line-height: 16px;
+ text-align: center;
+ width: 240px;
+ height: auto;
+ padding: 50px 25px;
+ background: #fff;
+ position: absolute;
+ top: 100px;
+ left: 50%;
+ margin-left: -145px;
+}
+
+.overlay .about h1 {
+ font-size: 15px;
+ font-weight: 500;
+ margin-bottom: 10px;
+}
+
+.overlay .about a {
+ display: block;
+ color: #1489db;
+}
+
+.overlay .about div {
+ position: absolute;
+ bottom: -30px;
+ width: 240px;
+ color: #888;
+}
+
+.overlay .about div span {
+ display: inline-block;
+ text-align: left;
+ padding-right: 10px;
+}
+
+/***/
+@media print {
+ .logo,
+ .config,
+ .board .head .teaser,
+ .list .head .teaser {
+ visibility: hidden;
+ display: none;
+ }
+
+ .board .list .note {
+ box-shadow: none;
+ outline: 1px solid #ccc;
+ }
+
+ .board .list .note.raw {
+ outline: none;
+ }
+}
diff --git a/nullboard.html b/nullboard.html
index 83fd14f..700f756 100644
--- a/nullboard.html
+++ b/nullboard.html
@@ -47,718 +47,9 @@
Licensor: Alexander Pankratov / swapped.ch
-->
+
+
Nullboard
-
@@ -774,6 +65,7 @@
Import board...
Export board...
+ Swap theme mode
@@ -2346,6 +1638,11 @@
showBoard(true);
}
+ //Toggle board theme
+ $('.theme-swap').click(function() {
+
+ });
+
//
setInterval(adjustListScroller, 100);