mirror of https://github.com/kurisufriend/0x40-web
- Mostly use BEM now - No longer use IDs for anything (except labels for inputs, but these are generated to not collide) - Better organise CSS - Remove some redundant CSS - No longer have any HTML, all generated - Canvas now renders at any size - Changed some settings - Add new super minimal "mini" UI - Probably some other stuff since I haven't committed in forevermaster
William Toohey
9 years ago
parent
94a12f941d
commit
2df280e071
@ -0,0 +1,188 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: 'PetMe64Web'; |
||||||
|
font-style: normal; |
||||||
|
font-weight: normal; |
||||||
|
-webkit-font-smoothing: none; |
||||||
|
font-smooth: never; |
||||||
|
src: url("../fonts/PetMe64.woff") format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'icomoon'; |
||||||
|
src: url('../fonts/HuesExtra.eot?gmxg3s'); |
||||||
|
src: url('../fonts/HuesExtra.eot?gmxg3s#iefix') format('embedded-opentype'), |
||||||
|
url('../fonts/HuesExtra.ttf?gmxg3s') format('truetype'), |
||||||
|
url('../fonts/HuesExtra.woff?gmxg3s') format('woff'), |
||||||
|
url('../fonts/HuesExtra.svg?gmxg3s#icomoon') format('svg'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-root { |
||||||
|
height: 100%; |
||||||
|
margin: 0; padding: 0; |
||||||
|
overflow: hidden; |
||||||
|
font-family: 'PetMe64Web'; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-root h1, .hues-root h2, .hues-root h3 { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-root h1 { |
||||||
|
font-size: 15pt; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-root h2 { |
||||||
|
font-size: 10pt; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.hues-root h3 { |
||||||
|
font-size: 7pt; |
||||||
|
} |
||||||
|
|
||||||
|
.hidden { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.invisible { |
||||||
|
visibility: hidden !important; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-icon { |
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */ |
||||||
|
font-family: 'icomoon' !important; |
||||||
|
speak: none; |
||||||
|
font-style: normal; |
||||||
|
font-weight: normal; |
||||||
|
font-variant: normal; |
||||||
|
text-transform: none; |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
/* Better Font Rendering =========== */ |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-canvas { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
padding: 0; |
||||||
|
z-index: -10; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-visualiser { |
||||||
|
position:absolute; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-preloader { |
||||||
|
/* first 2 colours are the loaded colour, next 2 are unloaded */ |
||||||
|
background: linear-gradient(to right, #fff 0%,#fff 50%,#ddd 50%,#ddd 100%); |
||||||
|
background-size: 200% 100%; |
||||||
|
background-position: 100% 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display:flex; |
||||||
|
justify-content:center; |
||||||
|
align-items:center; |
||||||
|
flex-direction: column; |
||||||
|
font-size: 25pt; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
z-index: 10; |
||||||
|
visibility: visible; |
||||||
|
opacity: 1; |
||||||
|
transition: visibility 1s linear, opacity 1s linear, background-position 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-preloader--loaded { |
||||||
|
visibility: hidden; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-preloader__text { |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-preloader__subtext { |
||||||
|
font-size: 12pt; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-preloader__subtext span{ |
||||||
|
font-size: 8pt; |
||||||
|
opacity: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
.unstyled-link { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button { |
||||||
|
font-size: 10px; |
||||||
|
margin: 3px 2px; |
||||||
|
padding: 3px; |
||||||
|
background-color: rgba(127,127,127, 0.5); |
||||||
|
border-color: rgb(0,0,0); |
||||||
|
border-width: 1px; |
||||||
|
border-style: solid; |
||||||
|
cursor: pointer; |
||||||
|
/* Don't want double click to select */ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button--loaded { |
||||||
|
background-color: rgba(0,127,0,0.5); |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button--disabled { |
||||||
|
color: #777; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button:hover { |
||||||
|
background: rgba(255,255,255, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button--loaded:hover { |
||||||
|
background-color: rgba(0,127,0,0.5); |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button--disabled:hover { |
||||||
|
background-color: rgba(127,127,127, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.hues-button--glow { |
||||||
|
animation-name: glow; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes glow { |
||||||
|
from { |
||||||
|
background-color: rgba(127,127,127, 0.5); |
||||||
|
} |
||||||
|
50% { |
||||||
|
background-color: rgba(200,220,200, 0.5); |
||||||
|
} |
||||||
|
to { |
||||||
|
background-color: rgba(127,127,127, 0.5); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,233 +0,0 @@ |
|||||||
#huesResources { |
|
||||||
position: relative; |
|
||||||
margin: 5px; |
|
||||||
height: 385px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
.res-packscontainer, .res-packcontainer { |
|
||||||
position: absolute; |
|
||||||
} |
|
||||||
|
|
||||||
.res-packscontainer { |
|
||||||
width: 43%; |
|
||||||
left: 0; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.res-packcontainer { |
|
||||||
width: 55%; |
|
||||||
height: 100%; |
|
||||||
right: 0; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.res-header { |
|
||||||
padding: 5px 0px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-curheader { |
|
||||||
padding-top: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packlist { |
|
||||||
height: 120px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packlist.noremotes { |
|
||||||
height: 305px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-remotelist { |
|
||||||
height: 155px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-container { |
|
||||||
font-size: 11px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-bar { |
|
||||||
height:5px; /* Can be anything */ |
|
||||||
position: relative; |
|
||||||
background: #000; |
|
||||||
border-radius: 25px; |
|
||||||
padding: 2px; |
|
||||||
margin: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-filled { |
|
||||||
display: block; |
|
||||||
height: 100%; |
|
||||||
border-radius: 8px; |
|
||||||
background-color: rgb(43,194,83); |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-texts { |
|
||||||
font-size: 9px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-current { |
|
||||||
position: absolute; |
|
||||||
left: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-top { |
|
||||||
position: absolute; |
|
||||||
right: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-progress-percent { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.res-list { |
|
||||||
border: 2px solid black; |
|
||||||
background: rgba(255,255,255,0.3); |
|
||||||
overflow: auto; |
|
||||||
overflow-x: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem { |
|
||||||
font-size: 10px; |
|
||||||
border-bottom: 1px solid black; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem > span { |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
padding: 2px; |
|
||||||
|
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem :hover { |
|
||||||
background: rgba(255,255,255,0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem input[type=checkbox] { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem > label { |
|
||||||
content: ""; |
|
||||||
|
|
||||||
width: 12px; |
|
||||||
height: 10px; |
|
||||||
margin: auto 2px; |
|
||||||
|
|
||||||
background-color: #ccc; |
|
||||||
border: 1px solid black; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem input[type=checkbox]:before { |
|
||||||
border-radius: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
.res-listitem input[type=checkbox]:checked + label { |
|
||||||
background-color: #222; |
|
||||||
text-align: center; |
|
||||||
line-height: 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.res-buttons { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
padding: 0px 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.res-buttons.hidden { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
#res-countscontainer { |
|
||||||
position: absolute; |
|
||||||
bottom: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.res-counts { |
|
||||||
position: absolute; |
|
||||||
right: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packinfo { |
|
||||||
margin-top: 5px; |
|
||||||
font-size: 9px; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packcreator > a:link, #res-packcreator > a:visited { |
|
||||||
color: inherit; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packdesc { |
|
||||||
border: 3px solid gray; |
|
||||||
background: rgba(255,255,255,0.5); |
|
||||||
font-size: 9px; |
|
||||||
height: 85px; |
|
||||||
margin: 2px; |
|
||||||
padding: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packtabs > label { |
|
||||||
display: table-cell; |
|
||||||
border: 2px solid black; |
|
||||||
padding: 5px; |
|
||||||
cursor: pointer; |
|
||||||
/* Actually wider than the container, but has a centering effect */ |
|
||||||
width: 200px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packtabs > input:checked + label { |
|
||||||
background: rgba(255,255,255,0.3); |
|
||||||
border-bottom: none; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packtabs > label:hover { |
|
||||||
background: rgba(255,255,255,0.3); |
|
||||||
} |
|
||||||
|
|
||||||
#res-songlist, #res-imagelist { |
|
||||||
display: none; |
|
||||||
height: 170px; |
|
||||||
border-top: none; |
|
||||||
} |
|
||||||
|
|
||||||
#res-songtab:checked ~ #res-songlist, |
|
||||||
#res-imagetab:checked ~ #res-imagelist { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
#res-packbuttons > .res-button { |
|
||||||
flex-grow: 1; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
#res-enabledsonglist, #res-enabledimagelist { |
|
||||||
display: block; |
|
||||||
position: absolute; |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
max-height: 150px; |
|
||||||
overflow: auto; |
|
||||||
} |
|
||||||
|
|
||||||
#res-enabledsonglist.hidden, #res-enabledimagelist.hidden { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
#res-enabledsonglist { |
|
||||||
width: 515px; |
|
||||||
} |
|
||||||
|
|
||||||
#res-enabledimagelist { |
|
||||||
width: 315px; |
|
||||||
} |
|
||||||
@ -0,0 +1,201 @@ |
|||||||
|
.respacks { |
||||||
|
display: flex; |
||||||
|
box-sizing: border-box; |
||||||
|
width: 640px; |
||||||
|
|
||||||
|
margin: 5px; |
||||||
|
height: 400px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks__manager, .respacks__display { |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks__manager { |
||||||
|
width: 40%; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks__display { |
||||||
|
width: 60%; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks__header { |
||||||
|
padding: 5px 0; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.resource-list { |
||||||
|
flex-grow: 1; |
||||||
|
|
||||||
|
border: 2px solid black; |
||||||
|
background: rgba(255,255,255,0.3); |
||||||
|
overflow: auto; |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.resource-list--fill { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem { |
||||||
|
font-size: 10px; |
||||||
|
border-bottom: 1px solid black; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem > span { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 2px; |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem :hover { |
||||||
|
background: rgba(255,255,255,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem input[type=checkbox] { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem > label { |
||||||
|
content: ""; |
||||||
|
|
||||||
|
width: 12px; |
||||||
|
height: 10px; |
||||||
|
margin: auto 2px; |
||||||
|
|
||||||
|
background-color: #ccc; |
||||||
|
border: 1px solid black; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem input[type=checkbox]:before { |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-listitem input[type=checkbox]:checked + label { |
||||||
|
background-color: #222; |
||||||
|
text-align: center; |
||||||
|
line-height: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-buttons { |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-buttons--fill > .hues-button { |
||||||
|
flex-grow: 1; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-bottom-container { |
||||||
|
height: 35px; |
||||||
|
} |
||||||
|
|
||||||
|
.progress-container { |
||||||
|
height: 35px; |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.progress-bar { |
||||||
|
height:5px; /* Can be anything */ |
||||||
|
position: relative; |
||||||
|
background: #000; |
||||||
|
border-radius: 25px; |
||||||
|
padding: 2px; |
||||||
|
margin: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.progress-bar--filled { |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
border-radius: 8px; |
||||||
|
background-color: rgb(43,194,83); |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.stat-text { |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin: 0 5px; |
||||||
|
font-size: 9px; |
||||||
|
} |
||||||
|
|
||||||
|
.respack-description { |
||||||
|
flex-shrink: 0; |
||||||
|
border: 3px solid gray; |
||||||
|
background: rgba(255,255,255,0.5); |
||||||
|
font-size: 9px; |
||||||
|
margin: 2px; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.respack-tab-container { |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.respack-tab { |
||||||
|
box-sizing: border-box; |
||||||
|
border: 2px solid black; |
||||||
|
padding: 5px; |
||||||
|
cursor: pointer; |
||||||
|
/* Actually wider than the container, but has a centering effect */ |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.respack-tab--checked { |
||||||
|
background: rgba(255,255,255,0.3); |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
|
||||||
|
.respack-tab:hover { |
||||||
|
background: rgba(255,255,255,0.3); |
||||||
|
} |
||||||
|
|
||||||
|
.respack-tab__content { |
||||||
|
display: none; |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
|
||||||
|
.respack-tab__content--checked { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-count-container { |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-enabledsongs, .respacks-enabledimages { |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
max-height: 150px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-enabledsongs { |
||||||
|
width: 515px; |
||||||
|
} |
||||||
|
|
||||||
|
.respacks-enabledimages { |
||||||
|
width: 315px; |
||||||
|
} |
||||||
@ -1,377 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: 'PetMe64Web'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: normal; |
|
||||||
-webkit-font-smoothing: none; |
|
||||||
font-smooth: never; |
|
||||||
src: local("PetMe64Web"); |
|
||||||
src: local('Pet Me 64'), local('Pet Me 64'), url("../fonts/PetMe64.woff") format('woff'); |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'icomoon'; |
|
||||||
src: url('../fonts/HuesExtra.eot?gmxg3s'); |
|
||||||
src: url('../fonts/HuesExtra.eot?gmxg3s#iefix') format('embedded-opentype'), |
|
||||||
url('../fonts/HuesExtra.ttf?gmxg3s') format('truetype'), |
|
||||||
url('../fonts/HuesExtra.woff?gmxg3s') format('woff'), |
|
||||||
url('../fonts/HuesExtra.svg?gmxg3s#icomoon') format('svg'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.hues-icon { |
|
||||||
/* use !important to prevent issues with browser extensions that change fonts */ |
|
||||||
font-family: 'icomoon' !important; |
|
||||||
speak: none; |
|
||||||
font-style: normal; |
|
||||||
font-weight: normal; |
|
||||||
font-variant: normal; |
|
||||||
text-transform: none; |
|
||||||
line-height: 1; |
|
||||||
|
|
||||||
/* Better Font Rendering =========== */ |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
html, body { |
|
||||||
height: 100%; |
|
||||||
margin: 0; padding: 0; |
|
||||||
overflow: hidden; |
|
||||||
font-family: 'PetMe64Web'; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
h1 { |
|
||||||
font-size: 15pt; |
|
||||||
} |
|
||||||
|
|
||||||
h2 { |
|
||||||
font-size: 10pt; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
font-size: 7pt; |
|
||||||
} |
|
||||||
|
|
||||||
h1, h2, h3 { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
#about { |
|
||||||
border-bottom: 2px solid black; |
|
||||||
} |
|
||||||
|
|
||||||
#reference { |
|
||||||
display:flex; |
|
||||||
align-items:center; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.info-ref { |
|
||||||
float: left; |
|
||||||
font-size: 8pt; |
|
||||||
text-align: left; |
|
||||||
background: rgba(100,100,100,0.3); |
|
||||||
border-radius: 15px; |
|
||||||
margin: 10px; |
|
||||||
padding: 0px 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.info-ref h3 { |
|
||||||
font-size: 10pt; |
|
||||||
margin: 10px 0px 0px 10px; |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
|
|
||||||
.info-ref ul { |
|
||||||
list-style-type: none; |
|
||||||
padding: 0px; |
|
||||||
margin: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.info-ref li { |
|
||||||
/* Chrome rendering fix */ |
|
||||||
line-height: 9pt; |
|
||||||
} |
|
||||||
|
|
||||||
#waifu, #snow { |
|
||||||
position: absolute; |
|
||||||
display: block; |
|
||||||
height: 100%; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
#waifu { |
|
||||||
z-index: -10; |
|
||||||
} |
|
||||||
|
|
||||||
#snow { |
|
||||||
z-index: -9; |
|
||||||
} |
|
||||||
|
|
||||||
#snow.hidden { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
#visualiser { |
|
||||||
position:absolute; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
|
|
||||||
#visualiser.hidden { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
#preloadHelper { |
|
||||||
/* first 2 colours are the loaded colour, next 2 are unloaded */ |
|
||||||
background: linear-gradient(to right, #fff 0%,#fff 50%,#ddd 50%,#ddd 100%); |
|
||||||
background-size: 200% 100%; |
|
||||||
background-position: 100% 0; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display:flex; |
|
||||||
justify-content:center; |
|
||||||
align-items:center; |
|
||||||
flex-direction: column; |
|
||||||
font-size: 25pt; |
|
||||||
|
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
z-index: 10; |
|
||||||
visibility: visible; |
|
||||||
opacity: 1; |
|
||||||
transition: visibility 1s linear, opacity 1s linear, background-position 0.5s ease; |
|
||||||
} |
|
||||||
|
|
||||||
#preloadHelper.loaded { |
|
||||||
visibility: hidden; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
#preloader { |
|
||||||
display: block; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
#preSub { |
|
||||||
font-size: 12pt; |
|
||||||
} |
|
||||||
|
|
||||||
#preSub span { |
|
||||||
font-size: 8pt; |
|
||||||
opacity: 0.7; |
|
||||||
} |
|
||||||
|
|
||||||
#tabs { |
|
||||||
margin: -1px; |
|
||||||
padding-top: 22px; |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
input[type=radio] { |
|
||||||
display:none; |
|
||||||
} |
|
||||||
|
|
||||||
.tab-label{ |
|
||||||
flex-grow: 1; |
|
||||||
cursor: pointer; |
|
||||||
padding: 10px; |
|
||||||
border: 2px solid black; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.tab-label.checked { |
|
||||||
border-bottom: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
l.tab-label:hover { |
|
||||||
background: rgba(255,255,255,0.3); |
|
||||||
} |
|
||||||
|
|
||||||
.tab-content { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
#tab-resources:checked ~ #tab-resources-content, |
|
||||||
#tab-editor:checked ~ #tab-editor-content, |
|
||||||
#tab-options:checked ~ #tab-options-content, |
|
||||||
#tab-info:checked ~ #tab-info-content { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
#settingsHelper { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
position: absolute; |
|
||||||
margin-top: -15px; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
#settingsWindow { |
|
||||||
position: relative; |
|
||||||
z-index: 9; |
|
||||||
min-width: 640px; |
|
||||||
min-height: 470px; |
|
||||||
max-height: calc(100% - 50px); |
|
||||||
margin: 10px; |
|
||||||
|
|
||||||
background: rgba(200,200,200, 0.7); |
|
||||||
border-color: black; |
|
||||||
border-width: 2px; |
|
||||||
border-style: solid; |
|
||||||
} |
|
||||||
|
|
||||||
#huesSettings { |
|
||||||
padding: 5px; |
|
||||||
width: 630px; |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
|
|
||||||
#closeButton { |
|
||||||
height: 20px; |
|
||||||
width: 20px; |
|
||||||
font-size: 20px; |
|
||||||
color: white; |
|
||||||
position: absolute; |
|
||||||
right: 0px; |
|
||||||
background-color: rgb(128,128,128); |
|
||||||
border: 1px solid black; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
#closeButton:hover { |
|
||||||
background-color: rgb(200,200,200); |
|
||||||
} |
|
||||||
|
|
||||||
.settings-category { |
|
||||||
font-size: 16px; |
|
||||||
width: 50%; |
|
||||||
float: left; |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.settings-individual{ |
|
||||||
font-size: 8pt; |
|
||||||
/* Chrome rendering fix */ |
|
||||||
line-height: 9pt; |
|
||||||
padding-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.settings-buttons{ |
|
||||||
margin: 5px 2px 8px -5px; |
|
||||||
} |
|
||||||
|
|
||||||
.settings-checkbox{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.settings-label { |
|
||||||
font-size: 7pt; |
|
||||||
margin: 10px 2px; |
|
||||||
padding: 3px; |
|
||||||
background: rgba(127,127,127, 0.5); |
|
||||||
border-color: rgb(0,0,0); |
|
||||||
border-width: 1px; |
|
||||||
border-style: solid; |
|
||||||
cursor: pointer; |
|
||||||
/* Don't want double click to select */ |
|
||||||
-webkit-touch-callout: none; |
|
||||||
-webkit-user-select: none; |
|
||||||
-khtml-user-select: none; |
|
||||||
-moz-user-select: none; |
|
||||||
-ms-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
label.settings-label:hover { |
|
||||||
background: rgba(200,200,200,0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.settings-input { |
|
||||||
font-family: 'PetMe64Web'; |
|
||||||
font-size: 7pt; |
|
||||||
padding: 3px; |
|
||||||
margin: -6px 0; |
|
||||||
background: rgba(127,127,127, 0.5); |
|
||||||
border-color: rgb(0,0,0); |
|
||||||
border-width: 1px; |
|
||||||
border-style: solid; |
|
||||||
width: 2em; |
|
||||||
} |
|
||||||
|
|
||||||
#huesSettings input[type="radio"]:checked + label { |
|
||||||
background: rgba(255,255,255, 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button { |
|
||||||
font-size: 10px; |
|
||||||
margin: 3px 2px; |
|
||||||
padding: 3px; |
|
||||||
background-color: rgba(127,127,127, 0.5); |
|
||||||
border-color: rgb(0,0,0); |
|
||||||
border-width: 1px; |
|
||||||
border-style: solid; |
|
||||||
cursor: pointer; |
|
||||||
/* Don't want double click to select */ |
|
||||||
-webkit-touch-callout: none; |
|
||||||
-webkit-user-select: none; |
|
||||||
-khtml-user-select: none; |
|
||||||
-moz-user-select: none; |
|
||||||
-ms-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button.hidden { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button.loaded { |
|
||||||
background-color: rgba(0,127,0,0.5); |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button.disabled { |
|
||||||
color: #777; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button:hover { |
|
||||||
background: rgba(255,255,255, 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button.loaded:hover { |
|
||||||
background-color: rgba(0,127,0,0.5); |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button.disabled:hover { |
|
||||||
background-color: rgba(127,127,127, 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.hues-button.glow { |
|
||||||
animation-name: glow; |
|
||||||
animation-duration: 2s; |
|
||||||
animation-iteration-count: infinite; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes glow { |
|
||||||
from { |
|
||||||
background-color: rgba(127,127,127, 0.5); |
|
||||||
} |
|
||||||
50% { |
|
||||||
background-color: rgba(200,220,200, 0.5); |
|
||||||
} |
|
||||||
to { |
|
||||||
background-color: rgba(127,127,127, 0.5); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,171 @@ |
|||||||
|
/* Copyright (c) 2015 William Toohey <will@mon.im> |
||||||
|
* |
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
* of this software and associated documentation files (the "Software"), to deal |
||||||
|
* in the Software without restriction, including without limitation the rights |
||||||
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
* copies of the Software, and to permit persons to whom the Software is |
||||||
|
* furnished to do so, subject to the following conditions: |
||||||
|
* |
||||||
|
* The above copyright notice and this permission notice shall be included in |
||||||
|
* all copies or substantial portions of the Software. |
||||||
|
* |
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
||||||
|
* THE SOFTWARE. |
||||||
|
*/ |
||||||
|
|
||||||
|
(function(window, document) { |
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function HuesWindow(root, defaults) { |
||||||
|
this.eventListeners = { |
||||||
|
/* callback windowshown(shown) |
||||||
|
* |
||||||
|
* When the window is shown, hidden or toggled this fires. |
||||||
|
* 'shown' is true if the window was made visible, false otherwise |
||||||
|
*/ |
||||||
|
windowshown : [], |
||||||
|
/* callback tabselected(tabName) |
||||||
|
* |
||||||
|
* The name of the tab that was selected |
||||||
|
*/ |
||||||
|
tabselected : [] |
||||||
|
}; |
||||||
|
|
||||||
|
this.hasUI = defaults.enableWindow; |
||||||
|
|
||||||
|
if(!this.hasUI) |
||||||
|
return; |
||||||
|
|
||||||
|
this.window = document.createElement("div"); |
||||||
|
this.window.className = "hues-win-helper"; |
||||||
|
root.appendChild(this.window); |
||||||
|
|
||||||
|
let actualWindow = document.createElement("div"); |
||||||
|
actualWindow.className = "hues-win"; |
||||||
|
this.window.appendChild(actualWindow); |
||||||
|
|
||||||
|
let closeButton = document.createElement("div"); |
||||||
|
closeButton.className = "hues-win__closebtn"; |
||||||
|
closeButton.onclick = this.hide.bind(this); |
||||||
|
actualWindow.appendChild(closeButton); |
||||||
|
|
||||||
|
this.tabContainer = document.createElement("div"); |
||||||
|
this.tabContainer.className = "hues-win__tabs"; |
||||||
|
actualWindow.appendChild(this.tabContainer); |
||||||
|
|
||||||
|
this.contentContainer = document.createElement("div"); |
||||||
|
this.contentContainer.className = "hues-win__content"; |
||||||
|
actualWindow.appendChild(this.contentContainer); |
||||||
|
|
||||||
|
this.contents = []; |
||||||
|
this.tabs = []; |
||||||
|
this.tabNames = []; |
||||||
|
|
||||||
|
|
||||||
|
if(defaults.showWindow) { |
||||||
|
this.show(); |
||||||
|
} else { |
||||||
|
this.hide(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
HuesWindow.prototype.addTab = function(tabName, tabContent) { |
||||||
|
if(!this.hasUI) |
||||||
|
return; |
||||||
|
|
||||||
|
let label = document.createElement("div"); |
||||||
|
label.textContent = tabName; |
||||||
|
label.className = "tab-label"; |
||||||
|
label.onclick = this.selectTab.bind(this, tabName); |
||||||
|
this.tabContainer.appendChild(label); |
||||||
|
this.tabs.push(label); |
||||||
|
this.tabNames.push(tabName); |
||||||
|
|
||||||
|
let content = document.createElement("div"); |
||||||
|
content.className = "tab-content"; |
||||||
|
content.appendChild(tabContent); |
||||||
|
this.contentContainer.appendChild(content); |
||||||
|
this.contents.push(content); |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.selectTab = function(tabName, dontShowWin) { |
||||||
|
if(!this.hasUI) |
||||||
|
return; |
||||||
|
if(!dontShowWin) { |
||||||
|
this.show(); |
||||||
|
} |
||||||
|
for(let i = 0; i < this.tabNames.length; i++) { |
||||||
|
let name = this.tabNames[i]; |
||||||
|
if(tabName.toLowerCase() == name.toLowerCase()) { |
||||||
|
this.contents[i].classList.add("tab-content--active"); |
||||||
|
this.tabs[i].classList.add("tab-label--active"); |
||||||
|
this.callEventListeners("tabselected", name); |
||||||
|
} else { |
||||||
|
this.contents[i].classList.remove("tab-content--active"); |
||||||
|
this.tabs[i].classList.remove("tab-label--active"); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.hide = function() { |
||||||
|
if(!this.hasUI) |
||||||
|
return; |
||||||
|
|
||||||
|
this.window.classList.add("hidden"); |
||||||
|
this.callEventListeners("windowshown", false); |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.show = function() { |
||||||
|
if(!this.hasUI) |
||||||
|
return; |
||||||
|
|
||||||
|
this.window.classList.remove("hidden"); |
||||||
|
this.callEventListeners("windowshown", true); |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.toggle = function() { |
||||||
|
if(!this.hasUI) |
||||||
|
return; |
||||||
|
if(this.window.classList.contains("hidden")) { |
||||||
|
this.show(); |
||||||
|
} else { |
||||||
|
this.hide(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.callEventListeners = function(ev) { |
||||||
|
let args = Array.prototype.slice.call(arguments, 1); |
||||||
|
this.eventListeners[ev].forEach(function(callback) { |
||||||
|
callback.apply(null, args); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.addEventListener = function(ev, callback) { |
||||||
|
ev = ev.toLowerCase(); |
||||||
|
if (typeof(this.eventListeners[ev]) !== "undefined") { |
||||||
|
this.eventListeners[ev].push(callback); |
||||||
|
} else { |
||||||
|
throw Error("Unknown event: " + ev); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
HuesWindow.prototype.removeEventListener = function(ev, callback) { |
||||||
|
ev = ev.toLowerCase(); |
||||||
|
if (typeof(this.eventListeners[ev]) !== "undefined") { |
||||||
|
this.eventListeners[ev] = this.eventListeners[ev].filter(function(a) { |
||||||
|
return (a !== callback); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
throw Error("Unknown event: " + ev); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
window.HuesWindow = HuesWindow; |
||||||
|
|
||||||
|
})(window, document); |
||||||
Loading…
Reference in new issue