Skip to content

Commit

Permalink
Added more themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@L1ghtingBolt
L1ghtingBolt committed Dec 12, 2021
1 parent a31abd8 commit dd66361
Show file tree
Hide file tree
Showing 5 changed files with 275 additions and 45 deletions.
16 changes: 10 additions & 6 deletions src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<link rel="stylesheet" id="css" href="./assets/app.css" />
</head>

<body style="padding: 2rem; background-color:#212b42;"></body>
<body></body>
<div id="app-logo">
<div id="logo">Loading...</div>
</div>
Expand All @@ -19,18 +19,18 @@
<tbody>
<tr>
<td colspan="2">
<select id="keyboardpack-list" class="custom-input mb-0" style="width: 100%; margin-right: 10px; background-color: #5c7da5; color:#91b4d5;"></select>
<select id="keyboardpack-list" class="custom-input mb-0"></select>
</td>
<tr>
<td id="KeyVolSlider" style="width: 50%; color:#91b4d5;"; color=><span id="keyboard-volume-value-display" style="font-weight: bold; color:#91b4d5"></span></td>
<td id="KeyVolSlider"; color=><span id="keyboard-volume-value-display"></span></td>
<td style="width: 50%">
<input type="range" min="0" max="100" value="20" step="5" class="slider mb-0" id="keyvolume" style="width: 100%" />
</td>
</tr>
</tr>
<tr>
<td colspan="2">
<select id="mousepack-list" class="custom-input mb-0 hidden" style="width: 100%; margin-right: 10px; background-color: #5c7da5; color:#91b4d5;"></select>
<select id="mousepack-list" class="custom-input mb-0 hidden"></select>
<div style="text-align: right">
<small>
<a href="https://docs.google.com/spreadsheets/d/1PimUN_Qn3CWqfn-93YdVW8OWy8nzpz3w3me41S8S494/" class="open-in-browser">Get more soundpacks.</a>
Expand All @@ -39,7 +39,7 @@
</td>
</tr>
<tr>
<td id="MouseVolSlider" class="hidden" style="width: 50%; color:#001a0b;"; color=><span id="mouse-volume-value-display" class="hidden" style="font-weight: bold; color:#91b4d5"></span></td>
<td id="MouseVolSlider" class="hidden" style="width: 50%; color:#001a0b;"; color=><span id="mouse-volume-value-display" class="hidden"></span></td>
<td style="width: 50%">
<input type="range" min="0" max="100" value="20" step="5" class="slider mb-0 hidden" id="mousevolume" style="width: 100%" />
</td>
Expand All @@ -49,7 +49,11 @@
</tbody>
</table>
<div class="divider"></div>
<input type="file" class="input" name="upload" accept=".css" id="file-selection">Select CSS</input>
<label for="file-selection" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Select CSS
</label>

<input type="file" id="file-selection" name="upload" accept=".css" id="file-selection"></input>
<div style="color: #ebebeb; font-size: 12px; text-align: center">
<p>Made with ❤ by <a href="https://github.com/L1ghtingBolt/lightingvibes" class="open-in-browser">Forkerion</a></p>
<p>
Expand Down
72 changes: 44 additions & 28 deletions src/assets/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,58 @@ a:hover {
justify-content: center;
margin-bottom: 50px;
}
#input {
color: transparent;
}
#input::-webkit-file-upload-button {
visibility: hidden;
}
#input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;


body {
padding: 20px;
}

input[type="file"] {
display: none;
text-align: center;
margin: auto;
}
.custom-file-upload {
border: 1px solid #91b4d5;
border-radius: 4px;
background: #5c7da5;
display: flex;
padding: 6px 12px;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
color: #b8d3ec;
text-decoration: none;
text-align: center;
margin: auto;
}
.custom-file-input:hover::before {
border-color: black;

#keyboard-volume-value-display{
font-weight: bold; color:#91b4d5
}
.custom-file-input:active {
outline: 0;

#mouse-volume-value-display{
font-weight: bold; color:#91b4d5
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);

body{
padding: 2rem;
background-color:#212b42;
}

body {
padding: 20px;
#mousepack-list{
width: 100%;
margin-right: 10px;
background-color: #5c7da5;
color:#ffffff;
}

#keyboardpack-list{
width: 100%;
margin-right: 10px;
background-color: #5c7da5;
color:#ffffff;
}


