689 lines
12 KiB
SCSS
689 lines
12 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
|
|
$notification-style: classic !default;
|
|
|
|
div.textcell h3,
|
|
div.textcell h4,
|
|
div.textcell h5,
|
|
div.textcell p,
|
|
div.textcell table {
|
|
margin: 0.7em 0.5rem;
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
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%);
|
|
box-sizing: border-box;
|
|
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;
|
|
}
|
|
}
|
|
|
|
br.clear {
|
|
clear: both;
|
|
}
|
|
|
|
div#login-methods label {
|
|
display: block;
|
|
}
|
|
|
|
div#login-methods input {
|
|
margin-left: 0.7em;
|
|
}
|
|
|
|
@if $cell-border == none {
|
|
// add a border next to FranceConnect
|
|
.a2-block + #frontend-registration-fc,
|
|
.block + .block-fc {
|
|
position: relative;
|
|
border-left: 1px solid #999;
|
|
padding-left: 2rem;
|
|
border-radius: 0;
|
|
overflow: visible;
|
|
&::after {
|
|
content: "OU";
|
|
display: block;
|
|
position: absolute;
|
|
left: -1.5rem;
|
|
width: 3rem;
|
|
text-align: center;
|
|
background: white;
|
|
top: 1rem;
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-left: none;
|
|
padding-left: 0;
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
#profile span.label {
|
|
color: lighten($font-color, 20%);
|
|
font-size: 90%;
|
|
display: block;
|
|
}
|
|
|
|
#profile div.value {
|
|
margin-left: 0;
|
|
margin-bottom: 0.7em;
|
|
span.nodata {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
a#publik-portal-agent {
|
|
z-index: 10000;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 5px;
|
|
background: white;
|
|
color: #888;
|
|
padding: 5px 10px;
|
|
border: 1px solid #888;
|
|
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 {
|
|
body.pwa 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($color, $symbol) {
|
|
background: $color;
|
|
color: text-color($color);
|
|
margin: 1rem 0;
|
|
padding: 0.5rem;
|
|
padding-left: 4rem;
|
|
position: relative;
|
|
@if $notification-style == border-icon {
|
|
border-left: 4px solid darken($color, 40%);
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
min-height: 2rem;
|
|
&::before {
|
|
content: $symbol;
|
|
font-family: FontAwesome;
|
|
font-size: 2rem;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 0.5rem;
|
|
@if $notification-style == border-icon {
|
|
color: darken($color, 40%);
|
|
left: calc(-0.5rem - 2px);
|
|
width: 1rem;
|
|
display: block;
|
|
text-align: center;
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 0.6rem 0;
|
|
&:first-child {
|
|
padding-top: 0.5rem;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#messages li.error, .errornotice {
|
|
@include notification-message($notification_error_color, "\f06a");
|
|
}
|
|
|
|
#messages li.warning, .warningnotice {
|
|
@include notification-message($notification_warning_color, "\f071");
|
|
}
|
|
|
|
#messages li.success, .successnotice {
|
|
@include notification-message($notification_success_color, "\f058"); // check-circle
|
|
}
|
|
|
|
#messages li.info, .infonotice {
|
|
@include notification-message($notification_info_color, "\f05a");
|
|
}
|
|
|
|
form ul.errorlist.nonfield {
|
|
margin-top: 0;
|
|
li {
|
|
@extend .errornotice;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
// lingo cells
|
|
table.invoices th.invoice-amount {
|
|
text-align: right;
|
|
padding-right: 0.7em;
|
|
}
|
|
|
|
td.amount {
|
|
text-align: right;
|
|
}
|
|
|
|
table.invoices {
|
|
width: 100%;
|
|
|
|
th {
|
|
text-align: left;
|
|
padding: 0.3em;
|
|
}
|
|
|
|
td {
|
|
padding: 0.3em 0.7em;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background: #eee;
|
|
}
|
|
|
|
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 {
|
|
position: absolute;
|
|
right: 1em;
|
|
}
|
|
div {
|
|
margin: 1.5em 0;
|
|
border-bottom: 1px dotted #ccc;
|
|
padding-bottom: 0.3em;
|
|
&.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;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 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.meetings_table {
|
|
// style for templates/qommon/forms/widgets/select--meetings.html
|
|
margin-top: 0.7em;
|
|
display: flex;
|
|
width: 100%;
|
|
& > div {
|
|
flex: 0 1 auto;
|
|
width: 20%;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
div.head {
|
|
padding-bottom: 0.7em;
|
|
}
|
|
|
|
div span {
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 0.2em 0;
|
|
&.disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
span.selectable {
|
|
&:hover {
|
|
background: #ccc;
|
|
color: black;
|
|
}
|
|
&.on {
|
|
background: $button-background;
|
|
color: $button-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.location-icon {
|
|
box-sizing: border-box;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// evaluation field
|
|
.star-choice {
|
|
span {
|
|
&::before {
|
|
font-family: FontAwesome;
|
|
content: "\f006"; // star-o
|
|
color: #888;
|
|
font-size: 22px;
|
|
display: inline-block;
|
|
transition: transform ease 0.2s;
|
|
}
|
|
&.selected::before, &:hover::before {
|
|
content: "\f005"; // star
|
|
color: #ffaa00;
|
|
}
|
|
&:hover::before {
|
|
transform: scale(1.4);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pk-budget-table,
|
|
.budget-table {
|
|
table {
|
|
width: 100%;
|
|
}
|
|
th {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
tbody td:last-child {
|
|
width: 30%;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|