tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add css refactor progress continued.

Browse Source
This commit is contained in:
kor 2018-09-16 02:15:16 +12:00
parent 3adec77d3c
commit 5b47b03006
2 changed files with 71 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
docs/asset/style.css
View File

@ -63,6 +63,9 @@ body {
padding: 0em;
margin: 0;
}
::selection {
background: var(--color-bg);
}
/*MENU*/
.menu {
@ -203,6 +206,9 @@ body {
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;
@ -334,10 +340,10 @@ body {
right: 0px;
top: 0px;
}
.griditem-image .griditem-type i {
.griditem-image .griditem-typeicon {
display: none;
}
.griditem-image:hover .griditem-type i {
.griditem-image:hover .griditem-typeicon {
display: initial;
color: var(--color-image);
opacity: var(--alpha-enabled);
@ -346,7 +352,7 @@ body {
opacity: var(--alpha-enabled);
color: var(--color-item);
}
.griditem:hover .griditem-type:hover {
.griditem-type:hover i {
opacity: var(--alpha-ascent);
color: var(--color-itemascent);
}
@ -358,18 +364,50 @@ body {
.griditem-linkicon {
opacity: var(--alpha-idle);
}
.griditem:hover .griditem-linktitle {
.griditem-linktitle {
opacity: var(--alpha-enabled);
}
.griditem:hover a:hover .griditem-linktitle {
.griditem-link:hover .griditem-linktitle {
opacity: var(--alpha-ascent);
}
.griditem:hover .griditem-linkicon {
.griditem-linkicon {
opacity: var(--alpha-enabled);
}
/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
.griditem-note, .griditem-quote, .griditem-term, .griditem-tags, .griditem-auth, .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-auth,
.griditem:hover .griditem-prog {
opacity:; var(--alpha-enabled);
color: var(--color-item);
}
.griditem-image .griditem-containerlower .link,
.griditem-image .griditem-containerlower .griditem-note,
.griditem-image .griditem-containerlower .griditem-quote,
.griditem-image .griditem-containerlower .griditem-term,
.griditem-image .griditem-containerlower .griditem-tags,
.griditem-image .griditem-containerlower .griditem-auth,
.griditem-image .griditem-containerlower .griditem-prog {
color: var(--color-image);
}
.griditem-image .griditem-containerlower {
display: none;
}
.griditem-image:hover .griditem-containerlower {
display: initial;
}
@ -385,55 +423,22 @@ body {
/*TODO: refactor below; */
/* 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;
}
.griditem:hover .note,
.griditem:hover .quote,
.griditem:hover .term,
.griditem:hover .tags,
.griditem:hover .auth,
.griditem:hover .prog {
opacity:; var(--alpha-enabled);
color: var(--color-item);
}
.griditem-image .griditem-containerlower .link,
.griditem-image .griditem-containerlower .note,
.griditem-image .griditem-containerlower .quote,
.griditem-image .griditem-containerlower .term,
.griditem-image .griditem-containerlower .tags,
.griditem-image .griditem-containerlower .auth,
.griditem-image .griditem-containerlower .prog {
color: var(--color-image);
}
.griditem-image .griditem-containerlower {
display: none;
}
.griditem-image:hover .griditem-containerlower {
display: initial;
}
.tags a {
.griditem-tags a {
color: var(--color-item);
text-decoration:none;
}
.griditem:hover .tags a {
.griditem:hover .griditem-tags a {
color: var(--color-item);
}
.griditem:hover .tags a:hover {
.griditem:hover .griditem-tags a:hover {
background-color: var(--color-itemascent);
color: var(--color-itembg);
}
.griditem-image:hover .tags a {
.griditem-image:hover .griditem-tags a {
color: #fff;
}
.griditem-image:hover .tags a:hover {
.griditem-image:hover .griditem-tags a:hover {
color: #fff;
}

44
docs/logic/view.js
View File

@ -126,7 +126,7 @@ function View()
// LINK START
if (SETTINGS.SHOWLINK)
{
entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="griditem-link">`;
entry += `<a class="griditem-link" href="${String(value.LINK)}" id="${idUrl}">`;
}
}
@ -155,63 +155,61 @@ function View()
{
if (typeof value.TYPE !== 'undefined')
{
entry += `<a href='#type-${String(value.TYPE)}'>`;
entry += `<div class="griditem-type">`;
entry += `<a class="griditem-type" href='#type-${String(value.TYPE)}'>`;
if (value.TYPE == 'article')
{
entry += `<i class="far fa-newspaper"></i>`;
entry += `<i class="griditem-typeicon far fa-newspaper"></i>`;
}
else if (value.TYPE == 'podcast')
{
entry += `<i class="fas fa-podcast"></i>`;
entry += `<i class="griditem-typeicon fas fa-podcast"></i>`;
}
else if (value.TYPE == 'video')
{
entry += `<i class="fas fa-tv"></i>`;
entry += `<i class="griditem-typeicon fas fa-tv"></i>`;
}
else if (value.TYPE == 'list')
{
entry += `<i class="fas fa-file-alt"></i>`;
entry += `<i class="griditem-typeicon fas fa-file-alt"></i>`;
}
else if (value.TYPE == 'book')
{
entry += `<i class="fas fa-book-open"></i>`;
entry += `<i class="griditem-typeicon fas fa-book-open"></i>`;
}
else if (value.TYPE == 'game')
{
entry += `<i class="fas fa-gamepad"></i>`;
entry += `<i class="griditem-typeicon fas fa-gamepad"></i>`;
}
else if (value.TYPE == 'service')
{
entry += `<i class="fas fa-server"></i>`;
entry += `<i class="griditem-typeicon fas fa-server"></i>`;
}
else if (value.TYPE == 'lecture')
{
entry += `<i class="fas fa-chalkboard-teacher"></i>`;
entry += `<i class="griditem-typeicon fas fa-chalkboard-teacher"></i>`;
}
else if (value.TYPE == 'quote')
{
entry += `<i class="fas fa-comment"></i>`;
entry += `<i class="griditem-typeicon fas fa-comment"></i>`;
}
else if (value.TYPE == 'tool')
{
entry += `<i class="fas fa-wrench"></i>`;
entry += `<i class="griditem-typeicon fas fa-wrench"></i>`;
}
else if (value.TYPE == 'music')
{
entry += `<i class="fas fa-music"></i>`;
entry += `<i class="griditem-typeicon fas fa-music"></i>`;
}
else if (value.TYPE == 'image')
{
entry += `<i class="fas fa-image"></i>`;
entry += `<i class="griditem-typeicon fas fa-image"></i>`;
}
else if (value.TYPE == 'encyclopedia')
{
entry += `<i class="fas fa-globe"></i>`;
entry += `<i class="griditem-typeicon fas fa-globe"></i>`;
}
entry += `</div>`;
entry += `</a>`;
}
}
@ -230,7 +228,7 @@ function View()
{
if (typeof value.AUTH !== 'undefined')
{
entry += `<div class="auth"><i class="fas fa-user textIcon"></i>${value.AUTH}</div>`;
entry += `<div class="griditem-auth"><i class="fas fa-user textIcon"></i>${value.AUTH}</div>`;
}
}
@ -239,7 +237,7 @@ function View()
{
if (typeof value.TAGS !== 'undefined')
{
entry += `<div class="tags"><i class="fas fa-tag textIcon"></i>`;
entry += `<div class="griditem-tags"><i class="fas fa-tag textIcon"></i>`;
for (var i = 0; i < value.TAGS.length; i++)
{
entry += `<a href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
@ -257,7 +255,7 @@ function View()
{
if (typeof value.NOTE !== 'undefined')
{
entry += this.buildArrayElement(value.NOTE, "note", "fas fa-sticky-note textIcon");
entry += this.buildArrayElement(value.NOTE, "griditem-note", "fas fa-sticky-note textIcon");
}
}
@ -266,7 +264,7 @@ function View()
{
if (typeof value.QOTE !== 'undefined')
{
entry += this.buildArrayElement(value.QOTE, "quote", "fas fa-comment textIcon");
entry += this.buildArrayElement(value.QOTE, "griditem-quote", "fas fa-comment textIcon");
}
}
@ -275,7 +273,7 @@ function View()
{
if (typeof value.TERM !== 'undefined')
{
entry += this.buildArrayElement(value.TERM, "term", "fas fa-ribbon textIcon");
entry += this.buildArrayElement(value.TERM, "griditem-term", "fas fa-ribbon textIcon");
}
}
@ -284,7 +282,7 @@ function View()
{
if (typeof value.PROG !== 'undefined')
{
entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
entry += `<div class="griditem-prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
}
}