#logo {
font-family: sans-serif;
transition: all 0.1s ease;
Expand Down
55 changes: 50 additions & 5 deletions src/assets/app2.css → src/assets/bluonkos.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
a,
a:hover {
color: #91b4d5;
color: #ffffff;
}

a:hover {
Expand All @@ -16,15 +16,60 @@ a:hover {
#logo {
font-family: sans-serif;
transition: all 0.1s ease;
box-shadow: 0 2px #91b4d5;
box-shadow: 0 2px #c6915e;
font-size: 3rem;
font-weight: 600;
background: #111111;
background: #f2ce83;
text-align: center;
border-radius: 0.5rem;
border: 2px solid #91b4d5;
border: 2px solid #c6915e;
padding: 1rem 2rem;
color: #91b4d5;
color: #ffffff;
}

body{
padding: 2rem;
background-color:#241963;
}

#mousepack-list{
width: 100%;
margin-right: 10px;
background-color: #446ad5;
color:#ffffff;
}

#keyboardpack-list{
width: 100%;
margin-right: 10px;
background-color: #446ad5;
color:#ffffff;
}

input[type="file"] {
display: none;
text-align: center;
margin: auto;
}
.custom-file-upload {
border: 1px solid #91b4d5;
border-radius: 4px;
background: #446ad5;
display: flex;
padding: 6px 12px;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
margin: auto;
}

#keyboard-volume-value-display{
font-weight: bold; color:#fff
}

#mouse-volume-value-display{
font-weight: bold; color:#fff
}

#logo.pressed {
Expand Down
165 changes: 165 additions & 0 deletions src/assets/watemelon.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
a,
a:hover {
color: #cdc6bc;
}

a:hover {
text-decoration: underline;
}

#app-logo {
display: flex;
justify-content: center;
margin-bottom: 50px;
}

#logo {
font-family: sans-serif;
transition: all 0.1s ease;
box-shadow: 0 2px #c82931;
font-size: 3rem;
font-weight: 600;
background: #d6686f;
text-align: center;
border-radius: 0.5rem;
border: 2px solid #c82931;
padding: 1rem 2rem;
color: #cdc6bc;
}

body{
padding: 2rem;
background-color:#1f4437;
}

#mousepack-list{
width: 100%;
margin-right: 10px;
background-color: #3e7a65;
color:#cdc6bc;
}

#keyboardpack-list{
width: 100%;
margin-right: 10px;
background-color: #3e7a65;
color:#cdc6bc;
}

input[type="file"] {
display: none;
text-align: center;
margin: auto;
}
.custom-file-upload {
border: 1px solid #d6686f;
border-radius: 4px;
background: #3e7a65;
display: flex;
padding: 6px 12px;
cursor: pointer;
color: #cdc6bc;
text-decoration: none;
text-align: center;
margin: auto;
}

#keyboard-volume-value-display{
font-weight: bold; color:#cdc6bc
}

#mouse-volume-value-display{
font-weight: bold; color:#cdc6bc
}

#logo.pressed {
box-shadow: 0 0;
margin-bottom: -2px;
margin-top: 2px;
}

.hidden {
display: none;
}

.divider {
display: block;
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-top: 1rem;
margin-bottom: 2rem;
}

#update-available {
padding: 8px 5px;
border: 1px solid #a8ffd6;
background: #161616;
border-radius: 5px;
}

#soundpack-bug {
padding: 8px 5px;
border: 1px solid #b5b682;
background: #161616;
border-radius: 5px;
}

.mb-0 {
margin-bottom: 0;
}

/* The slider itself */
.slider {
-webkit-appearance: none;
appearance: none;
height: 5px;
background: #5c7da5;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 5px;
margin-bottom: 10px;
}

/* Mouse-over effects */
.slider:hover {
opacity: 1;
/* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* Override default look */
appearance: none;
width: 20px;
/* Set a specific slider handle width */
height: 20px;
/* Slider handle height */
background: #1E1EB3;
/* Green background */
cursor: pointer;
/* Cursor on hover */
border-radius: 50%;
}

.slider::-moz-range-thumb {
width: 20px;
/* Set a specific slider handle width */
height: 20px;
/* Slider handle height */
background: #1E1EB3;
/* Green background */
cursor: pointer;
/* Cursor on hover */
border-radius: 50%;
}

table tr td {
border-bottom: 0;
}

table {
margin-bottom: 0;
}
Loading

0 comments on commit dd66361

Please sign in to comment.