/** @format */
html,
body,
div,
span,
table,
td,
label,
p,
a,
input,
ul,
li,
button {
padding: 0;
margin: 0;
font-family: @fsans;
}
.bb0 {
background: #daee59 !important;
}
.bb1 {
background: #5487fc !important;
}
html {
background: @contaniner-bg;
}
body {
background: @contaniner-bg;
box-sizing: border-box;
min-height: 100vh;
height: 100vh;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
font-family: @fsans;
font-weight: normal;
}
// spinner
.spinner {
z-index: 1000;
position: absolute;
top: 70vh;
left: 50vw;
transform: translate(-50%, -50%);
cursor: pointer;
display: none;
align-items: center;
.pulse-icon {
width: 20px;
height: 20px;
background-color: #ff8c00; // Arancione
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
.stop-message {
margin-left: 15px;
background-color: inherit;
color: #8f8a8a;
padding: 8px 15px;
border-radius: 10px;
font-size: 22px;
font-weight: bold;
opacity: 1;
transition: opacity 0.3s;
}
&:hover .stop-message {
color: @text-color;
background: @btn-hover;
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(0.6);
box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.7); // Arancione con opacitÃ
}
70% {
transform: scale(1.4);
box-shadow: 0 0 0 20px rgba(255, 140, 0, 0); // Arancione completamente trasparente
}
100% {
transform: scale(0.6);
box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); // Arancione completamente trasparente
}
}
.show-spinner {
display: flex;
}
///////////////
.upload {
@primary-color: darken(@color2, 25%);
@background-color: #121212;
@surface-color: #1e1e1e;
@btn-text-color: #000000;
@border-radius: 4px;
background-color: @surface-color;
padding: 2em;
padding-top: 0;
margin: 0;
border-radius: @border-radius;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
text-align: center;
h4 {
color: @text-color;
margin-bottom: 1em;
}
form {
display: flex;
flex-direction: column;
align-items: center;
.file {
background-color: @background-color;
border: 1px solid lighten(@surface-color, 20%);
color: @text-color;
padding: 0.5em;
margin-bottom: 1em;
border-radius: @border-radius;
width: 100%;
box-sizing: border-box;
&::file-selector-button {
background-color: @primary-color;
color: @text-color;
// color: #000000;
border: none;
padding: 0.5em 1em;
border-radius: @border-radius;
cursor: pointer;
&:hover {
background-color: darken(@primary-color, 10%);
}
}
}
button {
background-color: @primary-color;
color: @text-color;
border: none;
padding: 0.5em 1em;
border-radius: @border-radius;
cursor: pointer;
width: 100%;
box-sizing: border-box;
&:hover {
background-color: darken(@primary-color, 10%);
}
}
}
.result {
width: 100%;
background: @output-bg;
color: @text-color;
font-size: @fsize-result;
font-weight: normal;
text-align: left;
}
}
@fserif: Georigia, "Ties New Roman", serif;
@fsans: arial, verdana, Helvetica, sans-serif;
// @fsize-menu: calc(10px + 1vw);
@fsize-out: 20px;
@fsize-inp: 20px;
@fsize-help: 18px;
@fsize-btn-close: 22px;
@fsize-result: 15px;
@base-bg: #000000;
@text-color: #fff;
@color1: #ff4500;
@color2: #17d2ad;
@color3: #e3d50e;
@contaniner-bg: lighten(@base-bg, 10%);
@border-shadow: lighten(@contaniner-bg, 20%);
@btn-bg: lighten(@contaniner-bg, 10%);
@btn-hover: lighten(@btn-bg, 15%);
@btn-color: darken(@text-color, 10%);
@btn-hover-fg: lighten(@color2, 10%);
@border-hover: @color2;
@border-input: @color1;
// window
@wnd-bg: lighten(@base-bg, 10%);
@wnd-border-shadow: darken(@color3, 10%);
@wnd-pre-color: lighten(@color3, 30%);
//output
@output-bg: darken(@contaniner-bg, 15%);
@btn-copied: darken(@color2, 20%);
@text-copied-bg: lighten(@output-bg, 5%);
@text-copied: lighten(@color2, 20%);
@input-bg: darken(@contaniner-bg, 15%);
@btn-send-bg: darken(@color1, 20%);
@btn-send-fg: @text-color;
@btn-send-hover-bg: lighten(@btn-send-bg, 20%);
@btn-send2-bg: darken(@color2, 20%);
@btn-send2-hover-bg: lighten(@btn-send2-bg, 15%);
div.container {
background: @contaniner-bg;
box-sizing: border-box;
position: relative;
top: 5vh;
left: 0;
height: 95vh;
margin: 0;
padding: 0;
transition: margin-left 0.5s ease;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
overflow-y: auto;
overflow-x: auto;
div.item {
box-sizing: border-box;
min-height: 50px;
margin: 0;
padding: 0;
}
div.item1 {
flex: 5;
padding-top: 0.5vh;
padding-right: 0.5vw;
padding-left: 0.5vw;
padding-bottom: 10vh;
.output-wrapper {
background-color: @contaniner-bg;
border-radius: 20px;
position: relative;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
.text-out {
flex: 1;
box-sizing: border-box;
background: @output-bg;
color: @text-color;
border: none;
padding: 2px;
min-width: 50vw;
height: 100%;
border-radius: 10px;
overflow-y: auto;
outline: none;
box-shadow: 0 0 0 2px @border-shadow;
&:hover {
box-shadow: 0 0 0 2px @border-hover;
}
.pre-text {
white-space: pre-wrap;
word-wrap: break-word;
font-family: @fsans;
font-size: @fsize-out;
line-height: 1.6;
padding: 2px;
margin: 0;
height: 100%;
box-sizing: border-box;
overflow-y: scroll;
scroll-behavior: smooth;
&.copied {
background-color: @text-copied-bg;
color: @text-copied;
}
}
.div-text {
white-space: pre-wrap;
word-wrap: break-word;
font-family: @fsans;
font-size: @fsize-out;
line-height: 1.6;
padding: 2px;
margin: 0;
height: 100%;
box-sizing: border-box;
overflow-y: scroll;
}
&.copied {
background-color: @text-copied-bg;
color: @text-copied;
}
}
}
.output-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: 0.5vw;
margin-right: 0.5vw;
.copy-output,
.wnd-output,
.clear-output {
box-sizing: border-box;
background-color: @btn-bg;
color: @text-color;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
margin-bottom: 5px;
transition: background-color 0.3s;
&:hover {
background-color: @btn-hover;
}
}
.copy-output {
transition: background-color 0.3s, transform 0.3s;
&.copied {
background: @btn-hover-fg;
transform: scale(1.2);
}
.copy-icon {
fill: @text-color;
width: 24px;
height: 24px;
&:hover {
fill: @btn-hover-fg;
}
}
}
.clear-output,
.wnd-output {
transition: background-color 0.3s, transform 0.3s;
.icon {
fill: @text-color;
width: 24px;
height: 24px;
&:hover {
fill: @btn-hover-fg;
}
}
}
}
}
}
////////////////////
*:hover {
outline: none;
caret-color: transparent;
}
textarea:focus {
caret-color: auto;
}
///////////////////
div.item2 {
flex: 2;
padding-top: 0;
padding-bottom: 0;
padding-right: 0.5vw;
padding-left: 0.5vw;
.input-wrapper {
background-color: @contaniner-bg;
border-radius: 20px;
position: relative;
bottom: 2vh;
right: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
&:focus-within .clear-button {
display: block;
}
.text-input {
flex: 1;
font-size: @fsize-inp;
font-family: @fsans;
resize: none;
box-sizing: border-box;
background: @input-bg;
color: @text-color;
border: none;
padding: 2px;
padding-right: 40px;
height: 100%;
margin-left: 5px;
border-radius: 10px;
overflow-y: auto;
outline: none;
box-shadow: 0 0 0 2px @border-shadow;
&:hover {
box-shadow: 0 0 0 2px @border-hover;
}
&:focus {
box-shadow: 0 0 0 2px @border-input;
}
}
.clear-button {
position: absolute;
right: 60px;
top: 19vh;
padding: 5px;
border-radius: 50%;
background: @btn-bg;
border: none;
font-size: 20px;
cursor: pointer;
color: darken(@text-color, 20%);
display: none;
&:hover {
font-weight: bold;
background: @btn-hover;
color: @text-color;
}
}
.input-actions {
display: flex;
flex-direction: column;
margin-left: 0.5vw;
margin-right: 0.5vw;
.send-input,
.send2-input,
.clear-input {
box-sizing: border-box;
background-color: @btn-bg;
color: @text-color;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
width: 40px;
height: 40px;
margin-bottom: 5px;
transition: background-color 0.3s;
&:hover {
background-color: @btn-hover;
}
}
.send-input {
background: @btn-send-bg;
&:hover {
background: @btn-send-hover-bg;
}
}
.send2-input {
background: @btn-send2-bg;
&:hover {
background: @btn-send2-hover-bg;
}
}
.clear-input {
background: @btn-bg;
color: @btn-color;
&:hover {
background: @btn-hover;
color: @btn-hover-fg;
}
}
}
}
}
// menu_h
@fsize-upload: 20px;
@fsize-log: 14px;
@fsize-menu: 14px;
@menu-width: 16vw;
@menu-bg: darken(@contaniner-bg, 35%);
@menu-border: lighten(@menu-bg, 20%);
@menu-fg: @text-color;
@menu-icon-fg: #aea7a7;
@menu-icon-hover: lighten(@color2, 10%);
.menu-open {
.container {
margin-left: @menu-width;
}
.menu-box {
left: 0 !important;
}
}
div.menu-h {
background-color: lighten(@menu-bg, 10%);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 4.5vh;
padding: 0;
margin: 0;
outline: none;
box-shadow: 0 0 0 2px @border-shadow;
z-index: 100;
// caret-color: transparent;
.release {
background: inherit;
color: lighten(@color1, 10%);
font-weight: bold;
margin-left: 50vw;
margin-top: 0.5vh;
}
.menu-btn {
appearance: none;
}
.menu-btn:checked {
& + .menu-icon {
border: 1px solid @menu-border;
.nav-icon {
transform: rotate(45deg);
&::before {
top: 0;
}
&::after {
top: 0;
transform: rotate(90deg);
}
}
}
}
.menu-icon {
box-sizing: border-box;
background-color: inherit;
display: block;
position: absolute;
margin-left: 2vw;
top: 0;
left: 0;
width: 4vw;
height: 4.5vh;
cursor: pointer;
padding: 2px 2px;
z-index: 1;
&:hover {
.nav-icon,
.nav-icon::before,
.nav-icon::after {
background-color: @menu-icon-hover;
}
}
.nav-icon {
background-color: @menu-icon-fg;
display: block;
position: absolute;
top: 14px;
left: 0;
width: 25px;
height: 2px;
transition-duration: 0.25s;
}
.nav-icon::before,
.nav-icon::after {
content: "";
position: absolute;
left: 0;
background-color: inherit;
width: inherit;
height: inherit;
}
.nav-icon::before {
top: -8px;
}
.nav-icon::after {
top: 8px;
}
}
.head-wrapper {
position: absolute;
top: 0;
left: 5vw;
height: 4vh;
padding: 0;
margin: 0;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.log,
.help,
.upload,
.upload-dir {
margin-top: 2px;
margin-left: 30px;
margin-right: 0;
padding: 5px 5px 0 5px;
border: none;
cursor: pointer;
border-radius: 20%;
font-size: @fsize-upload;
color: @text-color;
background: @btn-bg;
max-height: 4vh;
&:hover {
background: @btn-hover;
}
}
}
.upload,
.upload-dir {
transition: background-color 0.3s, transform 0.3s;
.icon {
fill: @text-color;
width: 24px;
height: 24px;
&:hover {
fill: @btn-hover-fg;
}
}
}
.log {
font-size: @fsize-log !important;
font-weight: normal !important;
background: darken(@color1, 20%) !important;
&:hover {
background: darken(@color1, 10%) !important;
}
&.active {
background: darken(@color2, 20%) !important;
&:hover {
background: darken(@color2, 10%) !important;
}
}
}
div.menu-box {
position: fixed;
top: 5vh;
left: -2000px;
height: 95vh;
width: @menu-width;
transition: left 0.3s ease-out;
padding: 0;
padding-top: 1vh;
padding-left: 0.5vw;
z-index: 101;
background: lighten(@menu-bg, 5%);
box-sizing: border-box;
outline: none;
box-shadow: 0 0 0 2px @border-shadow;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
overflow-y: auto;
overflow-x: auto;
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border-top: 1px solid @menu-border;
li {
border-left: 1px solid @menu-border;
border-right: 1px solid @menu-border;
border-bottom: 1px solid @menu-border;
a {
color: @menu-fg;
font-size: @fsize-menu;
font-family: @fsans;
font-weight: normal;
display: block;
margin: 0;
padding: 2px 2px 2px 0;
text-align: left;
text-decoration: none;
}
&:hover {
text-decoration: underline;
background-color: lighten(@menu-bg, 20%);
color: @menu-icon-hover;
}
}
a.delete {
text-align: center;
font-weight: bold;
font-style: italic;
color: #000000;
background: darken(@color3, 10%);
}
a.help {
text-align: center;
font-weight: bold;
font-style: italic;
color: #000000;
background: darken(@color1, 10%);
}
li.show {
background: @base-bg;
color: @text-color;
width: 100%;
text-align: center;
box-sizing: border-box;
&:hover {
text-decoration: none;
}
}
}
}
}
// Window
.window-text {
position: relative;
top: 0;
left: 0;
background: @wnd-bg;
color: @text-color;
border: none;
padding: 0 2px 2px 2px;
width: 78vw;
height: 80vh;
border-radius: 10px;
box-sizing: border-box;
outline: none;
box-shadow: 0 0 0 2px @wnd-border-shadow;
overflow-y: auto;
overflow-x: auto;
pre.pre-text {
color: @wnd-pre-color;
white-space: pre-wrap;
word-wrap: break-word;
font-family: @fserif;
font-size: @fsize-help;
line-height: 1.6;
padding: 2px 2px 2px 2px;
margin: 0;
text-align: left;
}
div.div-text {
color: @wnd-pre-color;
word-wrap: break-word;
font-family: @fserif;
font-size: @fsize-help;
padding: 0 2px 0 2px;
margin: 0;
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border-top: 1px solid @menu-border;
li {
border-left: 1px solid @menu-border;
border-right: 1px solid @menu-border;
border-bottom: 1px solid @menu-border;
a {
color: @menu-fg;
font-size: @fsize-menu;
font-family: @fsans;
font-weight: normal;
display: block;
margin: 0;
padding: 5px 2px 2px 0;
text-align: left;
text-decoration: none;
}
&:hover {
text-decoration: underline;
background-color: lighten(@menu-bg, 20%);
color: @menu-icon-hover;
}
}
}
}
// help
div.text {
font-size: @fsize-help;
font-weight: normal;
padding-left: 10px;
padding-right: 10px;
margin: 0;
pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: @fsans;
font-size: @fsize-help;
line-height: 1.3;
padding: 0 5px 0 5px;
margin: 0;
text-align: left;
}
.center {
text-align: center;
font-size: @fsize-help;
font-weight: bold;
text-decoration: underline;
font-style: italic;
color: @color3;
}
.label {
margin: 5px 0 5px 10px;
font-size: @fsize-help;
font-weight: bold;
font-style: italic;
color: @color3;
}
div {
font-family: @fsans;
font-size: @fsize-help;
font-weight: bold;
padding-top: 0;
padding-bottom: 0;
a {
background: @base-bg;
color: @text-color;
font-weight: normal;
&:hover {
background: lighten(@base-bg, 20%);
color: @text-color;
}
}
}
p {
font-size: @fsize-help;
font-weight: normal;
font-family: @fsans;
text-align: justify;
padding-bottom: 9px;
padding-right: 0;
padding-left: 10px;
}
}
}
.btn-wrapper {
width: 100%;
height: 2vw;
position: sticky;
top: 0;
padding: 0;
background: lighten(@wnd-bg, 5%);
.btn-copy {
position: absolute;
top: 1px;
right: 5vw;
box-sizing: border-box;
background: inherit;
color: @text-color;
border: none;
cursor: pointer;
width: 30px;
margin: 0;
padding: 0;
transition: background-color 0.3s;
&:hover {
background-color: @btn-hover;
}
// &.copied {
// background-color: @btn-copied;
// transform: scale(1.2);
// }
.copy-icon {
fill: @btn-color;
width: 20px;
height: 20px;
&:hover {
fill: @btn-hover-fg;
background: lighten(@wnd-bg, 15%);
}
}
}
.btn-close {
position: absolute;
top: 0;
right: 2vw;
margin: 0;
background-color: transparent;
border: none;
color: @btn-color;
font-size: @fsize-btn-close;
font-weight: bold;
cursor: pointer;
outline: none;
&:hover {
color: @btn-hover-fg;
background: lighten(@wnd-bg, 15%);
}
}
}
///////////////////////////////////////
//message
@popup-bg-color: #222222;
@popup-text-color: #ffeb3b;
@popup-border-color: #ffeb3b;
@popup-width: 300px;
@popup-height: 100px;
@font-size: 24px;
@border-radius: 15px;
.msg {
box-sizing: border-box;
position: fixed;
width: @popup-width;
height: @popup-height;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: @popup-bg-color; // Grigio scuro
color: @popup-text-color; // Giallo
border: 2px solid @popup-border-color; // Bordo giallo
border-radius: @border-radius;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: @font-size;
font-weight: bold;
text-align: center;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
//////////////// alert
@primary-color: #212121; // Dark primary color
@secondary-color: #37474f; // Dark secondary color
@text-color: #ffffff; // Text color
@background-color: #303030; // Background color
// Style the alert and confirm dialogs
.alert,
.confirm {
background-color: @background-color !important;
color: @text-color;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 4px #00000033 !important;
// Style the buttons
.button {
background-color: @secondary-color !important;
color: @text-color;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
&:hover {
background-color: darken(@secondary-color, 10%);
}
}
}