Files
awo-hamburg-intranet/module/knowledgecenter_update/CSS/CSS.php

1396 lines
28 KiB
PHP
Raw Normal View History

<style>
.contact-image img {
border-radius: 999px;
width: 50px !important;
height: 50px !important;
object-fit: cover !important;
}
div#contactCards {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
margin-bottom: 1rem;
}
.fileItem:hover {
text-decoration: underline;
}
input#stateCheckbox {
width: auto;
margin: 1px 1px 1px 1px;
}
input#color_hex {
all: revert;
width: 30px !important;
border: 0;
border-radius: 5px;
}
label:has(#color_hex) {
display: flex;
align-items: center;
justify-content: space-between;
}
.card_title {
padding: 1rem;
font-weight: bold;
}
.post-aside-section .collection_content.accept_certificate {
float: unset;
}
.post-aside-section .certificate_wrapper {
flex-wrap: wrap;
gap: 1rem;
}
.aside_section input[type=checkbox] {
width: auto;
margin: 0;
}
.aside_section label:has(input[type=checkbox]) {
display: flex;
align-items: center;
gap: 5px;
}
#editVersionForm .post-edit-meta .keep-modified-at-field {
display: inline-flex;
flex-direction: column;
gap: 6px;
min-width: 220px;
}
#editVersionForm .post-edit-meta .keep-modified-at-field input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--clr-mandant);
}
#editVersionForm .post-edit-meta .keep-modified-at-label {
margin: 0;
line-height: 1.2;
white-space: nowrap;
}
.categories_grid.list_view .post_wiki {
display: flex;
align-items: center;
gap: 10px;
flex-direction: row;
border: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
padding-block: 10px;
}
.categories_grid.list_view .subcategory,
.categories_grid.list_view .category {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.titl .version_selected {
font-weight: bold;
}
hr {
background-color: var(--border);
height: 1px;
border: 0;
}
.subcat-list {
list-style: none;
padding: 0;
margin: 0;
border-left: 1px solid var(--border);
width: 100%;
max-width: 310px;
}
.subcat-list .subcategory-item {
cursor: pointer;
padding: 5px 1rem;
}
.subcat-list .subcategory-item:hover {
text-decoration: underline;
}
.subcat-list .subcategory-item:last-child {
border: 0;
}
div#overlayLoader {
width: 100%;
height: 100%;
position: fixed;
background: #00000069;
background-image: url(/layout/admin/img/icons/loader.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 2%;
z-index: 9999;
display: none;
left: 0;
top: 0;
}
small.category-item {
background: var(--bg-light);
padding: 2px 8px;
border: 1px solid var(--border);
display: inline-block;
border-radius: 45px;
}
div#changeCategoryGridView {
padding: 7px 10px;
background: var(--bg-light);
border-radius: var(--br);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.categories_grid.list_view {
grid-template-columns: 1fr;
gap: 0;
}
.categories_grid.list_view .card_title {
padding: 0;
}
.categories_grid.list_view .post_wiki img,
.categories_grid.list_view .subcategory img,
.categories_grid.list_view .category img {
border-radius: 5px;
max-width: 80px;
}
.categories_grid.list_view a.post_ext_link {
padding: 0;
}
.categories_grid.list_view .card_header {
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.post-certificate-banner .certificate_button {
background: red;
color: white;
}
.post-certificate-banner h3 {
color: red;
}
.post-certificate-banner {
display: flex;
flex-direction: column;
border: 1px solid red;
padding: 1rem;
border-radius: var(--br);
background: #ff00001c;
color: red;
align-items: flex-start;
gap: 10px;
}
.contact-card {
display: flex;
align-items: center;
gap: 1rem;
background: var(--bg-light);
padding: 1rem;
border-radius: var(--br);
border: 1px solid var(--border);
}
.empty-hint {
opacity: 0.5;
}
.tab-pane {
display: none;
}
.tab-pane.show {
display: block;
}
ul#languageTabs button.active {
border-bottom: 2px solid var(--clr-mandant);
font-weight: bold;
color: var(--clr-mandant);
}
div#languageTabsContent {
background: var(--bg-white);
padding: 1rem;
border: 1px solid var(--border);
margin-bottom: 1rem;
}
.single_image_group {
border: 1px solid var(--border);
border-radius: var(--br);
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.tabbar_with_button {
display: flex;
margin-bottom: 0;
align-items: center;
gap: 1rem;
padding: 6px 1rem 0px 1rem;
border: 1px solid var(--border);
border-bottom: 0;
background: var(--bg-light);
}
form#postSettingsForm h3 {
display: flex;
align-items: center;
gap: 1rem;
justify-content: space-between;
}
.settings .tagify {
flex: 1;
max-width: unset;
}
.post-action-btn-grey {
background: #e1e1e1;
padding: 4px 11px;
border-radius: 8px;
color: black;
cursor: pointer;
display: inline-block;
}
.titlebar_small h2::before {
display: none;
}
.titlebar_small h2 {
margin: 0;
}
.titlebar_small {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 5px;
}
.titlebar h1,
.titlebar h2,
.titlebar h3 {
margin: 0;
}
.titlebar {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 1rem;
justify-content: space-between;
}
.titlebar .searchbar {
flex: 1;
max-width: 500px;
}
.titlebar .searchbar input {
margin: 0;
}
.titlebar>div {
display: flex;
align-items: center;
gap: 10px;
}
div#filesDisplayContainer object {
display: none;
}
#article-files-content object {
display: none;
}
.fslightbox-container object {
width: 1000px;
}
.settings_container .tagify {
max-width: unset;
width: 100%;
}
.toggle_container {
display: none;
}
.settings_container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
padding-block-end: 1rem;
}
ul#languageTabs button:hover {
border-bottom: 2px solid var(--clr-mandant);
font-weight: bold;
color: var(--clr-mandant);
}
ul#languageTabs button {
background: transparent;
color: var(--fc-dark);
border-radius: 0;
}
.connectedSortable {
height: 500px;
border: 2px dashed var(--border);
background: white;
overflow-y: scroll;
}
div#contacts-content {
display: grid;
gap: 1rem;
}
.cardform_containern {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 1rem;
max-width: 1330px;
}
.deleteVersionBtn {
opacity: 0;
pointer-events: none;
}
div#versionList div:hover .deleteVersionBtn {
opacity: 1;
pointer-events: all;
}
img#displayImage {
border-radius: var(--br);
}
.post-meta {
max-width: 800px;
}
#message {
background: var(--bg-white);
border: 1px solid var(--border);
}
aside#editArea {
position: fixed;
right: 0;
top: 0;
max-width: calc(100% - 250px);
padding: 1rem;
background: var(--bg-white);
height: 100%;
width: 100%;
z-index: 9999;
overflow-y: scroll;
padding-block-end: 200px;
}
ul.connected_categories li {
border-bottom: 1px solid var(--border);
padding: 5px 0;
}
.blurred {
opacity: 0.7;
filter: blur(3px);
pointer-events: none;
}
ul.connected_categories a {
color: #36c;
}
ul.connected_categories a:hover {
text-decoration: underline;
}
.language-tabs.tab-bar {
border-bottom: 1px solid var(--border);
margin-bottom: 1rem;
}
.post-content p {
margin-bottom: 0px;
}
.post-content p:has(img) {
margin-block: 10px;
}
.post-content img {
border-radius: var(--br);
max-width: 100%;
height: auto;
}
/* Abwärtskompatibel: Alt-Bilder ohne width-Attribut bekommen weiterhin
auto-Skalierung. Bilder mit explizitem width="..." (durch Drag-Resize
gesetzt) respektieren ihre HTML-Größe. */
.post-content img:not([width]) {
width: auto;
}
/* Quill-Indent-Klassen für den Reader. Quill rendert eingerückte
Blöcke als <p class="ql-indent-N"> oder <li class="ql-indent-N">,
wobei N zwischen 1 und 8 liegen kann. quill.snow.css adressiert
diese Klassen nur innerhalb von .ql-editor (also im Editor selbst);
im Reader brauchen wir eigene Regeln. */
.post-content .ql-indent-1 { padding-left: 3em; }
.post-content .ql-indent-2 { padding-left: 6em; }
.post-content .ql-indent-3 { padding-left: 9em; }
.post-content .ql-indent-4 { padding-left: 12em; }
.post-content .ql-indent-5 { padding-left: 15em; }
.post-content .ql-indent-6 { padding-left: 18em; }
.post-content .ql-indent-7 { padding-left: 21em; }
.post-content .ql-indent-8 { padding-left: 24em; }
.post-content ol li {
list-style: auto;
}
.post-content table {
width: 100% !important;
margin-bottom: 1rem;
border-collapse: collapse;
table-layout: auto !important;
}
.post-content table p {
margin: 0 !important;
}
.post-content td,
.post-content th {
padding: 10px;
border: 1px solid var(--border);
text-align: left;
}
.post-teaser,
.post-content {
max-width: 800px;
}
.post-content a {
color: #36c;
text-decoration: underline;
}
.post-content ul li {
list-style: auto;
}
.post-action-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--clr-mandant);
color: white;
cursor: pointer;
padding: 5px;
}
.post-action-btn-small {
width: 20px;
height: 20px;
display: flex;
font-size: 11px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--clr-mandant);
color: white;
cursor: pointer;
line-height: 1;
padding: 5px;
}
.post-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--border);
padding-block-end: 1rem;
}
.post-title>div {
display: flex;
align-items: center;
gap: 10px;
}
.post-detail-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
gap: 1rem;
border-bottom: 1px solid var(--border);
white-space: nowrap;
overflow-y: auto;
}
#post-contacts {
display: grid;
gap: 1rem;
}
.post-left-container {
padding-right: 1rem;
border-right: 1px solid var(--border);
padding-block-start: 1rem;
min-height: 100vh;
}
ul.connected_categories {
padding: 0;
}
.post-grid-container {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
/* Wichtig: erlaubt den Items zu schrumpfen */
.post-grid-container>* {
min-width: 0;
}
.wiki main {
background: var(--bg-white);
}
.tab-bar {
display: flex;
align-items: center;
}
.tab-bar div,
.tab-bar a {
padding: 5px 10px;
cursor: pointer;
}
.tab-bar .active {
border-bottom: 2px solid var(--clr-mandant);
font-weight: bold;
}
.aside .tagify {
width: 100%;
flex: 1;
max-width: 700px;
}
.aside label {
margin-bottom: 5px;
}
.aside_toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.aside_section {
padding-block-end: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.aside {
background: var(--bg-white);
border-left: 1px solid var(--border);
padding: 0rem 1rem 0rem 1rem;
display: flex;
flex-direction: column;
}
.post-teaser {
margin-bottom: 1rem;
}
.post-content {
margin-bottom: 1rem;
}
.ql-editor {
resize: vertical;
/* Erlaubt vertikale Größenänderung */
overflow: auto;
/* Wichtig, damit die Resize-Leiste erscheint */
min-height: 450px;
/* Mindesthöhe setzen, damit es nicht zu klein wird */
}
span#createBtn {
border-radius: var(--br);
padding: 7px 10px;
color: black;
display: flex;
align-items: center;
gap: 5px;
background: #14b814;
color: white;
cursor: pointer;
white-space: nowrap;
}
/* Basis-Grid wie bei Pico: automatisch responsiv, 1rem Abstand */
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
.qlbt-operation-menu {
z-index: 99999 !important;
}
.ql-align-center {
text-align: center;
}
/* .post-content p:has(span) span {
padding: 10px;
border-radius: 5px;
} */
.post-content ol li[data-list="bullet"] {
list-style: disc;
}
.post-aside-section {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.post-meta-item {
display: flex;
align-items: center;
gap: 5px;
background: var(--bg-light);
padding: 1rem;
border-radius: var(--br);
border: 1px solid var(--border);
}
div#versionList>div {
display: grid;
gap: 1rem;
cursor: pointer;
grid-template-columns: 1fr 1fr;
white-space: nowrap;
}
.version_validity {
display: flex;
align-items: center;
gap: 1rem;
}
form#newCommentForm {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
button.send_comment {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #14b814;
color: white;
cursor: pointer;
padding: 5px;
}
input.input_round {
border-radius: 999px;
}
.replies {
padding-left: 2rem;
position: relative;
}
.replies:before {
content: '';
width: 1rem;
height: 2px;
background: var(--border);
position: absolute;
left: 1rem;
top: 40px;
}
.comment-toolbar {
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
}
.comment-content:hover .comment-toolbar {
opacity: 1;
}
.comment {
position: relative;
}
form.replyCommentForm {
padding: 19px 0px;
display: flex;
align-items: center;
gap: 1rem;
}
.replies:after {
content: '';
width: 2px;
height: 58px;
background: var(--border);
position: absolute;
left: 1rem;
top: -1rem;
}
.comment-content {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--border);
background: var(--bg-light);
padding: 1rem;
border: 1px solid var(--border);
border-radius: var(--br);
margin-bottom: 1rem;
gap: 1rem;
}
div#versionList .post-action-btn {
width: 20px;
height: 20px;
font-size: 10px;
text-decoration: none !important;
}
.editor {
border-radius: 0;
margin-bottom: 1rem;
}
.edit-columns {
display: flex;
gap: 1.5rem;
}
.edit-main {
flex: 1 1 0;
min-width: 0;
}
.edit-sidebar {
flex: 0 0 220px;
position: sticky;
top: 1rem;
align-self: flex-start;
}
.edit-sidebar hr {
margin: 1rem 0;
border: none;
border-top: 1px solid var(--border);
}
.edit-sidebar .post-action-btn-text.green {
width: 100%;
display: block;
text-align: center;
background: #14b814;
color: white;
border-color: #14b814;
}
.post-edit-meta {
display: flex;
flex-direction: column;
gap: 1rem;
}
aside#editArea h2 {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
aside#editArea h2:before {
display: none;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.post-title h1 {
margin: 0;
}
div#insert-table-btn {
padding: 5px;
background: #f5f5f5;
border-radius: 5px;
margin-top: 5px;
display: block;
text-align: center;
border: 1px solid #d6d6d6;
}
.categories_grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
form#categories_posts_listform .promoted a {
padding: 7px 10px;
background: var(--bg-light);
border-radius: var(--br);
border: 1px solid var(--border);
}
.wiki-list table th,
.wiki-list table td {
border-bottom: 1px solid var(--border);
padding: 5px 10px 5px 0px;
}
.wiki-list table tr:hover td,
.wiki-list table tr:hover th {
background: var(--bg-light);
}
.wiki-list table img {
width: 60px !important;
height: 40px !important;
object-fit: cover;
border-radius: var(--br);
}
.fileItem {
display: flex;
gap: 10px;
}
.fileItem span {
opacity: 0;
}
.fileItem:hover span {
opacity: 1;
}
.wiki-list table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.categories_grid .post_wiki {
background: var(--bg-white);
border-radius: var(--br);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
a.post_ext_link {
padding: 1rem;
padding-block-start: 0;
text-decoration: underline;
color: #4c4cd1;
}
.post-content iframe {
width: 100%;
border-radius: var(--br);
aspect-ratio: 16 / 9;
height: auto;
}
.categories_grid .card_header {
display: flex;
flex-direction: column;
}
li.search-item a {
display: flex;
align-items: center;
gap: 1rem;
}
small {
font-size: smaller;
}
mark {
background-color: mark;
color: marktext;
}
li.search-item:hover {
background: var(--bg-light);
}
small.contacts svg {
width: 10px;
height: 10px;
}
li.search-item img {
width: 70px !important;
height: 50px ! Important;
object-fit: cover;
border-radius: var(--br);
}
li.search-item {
border-bottom: 1px solid var(--border);
padding: 1rem 0;
}
ul.search-list {
padding: 0;
margin: 0;
}
button#loadMoreBtn {
margin-block: 1rem;
}
.category_page_title {
font-size: 20px;
font-weight: bold;
}
.category_page_titlebar {
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1rem;
padding-block-end: 0.5rem;
}
.card_title span {
display: block;
font-size: 11px;
font-weight: normal;
opacity: 0.7;
}
.categories_grid a img {
aspect-ratio: 16 / 9;
height: auto !important;
}
.categories_grid.single_page a img {
aspect-ratio: 16 / 9;
height: auto !important;
}
ul.version-list {
padding-left: 0;
margin: 0;
}
.post-item {
padding: 1rem;
margin-bottom: 1rem;
border-radius: var(--br);
border: 1px solid var(--border);
}
.post-item:hover {
background: var(--bg-light);
}
.post-item-title {
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding-block-end: 8px;
gap: 10px;
}
ul.version-list li {
display: flex;
align-items: center;
gap: 1rem;
justify-content: space-between;
padding: 1px 0;
}
.subcategory-search {
margin-bottom: 1rem;
}
.list-group li:hover span.deleteCategory.post-action-btn-small {
opacity: 1;
}
span.deleteCategory.post-action-btn-small {
opacity: 0;
}
.list-group {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
max-width: 900px;
border: 1px solid var(--border);
border-bottom: 0;
}
.list-group li {
padding: 0;
background-color: var(--bg-white);
border-bottom: 1px solid var(--border);
cursor: move;
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
}
span.status {
border-radius: 999px;
background: var(--bg-light);
border: 1px solid var(--border);
font-size: 12px;
line-height: 1;
width: 10px;
height: 10px;
display: inline-block;
}
table.quill-better-table td {
border: 1px solid var(--border) !important;
padding: 2px 5px;
}
.post-action-btn-text {
padding: 10px 14px;
background: var(--bg-light);
border: 1px solid var(--border);
cursor: pointer;
line-height: 1.5;
border-radius: var(--br);
}
.post-action-btn-text.red {
background: rgb(184, 20, 20);
color: white;
border-color: rgb(184, 20, 20);
}
span.status.active {
background: #14b914;
color: white;
border-color: #14b914;
}
span.status.inactive {
background: rgb(185, 20, 20);
color: white;
border-color: rgb(185, 20, 20);
}
.list-group li>div {
display: flex;
align-items: center;
gap: 15px;
padding: 1rem
}
.list-group li:hover {
background-color: var(--bg-light);
}
.list-group .ui-sortable-helper {
background-color: var(--bg-white) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button.unlinkSubcategory {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-size: 10px;
line-height: 1;
padding: 0;
background: var(--bg-light);
color: red;
}
.category_sub_select {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.category_sub_select_container {
flex: 1;
}
ul#languageTabs {
display: flex;
align-items: center;
padding: 0;
margin: 0;
flex: 1;
white-space: nowrap;
}
.post-action-btn.green {
background: #14b814;
color: white;
}
.post-action-btn-small.green {
background: #14b814;
color: white;
}
a[role="button"].green {
background: #14b814;
border: 1px solid #14b814;
padding: 7px 10px;
}
.post-action-btn.red {
background: rgb(184, 20, 20);
color: white;
}
.post-action-btn-small.red {
background: rgb(184, 20, 20);
color: white;
}
.post-action-btn.grey {
background: #cdcdcd;
color: black;
}
.post-preview-embed {
margin-bottom: 1rem;
border-radius: var(--br);
overflow: hidden;
}
.settings_container label:has(input[type="checkbox"]) {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
#postColorPickersSection {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
#postColorPickersSection .post-color-item {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
}
#postColorPickersSection .post-color-item label {
margin: 0;
font-weight: var(--fw-bold);
font-size: var(--fs-700);
line-height: 1.2;
white-space: nowrap;
}
#postColorPickersSection input[type="color"] {
all: revert;
width: 44px !important;
min-width: 44px;
height: 30px;
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
cursor: pointer;
}
#postColorPickersSection input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
#postColorPickersSection input[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: 5px;
}
#postColorPickersSection input[type="color"]::-moz-color-swatch {
border: 0;
border-radius: 5px;
}
hgroup h3 {
margin: 0;
}
hgroup {
margin-bottom: 10px;
}
span.post_title_list {
margin-bottom: 5px;
display: inline-block;
font-weight: bold;
}
.post-content p:has(code) {
margin: 0;
line-height: 1;
margin-bottom: -1px;
}
.ql-snow .ql-editor img {
max-width: 100%;
height: auto;
}
.ql-snow .ql-editor img:not([width]) {
width: auto;
}
.ql-toolbar.ql-snow {
position: sticky;
top: -20px;
z-index: 99999;
background: var(--bg-white);
}
@media (max-width: 992px) {
#postColorPickersSection {
grid-template-columns: 1fr;
}
.post-grid-container {
grid-template-columns: 1fr;
}
.post-left-container {
padding-right: 0;
border-right: 0;
padding-block-start: 1rem;
min-height: unset;
}
div#versionList div {
grid-template-columns: 1fr;
}
}
</style>