mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Add css refactor progress.
This commit is contained in:
kor
parent
a5855e93ef
commit
5543f90455
@ -1,46 +1,29 @@
|
|||||||
/* VARIABLES */
|
|
||||||
:root {
|
:root {
|
||||||
/* COLOR */
|
--color-bg: var(--background);
|
||||||
--color-main-bg-i: var(--background); /*#ddd;*/ /*idle*/
|
|
||||||
--color-main-bg-e: var(--background); /*#ddd;*/ /*enabled*/
|
|
||||||
|
|
||||||
--color-menu-bg-i: var(--b_low); /*#000;*/ /*idle*/
|
|
||||||
--color-menu-bg-e: var(--b_low); /*#000;*/ /*enabled*/
|
|
||||||
--color-menu-item-i: var(--b_med); /*#333;*/ /*idle*/
|
|
||||||
--color-menu-item-e: var(--b_med); /*#999;*/ /*enabled*/
|
|
||||||
--color-menu-item-a: var(--b_inv); /*#ddd;*/ /*ascent*/
|
|
||||||
--alpha-i: 0.6;
|
|
||||||
--alpha-e: 0.8;
|
|
||||||
--alpha-a: 1.0;
|
|
||||||
|
|
||||||
--color-content-bg-i: var(--b_low); /*#ccc;*/ /*idle*/
|
--color-menu: var(--f_high); /*previously --b_med*/
|
||||||
--color-content-bg-e: var(--b_low); /*#bbb;*/ /*enabled*/
|
--color-menubg: var(--b_low);
|
||||||
--color-content-item-s: var(--f_high); /*#bbb;*/ /*sub*/
|
--color-menuascent: var(--b_inv);
|
||||||
--color-content-item-i: var(--f_high); /*#999;*/ /*idle*/
|
|
||||||
--color-content-item-e: var(--f_high); /*#666;*/ /*enabled*/
|
|
||||||
--color-content-item-t: var(--f_high); /*#000;*/ /*title*/
|
|
||||||
--color-content-item-a: var(--b_inv); /*#000;*/ /*ascent*/
|
|
||||||
--color-content-image-s: rgba(255, 255, 255, .1); /*sub*/
|
|
||||||
--color-content-image-i: rgba(255, 255, 255, .3); /*idle*/
|
|
||||||
--color-content-image-e: rgba(255, 255, 255, .5); /*enabled*/
|
|
||||||
--color-content-image-t: #fff; /*title*/
|
|
||||||
--color-content-image-a: #fff; /*ascent*/
|
|
||||||
|
|
||||||
--color-overlay-bg-i: #000; /*idle*/
|
--color-item: var(--f_high);
|
||||||
--color-overlay-bg-e: #111; /*enabled*/
|
--color-itembg: var(--b_low);
|
||||||
--color-overlay-item-s: #111; /*sub*/
|
--color-itemascent: var(--b_inv);
|
||||||
--color-overlay-item-i: #222; /*idle*/
|
|
||||||
--color-overlay-item-e: #333; /*enabled*/
|
|
||||||
--color-overlay-item-a: #666; /*ascent*/
|
|
||||||
|
|
||||||
/* SIZE */
|
--color-image: #fff; /*Text overlaying an image item*/
|
||||||
--menu-width: 150px;
|
--color-imagedarken: #000; /*Overlay on image as text background */
|
||||||
--menu-item-vert-sep: 20px; /*vertical space between menu items*/
|
|
||||||
--menu-item-elem-sep: 10px; /*horizontal space between menu item count and icon*/
|
|
||||||
--menu-item-spacer: 30px; /*vertical space between menu types (types to terms, terms to tags)*/
|
|
||||||
--menu-tag-sep: 10px; /*space between tag items*/
|
|
||||||
|
|
||||||
--size-gutter: 20px;
|
--alpha-darken: 0.2;
|
||||||
|
--alpha-idle: 0.4;
|
||||||
|
--alpha-enabled: 0.8;
|
||||||
|
--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-grid-column: 350px;
|
||||||
|
|
||||||
--size-item-corner: 3px;
|
--size-item-corner: 3px;
|
||||||
@ -49,9 +32,21 @@
|
|||||||
|
|
||||||
--size-font-title: 1em;
|
--size-font-title: 1em;
|
||||||
--size-font-body: 0.8em;
|
--size-font-body: 0.8em;
|
||||||
--type-icon-size: 24px; /*font size of type icon/count*/
|
--size-font-menutypes: 1em;
|
||||||
|
--size-font-menutags: 0.8em;
|
||||||
|
--size-font-bodytypes: 1em; /*font size of type icon/count*/
|
||||||
|
|
||||||
--animation-time: 200ms;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*TODO: refactor these; */
|
||||||
|
--color-overlay-bg-i: #000; /*idle*/
|
||||||
|
--color-overlay-bg-e: #111; /*enabled*/
|
||||||
|
--color-overlay-item-i: #222; /*idle*/
|
||||||
|
--color-overlay-item-e: #333; /*enabled*/
|
||||||
|
--color-overlay-item-a: #666; /*ascent*/
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -59,7 +54,7 @@
|
|||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
|
font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
|
||||||
background: var(--color-main-bg-i);
|
background: var(--background);
|
||||||
padding: 0em;
|
padding: 0em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
@ -71,124 +66,412 @@ body {
|
|||||||
|
|
||||||
/* MENU */
|
/* MENU */
|
||||||
.menu {
|
.menu {
|
||||||
background: var(--color-menu-bg-i);
|
background: var(--color-menubg);
|
||||||
padding-top: var(--size-gutter);
|
padding-top: var(--size-grid-gutter);
|
||||||
width: var(--menu-width);
|
width: var(--size-menu);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
opacity: var(--alpha-idle);
|
||||||
|
}
|
||||||
|
.menu:hover {
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
}
|
}
|
||||||
.menu::-webkit-scrollbar {
|
.menu::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.menu:hover {
|
.menu-itemgroup {
|
||||||
background: var(--color-menu-bg-e);
|
padding-bottom: var(--size-menu-itemgroup-sepv);
|
||||||
}
|
|
||||||
.menu a {
|
|
||||||
opacity: var(--alpha-i);
|
|
||||||
color: var(--color-menu-item-i);
|
|
||||||
}
|
|
||||||
.menu:hover a {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
color: var(--color-menu-item-e);
|
|
||||||
}
|
|
||||||
.menu a:hover {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
color: var(--color-menu-item-a);
|
|
||||||
}
|
|
||||||
.menu-spacer {
|
|
||||||
height: var(--menu-item-spacer);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MENU ITEMS */
|
|
||||||
.menu-item {
|
.menu-item {
|
||||||
padding-bottom: calc(var(--menu-item-vert-sep) / 2);
|
color: var(--color-menu);
|
||||||
padding-top: calc(var(--menu-item-vert-sep) / 2);
|
opacity: var(--alpha-idle);
|
||||||
font-size: var(--type-icon-size);
|
padding-bottom: calc(var(--size-menu-item-sepv) / 2);
|
||||||
|
padding-top: calc(var(--size-menu-item-sepv) / 2);
|
||||||
|
font-size: var(--size-font-menutypes);
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.menu-item .count {
|
.menu-item:hover {
|
||||||
padding-right: calc(var(--menu-item-elem-sep) / 2);
|
color: var(--color-menuascent);
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
}
|
||||||
|
.menu-itemcount {
|
||||||
|
padding-right: calc(var(--size-menu-item-seph) / 2);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.menu-item i {
|
.menu-itemicon {
|
||||||
margin-left: calc(var(--menu-item-elem-sep) / 2);
|
margin-left: calc(var(--size-menu-item-seph) / 2);
|
||||||
margin-top: calc(var(--type-icon-size) / 10);
|
margin-top: calc(var(--size-font-bodytypes) / 10);
|
||||||
width: calc(var(--type-icon-size) * 1.25);
|
|
||||||
|
width: calc(var(--size-font-bodytypes) * 1.25);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
.menu-tagcontainer {
|
||||||
/* MENU TAGS */
|
|
||||||
.menu-tag-container {
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
.menu-tag-container i {
|
.menu-tagicon {
|
||||||
opacity: var(--alpha-i);
|
opacity: var(--alpha-idle);
|
||||||
padding-bottom: calc(var(--menu-item-vert-sep) / 2);
|
padding-bottom: calc(var(--size-menu-item-sepv) / 2);
|
||||||
padding-top: calc(var(--menu-item-vert-sep) / 2);
|
padding-top: calc(var(--size-menu-item-sepv) / 2);
|
||||||
font-size: var(--type-icon-size);
|
font-size: var(--size-font-menutags);
|
||||||
color: var(--color-menu-item-i);
|
color: var(--color-menu);
|
||||||
display: table-row;
|
display: table-row;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.menu:hover .menu-tag-container i {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
color: var(--color-menu-item-e);
|
|
||||||
}
|
|
||||||
.menu-tag-container i:hover {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
.menu .menu-tag-container a {
|
|
||||||
}
|
|
||||||
.menu:hover .menu-tag-container a {
|
|
||||||
}
|
|
||||||
.menu .menu-tag-container a:hover {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
.menu-tag {
|
.menu-tag {
|
||||||
padding-bottom: calc(var(--menu-tag-sep) / 2);
|
opacity: var(--alpha-idle);
|
||||||
padding-top: calc(var(--menu-tag-sep) / 2);
|
color: var(--color-menu);
|
||||||
font-size: var(--size-font-body);
|
padding-bottom: calc(var(--size-menu-tag-sepv) / 2);
|
||||||
display: table-row;
|
padding-top: calc(var(--size-menu-tag-sepv) / 2);
|
||||||
width: 100%;
|
font-size: var(--size-font-body);
|
||||||
float: left;
|
width: 100%;
|
||||||
clear: left;
|
float: left;
|
||||||
|
clear: left;
|
||||||
}
|
}
|
||||||
.menu-tag-count {
|
.menu-tagcount {
|
||||||
padding-right: var(--menu-tag-sep);
|
padding-right: var(--size-menu-tag-sepv);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.menu-tag-label {
|
.menu-taglabel {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
.menu-tag:hover {
|
||||||
.noselect {
|
opacity: var(--alpha-ascent);
|
||||||
-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-tag:hover .menu-taglabel {
|
||||||
|
color: var(--color-menubg);
|
||||||
|
background-color: var(--color-itemascent);
|
||||||
|
}
|
||||||
|
.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, .grid-itemwide {
|
||||||
|
border-radius: var(--size-item-corner);
|
||||||
|
background: var(--color-itembg);
|
||||||
|
margin-bottom: var(--size-grid-gutter);
|
||||||
|
width: var(--size-grid-column);
|
||||||
|
text-decoration: none;
|
||||||
|
float: left;
|
||||||
|
padding-bottom: var(--size-grid-gutter);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.grid-item:hover, .grid-itemwide:hover {
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 886px) {
|
||||||
|
.grid-itemwide {
|
||||||
|
width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.grid-item-upper-content {
|
||||||
|
padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.grid-item-image .grid-item-upper-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.grid-item-lower-content {
|
||||||
|
padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.grid-item-image .grid-item-lower-content {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: var(--size-grid-gutter);
|
||||||
|
}
|
||||||
|
.grid-item-lower-content:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.grid-item-image {
|
||||||
|
padding-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.grid-item img {
|
||||||
|
border-radius: var(--size-item-corner);
|
||||||
|
vertical-align: middle; /* vertical-align css hack removes bottom padding */
|
||||||
|
object-fit: cover;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 1000px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item:hover {
|
||||||
|
/*box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);*/
|
||||||
|
/*mix-blend-mode: multiply;*/
|
||||||
|
background: var(--color-itembg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.image-overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: var(--color-imagedarken);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .image-overlay {
|
||||||
|
opacity: var(--alpha-darken);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LINK */
|
||||||
|
.grid-item .link {
|
||||||
|
width: calc(100% - var(--size-font-bodytypes)*2);
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.grid-item .link {
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.grid-item-image .link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .link {
|
||||||
|
display: initial;
|
||||||
|
text-shadow: 0 0 3em #000;
|
||||||
|
}
|
||||||
|
.grid-item .title {
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
|
color: var(--color-item);
|
||||||
|
font-size: var(--size-font-title);
|
||||||
|
text-decoration: none;
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.grid-item:hover .title {
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
}
|
||||||
|
.grid-item-image .title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .title {
|
||||||
|
display: initial;
|
||||||
|
text-shadow: 0 0 3em #000;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.grid-item .link .link-line {
|
||||||
|
margin-top: var(--size-item-elem-padding);
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.grid-item .link i {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.grid-item .link .link-title {
|
||||||
|
color: var(--color-item);
|
||||||
|
font-size: var(--size-font-body);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.grid-item:hover .link .link-title {
|
||||||
|
color: var(--color-item);
|
||||||
|
}
|
||||||
|
.grid-item .link:hover .link-title {
|
||||||
|
background-color: var(--color-itemascent);
|
||||||
|
color: var(--color-itembg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TYPE */
|
||||||
|
.grid-item .type {
|
||||||
|
opacity: var(--alpha-idle);
|
||||||
|
width: calc(var(--size-font-bodytypes)*2 + var(--size-grid-gutter));
|
||||||
|
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;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
.grid-item-image .grid-item-upper-content a .type i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .grid-item-upper-content a .type i {
|
||||||
|
display: initial;
|
||||||
|
color: var(--color-image);
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .grid-item-upper-content a:hover .type i {
|
||||||
|
display: initial;
|
||||||
|
color: var(--color-image);
|
||||||
|
}
|
||||||
|
.grid-item:hover .type {
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
|
color: var(--color-item);
|
||||||
|
}
|
||||||
|
.grid-item:hover .type:hover {
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
color: var(--color-itemascent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item .link-title {
|
||||||
|
opacity: var(--alpha-idle);
|
||||||
|
}
|
||||||
|
.grid-item .fas {
|
||||||
|
opacity: var(--alpha-idle);
|
||||||
|
}
|
||||||
|
.grid-item:hover .link-title {
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
|
}
|
||||||
|
.grid-item:hover a:hover .link-title {
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
}
|
||||||
|
/*.grid-item:hover a:hover .fas {
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
}*/
|
||||||
|
.grid-item:hover .fas {
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
|
||||||
|
.note, .quote, .term, .tags, .auth, .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;
|
||||||
|
}
|
||||||
|
.grid-item:hover .note,
|
||||||
|
.grid-item:hover .quote,
|
||||||
|
.grid-item:hover .term,
|
||||||
|
.grid-item:hover .tags,
|
||||||
|
.grid-item:hover .auth,
|
||||||
|
.grid-item:hover .prog {
|
||||||
|
opacity: var(--alpha-enabled);
|
||||||
|
color: var(--color-item);
|
||||||
|
}
|
||||||
|
/*.grid-item:hover .tags:hover {
|
||||||
|
opacity: var(--alpha-ascent);
|
||||||
|
}*/
|
||||||
|
.grid-item-image .grid-item-lower-content .link,
|
||||||
|
.grid-item-image .grid-item-lower-content .note,
|
||||||
|
.grid-item-image .grid-item-lower-content .quote,
|
||||||
|
.grid-item-image .grid-item-lower-content .term,
|
||||||
|
.grid-item-image .grid-item-lower-content .tags,
|
||||||
|
.grid-item-image .grid-item-lower-content .auth,
|
||||||
|
.grid-item-image .grid-item-lower-content .prog {
|
||||||
|
color: var(--color-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item-image .grid-item-lower-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .grid-item-lower-content {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
.tags a {
|
||||||
|
color: var(--color-item);
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
.grid-item:hover .tags a {
|
||||||
|
color: var(--color-item);
|
||||||
|
}
|
||||||
|
.grid-item:hover .tags a:hover {
|
||||||
|
background-color: var(--color-itemascent);
|
||||||
|
color: var(--color-itembg);
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .tags a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.grid-item-image:hover .tags a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SMALL ICONS */
|
||||||
|
.textIcon {
|
||||||
|
margin-right: var(--size-item-elem-sep);
|
||||||
|
color: var(--color-item);
|
||||||
|
}
|
||||||
|
.grid-item:hover .textIcon {
|
||||||
|
color: var(--color-item);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* PAGE */
|
/* PAGE */
|
||||||
.page-overlay {
|
.page-overlay {
|
||||||
@ -260,19 +543,19 @@ body {
|
|||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
/*border-width: 1px;
|
/*border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--color-menu-item-i);*/
|
border-color: var(--color-menu);*/
|
||||||
border-radius: var(--size-item-corner);
|
border-radius: var(--size-item-corner);
|
||||||
}
|
}
|
||||||
.page-overlay .content .row input::placeholder {
|
.page-overlay .content .row input::placeholder {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--color-menu-item-i);
|
color: var(--color-menu);
|
||||||
}
|
}
|
||||||
.page-overlay .content .row input:hover {
|
.page-overlay .content .row input:hover {
|
||||||
/*background-color: var(--color-content-item-a);*/
|
/*background-color: var(--color-itemascent);*/
|
||||||
background-color: var(--color-overlay-item-i);
|
background-color: var(--color-overlay-item-i);
|
||||||
}
|
}
|
||||||
.page-overlay .content .row input:focus {
|
.page-overlay .content .row input:focus {
|
||||||
/*background-color: var(--color-content-item-a);*/
|
/*background-color: var(--color-itemascent);*/
|
||||||
background-color: var(--color-overlay-item-e);
|
background-color: var(--color-overlay-item-e);
|
||||||
}
|
}
|
||||||
.page-overlay .content .display {
|
.page-overlay .content .display {
|
||||||
@ -319,277 +602,15 @@ body {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* CONTENT */
|
|
||||||
.container {
|
|
||||||
background: var(--color-main-bg-i);
|
|
||||||
margin-left: calc(var(--menu-width) + var(--size-gutter));
|
|
||||||
margin-right: var(--size-gutter);
|
|
||||||
}
|
|
||||||
.container:hover {
|
|
||||||
background: var(--color-main-bg-e);
|
|
||||||
}
|
|
||||||
.grid {
|
|
||||||
margin: var(--size-gutter) auto;
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: opacity 1000ms linear;
|
|
||||||
transition: opacity 1000ms linear;
|
|
||||||
}
|
|
||||||
.grid:after {
|
|
||||||
/* clearfix */
|
|
||||||
display: block;
|
|
||||||
content: '';
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* GRID ITEM */
|
|
||||||
.grid-item, .grid-item--width2 {
|
|
||||||
border-radius: var(--size-item-corner);
|
|
||||||
background: var(--color-content-bg-i);
|
|
||||||
margin-bottom: var(--size-gutter);
|
|
||||||
width: var(--size-grid-column);
|
|
||||||
text-decoration: none;
|
|
||||||
float: left;
|
|
||||||
padding-bottom: var(--size-gutter);
|
|
||||||
position: relative;
|
|
||||||
opacity: var(--alpha-i);
|
|
||||||
}
|
|
||||||
.grid-item:hover, .grid-item--width2:hover {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 886px) {
|
|
||||||
.grid-item--width2 {
|
|
||||||
width: calc(var(--size-grid-column) * 2 + var(--size-gutter));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.grid-item-upper-content {
|
|
||||||
padding: var(--size-gutter) var(--size-gutter) 0 var(--size-gutter);
|
|
||||||
display: inline-block;
|
|
||||||
z-index: 100;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.grid-item-image .grid-item-upper-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.grid-item-lower-content {
|
|
||||||
padding: 0 var(--size-gutter) 0 var(--size-gutter);
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
.grid-item-image .grid-item-lower-content {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: var(--size-gutter);
|
|
||||||
}
|
|
||||||
.grid-item-lower-content:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.grid-item-image {
|
|
||||||
padding-bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.grid-item img {
|
|
||||||
border-radius: var(--size-item-corner);
|
|
||||||
vertical-align: middle; /* vertical-align css hack removes bottom padding */
|
|
||||||
object-fit: cover;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 1000px;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item:hover {
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
|
|
||||||
background: var(--color-content-bg-e);
|
|
||||||
}
|
|
||||||
.image-overlay {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
background-color: #000;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .image-overlay {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LINK */
|
|
||||||
.grid-item .link {
|
|
||||||
width: calc(100% - var(--type-icon-size)*2);
|
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.grid-item .link {
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.grid-item-image .link {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .link {
|
|
||||||
display: initial;
|
|
||||||
text-shadow: 0 0 3em #000;
|
|
||||||
}
|
|
||||||
.grid-item .title {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
color: var(--color-content-item-t);
|
|
||||||
font-size: var(--size-font-title);
|
|
||||||
text-decoration: none;
|
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.grid-item:hover .title {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
.grid-item-image .title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .title {
|
|
||||||
display: initial;
|
|
||||||
text-shadow: 0 0 3em #000;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.grid-item .link .link-line {
|
|
||||||
margin-top: var(--size-item-elem-padding);
|
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.grid-item .link i {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.grid-item .link .link-title {
|
|
||||||
color: var(--color-content-item-i);
|
|
||||||
font-size: var(--size-font-body);
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.grid-item:hover .link .link-title {
|
|
||||||
color: var(--color-content-item-e);
|
|
||||||
}
|
|
||||||
.grid-item .link:hover .link-title {
|
|
||||||
background-color: var(--color-content-item-a);
|
|
||||||
color: var(--color-content-bg-e);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TYPE */
|
|
||||||
.grid-item .type {
|
|
||||||
opacity: var(--alpha-i);
|
|
||||||
width: calc(var(--type-icon-size)*2 + var(--size-gutter));
|
|
||||||
color: var(--color-content-item-s);
|
|
||||||
padding-bottom: var(--size-gutter);
|
|
||||||
font-size: var(--type-icon-size);
|
|
||||||
padding-top: var(--size-gutter);
|
|
||||||
vertical-align: top;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
.grid-item-image .grid-item-upper-content a .type i {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .grid-item-upper-content a .type i {
|
|
||||||
display: initial;
|
|
||||||
color: var(--color-content-image-i);
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .grid-item-upper-content a:hover .type i {
|
|
||||||
display: initial;
|
|
||||||
color: var(--color-content-image-a);
|
|
||||||
}
|
|
||||||
.grid-item:hover .type {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
color: var(--color-content-item-i);
|
|
||||||
}
|
|
||||||
.grid-item:hover .type:hover {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
color: var(--color-content-item-a);
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item .link-title {
|
|
||||||
opacity: var(--alpha-i);
|
|
||||||
}
|
|
||||||
.grid-item .fas {
|
|
||||||
opacity: var(--alpha-i);
|
|
||||||
}
|
|
||||||
.grid-item:hover .link-title {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
}
|
|
||||||
.grid-item:hover a:hover .link-title {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
.grid-item:hover a:hover .fas {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
.grid-item:hover .fas {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* LINK, NOTE, QUOTE, TERM, TAGS */
|
/*noselect stops an unwanted selection visual on button click*/
|
||||||
.note, .quote, .term, .tags, .auth, .prog {
|
.noselect {
|
||||||
opacity: var(--alpha-i);
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
padding-top: var(--size-item-elem-padding);
|
-webkit-user-select: none; /* Safari */
|
||||||
color: var(--color-content-item-i);
|
-khtml-user-select: none; /* Konqueror HTML */
|
||||||
font-size: var(--size-font-body);
|
-moz-user-select: none; /* Firefox */
|
||||||
float: left;
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
clear: both;
|
user-select: none; /* Non-prefixed version, currently
|
||||||
}
|
supported by Chrome and Opera */
|
||||||
.grid-item:hover .note,
|
|
||||||
.grid-item:hover .quote,
|
|
||||||
.grid-item:hover .term,
|
|
||||||
.grid-item:hover .tags,
|
|
||||||
.grid-item:hover .auth,
|
|
||||||
.grid-item:hover .prog {
|
|
||||||
opacity: var(--alpha-e);
|
|
||||||
color: var(--color-content-item-e);
|
|
||||||
}
|
|
||||||
.grid-item:hover .tags:hover {
|
|
||||||
opacity: var(--alpha-a);
|
|
||||||
}
|
|
||||||
.grid-item-image .grid-item-lower-content .link,
|
|
||||||
.grid-item-image .grid-item-lower-content .note,
|
|
||||||
.grid-item-image .grid-item-lower-content .quote,
|
|
||||||
.grid-item-image .grid-item-lower-content .term,
|
|
||||||
.grid-item-image .grid-item-lower-content .tags,
|
|
||||||
.grid-item-image .grid-item-lower-content .auth,
|
|
||||||
.grid-item-image .grid-item-lower-content .prog {
|
|
||||||
color: var(--color-content-image-t);
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item-image .grid-item-lower-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .grid-item-lower-content {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
.tags a {
|
|
||||||
color: var(--color-content-item-i);
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
.grid-item:hover .tags a {
|
|
||||||
color: var(--color-content-item-e);
|
|
||||||
}
|
|
||||||
.grid-item:hover .tags a:hover {
|
|
||||||
background-color: var(--color-content-item-a);
|
|
||||||
color: var(--color-content-bg-e);
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .tags a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.grid-item-image:hover .tags a:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SMALL ICONS */
|
|
||||||
.textIcon {
|
|
||||||
margin-right: var(--size-item-elem-sep);
|
|
||||||
color: var(--color-content-item-s);
|
|
||||||
}
|
|
||||||
.grid-item:hover .textIcon {
|
|
||||||
color: var(--color-content-item-i);
|
|
||||||
}
|
}
|
||||||
@ -89,13 +89,13 @@ function View()
|
|||||||
{
|
{
|
||||||
if (typeof value.WIDE !== 'undefined' && value.WIDE)
|
if (typeof value.WIDE !== 'undefined' && value.WIDE)
|
||||||
{
|
{
|
||||||
itemClass += " grid-item--width2";
|
itemClass += " grid-itemwide";
|
||||||
}
|
}
|
||||||
else if (typeof value.QOTE !== 'undefined')
|
else if (typeof value.QOTE !== 'undefined')
|
||||||
{
|
{
|
||||||
if (Array.isArray(value.QOTE) && value.QOTE.length > 4)
|
if (Array.isArray(value.QOTE) && value.QOTE.length > 4)
|
||||||
{
|
{
|
||||||
itemClass += " grid-item--width2";
|
itemClass += " grid-itemwide";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -323,194 +323,162 @@ function View()
|
|||||||
if (window.showAdd != undefined && window.showAdd)
|
if (window.showAdd != undefined && window.showAdd)
|
||||||
{
|
{
|
||||||
// ADD
|
// ADD
|
||||||
menuContent += `<a href='#add'>`;
|
menuContent += `<div class="menu-itemgroup">`;
|
||||||
menuContent += `<div class="menu-item"><b>a</b>dd</div>`;
|
menuContent += `<a href='#add' class="menu-item">`;
|
||||||
|
menuContent += `<b>a</b>dd`;
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
|
menuContent += `</div>`;
|
||||||
menuContent += `<div class="menu-spacer"></div>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TOTAL
|
// TOTAL
|
||||||
menuContent += `<a href='#'>`;
|
menuContent += `<div class="menu-itemgroup">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<a href='#' class="menu-item">`;
|
||||||
menuContent += `<div class="count">${value.total}</div>`;
|
menuContent += `<div class="menu-itemcount">${value.total}</div>`;
|
||||||
menuContent += `<i class="fas fa-asterisk"></i>`;
|
menuContent += `<i class="menu-itemicon fas fa-asterisk"></i>`;
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
|
menuContent += `</div>`;
|
||||||
|
|
||||||
// DONE
|
// DONE
|
||||||
menuContent += `<div class="menu-spacer"></div>`;
|
menuContent += `<div class="menu-itemgroup">`;
|
||||||
|
|
||||||
menuContent += `<a href='#done-true'>`;
|
menuContent += `<a href='#done-true' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.done}</div>`;
|
||||||
menuContent += `<div class="count">${value.done}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-check"></i>`;
|
||||||
menuContent += `<i class="fas fa-check"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
|
|
||||||
menuContent += `<a href='#done-false'>`;
|
menuContent += `<a href='#done-false' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.total - value.done}</div>`;
|
||||||
menuContent += `<div class="count">${value.total - value.done}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-times"></i>`;
|
||||||
menuContent += `<i class="fas fa-times"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
|
|
||||||
menuContent += `<div class="menu-spacer"></div>`;
|
menuContent += `</div>`;
|
||||||
|
menuContent += `<div class="menu-itemgroup">`;
|
||||||
for (var ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++)
|
for (var ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++)
|
||||||
{
|
{
|
||||||
if (value.types[ty][0] == 'article')
|
if (value.types[ty][0] == 'article')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-article'>`;
|
menuContent += `<a href='#type-article' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon far fa-newspaper"></i>`;
|
||||||
menuContent += `<i class="far fa-newspaper"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'podcast')
|
else if (value.types[ty][0] == 'podcast')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-podcast'>`;
|
menuContent += `<a href='#type-podcast' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-podcast"></i>`;
|
||||||
menuContent += `<i class="fas fa-podcast"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'video')
|
else if (value.types[ty][0] == 'video')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-video'>`;
|
menuContent += `<a href='#type-video' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-tv"></i>`;
|
||||||
menuContent += `<i class="fas fa-tv"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'list')
|
else if (value.types[ty][0] == 'list')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-list'>`;
|
menuContent += `<a href='#type-list' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-file-alt"></i>`;
|
||||||
menuContent += `<i class="fas fa-file-alt"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'book')
|
else if (value.types[ty][0] == 'book')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-book'>`;
|
menuContent += `<a href='#type-book' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-book-open"></i>`;
|
||||||
menuContent += `<i class="fas fa-book-open"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'game')
|
else if (value.types[ty][0] == 'game')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-game'>`;
|
menuContent += `<a href='#type-game' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-gamepad"></i>`;
|
||||||
menuContent += `<i class="fas fa-gamepad"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'service')
|
else if (value.types[ty][0] == 'service')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-service'>`;
|
menuContent += `<a href='#type-service' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-server"></i>`;
|
||||||
menuContent += `<i class="fas fa-server"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'lecture')
|
else if (value.types[ty][0] == 'lecture')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-lecture'>`;
|
menuContent += `<a href='#type-lecture' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-chalkboard-teacher"></i>`;
|
||||||
menuContent += `<i class="fas fa-chalkboard-teacher"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'quote')
|
else if (value.types[ty][0] == 'quote')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-quote'>`;
|
menuContent += `<a href='#type-quote' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-comment"></i>`;
|
||||||
menuContent += `<i class="fas fa-comment"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'tool')
|
else if (value.types[ty][0] == 'tool')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-tool'>`;
|
menuContent += `<a href='#type-tool' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-wrench"></i>`;
|
||||||
menuContent += `<i class="fas fa-wrench"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'music')
|
else if (value.types[ty][0] == 'music')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-music'>`;
|
menuContent += `<a href='#type-music' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-music"></i>`;
|
||||||
menuContent += `<i class="fas fa-music"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'image')
|
else if (value.types[ty][0] == 'image')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-image'>`;
|
menuContent += `<a href='#type-image' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-image"></i>`;
|
||||||
menuContent += `<i class="fas fa-image"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
else if (value.types[ty][0] == 'encyclopedia')
|
else if (value.types[ty][0] == 'encyclopedia')
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#type-encyclopedia'>`;
|
menuContent += `<a href='#type-encyclopedia' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.types[ty][1]}</div>`;
|
||||||
menuContent += `<div class="count">${value.types[ty][1]}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-globe"></i>`;
|
||||||
menuContent += `<i class="fas fa-globe"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
menuContent += `</div>`;
|
||||||
menuContent += `<div class="menu-spacer"></div>`;
|
|
||||||
|
|
||||||
// TERM
|
// TERM
|
||||||
|
menuContent += `<div class="menu-itemgroup">`;
|
||||||
if (value.terms > 0)
|
if (value.terms > 0)
|
||||||
{
|
{
|
||||||
// menuContent += `<div class="menu-item-space"></div>`;
|
// menuContent += `<div class="menu-item-space"></div>`;
|
||||||
menuContent += `<a href='#term'>`;
|
menuContent += `<a href='#term' class="menu-item">`;
|
||||||
menuContent += `<div class="menu-item">`;
|
menuContent += `<div class="menu-itemcount">${value.terms}</div>`;
|
||||||
menuContent += `<div class="count">${value.terms}</div>`;
|
menuContent += `<i class="menu-itemicon fas fa-ribbon"></i>`;
|
||||||
menuContent += `<i class="fas fa-ribbon"></i>`;
|
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
menuContent += `<div class="menu-spacer"></div>`;
|
menuContent += `</div>`;
|
||||||
|
|
||||||
// TAGS
|
// TAGS
|
||||||
|
menuContent += `<div class="menu-itemgroup">`;
|
||||||
if (value.tags.length > 0)
|
if (value.tags.length > 0)
|
||||||
{
|
{
|
||||||
menuContent += `<div class="menu-tag-container">`;
|
menuContent += `<div class="menu-tagcontainer">`;
|
||||||
menuContent += `<i class="fas fa-tag"></i>`;
|
menuContent += `<i class="menu-tagicon fas fa-tag"></i>`;
|
||||||
for (var t = 0; t < Math.min(value.types.length, SETTINGS.STATSNUMTAGS); t++)
|
for (var t = 0; t < Math.min(value.types.length, SETTINGS.STATSNUMTAGS); t++)
|
||||||
{
|
{
|
||||||
menuContent += `<a href='#tag-${value.tags[t][0]}'>`;
|
menuContent += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
|
||||||
menuContent += `<div class="menu-tag">`;
|
|
||||||
// menuContent += `<i class="fas fa-tag textIcon"></i>`;
|
// menuContent += `<i class="fas fa-tag textIcon"></i>`;
|
||||||
menuContent += `<div class="menu-tag-count">${value.tags[t][1]}</div>`;
|
menuContent += `<div class="menu-tagcount">${value.tags[t][1]}</div>`;
|
||||||
menuContent += `<div class="menu-tag-label">${value.tags[t][0]}</div>`;
|
menuContent += `<div class="menu-taglabel">${value.tags[t][0]}</div>`;
|
||||||
menuContent += `</div>`;
|
|
||||||
menuContent += `</a>`;
|
menuContent += `</a>`;
|
||||||
}
|
}
|
||||||
menuContent += `</div>`;
|
menuContent += `</div>`;
|
||||||
}
|
}
|
||||||
|
menuContent += `</div>`;
|
||||||
|
|
||||||
this.menu.innerHTML = ``;
|
this.menu.innerHTML = ``;
|
||||||
this.menu.innerHTML += menuContent;
|
this.menu.innerHTML += menuContent;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user