mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
added bg menu to top settings
restyled range sliders style fix for right nav (L/R padding had disappeared somehow; fixed)
This commit is contained in:
RossAsscends
1
public/img/panorama-solid.svg
Normal file
1
public/img/panorama-solid.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M45.6 32C20.4 32 0 52.4 0 77.6V434.4C0 459.6 20.4 480 45.6 480c5.1 0 10-.8 14.7-2.4C74.6 472.8 177.6 440 320 440s245.4 32.8 259.6 37.6c4.7 1.6 9.7 2.4 14.7 2.4c25.2 0 45.6-20.4 45.6-45.6V77.6C640 52.4 619.6 32 594.4 32c-5 0-10 .8-14.7 2.4C565.4 39.2 462.4 72 320 72S74.6 39.2 60.4 34.4C55.6 32.8 50.7 32 45.6 32zM96 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm272 0c7.9 0 15.4 3.9 19.8 10.5L512.3 353c5.4 8 5.6 18.4 .4 26.5s-14.7 12.3-24.2 10.7C442.7 382.4 385.2 376 320 376c-65.6 0-123.4 6.5-169.3 14.4c-9.8 1.7-19.7-2.9-24.7-11.5s-4.3-19.4 1.9-27.2L197.3 265c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l26.4 33.1 87-127.6c4.5-6.6 11.9-10.5 19.8-10.5z"/></svg>
|
||||||
|
After Width: | Height: | Size: 890 B |
@ -53,35 +53,31 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- background selection menu -->
|
|
||||||
<div id="bg_menu">
|
|
||||||
<div id="logo_block">
|
|
||||||
<div id="bg_menu_button"><img src="img/tri.png">
|
|
||||||
</div>
|
|
||||||
<img src="img/logo.png" id="site_logo">
|
|
||||||
<div id="update-notification">
|
|
||||||
<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="bg_menu_content">
|
|
||||||
<form id="form_bg_download" action="javascript:void(null);" method="post" enctype="multipart/form-data">
|
|
||||||
<label class="input-file">
|
|
||||||
<input type="file" id="add_bg_button" name="avatar"
|
|
||||||
accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
|
|
||||||
<span class="bg_example_but_load"><img src='img/addbg3.png'></span>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="bg1"></div>
|
<div id="bg1"></div>
|
||||||
<div id="bg2"></div>
|
<div id="bg2"></div>
|
||||||
|
|
||||||
<!-- top bar central settings buttons -->
|
<!-- top bar central settings buttons -->
|
||||||
<div id="top-bar">
|
<div id="top-bar">
|
||||||
<div id="top-settings-holder">
|
</div>
|
||||||
|
<div id="top-settings-holder">
|
||||||
|
<!-- background selection menu -->
|
||||||
|
<div id="logo_block" class="drawer" style="z-index:3001;">
|
||||||
|
<div id="site_logo" class="drawer-toggle drawer-header">
|
||||||
|
<div class="drawer-icon icon-panorama closedIcon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-content closedDrawer">
|
||||||
|
<div class="flex-container">
|
||||||
|
<div id="bg_menu_content">
|
||||||
|
<form id="form_bg_download" action="javascript:void(null);" method="post" enctype="multipart/form-data">
|
||||||
|
<label class="input-file">
|
||||||
|
<input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
|
||||||
|
<span class="bg_example_but_load"><img src='img/addbg3.png'></span>
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="sys-settings-button" class="drawer" style="z-index:3001;">
|
<div id="sys-settings-button" class="drawer" style="z-index:3001;">
|
||||||
<div class="drawer-toggle drawer-header">
|
<div class="drawer-toggle drawer-header">
|
||||||
@ -502,8 +498,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- various fullscreen popups -->
|
<!-- various fullscreen popups -->
|
||||||
<div id="shadow_popup">
|
<div id="shadow_popup">
|
||||||
<div id="dialogue_popup">
|
<div id="dialogue_popup">
|
||||||
|
|||||||
@ -83,7 +83,7 @@ window["TavernAI"] = {};
|
|||||||
|
|
||||||
const VERSION = "1.2.8";
|
const VERSION = "1.2.8";
|
||||||
let converter = new showdown.Converter({ emoji: "true" });
|
let converter = new showdown.Converter({ emoji: "true" });
|
||||||
let bg_menu_toggle = false;
|
/* let bg_menu_toggle = false; */
|
||||||
const systemUserName = "TavernAI";
|
const systemUserName = "TavernAI";
|
||||||
let default_user_name = "You";
|
let default_user_name = "You";
|
||||||
let name1 = default_user_name;
|
let name1 = default_user_name;
|
||||||
@ -606,13 +606,9 @@ async function getBackgrounds() {
|
|||||||
for (var i = 0; i < getData.length; i++) {
|
for (var i = 0; i < getData.length; i++) {
|
||||||
//console.log(1);
|
//console.log(1);
|
||||||
$("#bg_menu_content").append(
|
$("#bg_menu_content").append(
|
||||||
"<div class=bg_example><img bgfile='" +
|
`<div class="bg_example" bgfile="${getData[i]}" class="bg_example_img" style="background-image: url(backgrounds/${getData[i]});">
|
||||||
getData[i] +
|
<div bgfile="${getData[i]}" class=bg_example_cross style="background-image: url(img/cross.png);">
|
||||||
"' class=bg_example_img src='backgrounds/" +
|
</div>`
|
||||||
getData[i] +
|
|
||||||
"'><img bgfile='" +
|
|
||||||
getData[i] +
|
|
||||||
"' class=bg_example_cross src=img/cross.png></div>"
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
//var aa = JSON.parse(getData[0]);
|
//var aa = JSON.parse(getData[0]);
|
||||||
@ -647,23 +643,7 @@ async function isColab() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function setBackground(bg) {
|
async function setBackground(bg) {
|
||||||
/*
|
|
||||||
const response = await fetch("/setbackground", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
"bg": bg
|
|
||||||
})
|
|
||||||
|
|
||||||
});
|
|
||||||
if (response.ok === true) {
|
|
||||||
//const getData = await response.json();
|
|
||||||
//background = getData;
|
|
||||||
|
|
||||||
//var aa = JSON.parse(getData[0]);
|
|
||||||
//const load_ch_coint = Object.getOwnPropertyNames(getData);
|
|
||||||
}*/
|
|
||||||
//console.log(bg);
|
|
||||||
jQuery.ajax({
|
jQuery.ajax({
|
||||||
type: "POST", //
|
type: "POST", //
|
||||||
url: "/setbackground", //
|
url: "/setbackground", //
|
||||||
@ -677,11 +657,7 @@ async function setBackground(bg) {
|
|||||||
dataType: "json",
|
dataType: "json",
|
||||||
contentType: "application/json",
|
contentType: "application/json",
|
||||||
//processData: false,
|
//processData: false,
|
||||||
success: function (html) {
|
success: function (html) { },
|
||||||
//setBackground(html);
|
|
||||||
//$('body').css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url('+e.target.result+')');
|
|
||||||
//$("#form_bg_download").after("<div class=bg_example><img bgfile='"+html+"' class=bg_example_img src='backgrounds/"+html+"'><img bgfile='"+html+"' class=bg_example_cross src=img/cross.png></div>");
|
|
||||||
},
|
|
||||||
error: function (jqXHR, exception) {
|
error: function (jqXHR, exception) {
|
||||||
console.log(exception);
|
console.log(exception);
|
||||||
console.log(jqXHR);
|
console.log(jqXHR);
|
||||||
@ -2649,13 +2625,10 @@ function read_bg_load(input) {
|
|||||||
"url(" + e.target.result + ")"
|
"url(" + e.target.result + ")"
|
||||||
);
|
);
|
||||||
$("#form_bg_download").after(
|
$("#form_bg_download").after(
|
||||||
"<div class=bg_example><img bgfile='" +
|
`<div class=bg_example>
|
||||||
html +
|
<img bgfile="${html}" class="bg_example_img" style="background-image: url(backgrounds/"${html});">
|
||||||
"' class=bg_example_img src='backgrounds/" +
|
<img bgfile="${html}" class=bg_example_cross src="img/cross.png">
|
||||||
html +
|
</div>`
|
||||||
"'><img bgfile='" +
|
|
||||||
html +
|
|
||||||
"' class=bg_example_cross src=img/cross.png></div>"
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
error: function (jqXHR, exception) {
|
error: function (jqXHR, exception) {
|
||||||
@ -3156,40 +3129,8 @@ $(document).ready(function () {
|
|||||||
// Will allow to select the same file twice in a row
|
// Will allow to select the same file twice in a row
|
||||||
$("#form_upload_avatar").trigger("reset");
|
$("#form_upload_avatar").trigger("reset");
|
||||||
});
|
});
|
||||||
$("#logo_block").click(function (event) {
|
|
||||||
if (!bg_menu_toggle) {
|
$(document).on("click", ".bg_example", function () {
|
||||||
$("#bg_menu_button").transition({
|
|
||||||
perspective: "100px",
|
|
||||||
rotate3d: "1,1,0,180deg",
|
|
||||||
});
|
|
||||||
$("#bg_menu_content").transition({
|
|
||||||
opacity: 1.0,
|
|
||||||
height: "90vh",
|
|
||||||
duration: 340,
|
|
||||||
easing: "in",
|
|
||||||
complete: function () {
|
|
||||||
bg_menu_toggle = true;
|
|
||||||
$("#bg_menu_content").css("overflow-y", "auto");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$("#bg_menu_button").transition({
|
|
||||||
perspective: "100px",
|
|
||||||
rotate3d: "1,1,0,360deg",
|
|
||||||
});
|
|
||||||
$("#bg_menu_content").css("overflow-y", "hidden");
|
|
||||||
$("#bg_menu_content").transition({
|
|
||||||
opacity: 0.0,
|
|
||||||
height: "0px",
|
|
||||||
duration: 340,
|
|
||||||
easing: "in",
|
|
||||||
complete: function () {
|
|
||||||
bg_menu_toggle = false;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(document).on("click", ".bg_example_img", function () {
|
|
||||||
//when user clicks on a BG thumbnail...
|
//when user clicks on a BG thumbnail...
|
||||||
var this_bgfile = $(this).attr("bgfile"); // this_bgfile = whatever they clicked
|
var this_bgfile = $(this).attr("bgfile"); // this_bgfile = whatever they clicked
|
||||||
|
|
||||||
@ -3211,8 +3152,6 @@ $(document).ready(function () {
|
|||||||
duration: 1300, //animation_rm_duration,
|
duration: 1300, //animation_rm_duration,
|
||||||
easing: "linear",
|
easing: "linear",
|
||||||
complete: function () {
|
complete: function () {
|
||||||
// why does the BG transition completion make the #options (right nav) invisible?
|
|
||||||
$("#options").css("display", "none");
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
$("#bg" + number_bg).css(
|
$("#bg" + number_bg).css(
|
||||||
|
|||||||
263
public/style.css
263
public/style.css
@ -171,7 +171,7 @@ code {
|
|||||||
#sheld {
|
#sheld {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto min-content;
|
grid-template-rows: auto min-content;
|
||||||
height: calc(100svh);
|
height: calc(100svh - 40px);
|
||||||
|
|
||||||
/*overflow: auto;*/
|
/*overflow: auto;*/
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@ -183,13 +183,11 @@ code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#chat {
|
#chat {
|
||||||
|
margin-top:5px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
margin-top: 40px;
|
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
border-bottom: 1px solid var(--black30a);
|
border-bottom: 1px solid var(--black30a);
|
||||||
border-left: 1px solid var(--black30a);
|
border-left: 1px solid var(--black30a);
|
||||||
@ -902,141 +900,77 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
|||||||
/*LEFT SIDE BG MENU*/
|
/*LEFT SIDE BG MENU*/
|
||||||
|
|
||||||
#logo_block {
|
#logo_block {
|
||||||
margin-top: 10px;
|
z-index: 3001;
|
||||||
height: 26px;
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#bg_menu {
|
#bg_menu {
|
||||||
margin-top: 0;
|
|
||||||
margin-left: 2px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 2050;
|
z-index: 3001;
|
||||||
-webkit-user-select: none;
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site_logo {
|
|
||||||
opacity: 0.4;
|
|
||||||
display: inline-block;
|
|
||||||
width: 130px;
|
|
||||||
height: 20px;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#update-notification {
|
|
||||||
height: min-content;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 0.75rem;
|
|
||||||
color: orange;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
top: -50%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#update-notification a {
|
|
||||||
color: orange;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bg_menu_button {
|
|
||||||
display: inline-block;
|
|
||||||
opacity: 0.4;
|
|
||||||
transition: 0.5s;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 20px;
|
|
||||||
text-align: center;
|
|
||||||
height: 20px;
|
|
||||||
color: var(--white50a);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#bg_menu_button img {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#bg_menu_content {
|
#bg_menu_content {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-left: 0;
|
display: flex;
|
||||||
opacity: 0.0;
|
flex-wrap:wrap;
|
||||||
cursor: auto;
|
max-width: 450px;
|
||||||
display: block;
|
justify-content: center;
|
||||||
width: 122px;
|
|
||||||
height: 0;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
background-color: var(--black70a);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_example {
|
.bg_example {
|
||||||
width: 103px;
|
width: 30%;
|
||||||
height: 83px;
|
max-height: 100px;
|
||||||
border-style: none;
|
background-repeat: no-repeat;
|
||||||
padding: 6px;
|
background-size: cover;
|
||||||
/* padding-bottom: 20px; */
|
background-position: center;
|
||||||
position: relative;
|
border-radius: 20px;
|
||||||
margin-left: 3px;
|
border: 1px solid var(--black50a);
|
||||||
backdrop-filter: blur(10px);
|
box-shadow: 0 0 7px var(--black50a);
|
||||||
background-color: var(--black70a);
|
margin: 5px;
|
||||||
-webkit-backdrop-filter: blur(1px);
|
aspect-ratio: 4/3;
|
||||||
}
|
|
||||||
|
|
||||||
.bg_example_img {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: center center;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_example_cross {
|
.bg_example_cross {
|
||||||
width: 12px;
|
width: 15px;
|
||||||
height: 12px;
|
height: 15px;
|
||||||
position: absolute;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0.5;
|
opacity: 0.4;
|
||||||
background-color: var(--black100);
|
background-color: var(--black100);
|
||||||
border-radius: 2px;
|
border-radius: 50%;
|
||||||
padding: 1px;
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
box-shadow: 0 0 0 2pt black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form_bg_download {
|
||||||
|
width:30%;
|
||||||
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_example_but_load {
|
.bg_example_but_load {
|
||||||
margin-left: 3px;
|
|
||||||
|
|
||||||
width: 103px;
|
|
||||||
height: 83px;
|
|
||||||
border-style: none;
|
|
||||||
padding: 6px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_example_but_load img {
|
.bg_example_but_load img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 91px;
|
height: 100px;
|
||||||
height: 57px;
|
object-fit: contain;
|
||||||
object-fit: cover;
|
margin: auto auto;
|
||||||
object-position: center center;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#add_bg_button {
|
#add_bg_button {
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
}
|
||||||
|
.input-file {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#form_create {
|
#form_create {
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -1135,17 +1069,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-file {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#form_bg_download {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
background-color: var(--black70a);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus */
|
/* Focus */
|
||||||
#colab_popup {
|
#colab_popup {
|
||||||
|
|
||||||
@ -1171,7 +1094,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
|||||||
|
|
||||||
width: 300px;
|
width: 300px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2060;
|
z-index: 9999;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -1271,7 +1194,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
z-index: 2095;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
#colab_shadow_popup {
|
#colab_shadow_popup {
|
||||||
@ -1732,8 +1655,9 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"] {
|
/* input[type=range] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1743,6 +1667,51 @@ input[type="range"] {
|
|||||||
background-size: 70% 100%;
|
background-size: 70% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
margin-top: -5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background:red;
|
||||||
|
} */
|
||||||
|
|
||||||
|
input[type="range"]{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
background: var(--white50a);
|
||||||
|
border-radius: 15px;
|
||||||
|
background-size: 70% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
box-shadow:inset 0 0 2px black;
|
||||||
|
/* -webkit-appearance:none;
|
||||||
|
width:160px;
|
||||||
|
height:20px;
|
||||||
|
margin:10px 50px;
|
||||||
|
background: linear-gradient(to right, #9A2720 0%, #9A2720 100%);
|
||||||
|
background-size:150px 10px;
|
||||||
|
background-position:center;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
overflow:hidden;
|
||||||
|
outline: none; */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-webkit-slider-thumb{
|
||||||
|
-webkit-appearance:none;
|
||||||
|
position:relative;
|
||||||
|
box-shadow:0 0 5px 0 black;
|
||||||
|
box-shadow:inset 0 0 5px var(--black70a);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
/* margin-top: -5px; */
|
||||||
|
border-radius: 50%;
|
||||||
|
background:var(--white100);
|
||||||
|
}
|
||||||
|
|
||||||
/*Notes '?' links*/
|
/*Notes '?' links*/
|
||||||
|
|
||||||
@ -1892,7 +1861,6 @@ input[type="range"] {
|
|||||||
|
|
||||||
#character_popup {
|
#character_popup {
|
||||||
display: none;
|
display: none;
|
||||||
position:fixed;
|
|
||||||
background-color: var(--black30a);
|
background-color: var(--black30a);
|
||||||
backdrop-filter: blur(50px);
|
backdrop-filter: blur(50px);
|
||||||
-webkit-backdrop-filter: blur(30px);
|
-webkit-backdrop-filter: blur(30px);
|
||||||
@ -2539,7 +2507,7 @@ a {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
right: -450px;
|
right: -450px;
|
||||||
padding: 0;
|
padding: 0 10px;
|
||||||
-webkit-transition: right 0.14s ease-in-out 0.02s;
|
-webkit-transition: right 0.14s ease-in-out 0.02s;
|
||||||
-moz-transition: right 0.14s ease-in-out 0.02s;
|
-moz-transition: right 0.14s ease-in-out 0.02s;
|
||||||
transition: right 0.14s ease-in-out 0.02s;
|
transition: right 0.14s ease-in-out 0.02s;
|
||||||
@ -2697,6 +2665,23 @@ label[for="extensions_autoconnect"] {
|
|||||||
|
|
||||||
/*------------ TOP SIDE SETTINGS ----------------*/
|
/*------------ TOP SIDE SETTINGS ----------------*/
|
||||||
|
|
||||||
|
#top-settings-holder{
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 5px;
|
||||||
|
/* right: auto; */
|
||||||
|
height: 35px;
|
||||||
|
min-width: 20vw;
|
||||||
|
max-width: 700px;
|
||||||
|
color: white;
|
||||||
|
justify-content: space-around;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 10% 10% 10% 10% 10% 10%;
|
||||||
|
z-index: 3000;
|
||||||
|
position: relative;
|
||||||
|
/* grid-gap: 20px; */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.drawer {
|
.drawer {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -2707,7 +2692,7 @@ label[for="extensions_autoconnect"] {
|
|||||||
.drawer-icon {
|
.drawer-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 26px;
|
min-width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -2726,6 +2711,10 @@ label[for="extensions_autoconnect"] {
|
|||||||
background-image: url('img/face-smile-regular.svg');
|
background-image: url('img/face-smile-regular.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-panorama{
|
||||||
|
background-image: url('img/panorama-solid.svg');
|
||||||
|
}
|
||||||
|
|
||||||
.icon-cubes {
|
.icon-cubes {
|
||||||
background-image: url('img/cubes-solid.svg');
|
background-image: url('img/cubes-solid.svg');
|
||||||
}
|
}
|
||||||
@ -2733,11 +2722,18 @@ label[for="extensions_autoconnect"] {
|
|||||||
.drawer-icon.openIcon {
|
.drawer-icon.openIcon {
|
||||||
/* background-image: url('img/circle-chevron-up-solid.svg'); */
|
/* background-image: url('img/circle-chevron-up-solid.svg'); */
|
||||||
filter: invert(1) brightness(200%);
|
filter: invert(1) brightness(200%);
|
||||||
|
transition: all 0.275s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-icon.closedIcon {
|
.drawer-icon.closedIcon {
|
||||||
/* background-image: url('img/circle-chevron-down-solid.svg'); */
|
/* background-image: url('img/circle-chevron-down-solid.svg'); */
|
||||||
filter: invert(1) brightness(75%);
|
filter: invert(1);
|
||||||
|
opacity: 0.3;
|
||||||
|
transition: all 0.275s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-icon.closedIcon:hover{
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-header {
|
.drawer-header {
|
||||||
@ -2746,7 +2742,7 @@ label[for="extensions_autoconnect"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.drawer-content {
|
.drawer-content {
|
||||||
background-color: black;
|
background-color: var(--black50a);
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -2755,12 +2751,15 @@ label[for="extensions_autoconnect"] {
|
|||||||
/* min-width:400px; */
|
/* min-width:400px; */
|
||||||
width: max-content;
|
width: max-content;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
margin-top: 10px;
|
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
|
left:0;
|
||||||
|
right:0;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-container {
|
.flex-container {
|
||||||
@ -2770,17 +2769,7 @@ label[for="extensions_autoconnect"] {
|
|||||||
|
|
||||||
.wide50p { width:50%;}
|
.wide50p { width:50%;}
|
||||||
|
|
||||||
#top-settings-holder{
|
|
||||||
margin: 5px auto;
|
|
||||||
height: 40px;
|
|
||||||
max-width: 400px;
|
|
||||||
color: white;
|
|
||||||
justify-content: space-around;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 20% 20% 20% 20% 20%;
|
|
||||||
/* grid-gap: 20px; */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------- @media quaries must always go at the bottom ------------*/
|
/* ---------- @media quaries must always go at the bottom ------------*/
|
||||||
|
|||||||
Reference in New Issue
Block a user