:root { --color-bg: var(--background); --color-menu: var(--f_high); --color-menubg: var(--b_low); --color-menuascent: var(--f_med); --color-item: var(--f_high); --color-itembg: var(--b_low); --color-itemascent: var(--f_med); --color-image: #fff; /*Text overlaying an image item*/ --color-imagedarken: #000; /*Overlay on image as text background */ --color-page-bg: #000; --color-page-input: #111; --color-page-i: #222; /*idle*/ --color-page-e: #333; /*enabled*/ --color-page-a: #666; /*ascent*/ --alpha-darken: 0.2; --alpha-idleicon: 0.2; --alpha-idle: 0.4; --alpha-enabledicon: 0.4; --alpha-enabled: 1.0; --alpha-ascent: 1.0; --size-menu: 150px; --size-menu-item-sepv: 14px; /*vertical space between menu items*/ --size-menu-item-seph: 10px; /*horizontal space between menu item count and icon*/ --size-menu-itemgroup-sepv: 30px; /*vertical space between menu types (types to terms, terms to tags)*/ --size-menu-tag-sepv: 10px; /*space between tag items*/ --size-grid-gutter: 20px; --size-grid-column: 350px; --size-item-corner: 3px; --size-item-elem-padding: 1em; /*vertical space between grid item internal elements (tags, notes, quotes etc)*/ --size-item-elem-sep: 0.75em; /*horizontal space between item element icon and element text (tag icon and tags)*/ --size-font-title: 1em; --size-font-body: 0.8em; --size-font-menutypes: 1em; --size-font-menutags: 0.8em; --size-font-bodytypes: 1em; /*font size of type icon/count*/ } * { box-sizing: border-box; } html { font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace; background: var(--background); padding: 0em; margin: 0; overflow-y: scroll; } body { padding: 0em; margin: 0; } ::selection { background: var(--color-bg); } .noselect { /*noselect stops an unwanted selection visual on button click*/ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } /* MENU */ .menu { padding-top: var(--size-grid-gutter); background: var(--color-bg); opacity: var(--alpha-idle); width: var(--size-menu); position: fixed; height: 100%; z-index: 100; left: 0px; top: 0px; /*overflow-y: scroll;*/ /*allow menu to scroll on small screens*/ } .menu:hover { opacity: var(--alpha-ascent); } .menu::-webkit-scrollbar { display: none; } .menu-itemgroup { padding-bottom: var(--size-menu-itemgroup-sepv); width: 100%; float: left; } .menu-item { padding-bottom: calc(var(--size-menu-item-sepv) / 2); padding-top: calc(var(--size-menu-item-sepv) / 2); font-size: var(--size-font-menutypes); opacity: var(--alpha-idle); color: var(--color-menu); text-align: center; margin: 0px auto; width: 100%; float: left; } .menu-item:hover { color: var(--color-menuascent); opacity: var(--alpha-ascent); } .menu-itemcount { padding-right: calc(var(--size-menu-item-seph) / 2); display: inline-block; text-align: right; float: left; width: 50%; } .menu-itemicon { margin-left: calc(var(--size-menu-item-seph) / 2); margin-top: calc(var(--size-font-bodytypes) / 10); width: calc(var(--size-font-bodytypes) * 1.25); display: inline-block; text-align: center; float: left; } .menu-tagcontainer { margin: 0 auto; display: table; } .menu-tagicon { padding-bottom: calc(var(--size-menu-item-sepv) / 2); padding-top: calc(var(--size-menu-item-sepv) / 2); font-size: var(--size-font-menutags); opacity: var(--alpha-idle); color: var(--color-menu); display: table-row; text-align: center; width: 100%; float: left; } .menu-tag { padding-bottom: calc(var(--size-menu-tag-sepv) / 2); padding-top: calc(var(--size-menu-tag-sepv) / 2); font-size: var(--size-font-body); opacity: var(--alpha-idle); color: var(--color-menu); width: 100%; float: left; clear: left; } .menu-tagcount { padding-right: var(--size-menu-tag-sepv); text-align: right; float: left; } .menu-taglabel { text-align: left; float: left; } .menu-tag:hover { opacity: var(--alpha-ascent); } .menu-tag:hover .menu-taglabel { background-color: var(--color-itemascent); color: var(--color-menubg); } .menu-tag:hover .menu-tagcount { color: var(--color-itemascent); } .container { background: var(--background); margin-left: calc(var(--size-menu) + var(--size-grid-gutter)); margin-right: var(--size-grid-gutter); } .grid { margin: var(--size-grid-gutter) auto; -webkit-transition: opacity 1000ms linear; transition: opacity 1000ms linear; } .grid:after { /* clearfix (reset) */ display: block; content: ''; clear: both; } /* GRID ITEM */ .griditem, .griditem-wide { padding-bottom: var(--size-grid-gutter); border-radius: var(--size-item-corner); margin-bottom: var(--size-grid-gutter); background: var(--color-itembg); width: var(--size-grid-column); text-decoration: none; position: relative; float: left; } .griditem:hover, .griditem-wide:hover { opacity: var(--alpha-ascent); } @media screen and (min-width: 886px) { .griditem-wide { width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter)); } } .griditem:hover { background: var(--color-itembg); opacity: 1; } .griditem::selection { background: var(--b_high); } .griditem-containerupper { padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter); display: inline-block; z-index: 100; width: 100%; } .griditem-containerlower { padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter); z-index: 100; } .griditem-containerlower:empty { display: none; } /*IMAGE*/ .griditem-image .griditem-containerupper { position: absolute; height: 100%; width: 100%; left: 0; z-index: 300; top: 0; } .griditem-image .griditem-containerlower { padding-bottom: var(--size-grid-gutter); position: absolute; width: 100%; bottom: 0; z-index: 300; left: 0; } .griditem-image { background: transparent; padding-bottom: 0; overflow: hidden; } .griditem-image-img { vertical-align: middle; /* vertical-align css hack removes bottom padding */ object-fit: cover; margin-bottom: 0px; width: 100%; max-height: 1000px; position: relative; z-index: 100; top: 0; left: 0; } .image-overlay { background-color: var(--color-imagedarken); position: absolute; height: 100%; width: 100%; z-index: 150; opacity: 0; } .griditem-image:hover .image-overlay { opacity: var(--alpha-darken); } .griditem-image .griditem-link { display: none; } .griditem-image:hover .griditem-link { display: initial; text-shadow: 0 0 3em #000; } /* TITLE */ .griditem-title { opacity: var(--alpha-enabled); color: var(--color-item); font-size: var(--size-font-title); text-decoration: none; float: left; clear: both; } .griditem-image .griditem-title { display: none; } .griditem-image:hover .griditem-title { display: initial; text-shadow: 0 0 3em #000; color: white; } /* LINK */ .griditem-linkcontainer { margin-top: var(--size-item-elem-padding); float: left; clear: both; } .griditem-link { width: calc(100% - var(--size-font-bodytypes) * 2); float: left; clear: both; text-decoration: none; display: inline-block; } .griditem-linktitle { /*opacity: var(--alpha-idle);*/ color: var(--color-item); font-size: var(--size-font-body); float: left; } .griditem-link:hover .griditem-linktitle { background-color: var(--color-itemascent); color: var(--color-itembg); } .griditem-linktitle { opacity: var(--alpha-idle); } .griditem-linkicon { margin-right: var(--size-item-elem-sep); color: var(--color-item); opacity: calc(var(--alpha-idleicon) - 0.1); float: left; } .griditem-linktitle { opacity: var(--alpha-idle); } .griditem-link:hover .griditem-linktitle { opacity: var(--alpha-ascent); } .griditem:hover .griditem-linkicon { opacity: var(--alpha-enabledicon); } .griditem:hover .griditem-linktitle { opacity: var(--alpha-enabled); } /* TYPE */ .griditem-typecontainer { position: absolute; right: 0px; top: 0px; margin-right: var(--size-grid-gutter); } .griditem-type { opacity: var(--alpha-idle); width: calc(var(--size-font-bodytypes)*2); color: var(--color-item); padding-bottom: var(--size-grid-gutter); font-size: var(--size-font-bodytypes); padding-top: var(--size-grid-gutter); vertical-align: top; text-align: center; float: right; } .griditem-typeicon { opacity: var(--alpha-idleicon); } .griditem-image .griditem-typeicon { display: none; } .griditem-image:hover .griditem-typeicon { display: initial; color: var(--color-image); opacity: var(--alpha-enabledicon); } .griditem-type .griditem-typeicon { opacity: var(--alpha-idleicon); color: var(--color-item); } .griditem:hover .griditem-type { opacity: var(--alpha-enabled); color: var(--color-item); } .griditem-type:hover .griditem-typeicon { opacity: var(--alpha-ascent); color: var(--color-itemascent); } /* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */ .griditem-note, .griditem-quote, .griditem-term, .griditem-tags, .griditem-proj, .griditem-auth, .griditem-file, .griditem-prog { opacity: var(--alpha-idle); padding-top: var(--size-item-elem-padding); color: var(--color-item); font-size: var(--size-font-body); float: left; clear: both; } .griditem:hover .griditem-note, .griditem:hover .griditem-quote, .griditem:hover .griditem-term, .griditem:hover .griditem-tags, .griditem:hover .griditem-proj, .griditem:hover .griditem-auth, .griditem:hover .griditem-file, .griditem:hover .griditem-prog { opacity: var(--alpha-enabled); color: var(--color-item); } .griditem-image .griditem-link, .griditem-image .griditem-note, .griditem-image .griditem-quote, .griditem-image .griditem-term, .griditem-image .griditem-tags, .griditem-image .griditem-proj, .griditem-image .griditem-auth, .griditem-image .griditem-file, .griditem-image .griditem-prog { color: var(--color-image); } .griditem-file { word-break: break-all; } .griditem-file-link { color: var(--color-item); text-decoration: none; } .griditem-file-link:hover { background-color: var(--color-itemascent); color: var(--color-itembg); word-break: break-all; } /* IMAGE */ .griditem-image .griditem-containerlower { display: none; } .griditem-image:hover .griditem-containerlower { display: initial; } .griditem-taglink { color: var(--color-item); text-decoration:none; } .griditem:hover .griditem-taglink { color: var(--color-item); } .griditem:hover .griditem-taglink:hover { background-color: var(--color-itemascent); color: var(--color-itembg); } .griditem-image:hover .griditem-taglink { color: #fff; } .griditem-image:hover .griditem-taglink:hover { color: #fff; } /* SMALL ICONS */ .textIcon { margin-right: var(--size-item-elem-sep); opacity: var(--alpha-idleicon); } .griditem:hover .textIcon { color: var(--color-item); opacity: var(--alpha-enabledicon); } /*TODO: refactor below; */ /* PAGE */ .page-overlay { /* visual */ background-color: var(--color-page-bg); opacity: 0; /*-webkit-transition: opacity var(--animation-time) linear; transition: opacity var(--animation-time) linear;*/ width: 100%; height: 100%; /* position */ position: absolute; z-index: -100; left: 0; top: 0; /* content */ display: flex; align-items: center; justify-content: center; user-select: none; } .page-overlay .content-menu { width: 100px; float: left; text-align: center; height: 100%; padding-top: auto; padding-bottom: auto; margin-right: 50px; border-radius: var(--size-item-corner); } .page-overlay .content-menu:hover { background-color: var(--color-page-i); } .page-overlay .content-menu:hover a { color: var(--color-page-a); } .page-overlay .content-menu a { color: var(--color-page-e); text-decoration: none; } .page-overlay .content-menu .content-menu-option { height: 100px; width: 100px; display: flex; align-items: center; justify-content: center; } .page-overlay .content form { float: left; } .page-overlay .content .row .key { width: 100px; color: var(--color-page-a); visibility: hidden; float: left; padding: 9px 7px 10px 0; text-align: right; margin-right: 0px; } .page-overlay .content .row input { padding: 10px; width: 400px; margin-bottom: 10px; /*background-color: transparent;*/ background-color: var(--color-page-input); color: #fff; border-width: 0px; /*border-width: 1px; border-style: solid; border-color: var(--color-menu);*/ border-radius: var(--size-item-corner); } .page-overlay .content .row input::placeholder { opacity: 1; color: var(--color-menu); } .page-overlay .content .row input:hover { /*background-color: var(--color-itemascent);*/ background-color: var(--color-page-i); } .page-overlay .content .row input:focus { /*background-color: var(--color-itemascent);*/ background-color: var(--color-page-e); } .page-overlay .content .display { float: left; height: 100%; width: 400px; padding: 10px; margin-left: 50px; color: var(--color-page-e); } .page-overlay .content-enter { margin-top: 50px; float: left; width: 100%; height: 100px; clear: both; text-align: center; padding-top: auto; padding-bottom: auto; vertical-align: center; border-radius: var(--size-item-corner); } .page-overlay .content-enter .content-menu-option { height: 100%; vertical-align: center; padding-top: auto; padding-bottom: auto; display: flex; align-items: center; justify-content: center; } .page-overlay .content-enter:hover { background-color: var(--color-page-i); } .page-overlay .content-enter:hover a { color: var(--color-page-a); } .page-overlay .content-enter a { color: var(--color-page-e); text-decoration: none; }