eightball/all-in-one
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2025-12-19 22:16:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

fix(ui): adjust height of main to fit in container

Browse source 
Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
This commit is contained in:
ernolf 2024-10-26 10:19:09 +02:00
parent 55b5469260
commit 4ff189fce1
No known key found for this signature in database
GPG key ID: 0B145139A170715C
1 changed files with 26 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

43
php/public/style.css
View file

@ -15,6 +15,9 @@
--color-info-hover: #00aaef;
--color-border-maxcontrast: #7d7d7d;
--color-loader: #f3f3f3;
--color-disabled: #d3d3d3; /* light gray background for disabled checkboxes */
--color-border-disabled: #a9a9a9; /* darker gray border for disabled checkboxes */
--color-text-disabled: #a9a9a9; /* matching label text color for disabled checkboxes */
--border: .5px;
--border-hover: 2px;
--border-radius: 7px;
@ -22,9 +25,21 @@
--default-font-size: 13px;
--checkbox-size: 16px;
--max-width: 500px;
--color-disabled: #d3d3d3; /* light gray background for disabled checkboxes */
--color-border-disabled: #a9a9a9; /* darker gray border for disabled checkboxes */
--color-text-disabled: #a9a9a9; /* matching label text color for disabled checkboxes */
--container-top-margin: 20px;
--container-bottom-margin: 20px;
--container-padding: 2px;
--container-height-calculation-difference: calc(var(--container-top-margin) + var(--container-bottom-margin));
--main-height-calculation-difference: calc(var(--container-height-calculation-difference) + calc(var(--container-padding) * 2));
--main-padding: 50px;
}
/* Breakpoint calculation: 500px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 800px
Note: Unfortunately, it's not possible to calculate this dynamically using CSS variables in media queries */
@media only screen and (max-width: 800px) {
:root {
--container-top-margin: 50px;
--container-bottom-margin: 0px;
}
}
[data-theme="dark"] {
@ -279,26 +294,26 @@ html[data-theme="dark"] ::-webkit-scrollbar-track {
}
.container {
margin: 20px auto;
padding: 2px;
max-width: calc(var(--max-width) + 108px);
margin: var(--container-top-margin) auto var(--container-bottom-margin) auto;
padding: var(--container-padding);
max-width: calc(var(--max-width) + calc(var(--main-padding) * 2) + 8px);
background-color: var(--color-main-background);
border-radius: var(--border-radius-large);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: calc(100dvh - 50px);
max-height: calc(100dvh - var(--container-height-calculation-difference));
overflow: hidden;
}
main {
padding-left: 50px;
padding-right: 50px;
padding-left: var(--main-padding);
padding-right: var(--main-padding);
background-color: transparent; /* transparent, since color comes from outer container */
color: var(--color-main-text);
max-height: calc(100dvh - 44px);
max-height: calc(100dvh - var(--main-height-calculation-difference));
overflow-y: auto;
box-sizing: border-box;
word-break: break-word;
max-width: calc(var(--max-width) + 100px);
max-width: calc(var(--max-width) + calc(var(--main-padding) * 2));
margin: 0 auto;
}
@ -499,9 +514,3 @@ input[type="checkbox"]:disabled:not(:checked) + label {
#theme-toggle:not(:hover) #theme-icon {
opacity: 0.6; /* Slightly transparent */
}
@media only screen and (max-width: 800px) {
.container {
margin: 50px auto 0px auto;
}
}