Upload Dev build
This commit is contained in:
parent
bca7ae0a8c
commit
c0b8d6bf94
@ -3,9 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="stylesheet.css">
|
<link rel="stylesheet" href="stylesheet.css">
|
||||||
<link rel="stylesheet" href="/static/css/darkmode.css">
|
|
||||||
<title>*DEV* CAIU VCard Creator *DEV*</title>
|
<title>*DEV* CAIU VCard Creator *DEV*</title>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
@ -22,7 +20,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav id="navbar" class="navbar navbar-light">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#">
|
||||||
<img src="https://resources.finalsite.net/images/f_auto,q_auto/v1619001051/caiuorg/cjwogofoj9lsqxvuwnd8/Logo_CAIU_color1.png" alt="">
|
<img src="https://resources.finalsite.net/images/f_auto,q_auto/v1619001051/caiuorg/cjwogofoj9lsqxvuwnd8/Logo_CAIU_color1.png" alt="">
|
||||||
</a>
|
</a>
|
||||||
@ -116,6 +114,7 @@
|
|||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
refreshDarkMode();
|
||||||
loadBackendUrl();
|
loadBackendUrl();
|
||||||
checkBackend();
|
checkBackend();
|
||||||
|
|
||||||
|
|||||||
33
script.js
33
script.js
@ -130,7 +130,7 @@ function saveBackendUrl() {
|
|||||||
document.cookie = "backendUrl=" + backendUrl;
|
document.cookie = "backendUrl=" + backendUrl;
|
||||||
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
||||||
console.log("Saved new backendUrl ", backendUrl);
|
console.log("Saved new backendUrl ", backendUrl);
|
||||||
checkBackend();
|
checkBackend().then();
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadBackendUrl() {
|
function loadBackendUrl() {
|
||||||
@ -177,11 +177,19 @@ function downloadImage(arrayBuffer) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function toggleDarkMode() {
|
function toggleDarkMode() {
|
||||||
const darkMode = document.body.classList.contains("dark-theme");
|
if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
|
||||||
|
else document.cookie = "darkMode=on";
|
||||||
|
refreshDarkMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshDarkMode() {
|
||||||
|
let darkMode = getCookie("darkMode") === "on";
|
||||||
if (darkMode) {
|
if (darkMode) {
|
||||||
document.body.classList.remove("dark-theme");
|
|
||||||
} else {
|
|
||||||
document.body.classList.add("dark-theme");
|
document.body.classList.add("dark-theme");
|
||||||
|
} else {
|
||||||
|
if (document.body.classList.contains("dark-theme")) {
|
||||||
|
document.body.classList.remove("dark-theme");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -189,22 +197,11 @@ function getCookie(cookieName) {
|
|||||||
let cookieArray = document.cookie.split(";");
|
let cookieArray = document.cookie.split(";");
|
||||||
for (let i = 0; i < cookieArray.length; i++) {
|
for (let i = 0; i < cookieArray.length; i++) {
|
||||||
let cookie = cookieArray[i].split("=");
|
let cookie = cookieArray[i].split("=");
|
||||||
if (cookie[0] === cookieName) {
|
if (cookie[0].trim() === cookieName) {
|
||||||
return cookie[1];
|
return cookie[1];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log("Unable to get cookie ", cookieName);
|
console.warn("Cookie \"" + cookieName + "\" does not exist");
|
||||||
|
document.cookie = cookieName + "=";
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function setCookie(cookieName, cookieValue) {
|
|
||||||
let cookieArray = document.cookie.split(";");
|
|
||||||
for (let i = 0; i < cookieArray.length; i++) {
|
|
||||||
let cookie = cookieArray[i].split("=");
|
|
||||||
if (cookie[0] === cookieName) {
|
|
||||||
cookie[1] = cookieValue;
|
|
||||||
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
|
||||||
console.log("Set backendUrl to ", backendUrl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
7
static/css/bootstrap.min.css
vendored
7
static/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,266 +0,0 @@
|
|||||||
:root {
|
|
||||||
--trans-dur: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Default */
|
|
||||||
.theme {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon,
|
|
||||||
.toggle {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon,
|
|
||||||
.icon-part {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: block;
|
|
||||||
top: 0.75em;
|
|
||||||
left: 0.75em;
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
-webkit-transition: var(--trans-dur);
|
|
||||||
transition: var(--trans-dur);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part {
|
|
||||||
border-radius: 50%;
|
|
||||||
-webkit-box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
|
|
||||||
box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
|
|
||||||
top: calc(50% - 0.5em);
|
|
||||||
left: calc(50% - 0.5em);
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
-webkit-transition: opacity var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-box-shadow var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur) ease-in-out;
|
|
||||||
transition: opacity var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-box-shadow var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur) ease-in-out;
|
|
||||||
transition: box-shadow var(--trans-dur) ease-in-out,
|
|
||||||
opacity var(--trans-dur) ease-in-out,
|
|
||||||
transform var(--trans-dur) ease-in-out;
|
|
||||||
transition: box-shadow var(--trans-dur) ease-in-out,
|
|
||||||
opacity var(--trans-dur) ease-in-out,
|
|
||||||
transform var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-box-shadow var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur) ease-in-out;
|
|
||||||
-webkit-transform: scale(0.5);
|
|
||||||
-ms-transform: scale(0.5);
|
|
||||||
transform: scale(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part ~ .icon-part {
|
|
||||||
background-color: hsl(0,0%,100%);
|
|
||||||
border-radius: 0.05em;
|
|
||||||
top: 50%;
|
|
||||||
left: calc(50% - 0.05em);
|
|
||||||
-webkit-transform: rotate(0deg) translateY(0.5em);
|
|
||||||
-ms-transform: rotate(0deg) translateY(0.5em);
|
|
||||||
transform: rotate(0deg) translateY(0.5em);
|
|
||||||
-webkit-transform-origin: 50% 0;
|
|
||||||
-ms-transform-origin: 50% 0;
|
|
||||||
transform-origin: 50% 0;
|
|
||||||
width: 0.1em;
|
|
||||||
height: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(3) {
|
|
||||||
-webkit-transform: rotate(45deg) translateY(0.45em);
|
|
||||||
-ms-transform: rotate(45deg) translateY(0.45em);
|
|
||||||
transform: rotate(45deg) translateY(0.45em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(4) {
|
|
||||||
-webkit-transform: rotate(90deg) translateY(0.45em);
|
|
||||||
-ms-transform: rotate(90deg) translateY(0.45em);
|
|
||||||
transform: rotate(90deg) translateY(0.45em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(5) {
|
|
||||||
-webkit-transform: rotate(135deg) translateY(0.45em);
|
|
||||||
-ms-transform: rotate(135deg) translateY(0.45em);
|
|
||||||
transform: rotate(135deg) translateY(0.45em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(6) {
|
|
||||||
-webkit-transform: rotate(180deg) translateY(0.45em);
|
|
||||||
-ms-transform: rotate(180deg) translateY(0.45em);
|
|
||||||
transform: rotate(180deg) translateY(0.45em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(7) {
|
|
||||||
-webkit-transform: rotate(225deg) translateY(0.45em);
|
|
||||||
-ms-transform: rotate(225deg) translateY(0.45em);
|
|
||||||
transform: rotate(225deg) translateY(0.45em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(8) {
|
|
||||||
-webkit-transform: rotate(270deg) translateY(0.5em);
|
|
||||||
-ms-transform: rotate(270deg) translateY(0.5em);
|
|
||||||
transform: rotate(270deg) translateY(0.5em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-part:nth-child(9) {
|
|
||||||
-webkit-transform: rotate(315deg) translateY(0.5em);
|
|
||||||
-ms-transform: rotate(315deg) translateY(0.5em);
|
|
||||||
transform: rotate(315deg) translateY(0.5em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label,
|
|
||||||
.toggle,
|
|
||||||
.toggle-wrap {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle,
|
|
||||||
.toggle:before {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
background-color: hsl(48,90%,85%);
|
|
||||||
border-radius: 25% / 50%;
|
|
||||||
-webkit-box-shadow: 0 0 0 0.125em var(--secondary);
|
|
||||||
box-shadow: 0 0 0 0.125em var(--secondary);
|
|
||||||
padding: 0.25em !important;
|
|
||||||
width: 6em;
|
|
||||||
height: 3em;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-transition: background-color var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-box-shadow 0.15s ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur) ease-in-out;
|
|
||||||
transition: background-color var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-box-shadow 0.15s ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur) ease-in-out;
|
|
||||||
transition: background-color var(--trans-dur) ease-in-out,
|
|
||||||
box-shadow 0.15s ease-in-out,
|
|
||||||
transform var(--trans-dur) ease-in-out;
|
|
||||||
transition: background-color var(--trans-dur) ease-in-out,
|
|
||||||
box-shadow 0.15s ease-in-out,
|
|
||||||
transform var(--trans-dur) ease-in-out,
|
|
||||||
-webkit-box-shadow 0.15s ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur) ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:before {
|
|
||||||
background-color: hsl(48,90%,55%);
|
|
||||||
border-radius: 50%;
|
|
||||||
content: "";
|
|
||||||
width: 2.5em;
|
|
||||||
height: 2.5em;
|
|
||||||
-webkit-transition: 0.3s;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:focus {
|
|
||||||
-webkit-box-shadow: 0 0 0 0.125em var(--primary);
|
|
||||||
box-shadow: 0 0 0 0.125em var(--primary);
|
|
||||||
outline: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Checked */
|
|
||||||
.toggle:checked {
|
|
||||||
background-color: hsl(198,90%,15%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked:before,
|
|
||||||
.toggle:checked ~ .icon {
|
|
||||||
-webkit-transform: translateX(3em);
|
|
||||||
-ms-transform: translateX(3em);
|
|
||||||
transform: translateX(3em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked:before {
|
|
||||||
background-color: hsl(198,90%,55%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(1) {
|
|
||||||
-webkit-box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
|
|
||||||
box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
-ms-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
top: 0.25em;
|
|
||||||
left: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part ~ .icon-part {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(2) {
|
|
||||||
-webkit-transform: rotate(45deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(45deg) translateY(0.8em);
|
|
||||||
transform: rotate(45deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(3) {
|
|
||||||
-webkit-transform: rotate(90deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(90deg) translateY(0.8em);
|
|
||||||
transform: rotate(90deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(4) {
|
|
||||||
-webkit-transform: rotate(135deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(135deg) translateY(0.8em);
|
|
||||||
transform: rotate(135deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(5) {
|
|
||||||
-webkit-transform: rotate(180deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(180deg) translateY(0.8em);
|
|
||||||
transform: rotate(180deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(6) {
|
|
||||||
-webkit-transform: rotate(225deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(225deg) translateY(0.8em);
|
|
||||||
transform: rotate(225deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(7) {
|
|
||||||
-webkit-transform: rotate(270deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(270deg) translateY(0.8em);
|
|
||||||
transform: rotate(270deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(8) {
|
|
||||||
-webkit-transform: rotate(315deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(315deg) translateY(0.8em);
|
|
||||||
transform: rotate(315deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:checked ~ .icon .icon-part:nth-child(9) {
|
|
||||||
-webkit-transform: rotate(360deg) translateY(0.8em);
|
|
||||||
-ms-transform: rotate(360deg) translateY(0.8em);
|
|
||||||
transform: rotate(360deg) translateY(0.8em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-wrap {
|
|
||||||
margin: 0 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports selector(:focus-visible) {
|
|
||||||
.toggle:focus {
|
|
||||||
-webkit-box-shadow: 0 0 0 0.125em var(--secondary);
|
|
||||||
box-shadow: 0 0 0 0.125em var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle:focus-visible {
|
|
||||||
-webkit-box-shadow: 0 0 0 0.125em var(--primary);
|
|
||||||
box-shadow: 0 0 0 0.125em var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
453
stylesheet.css
453
stylesheet.css
@ -1,16 +1,195 @@
|
|||||||
:root {
|
:root {
|
||||||
|
--blue: #007bff;
|
||||||
|
--indigo: #6610f2;
|
||||||
|
--purple: #6f42c1;
|
||||||
|
--pink: #e83e8c;
|
||||||
|
--red: #dc3545;
|
||||||
|
--orange: #fd7e14;
|
||||||
|
--yellow: #ffc107;
|
||||||
|
--green: #28a745;
|
||||||
|
--teal: #20c997;
|
||||||
|
--cyan: #17a2b8;
|
||||||
|
--white: #fff;
|
||||||
|
--gray: #6c757d;
|
||||||
|
--gray-dark: #343a40;
|
||||||
|
--secondary: #6c757d;
|
||||||
|
--success: #28a745;
|
||||||
|
--info: #17a2b8;
|
||||||
|
--warning: #ffc107;
|
||||||
|
--danger: #dc3545;
|
||||||
|
--light: #f8f9fa;
|
||||||
|
--dark: #343a40;
|
||||||
|
|
||||||
|
--theme-blue: #007bff;
|
||||||
|
--theme-dark-blue: hsl(198,90%,15%);
|
||||||
|
|
||||||
|
--breakpoint-xs: 0;
|
||||||
|
--breakpoint-sm: 576px;
|
||||||
|
--breakpoint-md: 768px;
|
||||||
|
--breakpoint-lg: 992px;
|
||||||
|
--breakpoint-xl: 1200px;
|
||||||
|
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||||
|
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||||
--text-color: #212529;
|
--text-color: #212529;
|
||||||
--background-color: #ffffff;
|
--background-color: #ffffff;
|
||||||
|
--secondary-color: #f8f9fa !important;
|
||||||
|
--secondary-accent: #495057;
|
||||||
|
--trans-dur: 0.3s;
|
||||||
}
|
}
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
line-height: 1.15;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
*, ::after, ::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, optgroup, select, textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.h1, h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
.h2, h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: .375rem .75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-radius: .25rem;
|
||||||
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
color: #fff;
|
||||||
|
background-color: var(--theme-blue);
|
||||||
|
border-color: var(--theme-blue);
|
||||||
|
}
|
||||||
|
.btn:not(:disabled):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
select.form-control:not([size]):not([multiple]) {
|
||||||
|
height: calc(2.25rem + 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"], input[type="radio"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="reset"], [type="submit"], button, html [type="button"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------*/
|
||||||
|
|
||||||
.dark-theme {
|
.dark-theme {
|
||||||
--text-color: #ffffff;
|
--text-color: #ffffff;
|
||||||
--background-color: #212121;
|
--background-color: #28272d;
|
||||||
|
--secondary-color: #1f1e23 !important;
|
||||||
|
--secondary-accent: #181818;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.text-center {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-5, .my-5 {
|
||||||
|
margin-top: 3rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: .375rem .75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: var(--background-color);
|
background-color: var(--secondary-color);
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
border-radius: .25rem;
|
||||||
|
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: .5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-align {
|
.nav-align {
|
||||||
@ -42,14 +221,13 @@ body {
|
|||||||
.loading {
|
.loading {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 5px solid #f3f3f3;
|
border: 5px solid var(--white );
|
||||||
border-top: 5px solid #0069d9;
|
border-top: 5px solid var(--theme-blue);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
-moz-border-radius: 50%;
|
-moz-border-radius: 50%;
|
||||||
-webkit-border-radius: 50%;
|
-webkit-border-radius: 50%;
|
||||||
animation: spin 1.25s ease-in-out infinite;
|
animation: spin 1.25s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg) }
|
0% { transform: rotate(0deg) }
|
||||||
100% { transform: rotate(360deg) }
|
100% { transform: rotate(360deg) }
|
||||||
@ -58,7 +236,268 @@ body {
|
|||||||
.connected {
|
.connected {
|
||||||
background: var(--success);
|
background: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disconnected {
|
.disconnected {
|
||||||
background: var(--danger);
|
background: var(--danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------*/
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.container {
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---------------------------------------------*/
|
||||||
|
|
||||||
|
/* Default */
|
||||||
|
.theme {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.icon,
|
||||||
|
.toggle {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.icon,
|
||||||
|
.icon-part {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
top: 0.75em;
|
||||||
|
left: 0.75em;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
-webkit-transition: var(--trans-dur);
|
||||||
|
transition: var(--trans-dur);
|
||||||
|
}
|
||||||
|
.icon-part {
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
|
||||||
|
box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
|
||||||
|
top: calc(50% - 0.5em);
|
||||||
|
left: calc(50% - 0.5em);
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
-webkit-transition: opacity var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-box-shadow var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-transform var(--trans-dur) ease-in-out;
|
||||||
|
transition: opacity var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-box-shadow var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-transform var(--trans-dur) ease-in-out;
|
||||||
|
transition: box-shadow var(--trans-dur) ease-in-out,
|
||||||
|
opacity var(--trans-dur) ease-in-out,
|
||||||
|
transform var(--trans-dur) ease-in-out;
|
||||||
|
transition: box-shadow var(--trans-dur) ease-in-out,
|
||||||
|
opacity var(--trans-dur) ease-in-out,
|
||||||
|
transform var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-box-shadow var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-transform var(--trans-dur) ease-in-out;
|
||||||
|
-webkit-transform: scale(0.5);
|
||||||
|
-ms-transform: scale(0.5);
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
.icon-part ~ .icon-part {
|
||||||
|
background-color: var(--white);
|
||||||
|
border-radius: 0.05em;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(50% - 0.05em);
|
||||||
|
-webkit-transform: rotate(0deg) translateY(0.5em);
|
||||||
|
-ms-transform: rotate(0deg) translateY(0.5em);
|
||||||
|
transform: rotate(0deg) translateY(0.5em);
|
||||||
|
-webkit-transform-origin: 50% 0;
|
||||||
|
-ms-transform-origin: 50% 0;
|
||||||
|
transform-origin: 50% 0;
|
||||||
|
width: 0.1em;
|
||||||
|
height: 0.2em;
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(3) {
|
||||||
|
-webkit-transform: rotate(45deg) translateY(0.45em);
|
||||||
|
-ms-transform: rotate(45deg) translateY(0.45em);
|
||||||
|
transform: rotate(45deg) translateY(0.45em);
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(4) {
|
||||||
|
-webkit-transform: rotate(90deg) translateY(0.45em);
|
||||||
|
-ms-transform: rotate(90deg) translateY(0.45em);
|
||||||
|
transform: rotate(90deg) translateY(0.45em);
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(5) {
|
||||||
|
-webkit-transform: rotate(135deg) translateY(0.45em);
|
||||||
|
-ms-transform: rotate(135deg) translateY(0.45em);
|
||||||
|
transform: rotate(135deg) translateY(0.45em);
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(6) {
|
||||||
|
-webkit-transform: rotate(180deg) translateY(0.45em);
|
||||||
|
-ms-transform: rotate(180deg) translateY(0.45em);
|
||||||
|
transform: rotate(180deg) translateY(0.45em);
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(7) {
|
||||||
|
-webkit-transform: rotate(225deg) translateY(0.45em);
|
||||||
|
-ms-transform: rotate(225deg) translateY(0.45em);
|
||||||
|
transform: rotate(225deg) translateY(0.45em);
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(8) {
|
||||||
|
-webkit-transform: rotate(270deg) translateY(0.5em);
|
||||||
|
-ms-transform: rotate(270deg) translateY(0.5em);
|
||||||
|
transform: rotate(270deg) translateY(0.5em);
|
||||||
|
}
|
||||||
|
.icon-part:nth-child(9) {
|
||||||
|
-webkit-transform: rotate(315deg) translateY(0.5em);
|
||||||
|
-ms-transform: rotate(315deg) translateY(0.5em);
|
||||||
|
transform: rotate(315deg) translateY(0.5em);
|
||||||
|
}
|
||||||
|
.label,
|
||||||
|
.toggle,
|
||||||
|
.toggle-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.toggle,
|
||||||
|
.toggle:before {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.toggle {
|
||||||
|
background-color: hsl(48,90%,85%);
|
||||||
|
border-radius: 25% / 50%;
|
||||||
|
-webkit-box-shadow: 0 0 0 0.125em var(--secondary);
|
||||||
|
box-shadow: 0 0 0 0.125em var(--secondary);
|
||||||
|
padding: 0.25em !important;
|
||||||
|
width: 6em;
|
||||||
|
height: 3em;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-transition: background-color var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-box-shadow 0.15s ease-in-out,
|
||||||
|
-webkit-transform var(--trans-dur) ease-in-out;
|
||||||
|
transition: background-color var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-box-shadow 0.15s ease-in-out,
|
||||||
|
-webkit-transform var(--trans-dur) ease-in-out;
|
||||||
|
transition: background-color var(--trans-dur) ease-in-out,
|
||||||
|
box-shadow 0.15s ease-in-out,
|
||||||
|
transform var(--trans-dur) ease-in-out;
|
||||||
|
transition: background-color var(--trans-dur) ease-in-out,
|
||||||
|
box-shadow 0.15s ease-in-out,
|
||||||
|
transform var(--trans-dur) ease-in-out,
|
||||||
|
-webkit-box-shadow 0.15s ease-in-out,
|
||||||
|
-webkit-transform var(--trans-dur) ease-in-out;
|
||||||
|
}
|
||||||
|
.toggle:before {
|
||||||
|
background-color: var(--yellow);
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
width: 2.5em;
|
||||||
|
height: 2.5em;
|
||||||
|
-webkit-transition: 0.3s;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.toggle:focus {
|
||||||
|
-webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
|
||||||
|
box-shadow: 0 0 0 0.125em var(--theme-blue);
|
||||||
|
outline: transparent;
|
||||||
|
}
|
||||||
|
/* Checked */
|
||||||
|
.toggle:checked {
|
||||||
|
background-color: var(--theme-dark-blue);
|
||||||
|
}
|
||||||
|
.toggle:checked:before,
|
||||||
|
.toggle:checked ~ .icon {
|
||||||
|
-webkit-transform: translateX(3em);
|
||||||
|
-ms-transform: translateX(3em);
|
||||||
|
transform: translateX(3em);
|
||||||
|
}
|
||||||
|
.toggle:checked:before {
|
||||||
|
background-color: var(--theme-blue);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(1) {
|
||||||
|
-webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
|
||||||
|
box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
top: 0.25em;
|
||||||
|
left: 0.25em;
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part ~ .icon-part {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(2) {
|
||||||
|
-webkit-transform: rotate(45deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(45deg) translateY(0.8em);
|
||||||
|
transform: rotate(45deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(3) {
|
||||||
|
-webkit-transform: rotate(90deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(90deg) translateY(0.8em);
|
||||||
|
transform: rotate(90deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(4) {
|
||||||
|
-webkit-transform: rotate(135deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(135deg) translateY(0.8em);
|
||||||
|
transform: rotate(135deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(5) {
|
||||||
|
-webkit-transform: rotate(180deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(180deg) translateY(0.8em);
|
||||||
|
transform: rotate(180deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(6) {
|
||||||
|
-webkit-transform: rotate(225deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(225deg) translateY(0.8em);
|
||||||
|
transform: rotate(225deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(7) {
|
||||||
|
-webkit-transform: rotate(270deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(270deg) translateY(0.8em);
|
||||||
|
transform: rotate(270deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(8) {
|
||||||
|
-webkit-transform: rotate(315deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(315deg) translateY(0.8em);
|
||||||
|
transform: rotate(315deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle:checked ~ .icon .icon-part:nth-child(9) {
|
||||||
|
-webkit-transform: rotate(360deg) translateY(0.8em);
|
||||||
|
-ms-transform: rotate(360deg) translateY(0.8em);
|
||||||
|
transform: rotate(360deg) translateY(0.8em);
|
||||||
|
}
|
||||||
|
.toggle-wrap {
|
||||||
|
margin: 0 0.75em;
|
||||||
|
}
|
||||||
|
@supports selector(:focus-visible) {
|
||||||
|
.toggle:focus {
|
||||||
|
-webkit-box-shadow: 0 0 0 0.125em var(--secondary);
|
||||||
|
box-shadow: 0 0 0 0.125em var(--secondary);
|
||||||
|
}
|
||||||
|
.toggle:focus-visible {
|
||||||
|
-webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
|
||||||
|
box-shadow: 0 0 0 0.125em var(--theme-blue);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user