euzu/tuliprox
1
0
Fork 0
mirror of https://github.com/euzu/tuliprox.git synced 2026-10-05 15:32:31 +02:00
Code Issues Packages Projects Releases 5 Wiki Activity

css style fixes

Browse Source
This commit is contained in:
euzu
2026-04-01 11:12:33 +02:00
parent 1b6165abc5
commit 46f72001e2
37 changed files with 127 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/scss/_default.scss
+8 -9
View File
@@ -18,7 +18,7 @@
.tp__error-text {
color: var(--attention-color);
font-size: 1rem;
font-size: var(--font-size-base);
}
@media (pointer: fine) {
@@ -40,6 +40,11 @@
}
}
h1 {
font-size: var(--font-size-xl);
font-weight: bold;
}
button {
cursor: pointer;
}
@@ -77,7 +82,7 @@ option {
.svg-icon {
display: block;
pointer-events: none;
width: 1rem;
width: 1.3rem;
}
ul {
@@ -115,16 +120,10 @@ li {
-ms-user-select: none; /* IE/Edge */
}
@media (max-width: size.$mobile-breakpoint) {
h1 {
font-size: 1.1rem;
}
}
.tp__unauthorized {
height: 100%;
width: 100%;
font-size: 2rem;
font-size: var(--font-size-xl);
color: var(--text-color);
display: flex;
justify-content: center;
frontend/scss/_theme.scss
+42 -27
View File
@@ -23,7 +23,7 @@ body {
--mobile-size: size.$mobile-breakpoint;
--dashboard-mobile-size: size.$dashboard-mobile-breakpoint;
--sidebar-width-expanded: 160px;
--sidebar-width-collapsed: 42px;
--sidebar-width-collapsed: 36px;
--max-view-width: size.$dashboard-mobile-breakpoint;
--max-table-cell-width: 240px;
--max-dialog-card-height: 300px;
@@ -51,6 +51,14 @@ body {
--margin-small: 0.75rem;
--margin-default: 1rem;
--font-size-xs: 0.7rem;
--font-size-sm: 0.85rem;
--font-size-base: 0.9rem;
--font-size-norm: 1rem;
--font-size-md: 1.1rem;
--font-size-lg: 1.2rem;
--font-size-xl: 1.5rem;
--epg-row-height: 4rem;
--epg-header-height: 2rem;
--epg-channels-width: 300px;
@@ -59,29 +67,41 @@ body {
--tag-padding: 0.3rem 0.5rem;
--tag-border-radius: 0.5rem;
--icon-button-border-radius: 4px;
--theme-palette-contrast-base: #000000;
--theme-palette-contrast-inverse: #ffffff;
--source-editor-sidebar-collapsed-width: 2rem;
--source-editor-sidebar-expanded-width: 6rem;
--dashboard-card-icon-width: 3rem;
}
@media (max-width: size.$mobile-breakpoint) {
:root,
body {
--gap-small: 0.2rem;
--gap-default: 0.3rem;
--gap-large: 0.5rem;
--gap-larger: 0.75rem;
--gap-mini: 0.1rem;
--gap-small: 0.1rem;
--gap-default: 0.17rem;
--gap-large: 0.33rem;
--gap-larger: 0.5rem;
--padding-micro: 0.2rem;
--padding-mini: 0.3rem;
--padding-small: 0.5rem;
--padding-default: 0.75rem;
--padding-large: 1rem;
--padding-larger: 1.25rem;
--padding-micro: 0.07rem;
--padding-mini: 0.17rem;
--padding-small: 0.25rem;
--padding-default: 0.33rem;
--padding-large: 0.5rem;
--padding-larger: 0.67rem;
--margin-micro: 0.2rem;
--margin-mini: 0.3rem;
--margin-small: 0.5rem;
--margin-default: 0.75rem;
--margin-micro: 0.07rem;
--margin-mini: 0.17rem;
--margin-small: 0.25rem;
--margin-default: 0.33rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.8rem;
--font-size-base: 0.85rem;
--font-size-norm: 0.9rem;
--font-size-md: 0.95rem;
--font-size-lg: 1.05rem;
--font-size-xl: 1.15rem;
--epg-row-height: 3rem;
--epg-header-height: 1.5rem;
@@ -91,6 +111,9 @@ body {
:root,
body {
--theme-palette-contrast-base: #000000;
--theme-palette-contrast-inverse: #ffffff;
--theme-palette-surface: var(--theme-palette-neutral-surface-940);
--theme-palette-surface-soft: var(--theme-palette-neutral-surface-920);
--theme-palette-surface-muted: var(--theme-palette-neutral-surface-900);
@@ -480,17 +503,9 @@ body {
--text-button-primary-hover-background-color: var(--theme-brand-primary-hover-strong);
--text-button-primary-hover-color: var(--theme-brand-text-inverse);
--text-button-secondary-background-color: var(--theme-brand-secondary-soft);
--text-button-secondary-color: color-mix(
in srgb,
var(--theme-brand-danger) 72%,
var(--theme-brand-text-inverse)
);
--text-button-secondary-color: color-mix(in srgb, var(--theme-brand-danger) 72%, var(--theme-brand-text-inverse));
--text-button-secondary-hover-background-color: var(--theme-brand-secondary-hover);
--text-button-secondary-hover-color: color-mix(
in srgb,
var(--theme-brand-danger-strong) 74%,
var(--theme-brand-text-inverse)
);
--text-button-secondary-hover-color: color-mix(in srgb, var(--theme-brand-danger-strong) 74%, var(--theme-brand-text-inverse));
--text-button-tertiary-background-color: var(--theme-brand-tertiary-surface);
--text-button-tertiary-color: var(--theme-brand-tertiary-title);
--text-button-tertiary-hover-background-color: var(--theme-brand-tertiary-hover);
frontend/scss/app/_app.scss
-3
View File
@@ -29,9 +29,6 @@
padding: 0 var(--padding-large);
align-items: center;
overflow: hidden;
@media (max-width: size.$mobile-breakpoint) {
padding: 0 var(--padding-micro);
}
}
&__body > .tp__panel {
frontend/scss/app/components/_field_explanation.scss
+1 -1
View File
@@ -10,7 +10,7 @@
padding: 1rem;
border-radius: 8px;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.9rem;
font-size: var(--font-size-base);
overflow-x: auto;
margin: 1rem 0;
border: 1px solid var(--field-explanation-code-border-color);
frontend/scss/app/components/_filter.scss
+1 -1
View File
@@ -53,7 +53,7 @@
.bracket {
font-weight: bold;
font-size: 1.1rem;
font-size: var(--font-size-md);
}
.bracket-1 { color: var(--code-bracket-1-color); }
frontend/scss/app/components/_form.scss
+1 -1
View File
@@ -6,7 +6,7 @@
white-space: nowrap;
vertical-align: middle;
color: var(--text-color);
font-size: 1.1rem;
font-size: var(--font-size-md);
@if $flex {
flex: $flex;
frontend/scss/app/components/_input.scss
+2 -2
View File
@@ -39,7 +39,7 @@
padding-left: 2px;
color: var(--modest-text-color);
font-weight: bold;
font-size: 1rem;
font-size: var(--font-size-norm);
}
}
@@ -49,7 +49,7 @@ input {
box-sizing: border-box;
width: 100%;
font-family: inherit;
font-size: 1.1rem;
font-size: var(--font-size-md);
line-height: 1.5rem;
border: none;
color: var(--text-color);
frontend/scss/app/components/_keyvalue_editor.scss
+1 -1
View File
@@ -12,7 +12,7 @@
}
label{
font-size: 1.1rem;
font-size: var(--font-size-md);
}
&__inputs {
display: flex;
frontend/scss/app/components/_login.scss
+2 -2
View File
@@ -69,7 +69,7 @@
&-title {
color: var(--text-color);
padding: 8px;
font-size: 1.5rem;
font-size: var(--font-size-xl);
font-weight: bolder;
}
&-logo {
@@ -99,7 +99,7 @@
justify-content: center;
align-items: center;
color: var(--card-color);
font-size: 0.8rem;
font-size: var(--font-size-sm);
position: relative;
z-index: 1;
}
frontend/scss/app/components/_mapper_script.scss
+1 -1
View File
@@ -62,7 +62,7 @@
.bracket {
font-weight: bold;
font-size: 1.1rem;
font-size: var(--font-size-md);
}
.bracket-1 { color: var(--code-bracket-1-color); }
frontend/scss/app/components/_preferences.scss
-3
View File
@@ -29,9 +29,6 @@
@media (max-width: var(--media-size-mobile)) {
flex-flow: row;
}
//max-width: 48px;
//min-width: 48px;
//width: 48px;
@media (max-width: var(--media-size-mobile)) {
max-width: 32px;
min-width: 32px;
frontend/scss/app/components/_sidebar.scss
-5
View File
@@ -99,10 +99,6 @@
min-width: var(--sidebar-width-collapsed);
max-width: var(--sidebar-width-collapsed);
width: var(--sidebar-width-collapsed);
.tp__app-sidebar__content {
padding: var(--padding-mini) var(--padding-micro);
}
}
&.collapsed {
@@ -132,7 +128,6 @@
.tp__app-sidebar__header {
justify-content: center;
padding: var(--padding-micro);
gap: var(--gap-small);
}
frontend/scss/app/components/_table.scss
+1 -1
View File
@@ -30,7 +30,7 @@
position: sticky;
top: 0;
z-index: 2;
font-size: 1.1rem;
font-size: var(--font-size-md);
font-weight: bold;
//text-align: center;
padding: var(--padding-mini);
frontend/scss/app/components/_tabset.scss
+1 -1
View File
@@ -92,7 +92,7 @@
flex: 1;
padding: 0.6rem 1.2rem;
font-weight: 500;
font-size: 0.95rem;
font-size: var(--font-size-base);
text-align: center;
cursor: pointer;
background: none;
frontend/scss/app/components/_tag_list.scss
+1 -1
View File
@@ -8,7 +8,7 @@
box-sizing: border-box;
width: 100%;
font-family: inherit;
font-size: 1.1rem;
font-size: var(--font-size-md);
line-height: 1.5rem;
border: none;
color: var(--text-color);
frontend/scss/app/components/_text_button.scss
+1 -1
View File
@@ -16,7 +16,7 @@
gap: var(--gap-default);
padding: 0 var(--padding-default);
font-weight: bold;
font-size: 1rem;
font-size: var(--font-size-norm);
svg {
width: 1.5rem;
}
frontend/scss/app/components/_titled_card.scss
+1 -1
View File
@@ -9,7 +9,7 @@
left: 15px;
padding: 0 4px;
z-index: 2;
font-size: 14px;
font-size: var(--font-size-sm);
line-height: 1.2;
background: var(--titled-card-title-background);
}
frontend/scss/app/components/_toastr.scss
+1 -1
View File
@@ -15,7 +15,7 @@
align-items: center;
padding: var(--padding-default) var(--padding-large);
border-radius: var(--border-radius);
font-size: 1.1rem;
font-size: var(--font-size-md);
box-shadow: var(--toastr-shadow);
animation: fadeIn 0.3s ease-out;
frontend/scss/app/components/api_user/_api_user_view.scss
+1 -1
View File
@@ -71,7 +71,7 @@
overflow: auto;
.tp__collapse-panel__header {
font-size: 1.6rem;
font-size: var(--font-size-xl);
padding: 0;
span {
pointer-events: auto;
frontend/scss/app/components/config/_api_config.scss
+1 -1
View File
@@ -15,7 +15,7 @@
overflow: auto;
&-title {
font-size: 1.5rem;
font-size: var(--font-size-xl);
color: var(--modest-text-color);
}
}
frontend/scss/app/components/config/_config_view.scss
+3 -8
View File
@@ -72,11 +72,6 @@
gap: var(--gap-large);
background-color: var(--sub-card-background-color);
overflow: hidden;
h1 {
font-size: 1.2rem;
font-weight: bold;
}
}
&__cols-2,
@@ -116,7 +111,7 @@
&__title {
display: none;
color: var(--modest-text-color);
font-size: 1.5rem;
font-size: var(--font-size-xl);
margin-bottom: var(--margin-default);
@media (max-width: size.$mobile-breakpoint) {
display: block;
@@ -232,7 +227,7 @@
.tp__collapse-panel {
&__header {
padding: var(--padding-micro) 0;
font-size: 1.1rem;
font-size: var(--font-size-md);
}
&__body {
@@ -301,7 +296,7 @@
gap: var(--gap-default);
&-item {
font-size: 1.1rem;
font-size: var(--font-size-md);
color: var(--text-color);
}
}
frontend/scss/app/components/config/_local_library_config.scss
+1 -1
View File
@@ -11,7 +11,7 @@
flex-flow: row;
gap: var(--gap-default);
&-item {
font-size: 1.1rem;
font-size: var(--font-size-md);
color: var(--text-color);
}
}
frontend/scss/app/components/config/_messaging_config.scss
+2 -2
View File
@@ -13,7 +13,7 @@
h3 {
margin: var(--gap-small) 0;
font-size: 1rem;
font-size: var(--font-size-norm);
color: var(--text-color-secondary);
}
}
@@ -22,7 +22,7 @@
margin-top: var(--gap-small);
h3 {
margin: var(--gap-small) 0;
font-size: 0.9rem;
font-size: var(--font-size-base);
color: var(--text-color-secondary);
}
}
frontend/scss/app/components/config/_panel_api_config.scss
+2 -2
View File
@@ -30,7 +30,7 @@
&__input-subtitle {
color: var(--modest-text-color);
font-size: 0.9rem;
font-size: var(--font-size-base);
}
&__input-status {
@@ -87,7 +87,7 @@
gap: var(--gap-default);
h2 {
font-size: 1.05rem;
font-size: var(--font-size-md);
margin: 0;
}
}
frontend/scss/app/components/dashboard/_action_card.scss
+9 -10
View File
@@ -10,19 +10,18 @@
&__icon {
fill: inherit;
width: 3rem;
max-width: 3rem;
transform: translateY(-0.5rem);
width: var(--dashboard-card-icon-width);
max-width: var(--dashboard-card-icon-width);
img {
width: 3rem;
max-width: 3rem;
width: var(--dashboard-card-icon-width);
max-width: var(--dashboard-card-icon-width);
}
.svg-icon {
width: 3rem;
height: 3rem;
max-width: 3rem;
max-height: 3rem;
width: var(--dashboard-card-icon-width);
height: var(--dashboard-card-icon-width);
max-width: var(--dashboard-card-icon-width);
max-height: var(--dashboard-card-icon-width);
}
}
@@ -45,7 +44,7 @@
&__title {
color: var(--text-color);
font-weight: bold;
font-size: 1.1rem;
font-size: var(--font-size-md);
}
&__content {
frontend/scss/app/components/dashboard/_stats_view.scss
+4 -5
View File
@@ -24,13 +24,12 @@
display: flex;
flex-flow: row wrap;
gap: var(--gap-default);
}
&-group-provider {
@media (max-width: size.$dashboard-mobile-breakpoint) {
display: flex;
flex-flow: row wrap;
gap: var(--gap-default);
&-provider {
display: flex;
flex-flow: row wrap;
}
}
}
}
frontend/scss/app/components/dashboard/_status_card.scss
+1 -1
View File
@@ -7,7 +7,7 @@
}
&__body {
color: var(--text-color);
font-size: 1.1rem;
font-size: var(--font-size-md);
}
&__footer {
color: var(--modest-text-color);
frontend/scss/app/components/dashboard/_streams_view.scss
+6 -7
View File
@@ -57,7 +57,6 @@
@media (max-width: size.$dashboard-mobile-breakpoint) {
display: flex;
flex-flow: row wrap;
gap: var(--gap-large);
}
}
}
@@ -77,7 +76,7 @@
&__header {
font-size: 1.1rem;
font-size: var(--font-size-md);
color: var(--modest-text-color);
padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);
}
@@ -256,7 +255,7 @@
&__stat-label {
color: var(--tertiary-title-text-color);
font-size: 0.72rem;
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
}
@@ -265,10 +264,10 @@
font-weight: 600;
min-width: 0;
.tp__toggle-switch {
height: 1rem;
max-height: 1rem;
}
//.tp__toggle-switch {
// height: 1rem;
// max-height: 1rem;
//}
}
&__stat-value--ip {
frontend/scss/app/components/playlist/_playlist_explorer.scss
+4 -8
View File
@@ -269,7 +269,7 @@ $series-backdrop-mobile-height: 150px;
background-size: 70%;
background-position: right top;
border-radius: var(--border-radius);
font-size: 1.2rem;
font-size: var(--font-size-lg);
box-sizing: border-box;
width: 100%;
overflow: hidden;
@@ -277,7 +277,6 @@ $series-backdrop-mobile-height: 150px;
min-height: $series-backdrop-mobile-height;
max-height: $series-backdrop-mobile-height;
height: $series-backdrop-mobile-height;
font-size: 1rem;
}
&-backdrop {
@@ -306,7 +305,7 @@ $series-backdrop-mobile-height: 150px;
max-width: 60%;
background-size: cover;
background-position: center;
font-size: 1.2rem;
font-size: var(--font-size-lg);
color: var(--series-info-title-color);
z-index: 1;
}
@@ -316,10 +315,7 @@ $series-backdrop-mobile-height: 150px;
&__title {
font-weight: bold;
font-size: 2.5rem;
@media (max-width: size.$mobile-breakpoint) {
font-size: 1.1rem;
}
font-size: var(--font-size-lg);
color: var(--series-info-title-color);
}
@@ -338,7 +334,7 @@ $series-backdrop-mobile-height: 150px;
&-title {
font-weight: bold;
font-size: 2rem;
font-size: var(--font-size-xl);
}
}
}
frontend/scss/app/components/playlist/_playlist_explorer_view.scss
+1 -1
View File
@@ -40,7 +40,7 @@
flex-flow: row;
align-items: center;
gap: var(--gap-default);
font-size: 1.2rem;
font-size: var(--font-size-xl);
}
&-label {
color: var(--modest-text-color);
frontend/scss/app/components/playlist/_playlist_settings_view.scss
+1 -1
View File
@@ -34,7 +34,7 @@
flex-flow: row;
align-items: center;
gap: var(--gap-default);
font-size: 1.2rem;
font-size: var(--font-size-lg);
}
&-label {
color: var(--modest-text-color);
frontend/scss/app/components/rbac/_user_management.scss
-1
View File
@@ -14,7 +14,6 @@
display: grid;
grid-template-columns: repeat(auto-fit, minmax(size.$form-grid-cell-width, 1fr));
max-width: calc(size.$form-max-grid-cells * size.$form-grid-cell-width + 2 * 1rem);
gap: var(--gap-large);
box-sizing: border-box;
@media (max-width: size.$mobile-breakpoint) {
frontend/scss/app/components/setup/_setup.scss
+3 -3
View File
@@ -20,7 +20,7 @@
overflow: auto;
&__title {
font-size: 0.95rem;
font-size: var(--font-size-base);
font-weight: 700;
color: var(--modest-text-color);
margin-bottom: var(--padding-small);
@@ -75,7 +75,7 @@
justify-content: center;
min-width: 1.6rem;
height: 1.6rem;
font-size: 0.75rem;
font-size: var(--font-size-xs);
border-radius: 999px;
background: var(--table-header-background-color);
color: var(--modest-text-color);
@@ -83,7 +83,7 @@
}
&__label {
font-size: 0.9rem;
font-size: var(--font-size-base);
line-height: 1.2;
}
}
frontend/scss/app/components/source_editor/_source_editor.scss
+16 -25
View File
@@ -8,7 +8,7 @@
width: 100%;
height: 100%;
gap: var(--gap-default);
font-size: 1rem;
font-size: var(--font-size-norm);
&__header {
position: relative;
@@ -17,7 +17,7 @@
box-sizing: border-box;
width: 100%;
gap: var(--gap-default);
font-size: 1rem;
font-size: var(--font-size-norm);
}
&__content {
@@ -28,7 +28,7 @@
width: 100%;
height: 100%;
gap: var(--gap-default);
font-size: 1rem;
font-size: var(--font-size-norm);
overflow: hidden;
}
@@ -36,15 +36,22 @@
display: flex;
flex-flow: column;
box-sizing: border-box;
height: 100%;
min-height: 0;
gap: var(--gap-small);
transition: min-width 0.2s ease, max-width 0.2s ease, width 0.2s ease;
height: 100%;
min-height: 0;
&.expanded {
min-width: var(--source-editor-sidebar-expanded-width);
max-width: var(--source-editor-sidebar-expanded-width);
width: var(--source-editor-sidebar-expanded-width);
flex: 0 0 var(--source-editor-sidebar-expanded-width);
}
&.collapsed {
min-width: 3rem;
max-width: 3rem;
width: 3rem;
min-width: var(--source-editor-sidebar-collapsed-width);
max-width: var(--source-editor-sidebar-collapsed-width);
width: var(--source-editor-sidebar-collapsed-width);
flex: 0 0 var(--source-editor-sidebar-collapsed-width);
}
&-actions {
@@ -115,7 +122,7 @@
border-radius: var(--border-radius);
background-color: var(--card-background-color);
color: var(--text-color);
font-size: 0.85rem;
font-size: var(--font-size-sm);
text-align: center;
pointer-events: none;
}
@@ -153,22 +160,8 @@
@media (max-width: size.$mobile-breakpoint) {
.tp__source-editor {
&__content {
gap: var(--gap-small);
}
&__sidebar {
min-width: 3rem;
max-width: 3rem;
width: 3rem;
flex: 0 0 3rem;
&.expanded {
min-width: min(6rem, 30vw);
max-width: min(6rem, 30vw);
width: min(6rem, 30vw);
flex: 0 0 min(6rem, 30vw);
}
&-actions {
justify-content: center;
@@ -180,8 +173,6 @@
touch-action: pan-y;
.tp__source-editor__brick {
padding: var(--padding-small) var(--padding-mini);
font-size: 0.85rem;
word-break: break-word;
}
}
frontend/scss/app/components/source_editor/_source_editor_block.scss
+2 -2
View File
@@ -106,7 +106,7 @@ $port-size: 10px;
}
&-sub-label {
font-size: 0.8rem;
font-size: var(--font-size-sm);
color: var(--modest-text-color);
text-align: right;
pointer-events: none;
@@ -255,7 +255,7 @@ $port-size: 10px;
width: 100%;
&-label {
color: var(--modest-text-color);
font-size: 0.7rem;
font-size: var(--font-size-xs);
font-weight: bold;
width: 50%;
height: 100%;
frontend/scss/main.scss
+1 -1
View File
@@ -10,7 +10,7 @@ body {
padding: 0;
font-family: "Montserrat", sans-serif;
font-weight: normal;
font-size: 14px;
font-size: var(--font-size-sm);
background-color: var(--background-color);
height: 100%;
max-width: 100vw;
frontend/src/app/components/dashboard/stats_view.rs
+4 -2
View File
@@ -71,8 +71,10 @@ pub fn StatsView(props: &StatsViewProps) -> Html {
<h1>{ translate.t("LABEL.STREAMS")}</h1>
</div>
})}>
<div class="tp__stats__body-group">
<StreamsView embedded={true} />
<div class="tp__stats__body">
<div class="tp__stats__body-group">
<StreamsView embedded={true} />
</div>
</div>
</CollapsePanel>
</div>