d739b982bb
set Default action to "create amendment" (if permitted) put edit in the menu put next and prev motion in the menu (mobile) resort motion menu move "show enitre motion text" under the motion-preview change "show entire motion text" from button to checkbox create a custom tooltip for the main action in os-head-bar create a custom "cancel edit" function in os-head-bar overwork location.back logic
846 lines
17 KiB
SCSS
846 lines
17 KiB
SCSS
/** Imports the material-design-theming */
|
|
@import '~@angular/material/theming';
|
|
@include mat-core();
|
|
|
|
/** Import brand theme */
|
|
@import './assets/styles/openslides-general-theme.scss';
|
|
@import './assets/styles/openslides-theme.scss';
|
|
@import './assets/styles/openslides-dark-theme.scss';
|
|
@import './assets/styles/openslides-green-theme.scss';
|
|
@import './assets/styles/openslides-developer-theme.scss';
|
|
|
|
/** Import the component-related style sheets here */
|
|
@import './app/site/site.component.scss-theme.scss';
|
|
@import './assets/styles/global-components-style.scss';
|
|
@import './app/shared/components/projector-button/projector-button.component.scss';
|
|
@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
|
|
@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
|
|
@import './app/site/common/components/global-spinner/global-spinner.component.scss';
|
|
@import './app/shared/components/tile/tile.component.scss';
|
|
@import './app/shared/components/block-tile/block-tile.component.scss';
|
|
@import './app/shared/components/icon-container/icon-container.component.scss';
|
|
@import './app/site/common/components/start/start.component.scss';
|
|
@import './app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
|
|
|
|
/** fonts */
|
|
@import './assets/styles/fonts.scss';
|
|
@import '~material-icon-font/dist/Material-Icons.css';
|
|
|
|
/** NGrid */
|
|
@import '~@pebula/ngrid/theming';
|
|
$narrow-spacing: (
|
|
spacing: $pbl-spacing-theme-narrow
|
|
);
|
|
|
|
/** Mix the component-related style-rules */
|
|
@mixin openslides-components-theme($theme) {
|
|
@include os-site-theme($theme);
|
|
@include os-components-style($theme);
|
|
@include os-projector-button-style($theme);
|
|
@include os-list-of-speakers-style($theme);
|
|
@include os-sorting-tree-style($theme);
|
|
@include os-global-spinner-theme($theme);
|
|
@include os-tile-style($theme);
|
|
@include os-mediafile-list-theme($theme);
|
|
}
|
|
|
|
/** Load projector specific SCSS values */
|
|
@import './assets/styles/projector.scss';
|
|
|
|
.general-theme {
|
|
@include os-global-spinner-theme($openslides-general-theme);
|
|
}
|
|
|
|
/** Define the classes to switch between themes */
|
|
.openslides-theme {
|
|
@include angular-material-theme($openslides-theme);
|
|
@include openslides-components-theme($openslides-theme);
|
|
$ngrid-material-theme: pbl-light-theme($openslides-theme);
|
|
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
|
|
|
|
.logo-container {
|
|
img.dark {
|
|
display: none;
|
|
}
|
|
img.default {
|
|
display: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.openslides-dark-theme,
|
|
.openslides-developer-dark-theme {
|
|
.logo-container {
|
|
img.dark {
|
|
display: inherit;
|
|
}
|
|
img.default {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.openslides-dark-theme {
|
|
@include angular-material-theme($openslides-dark-theme);
|
|
@include openslides-components-theme($openslides-dark-theme);
|
|
$ngrid-material-theme: pbl-dark-theme($openslides-dark-theme);
|
|
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
|
|
}
|
|
|
|
.openslides-green-theme {
|
|
@include angular-material-theme($openslides-green-theme);
|
|
@include openslides-components-theme($openslides-green-theme);
|
|
$ngrid-material-theme: pbl-light-theme($openslides-green-theme);
|
|
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
|
|
}
|
|
|
|
.openslides-developer-dark-theme {
|
|
@include angular-material-theme($openslides-developer-theme);
|
|
@include openslides-components-theme($openslides-developer-theme);
|
|
$ngrid-material-theme: pbl-dark-theme($openslides-developer-theme);
|
|
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
|
|
|
|
* {
|
|
font-family: monospace !important;
|
|
color: mat-color(map-get($openslides-developer-theme, accent));
|
|
}
|
|
|
|
os-site {
|
|
.active mat-icon,
|
|
.active span {
|
|
color: mat-color(map-get($openslides-developer-theme, accent));
|
|
}
|
|
}
|
|
|
|
.custom-table-header {
|
|
background: #000;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.mat-toolbar.sticky-toolbar {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.mat-drawer-inner-container {
|
|
background: #000;
|
|
}
|
|
|
|
.mat-drawer-inner-container > * {
|
|
background: #000 !important;
|
|
z-index: 3;
|
|
|
|
.os-site.nav-toolbar {
|
|
background: #000;
|
|
}
|
|
}
|
|
|
|
.mat-drawer-content > * {
|
|
background: #000;
|
|
}
|
|
|
|
mat-icon {
|
|
font-family: 'Material Icons' !important;
|
|
}
|
|
|
|
.mat-mini-fab.projector-active {
|
|
background-color: mat-color(map-get($openslides-developer-theme, warn));
|
|
}
|
|
|
|
.mce-ico {
|
|
font-family: 'tinymce', Arial !important;
|
|
}
|
|
}
|
|
|
|
.pbl-ngrid-cell {
|
|
position: relative;
|
|
|
|
.fill {
|
|
display: inherit;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
// try to put all children in the in the vertical middle
|
|
* {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
}
|
|
|
|
.checkbox-ripple-padding {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.detail-link {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.pbl-ngrid-no-data {
|
|
position: absolute;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
top: 5%;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100px; /* Need a specific value to work */
|
|
font-style: italic;
|
|
}
|
|
|
|
/** Define the general style-rules */
|
|
* {
|
|
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
|
|
}
|
|
.mat-toolbar h2,
|
|
.mat-dialog-title {
|
|
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
mat-icon {
|
|
font-family: 'Material Icons' !important;
|
|
}
|
|
|
|
body {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
font-size: 14px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
.title-font,
|
|
.slidetitle h1,
|
|
.slidetitle h2 {
|
|
font-family: OSFont Condensed, Fira Sans Condensed, Roboto-condensed, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
padding-bottom: 10px;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-size: 36px;
|
|
}
|
|
h3 {
|
|
font-weight: 500;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
|
|
.mat-icon-button mat-icon {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
font-size: 90%;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
strong,
|
|
b,
|
|
.bold {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.generic-mini-button {
|
|
bottom: -28px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.save-button {
|
|
// needs to be important or will be overwritten locally
|
|
background-color: rgb(77, 243, 86) !important;
|
|
}
|
|
|
|
.text-success {
|
|
color: rgb(77, 243, 86);
|
|
}
|
|
|
|
// transform text to uppercase. Use on span, p, h, (...)
|
|
.upper {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.red-warning-text {
|
|
color: red;
|
|
mat-icon {
|
|
color: red !important;
|
|
}
|
|
}
|
|
|
|
.green-text {
|
|
// TODO better name/theming
|
|
color: #5a5;
|
|
}
|
|
|
|
.icon-text-distance {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.no-content {
|
|
text-align: center;
|
|
color: gray;
|
|
}
|
|
mat-card {
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) !important;
|
|
}
|
|
.os-card {
|
|
max-width: 770px;
|
|
margin-top: 20px !important;
|
|
margin-bottom: 20px !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
font-size: 16px;
|
|
|
|
.mat-select-arrow-wrapper {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.os-form-card {
|
|
width: 770px;
|
|
margin-top: 20px !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
font-size: 16px;
|
|
padding: 27px;
|
|
|
|
.mat-form-field {
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
|
|
.os-form-card-mobile {
|
|
margin-top: 20px !important;
|
|
margin-bottom: 20px !important;
|
|
|
|
.mat-form-field,
|
|
.mat-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.projector-card .mat-form-field-infix {
|
|
width: 290px;
|
|
}
|
|
|
|
// Shared table definitions
|
|
// TODO: Might be deprecated since we now have Virtual Scrolling Tables
|
|
%os-table {
|
|
width: 100%;
|
|
|
|
/** size of the mat row */
|
|
mat-row {
|
|
position: relative;
|
|
min-height: 60px;
|
|
}
|
|
mat-row.lg {
|
|
height: 110px;
|
|
min-height: 90px;
|
|
}
|
|
mat-row:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(0, 0, 0, 0.025);
|
|
}
|
|
mat-row.selected {
|
|
cursor: pointer;
|
|
background-color: rgba(0, 0, 0, 0.055);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
width: 0%;
|
|
margin-left: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
margin-left: -100%;
|
|
}
|
|
}
|
|
|
|
//custom table header for search button, filtering and more. Used in ListViews
|
|
.custom-table-header {
|
|
width: 100%;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: right;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
|
|
button {
|
|
border-radius: 0%;
|
|
}
|
|
|
|
input {
|
|
position: relative;
|
|
max-width: 400px;
|
|
z-index: 2;
|
|
padding-right: 5px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
mat-icon {
|
|
vertical-align: text-bottom;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.os-listview-table {
|
|
@extend %os-table;
|
|
|
|
/* multi select column */
|
|
.mat-column-selector {
|
|
flex: 0 0 60px;
|
|
}
|
|
/* projector button column */
|
|
.mat-column-projector {
|
|
flex: 0 0 40px;
|
|
overflow: visible;
|
|
}
|
|
/** hide mat header row */
|
|
.mat-header-row {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.os-headed-listview-table {
|
|
@extend %os-table;
|
|
}
|
|
|
|
/* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
|
|
mat-paginator {
|
|
min-height: 800px;
|
|
}
|
|
|
|
/* hide scrollbars caused by hidden filter dialog outside of the viewport */
|
|
.mat-drawer-content {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.card-plus-distance {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/**title of an app page*/
|
|
.app-name {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/**content of an app page*/
|
|
.app-content {
|
|
margin: 20px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
/**even distribution of elements in a row*/
|
|
.flex-spaced {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/**use to push content to the right side*/
|
|
.spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
mat-expansion-panel {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* This destroys the projector button in list views using extension panels. */
|
|
/*mat-panel-title mat-icon {
|
|
padding-right: 30px;
|
|
}*/
|
|
|
|
.hidden-cell {
|
|
flex: 0;
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
.file-drop-zone-style {
|
|
border: 2px dotted #0782d0 !important;
|
|
height: 100px;
|
|
}
|
|
|
|
.file-drop-content-style {
|
|
height: 100px;
|
|
|
|
.ngx-file-drop__drop-zone-label {
|
|
color: #0782d0;
|
|
line-height: 100px;
|
|
}
|
|
}
|
|
|
|
.os-tree {
|
|
.node-content-wrapper {
|
|
border: 1px black;
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
tree-loading-component {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mat-chip,
|
|
.mat-basic-chip {
|
|
font-size: 12px;
|
|
min-height: 22px !important;
|
|
border-radius: 5px !important;
|
|
padding: 0px 8px !important;
|
|
margin: 0;
|
|
line-height: 2;
|
|
display: inline-flex;
|
|
}
|
|
|
|
// to display quantities. Use in span or div
|
|
.os-amount-chip {
|
|
border-radius: 50%;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mat-chip:focus,
|
|
.mat-basic-chip:focus {
|
|
outline: none;
|
|
}
|
|
button.mat-menu-item.selected {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.mat-menu-item .mat-icon {
|
|
margin-right: 8px !important;
|
|
}
|
|
|
|
.meta-text-block .mat-icon-button {
|
|
margin-top: -12px !important;
|
|
}
|
|
.meta-text-block .mat-icon-button mat-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/** helper classes for margin/padding */
|
|
.spacer-top-3 {
|
|
margin-top: 3px !important;
|
|
}
|
|
.spacer-top-5 {
|
|
margin-top: 5px !important;
|
|
}
|
|
.spacer-top-10 {
|
|
margin-top: 10px !important;
|
|
}
|
|
.spacer-top-20 {
|
|
margin-top: 20px !important;
|
|
}
|
|
.spacer-bottom-10 {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
.spacer-bottom-20 {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
.spacer-bottom-40 {
|
|
margin-bottom: 40px !important;
|
|
}
|
|
.spacer-left-10 {
|
|
margin-left: 10px;
|
|
}
|
|
.spacer-left-20 {
|
|
margin-left: 20px;
|
|
}
|
|
.spacer-left-50 {
|
|
margin-left: 50px !important;
|
|
}
|
|
|
|
.button24 {
|
|
background-color: white;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
.icon24 {
|
|
font-size: 16px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.mat-mini-fab.large {
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
|
|
.mat-icon {
|
|
font-size: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
.title {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.mat-radio-button {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.content-container {
|
|
margin: 0 65px;
|
|
}
|
|
|
|
/**
|
|
* cdk-virtual-scroll-viewport requires a hight, otherwise it would always be 0
|
|
* Depending in mobile-mode and desktop mode we need to subtract different values
|
|
* from 100vh
|
|
*/
|
|
// no os-sort-filter-bar
|
|
.virtual-scroll-full-page {
|
|
height: calc(100vh - 64px);
|
|
}
|
|
|
|
/** css hacks https://codepen.io/edge0703/pen/iHJuA */
|
|
.innerTable {
|
|
display: inline-block;
|
|
line-height: 150%;
|
|
}
|
|
// with os-sort-filter-bar
|
|
.virtual-scroll-with-head-bar {
|
|
height: calc(100vh - 129px);
|
|
}
|
|
|
|
.ngrid-hide-head {
|
|
// For some reason, hiding the table header adds an empty meta bar.
|
|
.pbl-ngrid-container {
|
|
> div {
|
|
height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** media queries */
|
|
|
|
/* medium to small */
|
|
@media only screen and (max-width: 960px) {
|
|
.virtual-scroll-full-page {
|
|
height: calc(100vh - 64px);
|
|
}
|
|
|
|
.virtual-scroll-with-head-bar {
|
|
height: calc(100vh - 125px);
|
|
}
|
|
}
|
|
|
|
/* medium */
|
|
@media only screen and (min-width: 500px) and (max-width: 960px) {
|
|
.content-container {
|
|
margin: 0 25px;
|
|
}
|
|
.content-container h1 {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
/* small */
|
|
@media only screen and (max-width: 500px) {
|
|
.content-container {
|
|
margin: 0 15px;
|
|
}
|
|
.content-container h1 {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
/** more helper classes **/
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
.pointer:hover {
|
|
cursor: pointer;
|
|
}
|
|
.pointer.selected {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/** Colors **/
|
|
.lightblue {
|
|
background-color: rgb(33, 150, 243) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.darkblue {
|
|
background-color: rgb(63, 81, 181) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.green,
|
|
.success {
|
|
background-color: rgb(76, 175, 80) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.red,
|
|
.error {
|
|
background-color: rgb(255, 82, 82) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.yellow,
|
|
.warning {
|
|
background-color: rgb(255, 193, 7) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.bluegrey {
|
|
background-color: rgb(96, 125, 139) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.grey {
|
|
background-color: #e0e0e0 !important;
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
}
|
|
|
|
.multi-line-chip {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/* TODO: move to site.component.scss-theme.scss (does not work currently) */
|
|
|
|
/* make the .user-menu expansion panel look like the nav-toolbar above */
|
|
.user-menu {
|
|
min-height: 48px;
|
|
|
|
.mat-expansion-panel-header {
|
|
padding: 0 16px !important;
|
|
}
|
|
|
|
.mat-expansion-panel-body {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.mat-drawer-inner-container {
|
|
scrollbar-width: none; /* hide scrollbars in Firefox */
|
|
-ms-overflow-style: -ms-autohiding-scrollbar; /* hide scrollbars in Edge until the scrollable area is hovered */
|
|
}
|
|
|
|
.mat-drawer-inner-container::-webkit-scrollbar {
|
|
display: none !important; /* hide scrollbars in webkit browsers */
|
|
}
|
|
|
|
.import-table {
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.mat-header-cell {
|
|
min-width: 100px;
|
|
flex: 2;
|
|
padding-right: 8px;
|
|
}
|
|
.mat-cell {
|
|
min-width: 100px;
|
|
flex: 2;
|
|
padding-top: 2px;
|
|
padding-right: 8px;
|
|
}
|
|
.selection {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.import-done {
|
|
background-color: #cfc;
|
|
}
|
|
.import-error {
|
|
background-color: #fcc;
|
|
}
|
|
|
|
.code {
|
|
padding-left: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
div.wrapper {
|
|
display: flex;
|
|
vertical-align: bottom;
|
|
padding: 10px;
|
|
}
|
|
|
|
div.summary {
|
|
display: flex;
|
|
}
|
|
|
|
.hidden-input {
|
|
display: none;
|
|
}
|
|
|
|
.newBadge {
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.first-column {
|
|
flex: 1;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.filter-imports {
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
.table-view-list-title {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.ellipsis-overflow {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding-right: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.white {
|
|
color: white;
|
|
}
|
|
|
|
.queue {
|
|
.mat-expansion-panel-body {
|
|
padding: 0 !important;
|
|
}
|
|
}
|