kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-27 06:23:53 +01:00
Code Issues Activity

css UI fixes, new panel, code optimizaiton, security fixes

Browse Source
This commit is contained in:
Marek Farkaš
2025-02-16 13:26:35 +01:00
parent d40d7f5435
commit bb50aff7b4
21 changed files with 1279 additions and 1054 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
web/css/breadcrumbs.css
View File

@@ -14,9 +14,16 @@ h1 {
}
h1#tuner-name {
font-size: 32px;
font-size: 26px;
font-weight: 300;
text-transform: initial;
user-select: none;
cursor: pointer;
transition: 0.3s ease color;
}
h1#tuner-name:hover {
color: var(--color-main-bright);
}
h2 {
@@ -43,7 +50,8 @@ h4 {
.tooltiptext {
position: absolute;
background-color: var(--color-3);
background-color: var(--color-2);
border: 2px solid var(--color-3);
color: var(--color-text);
text-align: center;
font-size: 14px;
@@ -54,7 +62,7 @@ h4 {
transition: opacity 0.3s ease;
}
p#tuner-desc {
p.tuner-desc {
margin: 0;
}
@@ -116,61 +124,63 @@ table .form-group {
margin: 0;
}
#settings, #back-btn, #users-online-container {
background: transparent;
border: 0;
color: var(--color-text);
.hidden-panel {
display: none;
position: absolute;
top: 15px;
right: 15px;
font-size: 16px;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
border-radius: 50%;
transition: 500ms ease background;
cursor: pointer;
left: 0;
top: 100%;
width: 100%;
max-width: 1160px;
background: var(--color-1-transparent);
color: white;
text-align: left;
padding: 20px;
backdrop-filter: blur(5px);
z-index: 10;
border-radius: 0 0 15px 15px;
}
.chatbutton.hide-desktop {
#settings, #users-online-container, .chatbutton {
background: transparent;
border: 0;
color: var(--color-text);
position: absolute;
top: 15px;
left: 15px;
color: var(--color-4);
font-size: 16px;
width: 64px;
height: 64px;
line-height: 64px;
width: 48px;
height: 48px;
text-align: center;
border-radius: 50%;
transition: 500ms ease background;
border-radius: 15px;
transition: 300ms ease background;
cursor: pointer;
margin: 2px;
}
#settings:hover, #back-btn:hover, #users-online-container:hover {
background: var(--color-3);
#users-online-container {
margin-left: 10px;
}
.chatbutton, #settings {
background-color: var(--color-1);
}
#settings:hover, #users-online-container:hover, .chatbutton:hover {
background: var(--color-2);
}
#users-online-container {
top: 80px;
}
#back-btn {
left: 15px;
right: auto;
#af-list {
overflow-y: auto;
max-height: 345px;
}
#af-list ul {
display:list-item;
display: list-item;
padding: 0;
list-style-type: none;
margin-bottom: 0;
margin: 0;
font-size: 14px;
max-height: 380px;
overflow-y: auto;
}
#af-list a {
@@ -192,9 +202,9 @@ table .form-group {
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox label {
}
.checkbox label {
cursor: pointer;
display: block;
user-select: none;
@@ -204,45 +214,45 @@ table .form-group {
border: 2px solid var(--color-4);
box-sizing: border-box;
transition: 0.35s ease background-color, 0.35s ease color;
}
.checkbox label:hover {
}
.checkbox label:hover {
background-color: var(--color-2);
}
.form-group input:checked + label {
}
.form-group input:checked + label {
background-color: var(--color-4);
color: var(--color-main);
}
}
.tuner-info {
.tuner-info {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}
h2.settings-heading {
h2.settings-heading {
font-size: 42px;
padding: 10px 0;
font-weight: 300;
}
}
h3.settings-heading {
h3.settings-heading {
font-size: 24px;
text-transform: uppercase;
font-weight: 300;
margin-bottom: 5px;
}
}
#tuner-wireless {
#tuner-wireless {
display: none;
}
}
#flags-container-phone,
#flags-container-desktop {
#flags-container-phone,
#flags-container-desktop {
position: relative; /* Confine overlay within container which is necessary for iPhones */
}
}
#flags-container-phone .overlay,
#flags-container-desktop .overlay {
#flags-container-phone .overlay,
#flags-container-desktop .overlay {
position: absolute;
top: 0;
left: 0;
@@ -321,23 +331,28 @@ pre {
position: relative;
}
.text-200-px {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
}
@media (max-width: 768px) {
canvas, #flags-container {
display: none;
}
#tuner-desc {
.tuner-desc {
margin-bottom: 20px !important;
text-align: center;
}
#ps-container {
background-color: var(--color-1-transparent);
height: 100px !important;
margin: auto !important;
margin-top: 30px !important;
width: 100%;
}
h1#tuner-name {
max-width: 90%;
margin: auto;
}
h2 {
display: none;
}
@@ -364,7 +379,7 @@ pre {
font-size: 42px;
}
#data-frequency {
font-size: 64px;
font-size: 58px;
}
#data-rt0, #data-rt1 {
font-size: 10px;
@@ -426,7 +441,7 @@ pre {
}
}
@media only screen and (min-width: 769px) and (max-height: 860px) {
@media only screen and (min-width: 769px) and (max-height: 720px) {
#rt-container {
height: 90px !important;
}
@@ -441,38 +456,33 @@ pre {
font-size: 24px;
text-align: left;
}
.tuner-info #tuner-limit {
float: left;
text-align: left;
}
.tuner-info #tuner-desc {
float: right;
text-align: right;
}
h2 {
margin-bottom: 10px;
font-size: 18px;
}
h2.signal-heading {
margin-bottom: 0;
}
.highest-signal-container {
margin-bottom: -10px !important;
}
h2.mb-0 {
margin-bottom: 0;
margin-top: 2px !important;
}
#af-list ul {
height: 225px !important;
}
.chatbutton {
height: 88px !important;
#af-list {
overflow-y: auto;
max-height: 330px;
}
}