806 lines
15 KiB
SCSS
806 lines
15 KiB
SCSS
$notification_base_color: #F9DEDE !default;
|
||
|
||
$notification_error_color: $notification_base_color !default;
|
||
$notification_warning_color: saturate(adjust-hue($notification_base_color, 45deg), 20%) !default;
|
||
$notification_success_color: adjust-hue($notification_base_color, 120deg) !default;
|
||
$notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
|
||
|
||
// $notification-style:
|
||
// classic: black icon
|
||
// border-icon: colored icon on left boder
|
||
// border-bar: colored bar with icon on the left
|
||
$notification-style: classic !default;
|
||
|
||
$notification-icon-size: null !default;
|
||
|
||
$timetable-cell-background: transparentize($button-background, 0.8) !default;
|
||
$timetable-cell-hover-color: $button-color !default;
|
||
$timetable-cell-hover-background: $button-background !default;
|
||
$timetable-cell-selected-color: $timetable-cell-hover-color !default;
|
||
$timetable-cell-selected-background: $timetable-cell-hover-background !default;
|
||
|
||
@if $notification-style == border-bar {
|
||
$notification-icon-size: 1.5rem !default;
|
||
} @else {
|
||
$notification-icon-size: 2rem !default;
|
||
}
|
||
|
||
$notification-left-padding: calc(#{$notification-icon-size} + 2rem);
|
||
@if $notification-style == border-icon {
|
||
$notification-left-padding: $notification-icon-size;
|
||
}
|
||
@if $notification-style == border-bar {
|
||
$notification-left-padding: calc(#{$notification-icon-size} + 1rem);
|
||
}
|
||
|
||
$notification-icon-position: top !default; // top || center
|
||
|
||
// add a border with "OU" between authentication blocks
|
||
$or-separator: if($cell-border == none, true, false) !default;
|
||
|
||
div.textcell {
|
||
h3, h4, h5, p, table {
|
||
margin: 0.7em 1rem;
|
||
}
|
||
}
|
||
|
||
span#environment-label,
|
||
div#footer div.cell.test-banner {
|
||
position: fixed;
|
||
line-height: 200%;
|
||
font-weight: bold;
|
||
color: white;
|
||
top: 5em;
|
||
right: -5em;
|
||
background: red;
|
||
width: 25em;
|
||
z-index: 1000;
|
||
@include vendor-prefix('transform', 'rotate(45deg)');
|
||
@include vendor-prefix('transform-origin', 'center center');
|
||
text-align: center;
|
||
border: 2px solid darken(#f00, 10%);
|
||
white-space: pre;
|
||
opacity: 0.9;
|
||
pointer-events: none;
|
||
@media screen and ($max-mobile-viewport) {
|
||
top: auto;
|
||
bottom: 3rem;
|
||
right: -1rem;
|
||
width: 25vw;
|
||
padding: 0 1rem;
|
||
font-size: 70%;
|
||
opacity: 0.7;
|
||
border: 0;
|
||
@include vendor-prefix('transform', 'rotate(-45deg)');
|
||
@include vendor-prefix('transform-origin', 'bottom right');
|
||
}
|
||
}
|
||
|
||
div#footer div.cell.test-banner p {
|
||
margin: 0;
|
||
}
|
||
|
||
#login-methods {
|
||
width: 48%;
|
||
float: left;
|
||
}
|
||
|
||
#welcome-text {
|
||
padding: 0 1em;
|
||
width: 48%;
|
||
width: calc(48% - 2em);
|
||
float: right;
|
||
}
|
||
|
||
|
||
@media screen and ($max-mobile-viewport) {
|
||
#welcome-text,
|
||
#login-methods {
|
||
width: auto;
|
||
float: none;
|
||
}
|
||
}
|
||
|
||
div#login-methods label {
|
||
display: block;
|
||
}
|
||
|
||
div#login-methods input {
|
||
margin-left: 0.7em;
|
||
}
|
||
|
||
@if $or-separator {
|
||
// add a border with "OU" between authentication blocks
|
||
#registration-blocks .a2-block:not(:first-child),
|
||
#login-page .block:not(:first-child) {
|
||
position: relative;
|
||
padding-left: 2rem;
|
||
border-radius: 0;
|
||
overflow: visible;
|
||
&::after {
|
||
content: "OU";
|
||
display: block;
|
||
position: absolute;
|
||
left: -1.5rem;
|
||
width: 3rem;
|
||
text-align: center;
|
||
top: 0;
|
||
height: 100%;
|
||
line-height: 3rem;
|
||
padding-top: 1rem;
|
||
background-image:
|
||
linear-gradient(black, black),
|
||
linear-gradient(black, black);
|
||
background-size: 1px 1rem, 1px 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center 0, center 4rem;
|
||
}
|
||
@media screen and ($max-mobile-viewport) {
|
||
padding-left: 0;
|
||
margin-top: 3rem;
|
||
&::after {
|
||
padding-top: 0;
|
||
left: 0;
|
||
top: -3rem;
|
||
height: 3rem;
|
||
width: 100%;
|
||
background-size: calc(50% - 2rem) 1px;
|
||
background-repeat: no-repeat;
|
||
background-position: right, left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.block-fc a.button:focus {
|
||
@if $button-focus-outline == none {
|
||
outline: 1px dotted $button-background;
|
||
} @else {
|
||
outline: $button-focus-outline;
|
||
outline-offset: $button-focus-outline-offset;
|
||
}
|
||
}
|
||
|
||
div.card,
|
||
#profile {
|
||
.label {
|
||
color: lighten($font-color, 20%);
|
||
font-size: 90%;
|
||
display: block;
|
||
}
|
||
|
||
.value {
|
||
display: block;
|
||
margin-left: 0;
|
||
margin-bottom: 0.7em;
|
||
span.nodata {
|
||
font-style: italic;
|
||
}
|
||
}
|
||
}
|
||
|
||
.consents {
|
||
&--list {
|
||
padding-left: 0;
|
||
list-style: none;
|
||
}
|
||
&--form {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
&--client {
|
||
display: block;
|
||
font-size: 110%;
|
||
}
|
||
&--dates {
|
||
font-size: 90%;
|
||
}
|
||
@media screen and ($max-mobile-viewport) {
|
||
&--since, &--expired {
|
||
display: block;
|
||
}
|
||
&--separator {
|
||
display: none;
|
||
}
|
||
}
|
||
form div button {
|
||
margin-right: 0;
|
||
min-width: auto;
|
||
}
|
||
}
|
||
|
||
|
||
a#publik-portal-agent {
|
||
z-index: 10000;
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 5px;
|
||
background: white;
|
||
color: #767676;
|
||
padding: 5px 10px;
|
||
border: 1px solid;
|
||
border-width: 0 1px 1px 1px;
|
||
@media screen and ($max-mobile-viewport) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
div#consent_banner {
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 10000;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
text-align: center;
|
||
box-shadow: 0 0 8px 1px #666;
|
||
padding: 0.7em 0;
|
||
bottom: 0;
|
||
|
||
& div.actions {
|
||
padding-top: 0.7em;
|
||
}
|
||
|
||
& button {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
%top-consent-banner {
|
||
@media screen and ($max-mobile-viewport) {
|
||
position: absolute;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
box-shadow: 0 0 8px 1px #333;
|
||
top: 0;
|
||
bottom: auto;
|
||
}
|
||
}
|
||
|
||
@if $nav-mobile-mode == bottom-bar {
|
||
div#consent_banner {
|
||
@extend %top-consent-banner;
|
||
}
|
||
} @else {
|
||
.has-pwa-navigation div#consent_banner {
|
||
@extend %top-consent-banner;
|
||
}
|
||
}
|
||
|
||
.block-password input[type=text], .block-password input[type=password] {
|
||
width: 25em;
|
||
}
|
||
|
||
ul.logout-list {
|
||
padding: 0;
|
||
margin: 1em;
|
||
}
|
||
|
||
div#continue-link {
|
||
margin: 1em;
|
||
}
|
||
|
||
// overlay for page changes; this requires one of transitions/$foo.scss files,
|
||
// (see additional explanations in there) and some custom javascript code to
|
||
// create the overlay on a given event; for example:
|
||
//
|
||
// $(function() {
|
||
// $(window).on('pageshow', function() {
|
||
// $('#page-change-overlay').remove();
|
||
// });
|
||
// $('form.quixote').on('submit', function() {
|
||
// var overlay = $('<div id="page-change-overlay"></div>').appendTo('body');
|
||
// overlay[0].offsetHeight; // force redraw to get fade-in of overlay
|
||
// overlay.toggleClass('on');
|
||
// return true;
|
||
// });
|
||
// });
|
||
div#page-change-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
transition: all 0.3s ease;
|
||
z-index: 100000;
|
||
background: white;
|
||
opacity: 0;
|
||
}
|
||
|
||
div#page-change-overlay.on {
|
||
z-index: 100000;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
// django.contrib.messages
|
||
#messages {
|
||
& ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
}
|
||
|
||
@mixin notification-message-base($color, $symbol) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background: $color;
|
||
color: text-color($color);
|
||
margin-top: 1rem;
|
||
margin-bottom: 1rem;
|
||
padding: 0.5rem;
|
||
padding-left: $notification-left-padding;
|
||
position: relative;
|
||
border: none;
|
||
min-height: calc(#{$notification-icon-size} + 1rem);
|
||
@if $notification-style == border-icon {
|
||
border-left: 4px solid darken($color, 40%);
|
||
}
|
||
@if $notification-style == border-bar {
|
||
padding-left: 1rem;
|
||
border: 1px solid $color;
|
||
border-left-width: $notification-left-padding ;
|
||
background: white;
|
||
color: $font-color;
|
||
}
|
||
|
||
&::before {
|
||
content: $symbol;
|
||
font-family: FontAwesome;
|
||
font-size: $notification-icon-size;
|
||
line-height: 1;
|
||
text-align: center;
|
||
display: block;
|
||
width: 1em;
|
||
height: 1em;
|
||
position: absolute;
|
||
margin: auto;
|
||
left: 0;
|
||
right: calc(100% - #{$notification-left-padding});
|
||
top: 0.5rem;
|
||
@if $notification-icon-position == center {
|
||
bottom: 0.5rem
|
||
}
|
||
@if $notification-style == border-icon {
|
||
color: darken($color, 40%);
|
||
background: white;
|
||
border-radius: 50%;
|
||
transform: translateX(calc(#{$notification-icon-size / -2} - 2px));
|
||
}
|
||
@if $notification-style == border-bar {
|
||
color: white;
|
||
left: calc( -1 * #{$notification-left-padding});
|
||
right: 100%;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 0.6rem 0;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
@mixin notification-message($color, $symbol) {
|
||
@include notification-message-base($color, $symbol);
|
||
&[class*=grid-].comment-field {
|
||
// adapt when used as comment field in grid system.
|
||
@if $grid-gutter != 0px {
|
||
box-sizing: border-box;
|
||
}
|
||
margin-right: 1rem;
|
||
}
|
||
&:not([class*=grid-]).comment-field {
|
||
// clear everything if not in a grid.
|
||
clear: both;
|
||
}
|
||
|
||
.gru-content &.cell {
|
||
h2:first-child {
|
||
background: transparent;
|
||
font-weight: bold;
|
||
padding: 0;
|
||
margin: 0;
|
||
color: inherit;
|
||
}
|
||
}
|
||
}
|
||
|
||
.errornotice { @include notification-message($notification_error_color, "\f06a"); }
|
||
.warningnotice { @include notification-message($notification_warning_color, "\f071"); }
|
||
.successnotice { @include notification-message($notification_success_color, "\f058"); } // check-circle
|
||
.infonotice { @include notification-message($notification_info_color, "\f05a"); }
|
||
|
||
#messages li.error { @extend .errornotice; }
|
||
#messages li.warning { @extend .warningnotice; }
|
||
#messages li.success { @extend .successnotice; }
|
||
#messages li.info { @extend .infonotice; }
|
||
|
||
form ul.errorlist.nonfield {
|
||
margin-top: 0;
|
||
li {
|
||
@extend .errornotice;
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
// lingo cells
|
||
table.invoices th.invoice-amount,
|
||
td.amount {
|
||
text-align: right;
|
||
}
|
||
|
||
table.invoices {
|
||
width: 100%;
|
||
|
||
td:last-child {
|
||
width: 8em;
|
||
line-height: 150%;
|
||
}
|
||
|
||
a.icon-view, a.icon-pdf {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
a.icon-view:before {
|
||
padding-right: 0.7em;
|
||
font-family: FontAwesome;
|
||
content: "\f06e\00a0"; // eye
|
||
}
|
||
|
||
a.icon-pdf:before {
|
||
padding-right: 0.7em;
|
||
font-family: FontAwesome;
|
||
content: "\f1c1\00a0"; // file-pdf-o
|
||
}
|
||
}
|
||
|
||
// invoice popup
|
||
div.ui-dialog #item {
|
||
span.amount, span.timestamp {
|
||
flex-grow: 1;
|
||
text-align: right;
|
||
}
|
||
div {
|
||
margin: 1.5em 0;
|
||
border-bottom: 1px dotted #ccc;
|
||
padding-bottom: 0.3em;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
&.paid-info::before,
|
||
&.no-online-payment-reason::before {
|
||
content: '\f05a'; // info-circle
|
||
font-family: FontAwesome;
|
||
margin-right: 0.3em;
|
||
}
|
||
}
|
||
}
|
||
|
||
div.ui-dialog.alert .ui-dialog-titlebar {
|
||
background: #E65050;
|
||
}
|
||
|
||
// fargo
|
||
div#user-files {
|
||
position: relative;
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th {
|
||
text-align: left;
|
||
padding: 0.3em;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
th a {
|
||
color: inherit;
|
||
}
|
||
|
||
tbody tr {
|
||
cursor: pointer;
|
||
}
|
||
|
||
tbody tr:hover td.title {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
tr.description-row {
|
||
cursor: auto;
|
||
font-size: 90%;
|
||
}
|
||
|
||
td {
|
||
padding: 0.3em 1em;
|
||
border: 1px solid white;
|
||
}
|
||
|
||
td.size {
|
||
text-align: right;
|
||
}
|
||
|
||
td.thumbnail {
|
||
text-align: center;
|
||
}
|
||
|
||
tbody tr.odd {
|
||
background: white;
|
||
}
|
||
|
||
tbody tr.even {
|
||
background: #eee;
|
||
}
|
||
|
||
a.icon-remove,
|
||
a.icon-edit {
|
||
&::before {
|
||
font-family: FontAwesome;
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
content: "\f040"; // pencil
|
||
color: $button-background;
|
||
}
|
||
display: inline-block;
|
||
}
|
||
a.icon-remove::before { content: "\f057"; } // times-circle
|
||
|
||
// support for legacy delete button markup, to be removed
|
||
button.icon-remove-sign {
|
||
border: none;
|
||
background: none;
|
||
box-shadow: none;
|
||
padding: 2px;
|
||
line-height: 100%;
|
||
color: $button-background;
|
||
margin-right: 0;
|
||
}
|
||
button.icon-remove-sign::before {
|
||
font-family: FontAwesome;
|
||
content: "\f057";
|
||
}
|
||
|
||
td.action-column {
|
||
width: 1.5em;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
tr::before {
|
||
font-family: FontAwesome;
|
||
content: "";
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
display: table-cell;
|
||
width: 2em;
|
||
}
|
||
|
||
tr.mime-text::before { content: "\f0f6"; } // -file-text-o
|
||
tr.mime-image::before { content: "\f1c5"; } // -file-image-o
|
||
tr.mime-audio::before { content: "\f1c7"; } // -file-audio-o
|
||
tr.mime-video::before { content: "\f1c8"; } // -file-video-o
|
||
tr.mime-application::before { content: "\f016"; } // -file-o
|
||
tr.mime-application-pdf::before { content: "\f1c1"; } // -file-pdf-o
|
||
|
||
td.thumbnail {
|
||
max-width: 100px;
|
||
img {
|
||
min-width: 60px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// fargo
|
||
div.table-container {
|
||
ul.pagination {
|
||
min-height: 2rem;
|
||
list-style: none;
|
||
margin: 0 0 1em 0;
|
||
padding: 1.5em 0.7em 1em 0;
|
||
li {
|
||
display: none;
|
||
float: left;
|
||
line-height: 150%;
|
||
}
|
||
> li.cardinality {
|
||
float: right;
|
||
}
|
||
li.previous, li.next {
|
||
display: block;
|
||
a {
|
||
@extend %button !optional;
|
||
}
|
||
}
|
||
li.current {
|
||
display: block;
|
||
position: absolute;
|
||
right: 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fargo-pick-popup th {
|
||
text-align: left;
|
||
padding: 0.3em;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
table.shades tbody tr:nth-child(2n+1) {
|
||
background: #eee;
|
||
}
|
||
|
||
table.headers th {
|
||
background: $button-background;
|
||
color: $button-color;
|
||
padding: 0.7em 1em;
|
||
}
|
||
|
||
table.centered-cells td {
|
||
text-align: center;
|
||
}
|
||
|
||
.combo-search-results em {
|
||
background: yellow;
|
||
}
|
||
|
||
div.a2-continue {
|
||
padding: 1em;
|
||
}
|
||
|
||
div.timetable-widget {
|
||
// style for templates/qommon/forms/widgets/select--meetings.html
|
||
margin-top: 0.7em;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
& > div {
|
||
flex: 0 1 auto;
|
||
width: 20%;
|
||
padding: 0 2px;
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
|
||
div.head {
|
||
padding-bottom: 0.7em;
|
||
}
|
||
button {
|
||
margin: 0;
|
||
width: 3em;
|
||
height: 3em;
|
||
&.next {
|
||
margin-left: 1em;
|
||
}
|
||
&.prev {
|
||
margin-right: 1em;
|
||
}
|
||
}
|
||
|
||
div span.timetable-cell {
|
||
display: block;
|
||
cursor: pointer;
|
||
padding: 0.2em 0;
|
||
&.disabled {
|
||
opacity: 0.3;
|
||
cursor: not-allowed;
|
||
}
|
||
border-radius: $button-border-radius;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
span.timetable-cell.selectable {
|
||
background: $timetable-cell-background;
|
||
&:hover {
|
||
background: $timetable-cell-hover-background;
|
||
color: $timetable-cell-hover-color;
|
||
box-shadow: 1px 0px 5px $button-background;
|
||
}
|
||
&.on {
|
||
background: $timetable-cell-selected-background;
|
||
color: $timetable-cell-selected-color;
|
||
}
|
||
}
|
||
|
||
&.mobile {
|
||
> div {
|
||
width: 100%;
|
||
}
|
||
div span.timetable-cell {
|
||
display: inline-block;
|
||
padding: 0.5em;
|
||
margin: 0.5em;
|
||
}
|
||
button {
|
||
&.prev, &.next {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
div.location-icon {
|
||
pointer-events: none;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: red;
|
||
border-radius: 100%;
|
||
position: relative;
|
||
top: -5px;
|
||
left: -5px;
|
||
border: 1px solid #800;
|
||
z-index: -100 !important;
|
||
}
|
||
|
||
div.leaflet-control-gps {
|
||
&.pending {
|
||
opacity: 0.5;
|
||
a {
|
||
cursor: wait;
|
||
}
|
||
}
|
||
}
|
||
|
||
#fc-linking {
|
||
padding: 0 1rem;
|
||
&.no-account {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
div.leaflet-bottom, div.leaflet-top {
|
||
z-index: 800;
|
||
}
|
||
|
||
.login-actions {
|
||
ul, li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
}
|
||
|
||
.field-live-hint {
|
||
position: absolute;
|
||
background: #ffffee;
|
||
color: #333;
|
||
z-index: 1000000;
|
||
padding: 1em 1em;
|
||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
|
||
p {
|
||
margin: 0;
|
||
display: inline-block;
|
||
&::before {
|
||
font-family: FontAwesome;
|
||
content: "\f0eb"; // lightbulb
|
||
padding-right: 0.5em;
|
||
}
|
||
}
|
||
button.action,
|
||
button.close {
|
||
margin: 0 1em;
|
||
padding: 0;
|
||
color: blue !important;
|
||
border: none !important;
|
||
text-decoration: underline !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
min-width: auto;
|
||
}
|
||
button.close {
|
||
color: #333 !important;
|
||
margin: 0;
|
||
text-decoration: none !important;
|
||
&::after {
|
||
content: "×";
|
||
}
|
||
}
|
||
}
|