mirror of
https://github.com/nextcloud/all-in-one.git
synced 2026-09-19 17:50:20 +00:00
Christoph Schaefer
40cf236d20
Switching the card header to flex-start aligned the titles but also moved the checkmark on the Collabora and ONLYOFFICE cards, which the change was not meant to touch. Pin the checkmark back to centre so only the Euro-Office card is affected. Record where the 44px reservation comes from. It is the sum of three other declarations in the same file, one of them added alongside it, so the next person changing the title size has no way to know it needs updating. The QA checklist still told testers to look for "EuroOffice", which is no longer a label anywhere in the interface. The readme listed two office entries in a row with nothing telling them apart. Fix the pre-existing "additioinal" typo, which sits on a line this branch already rewrites. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Christoph Schaefer <christoph.schaefer@nextcloud.com>
829 lines
21 KiB
CSS
829 lines
21 KiB
CSS
:root {
|
|
--color-nextcloud-blue: #0082c9;
|
|
--color-nextcloud-logo: var(--color-nextcloud-blue);
|
|
--color-main-background: white;
|
|
--color-input-background: white;
|
|
--color-main-text: black;
|
|
--color-main-border: black;
|
|
--color-main-border-hover: var(--color-main-border);
|
|
--color-error: #db0606;
|
|
--color-error-hover: #df2525;
|
|
--color-error-text: #c20505;
|
|
--color-success: #46ba61;
|
|
--color-running: #ffd000;
|
|
--color-primary-element: #00679e;
|
|
--color-primary-element-hover: #005a8a;
|
|
--color-primary-element-text: #ffffff;
|
|
--color-primary-element-light: #e5eff5;
|
|
--color-primary-element-light-hover: #dbe4ea;
|
|
--color-primary-element-light-text: #00293f;
|
|
--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;
|
|
--border-radius-large: 12px;
|
|
--default-font-size: 13px;
|
|
--checkbox-size: 16px;
|
|
--max-width: 580px;
|
|
--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: 580px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 880px
|
|
Note: Unfortunately, it's not possible to calculate this dynamically using CSS variables in media queries */
|
|
@media only screen and (max-width: 880px) {
|
|
:root {
|
|
--container-top-margin: 50px;
|
|
--container-bottom-margin: 0px;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-main-background: #171717;
|
|
--color-input-background: #ebebeb;
|
|
--color-main-text: #ebebeb;
|
|
--color-nextcloud-logo: var(--color-main-text);
|
|
--color-main-border: var(--color-border-maxcontrast);
|
|
--color-main-border-hover: var(--color-main-text);
|
|
--color-error: #ff3333;
|
|
--color-error-hover: #ff6666;
|
|
--color-error-text: #ff8080;
|
|
--color-primary-element:#0091f2;
|
|
--color-primary-element-hover:#079cff;
|
|
--color-primary-element-text:#000000;
|
|
--color-primary-element-light:#14232c;
|
|
--color-primary-element-light-hover:#1e2d35;
|
|
--color-primary-element-light-text:#99d3f9;
|
|
--color-loader: var(--color-border-maxcontrast);
|
|
--border-hover: var(--border);
|
|
}
|
|
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--color-primary-element);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
a.button,
|
|
button.button,
|
|
input[type="submit"] {
|
|
padding: 8px 16px;
|
|
width: auto;
|
|
height: 34px;
|
|
cursor: pointer;
|
|
background-color: var(--color-primary-element);
|
|
font-weight: bold;
|
|
border-radius: var(--border-radius);
|
|
margin: 3px 3px 3px 0;
|
|
font-size: var(--default-font-size);
|
|
color: var(--color-primary-element-text);
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
a.button:focus,
|
|
button.button:focus,
|
|
input[type="submit"]:focus {
|
|
outline: 2px solid var(--color-main-border);
|
|
}
|
|
|
|
a.button:hover,
|
|
button.button:hover,
|
|
input[type="submit"]:hover {
|
|
background-color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
|
|
a.button.light:hover,
|
|
input[type="submit"].light:hover {
|
|
background-color: var(--color-primary-element-light);
|
|
color: var(--color-primary-element-light-text);
|
|
}
|
|
|
|
|
|
a.button.light,
|
|
input[type="submit"].light {
|
|
background-color: var(--color-primary-element-light);
|
|
}
|
|
|
|
a.button.error,
|
|
input[type="submit"].error {
|
|
background-color: var(--color-error);
|
|
}
|
|
|
|
a.button.error:hover,
|
|
input[type="submit"].error:hover {
|
|
background-color: var(--color-error-hover);
|
|
}
|
|
|
|
|
|
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
padding-bottom: 5px;
|
|
text-indent: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
span.error {
|
|
background-color: var(--color-error);
|
|
}
|
|
|
|
div.toast.error {
|
|
border-left-color: var(--color-error);
|
|
}
|
|
|
|
.status {
|
|
display: inline-block;
|
|
height: var(--checkbox-size);
|
|
width: var(--checkbox-size);
|
|
vertical-align: text-bottom;
|
|
border-radius: 50%
|
|
}
|
|
|
|
span.success {
|
|
background-color: var(--color-success);
|
|
}
|
|
|
|
span.running {
|
|
background-color: var(--color-running);
|
|
}
|
|
|
|
div.toast.success {
|
|
border-left-color: var(--color-success);
|
|
}
|
|
|
|
div.toast {
|
|
border-left: 3px solid;
|
|
right: 10px;
|
|
min-width: 200px;
|
|
box-shadow: 0 0 6px 0 rgba(77, 77, 77, 0.3);
|
|
padding: 12px;
|
|
margin-top: 45px;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-main-background) none;
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.nextcloud-logo {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
color: var(--color-nextcloud-logo);
|
|
}
|
|
|
|
.fallback-text {
|
|
display: none;
|
|
}
|
|
|
|
svg:not(:has(use)) .fallback-text {
|
|
display: block;
|
|
}
|
|
|
|
.login {
|
|
padding: 50px;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
width: 500px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: var(--border-radius-large);
|
|
}
|
|
|
|
.login > .monospace {
|
|
font-family: monospace, monospace, system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
font-size: 17px;
|
|
}
|
|
|
|
.login > form > input[type="password"],
|
|
.login > form > input[type="text"],
|
|
.login > form > input[type="submit"] {
|
|
width: 100%;
|
|
}
|
|
|
|
.login > img {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
|
|
.login a.button,
|
|
.login input[type="submit"] {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0px;
|
|
align-content: center;
|
|
}
|
|
|
|
.wrapper {
|
|
min-height: 100dvh;
|
|
min-width: 100vw;
|
|
position: fixed;
|
|
width: 100vw;
|
|
background-image: url("img/jo-myoung-hee-fluid.webp");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
html[data-theme="dark"] .wrapper {
|
|
background-image: url("img/jo-myoung-hee-fluid-dark.webp");
|
|
}
|
|
|
|
form {
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"],
|
|
select {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
height: 34px;
|
|
margin-bottom: 15px;
|
|
border-radius: var(--border-radius);
|
|
border: var(--border) solid var(--color-border-maxcontrast);
|
|
background: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
input[type="text"]:hover,
|
|
input[type="password"]:hover,
|
|
input[type="email"]:hover,
|
|
select:hover {
|
|
border: var(--border-hover) solid var(--color-main-border-hover);
|
|
}
|
|
|
|
textarea {
|
|
border-radius: var(--border-radius);
|
|
border: .5px solid var(--color-main-border);
|
|
max-width: 100%;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="email"]:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border: 1px solid var(--color-main-border);
|
|
}
|
|
|
|
/* Scroll bar for dark mode */
|
|
html[data-theme="dark"] ::-webkit-scrollbar {
|
|
width: 8px; /* Width of the scroll bar */
|
|
}
|
|
|
|
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
|
|
background-color: #444; /* Dark mode scrollbar thumb color */
|
|
border-radius: 4px; /* Rounded corners for the thumb */
|
|
}
|
|
|
|
html[data-theme="dark"] ::-webkit-scrollbar-track {
|
|
background-color: #333; /* Dark mode scrollbar track color */
|
|
}
|
|
|
|
/* Scroll bar for light mode */
|
|
::-webkit-scrollbar {
|
|
width: 8px; /* Width of the scroll bar */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #888; /* Light mode scrollbar thumb color */
|
|
border-radius: 4px; /* Rounded corners for the thumb */
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #f0f0f0; /* Light mode scrollbar track color */
|
|
}
|
|
|
|
.container {
|
|
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 - var(--container-height-calculation-difference));
|
|
overflow: hidden;
|
|
}
|
|
|
|
main {
|
|
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 - var(--main-height-calculation-difference));
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
word-break: break-word;
|
|
max-width: calc(var(--max-width) + calc(var(--main-padding) * 2));
|
|
margin: 0 auto;
|
|
padding-bottom: var(--main-padding);
|
|
}
|
|
|
|
.logo {
|
|
color: white;
|
|
height: 50px;
|
|
width: 62px;
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 1px;
|
|
bottom: 1px;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
height: 50px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
display: flex;
|
|
padding: 0 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
header > form {
|
|
margin-left: auto;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
/* Standard styling for enabled checkboxes */
|
|
input[type="checkbox"]:not(:disabled) {
|
|
width: var(--checkbox-size);
|
|
height: var(--checkbox-size);
|
|
-webkit-appearance: none; /* remove default styling */
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border: 1px solid var(--color-primary-element);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle; /* align checkbox vertically with text */
|
|
margin-top: -1px; /* adjust for better alignment */
|
|
}
|
|
|
|
/* Hover effects for enabled checkboxes */
|
|
input[type="checkbox"]:not(:disabled):hover {
|
|
border-color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
/* Checkmark styling for enabled checkboxes */
|
|
input[type="checkbox"]:checked:not(:disabled) {
|
|
background-color: var(--color-primary-element);
|
|
border-color: var(--color-border-maxcontrast);
|
|
}
|
|
|
|
input[type="checkbox"]:checked:not(:disabled)::after {
|
|
content: ''; /* Creates a pseudo-element for the checkmark */
|
|
position: absolute; /* Positions it absolutely */
|
|
left: 4px; /* Positioning of the checkmark */
|
|
top: 0; /* Positioning of the checkmark */
|
|
width: 4px; /* Width of the checkmark */
|
|
height: 9px; /* Height of the checkmark */
|
|
border: solid white; /* Color of the checkmark */
|
|
border-width: 0 2px 3px 0; /* Creates the checkmark shape */
|
|
transform: rotate(45deg); /* Rotates to form a checkmark */
|
|
}
|
|
|
|
/* Styling for disabled checkboxes (grayed out, no hover, no pointer) */
|
|
input[type="checkbox"]:disabled:not(:checked) {
|
|
background-color: var(--color-disabled);
|
|
border-color: var(--color-border-disabled);
|
|
cursor: default;
|
|
opacity: 0.5; /* Makes the checkbox appear faded */
|
|
}
|
|
|
|
/* Styling for disabled checked checkboxes (no pointer) */
|
|
input[type="checkbox"]:disabled:checked {
|
|
cursor: default;
|
|
}
|
|
|
|
input[type="checkbox"]:disabled:hover {
|
|
border-color: var(--color-border-disabled); /* Keeps disabled state without hover effect */
|
|
}
|
|
|
|
/* General Label styling */
|
|
label {
|
|
cursor: pointer;
|
|
margin-left: 4px;
|
|
line-height: var(--checkbox-size);
|
|
}
|
|
|
|
/* Label cursor for disabled checkboxes */
|
|
input[type="checkbox"]:disabled + label {
|
|
cursor: default;
|
|
}
|
|
|
|
/* Label styling for disabled, not checked checkboxes */
|
|
input[type="checkbox"]:disabled:not(:checked) + label {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.loading {
|
|
color: grey;
|
|
}
|
|
|
|
#overlay {
|
|
position: fixed; /* Sit on top of the page content */
|
|
display: none; /* Hidden by default */
|
|
width: 100%; /* Full width (cover the whole page) */
|
|
height: 100%; /* Full height (cover the whole page) */
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
|
|
z-index: 2;
|
|
}
|
|
|
|
#overlay.loading {
|
|
display: grid;
|
|
justify-items: center;
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
#overlay #overlay-log.visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 1s ease-in;
|
|
}
|
|
|
|
#overlay #overlay-log {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
align-self: start;
|
|
width: min(600px, calc(100vw - 4rem));
|
|
height: min(400px, calc(100vh - 14rem));
|
|
border-radius: var(--border-radius-large);
|
|
border: solid thin rgb(192, 192, 192);
|
|
background-color: var(--color-main-background);
|
|
}
|
|
|
|
/* deSEC registration modal (containers page) */
|
|
.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 3;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.modal .modal-content {
|
|
position: relative;
|
|
width: min(640px, 100%);
|
|
max-height: calc(100vh - 4rem);
|
|
background-color: var(--color-main-background);
|
|
border-radius: var(--border-radius-large);
|
|
border: solid thin rgb(192, 192, 192);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal .modal-content iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: min(640px, calc(100vh - 4rem));
|
|
border: 0;
|
|
}
|
|
|
|
.modal .modal-close {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
right: 0.5rem;
|
|
z-index: 1;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
|
|
body.modal-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* deSEC modal view body (desec.twig) */
|
|
.desec-modal-body,
|
|
.desec-modal-done {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Stack the deSEC form controls, each on its own line, instead of letting the
|
|
inline-block inputs flow side by side. */
|
|
.desec-modal-body form.xhr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.desec-modal-body form.xhr input[type="text"],
|
|
.desec-modal-body form.xhr input[type="email"],
|
|
.desec-modal-body form.xhr input[type="password"] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.overlay-iframe {
|
|
padding: 1rem;
|
|
font-family: monospace, system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
}
|
|
|
|
.loader {
|
|
border: 16px solid var(--color-loader);
|
|
border-radius: 50%;
|
|
border-top: 16px solid var(--color-nextcloud-blue);
|
|
width: 120px;
|
|
height: 120px;
|
|
-webkit-animation: spin 2s linear infinite; /* Safari */
|
|
animation: spin 2s linear infinite;
|
|
align-self: end;
|
|
}
|
|
|
|
/* Safari */
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* General theme button styling */
|
|
#theme-toggle {
|
|
position: fixed; /* Keep the button in the same position */
|
|
right: 30px; /* Adjust the distance from the right */
|
|
bottom: 30px; /* Adjust the distance from the bottom */
|
|
background-color: transparent; /* Make the background transparent */
|
|
border: none; /* Remove border */
|
|
font-size: 36px; /* Adjust font size */
|
|
cursor: pointer; /* Change cursor to pointer */
|
|
outline: none;
|
|
z-index: 9999; /* Ensures the icon is on top of every layer */
|
|
}
|
|
|
|
/* Icon styling: default state */
|
|
#theme-icon {
|
|
display: inline-block;
|
|
border-radius: 50%; /* Round shape */
|
|
position: relative; /* For the pseudo-element positioning */
|
|
transition: box-shadow 0.3s, background-color 0.3s; /* Smooth transition for hover effect */
|
|
opacity: 0.6; /* Slightly transparent by default */
|
|
filter: grayscale(100%); /* Make the icon black and white */
|
|
}
|
|
|
|
/* Create the inner glow effect with ::after */
|
|
#theme-icon::after {
|
|
content: ''; /* Empty content for the pseudo-element */
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0px; /* Invisible dot */
|
|
height: 0px; /* Invisible dot */
|
|
background-color: transparent; /* Invisible by default */
|
|
border-radius: 50%; /* Circle shape */
|
|
transform: translate(-50%, -50%); /* Center the dot */
|
|
transition: box-shadow 0.3s, background-color 0.3s; /* Smooth transition for hover */
|
|
}
|
|
|
|
/* Hover effect for both light and dark modes */
|
|
#theme-toggle:hover #theme-icon {
|
|
position: relative; /* Ensures stacking order */
|
|
filter: grayscale(0%); /* Restore full color */
|
|
opacity: 1; /* Fully visible on hover */
|
|
}
|
|
|
|
/* Inner glow when hovered */
|
|
#theme-toggle:hover #theme-icon::after {
|
|
box-shadow: 0 0 40px 40px rgba(128, 128, 128, 0.4); /* Blur effect from inside */
|
|
background-color: rgba(128, 128, 128, 0.2); /* Light glow inside */
|
|
}
|
|
|
|
/* Remove hover effects when not hovering */
|
|
#theme-toggle:not(:hover) #theme-icon {
|
|
opacity: 0.6; /* Slightly transparent */
|
|
}
|
|
/* Office Suite Feature Cards */
|
|
.office-suite-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 16px;
|
|
margin: 20px 0;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.office-radio {
|
|
display: none;
|
|
}
|
|
|
|
.office-card {
|
|
position: relative;
|
|
border: 2px solid var(--color-border-maxcontrast);
|
|
border-radius: var(--border-radius-large);
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background-color: var(--color-main-background);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.office-card-disabled {
|
|
opacity: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.office-card:hover {
|
|
border-color: var(--color-primary-element);
|
|
box-shadow: 0 4px 12px rgba(0, 130, 201, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
#office-collabora:checked + .office-card,
|
|
#office-onlyoffice:checked + .office-card,
|
|
#office-eurooffice:checked + .office-card {
|
|
border-color: var(--color-nextcloud-blue);
|
|
background: linear-gradient(135deg, rgba(0, 130, 201, 0.08) 0%, rgba(0, 130, 201, 0.02) 100%);
|
|
}
|
|
|
|
[data-theme="dark"] #office-collabora:checked + .office-card,
|
|
[data-theme="dark"] #office-onlyoffice:checked + .office-card,
|
|
[data-theme="dark"] #office-eurooffice:checked + .office-card {
|
|
background: linear-gradient(135deg, rgba(0, 145, 242, 0.15) 0%, rgba(0, 145, 242, 0.03) 100%);
|
|
}
|
|
|
|
.office-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
/* Reserve the vendor-line slot so a card without one keeps its title and
|
|
feature list level with the cards that have one.
|
|
44px = 24px title height + 4px vendor-line margin + 16px vendor line. */
|
|
min-height: 44px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.office-card h4 {
|
|
margin: 0;
|
|
height: 24px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.office-powered-by {
|
|
margin: 4px 0 0;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
color: var(--color-main-text);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.office-checkmark {
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
display: none;
|
|
}
|
|
|
|
#office-collabora:checked + .office-card .office-checkmark,
|
|
#office-onlyoffice:checked + .office-card .office-checkmark,
|
|
#office-eurooffice:checked + .office-card .office-checkmark {
|
|
display: block;
|
|
}
|
|
|
|
.office-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.office-features li {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
margin-bottom: 4px;
|
|
font-size: var(--default-font-size);
|
|
line-height: 1.5;
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.office-features li::before {
|
|
content: '•';
|
|
position: absolute;
|
|
left: 6px;
|
|
color: var(--color-nextcloud-blue);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.office-checkbox {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.office-learn-more {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
color: var(--color-primary-element);
|
|
text-decoration: none;
|
|
font-size: var(--default-font-size);
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.office-learn-more:hover {
|
|
color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
.office-learn-more svg {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.office-learn-more:hover svg {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.office-none-card {
|
|
text-align: center;
|
|
margin: 12px 0 20px 0;
|
|
}
|
|
|
|
.office-none-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: var(--color-primary-element);
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s ease;
|
|
padding: 8px 12px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.office-none-label:hover {
|
|
opacity: 1;
|
|
background-color: var(--color-primary-element-light);
|
|
}
|
|
|
|
#office-none:checked + .office-none-label {
|
|
opacity: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.inline-details {
|
|
display: inline;
|
|
}
|
|
|
|
/* Responsive adjustments for mobile */
|
|
@media only screen and (max-width: 800px) {
|
|
.office-suite-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|