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