main content css
/* site specific for when you are logged out or whatever */
.header-bar {
border-bottom: none;
background: #383D40;
padding: 0;
height: 40px;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 800px;
z-index: 100;
white-space: nowrap;
}
img.logo--top {
content: url(https://rawgit.com/incace/matFlow/master/assets/logo.svg);
background-color: #4a88b3;
margin: 0;
padding: 8px;
width: 24px;
height: 24px;
border-radius: 0;
}
.button--top-right {
margin: 0;
padding: 8px 12px;
width: auto;
height: 24px;
border: 0;
border-radius: 0;
line-height: 24px;
text-transform: uppercase;
font-size: 13px;
text-shadow: none !important;
background: #495157 !important;
font-weight: 700;
}
.button--top-right:hover {
color: #27AE60 !important;
}
.top-section {
padding-top: 40px;
}
.headline {
font-size: 48px;
color: #27ae60;
font-weight: 300;
}
.button--large {
color: #fff !important;
border: none;
border-radius: 0;
background: #495157;
text-transform: uppercase;
text-shadow: none !important;
font-weight: 700;
}
.button--large:hover {
background: #27ae60;
}
.story__text {
color: #696e73;
}
/*=============================================
= matFlow.dark - [WorkFlowy] =
=============================================*/
/*
matFlow.dark is a dark theme for the WorkFlowy web app. It started initially as a few tweaks locally and ended up turning into a full-blown theme. It has a flat clean design that enables your eyes to relax and focus on what is important; sex, drugs and EDM. There are a ton of bugs.
*/
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'),local('OpenSans-Semibold'),url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')}
body,
#pageContainer {
font-weight: normal;
overflow-y: initial;
overflow-x: hidden;
}
body {
color: #EEE;
background: #2B2E2F;
}
body,
#documentView,
#searchBox,
.saveButton,
.showCompletedButton,
#buttonBar,
#helpButton,
#savedViewHUD,
#controlsLeft,
#itemSelectionControls,
.ui-widget,
.button--top-right,
.headline,
*, h1, h2, h3, h4, h5, h6, p, li,
.entry-title,
.hentry div.sharedaddy h3.sd-title,
.hentry h3.sd-title,
#keyboardShortcutHelper,
#site_message {
font-family: 'Roboto', sans-serif;
}
a:link,
a:active,
#logo,
#searchBox,
#searchCancel>svg>line,
.parent> .name> .content,
.saveButton,
.showCompletedButton,
#buttonBar,
.menu-icon,
.menu-options,
#helpButton,
.undo-button,
.redo-button,
.menu-options>.button,
#savedViewHUDButton,
#controlsLeft,
#itemSelectionControls,
#controlsLeft a,
#itemSelectionControls a,
.content .contentTag,
.nameAnimated .contentTag,
.fancyButton,
#font-gallery .option-thumb,
.ui-button,
.header-image img,
.header-image a::after,
#keyboardShortcutHelper,
.ui-dialog .ui-dialog-titlebar-close span,
.bigSquareButton,
.content .contentTag::before,
.nameAnimated .contentTag::before,
#message .close {
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
#loadingScreen {
background: #2B2E2F !important;
}
#loadingScreenSpinner {
background: none !important;
width: 80px !important;
height: 80px !important;
border-radius: 80px;
border: 2px solid #667079;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: spinner 2s linear infinite;
animation: spinner 2s linear infinite;
box-shadow: inset 0 0 0 10px rgba(73, 81, 87, 0.75),
inset 0 0 0 20px rgba(73, 81, 87, 0.4),
inset 0 0 0 30px rgba(73, 81, 87, 0.25);
}
#loadingScreenSpinner:after {
content: "";
position: absolute;
top: -5px;
left: 10px;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #27ae60;
border: 3px solid #2b2e2f;
-webkit-animation: orbit 1s linear infinite;
animation: orbit 1s linear infinite;
box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75);
}
#loadingScreenMessage {
display: block !important;
margin-top: 20px !important;
text-transform: uppercase;
font-size: 20px !important;
color: #667079;
-webkit-animation: loading 2s linear infinite;
animation: loading 2s linear infinite;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: none;
border-color: #667079;
}
50% {
box-shadow: inset 0 0 0 10px rgba(73, 81, 87, 0.75),
inset 0 0 0 20px rgba(73, 81, 87, 0.4),
inset 0 0 0 30px rgba(73, 81, 87, 0.25);
border-color: #a5b6c3;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: none;
border-color: #667079;
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: none;
border-color: #667079;
}
50% {
box-shadow: inset 0 0 0 10px rgba(73, 81, 87, 0.75),
inset 0 0 0 20px rgba(73, 81, 87, 0.4),
inset 0 0 0 30px rgba(73, 81, 87, 0.25);
border-color: #a5b6c3;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: none;
border-color: #667079;
}
}
@-webkit-keyframes orbit {
0% { box-shadow: none; }
25% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
50% { box-shadow: none; }
75% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
100% { box-shadow: none; }
}
@keyframes orbit {
0% { box-shadow: none; }
25% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
50% { box-shadow: none; }
75% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
100% { box-shadow: none; }
}
@-webkit-keyframes loading {
0% { color: transparent; }
50% { color: #667079; }
100% { color: transparent; }
}
@keyframes loading {
0% { color: transparent; }
50% { color: #667079; }
100% { color: transparent; }
}
#documentView {
padding-top: 39px;
color: #EEE;
width: 100%;
height: auto;
margin: 0px;
overflow: hidden;
}
#pageContainer {
margin-top: 18px;
}
#header {
border-bottom: none;
background: #383D40;
padding: 0;
height: 40px;
}
#logo {
background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/logo.svg');
background-position: center center;
background-size: 24px;
background-color: #4a88b3;
margin: 0;
padding: 8px;
width: 24px;
height: 24px;
}
#searchForm {
top: 0;
margin-left: 0;
}
/* #searchBox {
color: #A5B6C3;
background-color: #4F595F;
border: none;
width: 200px;
height: 20px;
padding: 10px 12px;
font-size: 14px;
opacity: .75;
margin: -5px 0 0 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
} */
#searchBox {
position: absolute;
top: 0;
left: 40px;
width: 40px;
height: 40px;
padding: 0 0 0 40px;
font-size: 14px;
line-height: 1;
color: #8d9398;
border: 0;
background-color: transparent;
background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/searching-grey.svg');
background-repeat: no-repeat;
background-position: 8px 9px;
background-size: auto 24px;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
opacity: 1;
}
#searchBox:focus,
#searchBox:hover {
outline: none;
width: 200px;
background-color: #495157;
background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/searching.svg');
background-repeat: no-repeat;
background-position: 8px 9px;
background-size: auto 24px;
cursor: default;
}
#searchBox::-webkit-input-placeholder {
color: #8d9398;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
text-transform: uppercase;
font-weight: 700;
}
#searchBox:-moz-placeholder {
color: #8d9398;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
text-transform: uppercase;
font-weight: 700;
}
#searchBox::-moz-placeholder {
color: #8d9398;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
text-transform: uppercase;
font-weight: 700;
}
#searchBox:-ms-input-placeholder {
color: #8d9398;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
text-transform: uppercase;
font-weight: 700;
}
#searchBox:focus::-webkit-input-placeholder {
color: transparent;
}
#searchBox:focus:-moz-placeholder {
color: transparent;
}
#searchBox:focus::-moz-placeholder {
color: transparent;
}
#searchBox:focus:-ms-input-placeholder {
color: transparent;
}
#searchCancel {
top: 14px !important;
right: 14px !important;
width: 14px !important;
height: 14px !important;
display: none !important;
}
#searchCancel>svg>line {
stroke: #8d9398;
stroke-width: 2;
}
#searchCancel:hover>svg>line {
stroke: #c55044 !important;
}
#savedViewHUDButton {
width: 40px;
height: 40px;
margin: 0;
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
background-size: 26px;
background-position: center center;
background-repeat: no-repeat;
background-color: #495157;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: .5;
}
#savedViewHUDButton:hover,
#savedViewHUDButton:active {
opacity: 1;
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
background-size: 26px;
background-position: center center;
background-repeat: no-repeat;
background-color: #495157;
}
#buttonBar {
margin: 0;
background: #495157 !important;
}
#buttonBar .menu-button {
padding: 0;
height: 40px;
width: 40px;
}
#buttonBar .menu-icon {
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/menu.svg');
margin: 0;
padding: 8px;
width: 24px;
height: 24px;
}
#buttonBar:hover .menu-icon {
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/menu-h.svg');
}
#buttonBar.open .menu-icon {
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/menu-h.svg');
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#buttonBar .menu-icon,
#buttonBar:hover .menu-icon,
#buttonBar.open .menu-icon {
background-size: 24px;
background-position: center center;
background-repeat: no-repeat;
}
.menu-options {
top: 40px;
right: -200px;
background: #495157;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
display: block;
padding: 0;
max-width: 200px;
}
#buttonBar.open .menu-options {
/* opacity: 1; */
right: 0;
}
.menu-options .topBarButtonTextContainer {
line-height: initial !important;
}
.menu-options>.button {
padding: 10px 20px;
font-size: 13px;
text-transform: uppercase;
}
.menu-options>.button:first-child {
margin-top: 10px;
}
.menu-options>div:hover,
.menu-options>div>a:hover {
background: none;
color: #27AE60;
}
.menu-options>#userEmail {
padding: 7px 10px;
margin: 10px 0 0;
font-size: 11px;
font-weight: 600;
color: #939da7;
background: #383d40;
overflow: hidden;
text-overflow: ellipsis;
}
.saveButton,
.showCompletedButton,
#buttonBar,
#helpButton {
border: none !important;
background: none;
}
.saveButton,
.showCompletedButton,
#helpButton {
font-weight: 500;
}
.showCompletedButton:hover,
#helpButton:hover {
background-color: transparent !important;
color: #27AE60 !important;
}
.saveButton .topBarButtonTextContainer {
color: inherit !important;
}
.undo-button,
.redo-button {
margin: 0;
padding: 0;
}
.undo-icon,
.redo-icon {
margin: 0;
padding: 8px;
width: 24px;
height: 24px;
}
.undo-icon {
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/undo.svg');
background-size: 24px;
background-position: center center;
background-repeat: no-repeat;
}
.redo-icon {
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/redo.svg');
background-size: 24px;
background-position: center center;
background-repeat: no-repeat;
}
.undo-button.enabled:hover,
.redo-button.enabled:hover {
opacity: 1 !important;
background: none !important;
}
.undo-button.enabled:hover {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.redo-button.enabled:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.topBarButtonTextContainer {
line-height: 24px !important;
}
#backgroundImage {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 1;
background-image: none !important;
background-color: #2B2E2F;
}
@media screen and (min-device-width:1501px) {
#backgroundImage {
background-image: none !important;
background-color: #2B2E2F;
}
}
.contentBold {
font-weight: 700;
color: yellow;
}
.highlight {
height: 100%;
left: -5px;
padding: 2px 5px 1px;
position: absolute;
top: 2px;
width: 100%;
}
.moving>.highlight,
.highlighted>.highlight {
background: #1e1e1e !important;
}
.moving>.highlight,
.highlighted.moveHovered>.highlight {
background: #1e1e1e !important;
}
.notes> .content {
color: #8d9398 !important;
/*font-style: italic;*/
}
.page {
background: #2B2E2F !important;
max-width: 100% !important;
-webkit-border-radius: 0px !important;
border: none !important;
margin-bottom: 0px !important;
padding: 0 60px !important;
width: auto !important;
transform: none !important;
}
.pageStar {
position: absolute;
top: 24px;
right: 48px;
height: 24px;
width: 24px;
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
background-size: 20px;
background-repeat: no-repeat;
background-position: 7px 6px;
opacity: 1.0 !important;
background-color: #383D40;
padding: 5px;
border-radius: 100%;
z-index: 999;
box-shadow: none;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.pageStar:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
.pageStar.starred {
position: absolute;
top: 24px;
right: 48px;
height: 24px;
width: 24px;
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
background-size: 20px;
background-repeat: no-repeat;
background-position: 7px 6px;
opacity: 1.0 !important;
background-color: #C55044;
padding: 5px;
border-radius: 100%;
z-index: 999;
box-shadow: none;
}
.parent>.name {
line-height: .8em !important;
margin: 0;
}
.parent> .name> .content {
color: #667079 !important;
font-size: 13px !important;
line-height: 16px !important;
}
.parent> .name> .content:hover {
color: #A7B4BF !important;
text-decoration: none !important;
}
.parent> .name> .parentArrow {
color: #495157 !important;
line-height: 16px !important;
font-size: 16px !important;
}
.parent> .name> .parentArrow:before {
content: "»" !important;
}
.mainTreeRoot.selected {
border-top: none !important;
}
.mainTreeRoot> .children> .project {
font-size: 18px !important;
}
.parent.project>.children {
padding: 0;
}
.selected {
border-top: none !important;
}
.selected .project>.name {
margin-bottom: 7px;
}
.selected.project>.children {
padding: 20px 0 0 0;
}
.selected .project.noted>.name,
.selected .project.open>.name {
margin-bottom: 0;
}
#expandButton > svg > line {
stroke: #495157;
}
.selected > .name > #controls > #controlsLeft {
top: 76px;
left: 60px !important;
background: #242627 !important;
}
.selected > .name > #controls > #controlsLeft a {
font-size: 13px !important;
font-weight: 700 !important;
padding: 8px 20px !important;
text-transform: uppercase;
}
.selected > .name > #controls > #controlsLeft a span {
margin-right: 0 !important;
}
/* .selected.project > .name,
.selected.project > .notes {
position: fixed;
width: 100%;
z-index: 10;
top: 100px;
}
.selected.project > .notes {
top: 168px;
} */
.selected.project > .name {
color: #FFFFFF !important;
padding: 32px 60px !important;
background-color: #242627 !important;
margin: 10px 0 0 0 !important;
margin-left: -60px !important;
margin-right: -60px !important;
font-size: 28px;
border-top: 2px solid #383d40;
border-bottom: 2px solid #383d40;
}
.selected.project.noted > .name {
padding: 32px 60px 24px !important;
border-bottom: none !important;
}
div.project.selected > div.name > div > a > span {
margin-right: 0 !important;
vertical-align: inherit;
}
.selected.project > .name a.contentLink {
color: #51d087 !important;
font-size: 14px !important;
font-weight: 700 !important;
padding: 6px 8px !important;
margin: 0 !important;
vertical-align: top;
background: #33754f;
}
.selected.project > .name a.contentLink:hover {
color: #FFFFFF !important;
border-color: #667079 !important;
}
.selected.project > .notes {
background-color: #242627 !important;
padding: 0 60px 16px !important;
margin: 0 !important;
margin-left: -60px !important;
margin-right: -60px !important;
border-bottom: 2px solid #383d40;
}
.selected.project > .name > .content,
.selected.project.addedShared > .name > .content {
display: initial;
padding: 10px 20px;
}
.selected.project > .name > .content {
background: #27ae60;
}
.selected.project.addedShared > .name > .content {
background: #d2be2d;
color: #242627;
}
.selected.project.done > .name > .content:before {
content: '';
position: absolute;
top: -12px;
left: -12px;
width: 18px !important;
height: 18px !important;
background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/check-circle.svg') !important;
background-position: center center;
background-size: 18px;
background-repeat: no-repeat;
background-color: #242627;
margin: 0 10px 0 0;
padding: 4px;
border-radius: 100%;
}
.selected > .notes > .content {
color: #667079 !important;
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
line-height: 22px !important;
}
.selected.project > .notes a.contentLink {
font-weight: 600 !important;
}
.selected.project > .children > .project {
margin-bottom: 15px !important;
}
.selected.project > .children > .project > .children {
border-bottom: 1px dashed #383D40;
}
.children {
border-left: 1px dashed #383D40;
/*padding: 15px 0 0 15px;*/
margin-bottom: 10px;
}
.selected .children .project.open,
.selected .children .project.noted.open {
margin-bottom: 15px !important;
}
.selected > .children > .project > .children > .project {
padding: 0;
border-bottom: none !important;
margin-bottom: 5px !important;
}
.selected > .children > .project > .children > .project > .children {
border-bottom: 1px dashed #383D40;
padding-bottom: 10px;
}
.selected > .children > .project > .children > .project > .children > .project.open {
border-bottom: none !important;
margin-bottom: 0 !important;
}
.selected > .children > .project > .children > .project > .children > .project > .children {
margin-bottom: 0;
}
.selected > .children > .project > .children > .project > .children > .project > .children > .project {
border-bottom: none !important;
margin-bottom: 0 !important;
}
.selected > .children > .project > .children > .project > .children > .project > .children > .project > .children {
margin-bottom: 0 !important;
}
.selected>.children>.project .project {
padding: 0 !important;
}
.selected>.children > .project > .children .project > .name {
margin-bottom: 0;
}
.selected>.children > .project > .children .project > .name > .content {
padding: 5px 0;
line-height: 1.3em;
min-height: inherit !important;
}
.project.noted .notes > .content {
margin-bottom: 5px;
}
.project.noted.open .notes > .content {
margin-bottom: 0px;
}
.project > .name > .bullet {
margin-top: 9px !important;
margin-left: 5px;
padding: 0;
width: 10px;
height: 10px;
-webkit-border-radius: 100% !important;
-moz-border-radius: 100% !important;
border-radius: 100% !important;
background-color: #495157;
background-image: none;
border: none;
}
.project.task > .name > .bullet {
margin-top: 9px !important;
width: 7px;
height: 7px;
background-color: transparent;
background-image: none;
border: 2px solid #495157;
}
.project.open > .name > .bullet {
margin-top: 7px !important;
margin-left: 3px;
width: 12px;
height: 12px;
background-color: transparent;
background-image: none;
border: 1px dashed #495157;
}
.project.addedShared > .name > .bullet {
margin-top: 8px !important;
margin-left: 4px;
width: 8px;
height: 8px;
background-color: #d2be2d;
-webkit-box-shadow: 0 0 0px 2px rgba(210, 190, 45, 0.35);
-moz-box-shadow: 0 0 0px 2px rgba(210, 190, 45, 0.35);
box-shadow: 0 0 0px 2px rgba(210, 190, 45, 0.35);
border: 2px solid #2b2e2f;
}
.page.showCompleted .project.halfOpenSearchMatchAncestorWhenCompletedVisible:not(.shared):not(.addedShared) > .name > .bullet,
.bullet:hover,
.project.task > .name > .bullet:hover,
.project.open > .name > .bullet:hover,
.project.addedShared > .name > .bullet:hover,
.page.showCompleted .project.halfOpenSearchMatchAncestorWhenCompletedVisible:not(.shared):not(.addedShared) > .name > .bullet:hover,
.page:not(.showCompleted) .project.halfOpenSearchMatchAncestorWhenCompletedHidden:not(.shared):not(.addedShared) > .name > .bullet:hover {
background-color: transparent;
}
.project>.name > .bullet:hover {
background-color: #27AE60;
}
.project.task > .name > .bullet:hover {
background-color: transparent;
border-color: #27AE60;
}
.project.open > .name > .bullet:hover {
background-color: transparent;
border-color: #27AE60;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.project.addedShared > .name > .bullet:hover {
background-color: rgba(210, 190, 45, 0.35);
-webkit-box-shadow: 0 0 0px 2px #d2be2d;
-moz-box-shadow: 0 0 0px 2px #d2be2d;
box-shadow: 0 0 0px 2px #d2be2d;
border-color: #2b2e2f;
}
.selected.project.addedShared:before {
content: 'S';
position: absolute;
top: 28px;
left: -12px;
width: 24px;
height: 24px;
line-height: 25px;
text-align: center;
padding: 0;
background: #2b2e2f;
color: #d2be2d;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
z-index: 10;
border-radius: 100%;
}
.project.done > .name > a.bullet {
margin-top: 6px !important;
margin-left: 3px !important;
width: 16px !important;
height: 16px !important;
background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/check-circle.svg') !important;
background-position: center center;
background-size: 14px;
background-repeat: no-repeat;
border: none !important;
background-color: transparent !important;
}
.project.done > .name > .bullet:hover {
-webkit-transform: none;
transform: none;
}
.project.done > .notes > .content {
color: rgba(39, 174, 96, 0.35);
}
.project.done > .name,
.project.doneAppearance > .name {
color: rgba(39, 174, 96, 0.75);
}
.content .contentLink,
.nameAnimated .contentLink {
text-decoration: none;
color: #27AE60 !important;
}
.content .contentLink:hover,
.nameAnimated .contentLink:hover {
color: #ADF7B4 !important;
}
.name> .content {
min-height: 24px !important;
}
.noted > .notes > .content {
height: auto !important;
min-height: 20px !important;
overflow: visible !important;
line-height: 20px;
display: block !important;
}
.content .contentTag,
.nameAnimated .contentTag {
position: relative;
text-decoration: none !important;
color: #ff8936 !important;
background: #495157 !important;
font-weight: 600 !important;
font-size: 13px !important;
padding: 4px 6px 5px !important;
margin: 0 0 0 15px !important;
vertical-align: text-bottom;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.content .contentTag::before,
.nameAnimated .contentTag::before {
content: '';
position: absolute;
top: 0px;
left: -12px;
width: 0;
height: 0;
border-color: transparent #495157 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0;
}
.content .contentTag::after,
.nameAnimated .contentTag::after {
content: "";
position: absolute;
top: 9px;
left: -4px;
width: 6px;
height: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: #2b2e2f;
}
.content .contentTag:hover,
.nameAnimated .contentTag:hover {
background: #ff8936 !important;
color: #242627 !important;
}
.content .contentTag:hover::before,
.nameAnimated .contentTag:hover::before {
border-color: transparent #ff8936 transparent transparent !important;
}
.content .contentTagText,
.nameAnimated .contentTagText {
text-decoration: none !important;
}
.content .contentMatch {
background-color: #e03b69 !important;
color: #ffffff !important;
padding: 0px 2px;
}
body.windowBlurred .project.addedToSelection,
.project.addedToSelection {
background: #383d40;
}
.project.highlighted::before,
.project.moving::before,
.project.tapped::before,
.draggableNameClone::before {
background: transparent !important;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
#dropdownMessages {
width: calc(100vw - 59px);
/* margin: auto; */
}
#message {
background-color: #5D8A25;
border: none !important;
color: #FFF !important;
top: 0 !important;
padding: 0 !important;
}
#message > .messageContent a {
color: #DDFF96 !important;
}
#message > .close {
color: #FFF !important;
}
.messageContent {
font-size: 16px;
position: relative;
padding: 18px 20px 17px;
text-align: center;
background-color: #C14438;
}
#message .close {
font-size: 24px;
line-height: 51px;
top: 0;
left: 100%;
width: 51px;
height: 51px;
margin-left: 0;
-webkit-animation: slide .5s forwards;
animation: slide .5s forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s;
text-align: center;
opacity: 1;
color: #fff;
background-color: #2b2e2f;
}
#site_message {
border: none !important;
padding: 15px 20px;
background: #4780a6;
font-size: 14px;
}
#site_message .closeButton {
top: 8px;
margin-left: -32px;
width: 30px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
@-webkit-keyframes slide {
100% {
left: 100%;
}
}
@keyframes slide {
100% {
left: 100%;
}
}
#message .close:hover {
color: #c14438 !important;
}
#message > .messageContent a {
font-size: 14px;
font-weight: 600;
padding: 3px 5px;
text-decoration: none;
text-transform: uppercase;
color: rgb(255, 255, 255) !important;
border: 2px solid rgba(255, 255, 255, .5) !important;
}
#message > .messageContent a:hover {
color: #fff !important;
border-color: #a23a30 !important;
background: #a23a30 !important;
}
#getMoreSpaceButtonTopLeft,
#upgradeToProButtonTopLeft {
display: none !important;
}
#bottomLinks {
display: none !important;
}
.footer {
display: none !important;
}
.proPitch {
display: none !important;
}
span.plus {
color: #cfcfcf !important;
}
span.text {
color: #cfcfcf !important;
}
div.top.edge {
display: none;
}
div.bottom.edge {
display: none;
}
div.left.edge {
display: none;
}
div.right.edge {
display: none;
}
DIV.top.right.corner {
display: none;
}
DIV.top.left.corner {
display: none;
}
DIV.bottom.right.corner {
display: none;
}
DIV.bottom.left.corner {
display: none;
}
#savedViewHUD {
position: fixed;
width: 100%;
height: calc(100% - 39px);
background-color: rgba(56, 61, 64, 0.9) !important;
z-index: 1000 !important;
text-align: center !important;
}
#savedViewHUDPageContainer {
padding: 60px 60px 30px !important;
white-space: normal !important;
overflow: auto;
height: calc(92vh - 40px);
}
#savedViewHUDPageContainer:before {
content: 'Starred Pages';
position: fixed;
top: 39px;
left: 0;
width: 100%;
padding: 10px 0;
background: #c55044;
font-size: 18px;
color: #ffb2aa;
font-weight: 700;
z-index: 2;
}
.savedViewPage {
margin: 0;
padding: 12px;
width: 65%;
height: auto;
text-align: center;
background: transparent;
border: none;
color: #696e73;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
border-radius: 0px !important;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
box-shadow: none !important;
}
.savedViewPageFader,
.savedViewPageSearchStringContainer {
display: none !important;
}
.savedViewPage.selectedSavedViewPage {
top: 0;
color: #27ae60;
background-color: transparent;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.savedViewPage:hover {
color: #FFF;
border: none;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.savedViewPage.selectedSavedViewPage:hover {
color: #27ae60;
border: none;
}
.savedViewPageInnerContainer {
opacity: 1;
}
.savedViewPageName {
font-size: 18px;
line-height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#controlsLeft,
#itemSelectionControls {
padding: 10px 0 !important;
width: auto !important;
background: #495157 !important;
border: none !important;
box-shadow: none !important;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
border-radius: 0px !important;
}
.selected .project #controlsLeft>.mouse-helper:before {
border-bottom: 15px solid #495157 !important;
}
#controlsLeft a,
#itemSelectionControls a {
color: #FFFFFF !important;
font-size: 13px !important;
margin-right: 0px !important;
padding: 7px 17px !important;
margin-bottom: 0px !important;
font-weight: 700 !important;
text-transform: uppercase;
}
#controlsLeft a:hover,
#itemSelectionControls a:hover {
color: #27AE60 !important;
text-decoration: none !important;
background-color: #383D40 !important;
}
#controlsLeft hr,
#itemSelectionControls hr {
border-top: 1px solid transparent !important;
margin: 0 !important;
}
.project.shared>.name #controlsLeft a.share,
.project.addedShared>.name #controlsLeft a.share {
/* font-weight: bold !important; */
font-size: 11px !important;
line-height: 1 !important;
text-shadow: none;
background: #383d40;
color: #d2be2d !important;
margin: 0 4px 10px 4px !important;
padding: 6px 10px 4px 10px !important;
text-transform: uppercase;
}
#itemSelectionControls > .numSelectedItems {
font-size: 0;
line-height: 24px;
position: absolute;
top: -14px;
right: 112px;
overflow: hidden;
width: auto;
height: 24px;
min-width: 24px;
margin: 0;
padding: 4px;
color: #fff;
border-radius: 100%;
background: #C14438;
}
span.numSelectedItemsValue {
font-size: 18px;
font-weight: 600;
}
#controls #move {
background: url(https://workflowy.com/media/i/move_icon_white.png) no-repeat !important;
}
#getMoreSpaceButtonTopRight {
font-size: 10px;
line-height: 10px;
position: relative;
top: initial;
right: 0;
bottom: 0;
left: 0;
width: auto;
margin: auto;
padding: 5px 5px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
text-align: center;
text-decoration: none;
letter-spacing: 6px;
text-transform: uppercase;
color: rgba(255, 255, 255, .5) !important;
}
#getMoreSpaceButtonTopRight:hover {
color: rgba(255, 255, 255, .75) !important;
border-color: #1a1c1d !important;
background: #1a1c1d !important;
}
.ui-dialog {
-webkit-box-shadow: 0 0 20px 5px #000000;
-moz-box-shadow: 0 0 20px 5px #000000;
box-shadow: 0 0 20px 5px #000000;
outline: 10000px solid rgba(56, 61, 64, 0.8) !important;
}
.ui-corner-all {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-widget-content {
border: none;
background: #383d40;
color: #EEE;
}
.ui-widget-header {
background: #242627;
color: #FFF;
border: none !important;
border-bottom: 2px solid #495157 !important;
}
.ui-dialog .ui-dialog-title {
text-shadow: none;
margin: 0;
padding: 10px 12px 9px;
font-size: 18px;
font-weight: 700;
background: #27ae60;
text-transform: uppercase;
}
.ui-dialog .ui-dialog-titlebar-close span {
margin: 0;
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/close.svg');
background-size: 16px;
background-position: center center;
background-repeat: no-repeat;
opacity: .5;
}
.ui-dialog .ui-dialog-titlebar-close span:hover {
background-size: 16px;
background-position: center center;
background-repeat: no-repeat;
opacity: 1;
}
#settingsRight {
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
#settingsPopup .setting {
padding: 15px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.fancyButton,
input[type="submit"].submit.fancyButton {
color: #EEE;
text-shadow: none !important;
box-shadow: none !important;
border-radius: 0;
border: 2px solid #696e73;
padding: 8px 10px 6px;
text-decoration: none;
background: transparent;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
}
.fancyButton:hover {
box-shadow: none !important;
background: #27AE60;
border: 2px solid #27AE60;
}
#theme-gallery {
background: none;
background-color: #ddd;
width: auto;
height: 400px;
top: -64px;
left: 142px;
padding: 15px 8px 15px 15px;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
}
.gallery>.closeMeButton {
top: 0;
right: 0;
}
.closeMeButton {
display: block;
margin: 0;
padding: 4px;
background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/close.svg');
background-size: 16px;
background-position: center center;
background-repeat: no-repeat;
background-color: #383d40;
width: 16px;
height: 16px;
}
.closeMeButton:hover {
background-position: center center;
background-color: #495157;
}
#theme-gallery .galleryScroller {
padding: 0 10px;
}
#theme-gallery .option-thumb {
border: none !important;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35) !important;
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35) !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35) !important;
}
#theme-gallery .option-thumb>.option-pretty-name {
padding: 9px 12px;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
#theme-gallery .option-thumb.current .option-pretty-name {
background: #27ae60;
opacity: 1;
}
.moreInfo {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
color: #383d40;
font-weight: 700;
}
#font-gallery {
border: none;
background: #696e73;
left: 37px;
}
#font-gallery .option-thumb.current {
background: #495157;
}
#font-gallery .option-thumb:not(.current):hover {
background: #818589;
}
#accountInfo {
background: transparent;
padding: 15px 10px;
border: none;
color: #e2e438;
}
#premium-features-more-button,
.smallSettingsButton {
text-decoration: none;
}
.progressBarContainer {
padding: 15px 10px;
margin-bottom: 0;
}
.progressBar {
width: 100% !important;
height: 10px;
margin-top: 10px;
border: 2px solid #696e73;
border-radius: 0;
background: #383d40;
}
.currentProgress {
background: #C55044;
}
.free_items {
color: #696e73;
}
.quotaDetailedInformation {
background: #c55044;
border: none;
padding: 10px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.quotaDetailedInformation>.link {
color: #e2e438;
}
#proSettingsBox {
background: transparent;
border: none;
padding: 10px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
box-shadow: none;
background: transparent;
border: 2px solid #696e73;
color: #eee;
}
.ui-button .ui-button-text {
padding: 10px 15px;
line-height: 1;
text-shadow: none;
text-transform: uppercase;
}
.ui-button:hover {
background: #696e73;
color: #fff;
}
#exportPopup .previewWindow,
#cutAndCopyBucket {
color: #fff;
background: #383d40;
}
.formattedExport,
#cutAndCopyBucket {
color: #fff;
font-size: 13px;
line-height: 16px;
}
#exportPopup .previewWindow {
border: 1px solid #667079;
overflow-x: auto;
overflow-y: scroll;
}
#exportPopup form {
background: transparent;
border: none;
padding: 10px 0;
}
.formatOptionContainer label {
vertical-align: text-top;
}
#exportPopup .instructions {
color: #ccc;
font-size: 14px;
line-height: 1.4;
}
.ui-dialog a {
color: #ffffff;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .5em .5em 0;
}
.ui-dialog .ui-dialog-buttonpane button:last-child {
margin-right: 0 !important;
}
#keyboardShortcutHelper {
outline: none !important;
bottom: 0;
right: 10px;
background: #c55044;
border: none;
color: #ffd6d1;
border-radius: 0;
width: 200px;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
#keyboardShortcutHelper.closed {
bottom: -627px;
}
#keyboardShortcutHelper.closed table {
display: block;
}
#keyboardShortcutHelper .ui-widget-header {
background: #2b2e2f;
border: 2px solid #c55044 !important;
color: #c55044;
}
#keyboardShortcutHelper td.commandName {
background: #383d40;
color: #ccc;
}
#keyboardShortcutHelper td {
vertical-align: middle;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#shared_notice {
width: auto;
color: #eee;
font-size: 13px;
background: #495157;
padding: 20px;
text-align: center;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.15),
0 3px 6px rgba(0, 0, 0, 0.20);
}
#shared_notice strong {
border-bottom: 2px solid #27ae60;
}
#pro-thank-you-paragraph {
color: #ffffff;
border: 2px solid #27ae60;
border-radius: 0;
}
#plan-upgrade-dialog h3 {
color: #8d9398;
}
#about-wf-pro {
width: 310px;
}
#premium-features-description {
border: none;
padding: 0 10px;
margin: 20px 0;
background: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#choose-your-plan {
border: none;
margin-bottom: 10px;
padding: 20px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: #495157;
}
.payment-form {
border: 2px solid #27ae60;
padding: 15px;
background: #383d40;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#purchase-info table label {
color: #8d9398;
}
img.padlock {
display:none !important;
}
.bigSquareButton {
padding: 20px;
margin: 10px 0;
border: 2px solid #27ae60;
background: rgba(39, 174, 96, 0.75);
box-shadow: none;
border-radius: 0;
opacity: .5;
}
.bigSquareButton:hover {
opacity: 1;
}
#helpRadio {
border-bottom: 2px solid #667079;
}
#helpRadio>span {
top: 4px;
border: 2px solid transparent;
color: #667079;
}
#helpRadio>span.current {
top: 4px;
border-radius: 0 !important;
border: 2px solid #667079;
border-bottom: none;
background: #383d40;
color: #FFF;
}
#libraryContainer .book {
color: #fff;
}
#libraryContainer .book.done {
color: #667079;
}
#libraryContainer .fancyButton {
padding: 4px 5px 2px;
}
#libraryContainer .book.done:before {
content: "";
display: inline-block;
margin-right: 3px;
background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/check-circle.svg') !important;
background-position: center center;
background-size: 12px;
background-repeat: no-repeat;
width: 12px;
height: 12px;
}
#libraryContainer .fancyButton.active {
box-shadow: none;
text-shadow: none;
color: #FFF;
border: none !important;
background: #167ac6;
padding: 7px 7px 4px;
}
#nextVideoButton.fancyButton {
margin-left: -100px;
margin-top: -20px;
border-radius: 0;
}
#afterLibraryVideoCompleteBox .fancyButton {
color: #fff;
}
.darkPaddedContainer {
background: transparent;
border: 2px solid #27ae60;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
#howTo table td.commandName {
background-color: #495157;
}
#howTo td {
border: 1px solid #667079;
}
::-moz-selection {
background: #5d6163;
color: #bcec85;
}
::selection {
background: #5d6163;
color: #bcec85;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #383d40 !important;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #495157 !important;
}
::-webkit-scrollbar-thumb:active {
background: #495157 !important;
}