Skip to content

Instantly share code, notes, and snippets.

@gambala
Last active March 7, 2020 16:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gambala/21badda198792a3eaec21275c6d8cd84 to your computer and use it in GitHub Desktop.
Save gambala/21badda198792a3eaec21275c6d8cd84 to your computer and use it in GitHub Desktop.
Checkvist feels good CSS theme
/* https://www.color-hex.com/color-palette/36646 */
html, body, .main_div {
background: #4b5162;
background: #282A36;
background: #3b3d4a;
color: #e5e5e5;
color: #F8F8F2;
}
.topbarDiv,
.toolbarDiv,
.toolBar {
background: #404552;
background: #20222b;
background: #2f313b;
}
.toolbarDiv,
.toolBar {
border-bottom: none;
}
.toolBar {
text-shadow: none;
}
a.topbar__navLink, a.topbar__navLink:visited, a.topbar__navLink:hover, a.topbar__navLink:active,
.toolBar a,
.toolBar a.printer, .toolBar a#viewOptionsLink, .toolBar .expandCollapse {
color: #fff;
}
img.logoImg {
background: #fff;
padding: 5px;
margin: -5px;
border-radius: 16px;
}
.list-h1 {
text-shadow: none;
}
div.coreDiv.selectedTask, ul.comments li.comment.selectedTask div.coreNote,
.selectedTask_focus > div.coreDiv, li.comment.selectedTask_focus div.coreNote, li.upload.selectedTask_focus {
background: #5294e21c;
border-color: #5294e2;
}
.color_fg1, span.fg1 .userContent, span.fg1 .userContent a, span.fg1 .userContent a:visited {
color: #ffa09e;
}
.color_fg2, span.fg2 .userContent, span.fg2 .userContent a, span.fg2 .userContent a:visited {
color: #a0b7ca;
}
.color_fg3, span.fg3 .userContent, span.fg3 .userContent a, span.fg3 .userContent a:visited {
color: #779bb7;
color: #6272A4;
}
span.bg3 {
background: #7c818c;
color: #f3f3f3;
}
.text_input {
background: #05263f;
border-color: #00080e;
color: #fff;
}
.singleLineForm button.submit, .singleLineForm a.editor_cancel {
background: #05263f;
border-color: #00080e;
}
.infoMessage {
color: #555;
}
.userContent a, .userContent a:visited {
color: #a8d0ff;
}
ul.comments {
background: #383c4a;
}
li.comment,
li.comment:first-of-type {
border-color: #3b3d4a;
}
.userContent strong {
color: #fff;
}
span.fg1 .userContent strong,
span.fg1 .userContent a strong,
span.fg1 .userContent a:visited strong {
color: #ff8f8d;
}
span.fg2 .userContent strong,
span.fg2 .userContent a strong,
span.fg2 .userContent a:visited strong {
color: #b4dcfd;
}
span.fg3 .userContent strong,
span.fg3 .userContent a strong,
span.fg3 .userContent a:visited strong {
color: #73b0e0;
}
span.bg1 .userContent strong,
span.bg1 .userContent a strong,
span.bg1 .userContent a:visited strong {
color: #9297a2;
}
.taskContent em {
opacity: 0.7;
}
span.fg1 .userContent.task_closed,
span.fg2 .userContent.task_closed,
span.fg3 .userContent.task_closed,
span.fg1 .userContent.task_closed strong,
span.fg2 .userContent.task_closed strong,
span.fg3 .userContent.task_closed strong,
span.fg1 .userContent.task_closed a strong,
span.fg2 .userContent.task_closed a strong,
span.fg3 .userContent.task_closed a strong,
span.fg1 .userContent.task_closed a:visited strong,
span.fg2 .userContent.task_closed a:visited strong,
span.fg3 .userContent.task_closed a:visited strong,
span.task_closed {
color: #7c818c;
}
span.bg1 .userContent.task_closed,
span.bg1 .userContent.task_closed strong,
span.bg1 .userContent.task_closed a strong,
span.bg1 .userContent.task_closed a:visited strong {
color: #6c6e73;
}
.userContent.task_closed strong {
color: #7c818c;
font-weight: 400;
}
/* 2019-02-26 update */
.toolBar {
color: #fff;
}
.verticalGuide,
.verticalGuide__selected {
opacity: 0;
}
ul.topLevel {
padding-left: 20px;
}
.cl_content,
.leftColumnNav,
.kbdShortcuts,
.kbdShortcuts td {
background: #5c616f;
}
.leftColumnNav ul li,
.kbdShortcuts td {
border-color: #3b3d4a;
}
.kbdShortcuts {
text-shadow: none;
}
.additionalText, ul.checklists li.list_item, #archivedListSection .checklistName a,
.progressCounterText,
.menuPopupList li a, .menuPopupList li a:visited {
color: #fff;
}
.tagClass_0, a.tagClass_0 {
background-color: #0980f4;
border-color: #0980f4;
color: #fff;
padding: 1px 6px;
}
.suggestionBox {
color: #444;
}
div.hrDivider {
background: #505050;
background: rgba(255, 255, 255, 0.2);
}
.bg1.editable,
.bg2.editable,
.bg3.editable,
.bg7.editable {
text-align: center;
}
.bg1.editable .taskContent::after,
.bg2.editable .taskContent::after,
.bg3.editable .taskContent::after,
.bg7.editable .taskContent::after {
background: #505050;
content: '';
height: 1px;
left: 0;
position: absolute;
top: 50%;
width: 100%;
}
.bg1.editable .taskContent p,
.bg2.editable .taskContent p,
.bg3.editable .taskContent p,
.bg7.editable .taskContent p {
background: #3b3d4a;
border-radius: 3px;
line-height: 20px;
padding-left: 5px;
padding-right: 5px;
position: relative;
z-index: 1;
}
.priority_4 .priorityColored,
.priority_4.priorityColored {
background: none;
color: #7c818c;
}
.priority_5 .priorityColored,
.priority_5.priorityColored {
background: none;
color: #ff8f8d;
}
.priority_6 .priorityColored,
.priority_6.priorityColored {
background: none;
color: #6c6e73;
}
.priority_7 .priorityColored,
.priority_7.priorityColored {
background: none;
color: #fff;
}
.priority_9 .priorityColored,
.priority_9.priorityColored {
background: none;
color: #FFD6A6;
}
/* Minimal font-size */
ul.topLevel ul li.task,
.text_input {
font-size: 13px;
}
/* Hide form buttons */
.singleLineForm button.submit,
.singleLineForm a.editor_cancel {
display: none;
}
i.editHelp {
display: none;
}
/* Decrease task right margin */
div.coreDiv {
margin-right: 30px;
}
/* Wide form */
.textareaWrapper {
min-width: 80%;
}
#task_content,
.text_input {
width: 100%;
}
/* Maximum workarea height */
body {
padding-bottom: 0;
}
#tasks_block {
margin-bottom: 0;
}
/* Special colors for tasks */
.color_fg1, span.fg1 .userContent, span.fg1 .userContent a, span.fg1 .userContent a:visited {
color: #ec4a21;
}
.color_fg2, span.fg2 .userContent, span.fg2 .userContent a, span.fg2 .userContent a:visited {
color: #999;
}
.color_fg3, span.fg3 .userContent, span.fg3 .userContent a, span.fg3 .userContent a:visited {
color: #cfcfcf;
}
span.bg3 {
background: #f3f3f3;
color: #777;
padding-bottom: 6px;
padding-top: 6px;
margin-top: -4px;
margin-bottom: -3px;
}
.selectedTask .bgMarker.bg3 {
padding: 0;
margin: 3px;
}
.pageFooter__inner {
padding: 3px 10px;
}
.pageFooter__secondLine {
display: none;
}
.tag {
font-size: 10px;
}
.tagClass_0, a.tagClass_0 {
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
color: #75b2ec;
}
/* Special colors for toolbar */
.topbarDiv {
background: #e7e9ef;
overflow: auto;
}
.toolbarDiv,
.toolBar {
background: #e7e9ef;
}
.toolBar span.bordered {
display: none;
}
html, body, .main_div {
background: #f8f8fa;
}
#ffContainer,
#ffContainer input {
background: #f8f8fa;
}
.topbar {
margin: 20px 0 10px;
}
/* Align node tags by right */
.editable, .editableList {
align-items: baseline;
display: flex;
}
span.node_text {
flex-grow: 1;
}
/* Make comments flex too */
.editable.commentText {
flex-flow: row wrap;
}
.editable.commentText hr {
border-color: #858891;
border-top: none;
width: 100%;
}
.userContent ul, .userContent ol {
margin-bottom: 4px;
margin-top: 4px;
}
/* Hide author avatar in comments. Make comments more compact */
ul.comments {
margin-left: 20px;
}
li.comment {
padding: 0;
}
.authorPic {
display: none;
}
div.coreNote {
margin-left: 0;
padding: 0;
}
.afterTask.notesFragment {
white-space: nowrap;
}
/* Two-three columns display */
.content {
max-width: none;
}
ul.topLevel.alighned {
align-items: flex-start;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
ul.topLevel.alighned > li.task {
margin-bottom: 48px;
max-width: 900px;
width: 50%;
}
@media(min-width: 1440px) {
ul.topLevel.alighned > li.task {
width: 33.33%;
}
}
/* Special layout for first and second root nodes */
ul.topLevel.alighned > li.task:first-child {
width: 33.33%;
max-width: none;
}
ul.topLevel.alighned > li.task:first-child > ul.dndUl {
opacity: 0.7;
}
ul.topLevel.alighned > li.task:nth-child(2) {
width: 66.66%;
max-width: none;
}
@media(min-width: 1440px) {
ul.topLevel.alighned > li.task:first-child {
width: 25%;
}
ul.topLevel.alighned > li.task:nth-child(2) {
width: 75%;
}
}
/* Special layout for second root node subnodes */
ul.topLevel.alighned > li.task:nth-child(2) > ul.dndUl {
display: flex;
flex-flow: row wrap;
}
ul.topLevel.alighned > li.task:nth-child(2) > ul.dndUl #task_content {
width: 100% !important;
}
ul.topLevel.alighned > li.task:nth-child(2) > ul.dndUl > li.task {
margin-bottom: 60px;
width: 50%;
}
@media(min-width: 1440px) {
ul.topLevel.alighned > li.task:nth-child(2) > ul.dndUl > li.task {
width: 33.33%;
}
}
ul.topLevel.alighned > li.task:nth-child(2) > ul.dndUl > li.task > ul.dndUl {
opacity: 0.75;
}
/* Layout for rest root tasks */
ul.topLevel.alighned > li.task.hiddenByFilter,
ul.topLevel.alighned > li.task.hidden {
display: none;
}
ul.topLevel.alighned > li.task > ul.dndUl {
padding-left: 0;
}
ul.topLevel.alighned > li.task > div.coreDiv {
background: rgba(0, 0, 0, 0.2);
margin-left: -24px;
margin-right: 40px;
padding-left: 24px;
}
ul.topLevel.alighned > li.task > div.coreDiv div.nodeImage {
display: none;
}
.toolbarDiv {
margin-bottom: 10px;
padding-bottom: 4px;
}
.content {
margin-top: -1px;
}
@gambala
Copy link
Author

gambala commented Feb 6, 2020

Install https://github.com/openstyles/stylus and add these stylesheets for https://checkvist.com domain

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment