forked from MapComplete/MapComplete
More styling
This commit is contained in:
Pieter Vander Vennet
parent
6a67b9f2f2
commit
08ab5a58fb
38 changed files with 474 additions and 493 deletions
|
|
@ -2653,7 +2653,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"id": "qr_code",
|
||||
"labels": [
|
||||
|
|
@ -2706,6 +2705,28 @@
|
|||
"class": "subtle font-small"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "nothing_known",
|
||||
"labels": [
|
||||
"added_by_default"
|
||||
],
|
||||
"condition": {
|
||||
"and": [
|
||||
"_backend~*",
|
||||
"_last_edit:passed_time>=300"
|
||||
]
|
||||
},
|
||||
"render": {
|
||||
"special": {
|
||||
"type": "if_nothing_known",
|
||||
"text": {
|
||||
"en": "Nothing is known about this place. Help by filling out the questions",
|
||||
"nl": "Er is nog niets geweten. Help mee door de vragen te beantwoorden"
|
||||
},
|
||||
"cssClasses": "subtle m-4 italic flex items-center justify-center"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
2
assets/svg/download.svg.license
Normal file
2
assets/svg/download.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText: Engr.eponce
|
||||
SPDX-License-Identifier: CC-BY-SA-4.0
|
||||
|
|
@ -359,24 +359,6 @@
|
|||
],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "download.svg",
|
||||
"license": "CC0-1.0",
|
||||
"authors": [
|
||||
"Hannah Declerck"
|
||||
],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "download.svg",
|
||||
"license": "CC-BY-SA-4.0",
|
||||
"authors": [
|
||||
"Engr.eponce"
|
||||
],
|
||||
"sources": [
|
||||
"https://commons.wikimedia.org/wiki/File:Download-icon.svg"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "duplicate.svg",
|
||||
"license": "CC0-1.0",
|
||||
|
|
@ -735,18 +717,6 @@
|
|||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "logout.svg",
|
||||
"license": "TRIVIAL",
|
||||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "logout.svg",
|
||||
"license": "TRIVIAL",
|
||||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "mangrove_logo.svg",
|
||||
"license": "LOGO",
|
||||
|
|
@ -1117,18 +1087,6 @@
|
|||
"https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/AUTHORS.txt"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "share.svg",
|
||||
"license": "TRIVIAL",
|
||||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "share.svg",
|
||||
"license": "TRIVIAL",
|
||||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "speech_bubble.svg",
|
||||
"license": "CC-BY-4.0",
|
||||
|
|
@ -1267,26 +1225,6 @@
|
|||
],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "up.svg",
|
||||
"license": "TRIVIAL",
|
||||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "up.svg",
|
||||
"license": "TRIVIAL",
|
||||
"authors": [],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "upload.svg",
|
||||
"license": "CC0-1.0",
|
||||
"authors": [
|
||||
"Pieter Vander Vennet"
|
||||
],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "wikidata.svg",
|
||||
"license": "LOGO",
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
|
||||
<g id="surface1">
|
||||
<path style="fill:none;stroke-width:2.803368;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 18.611232 277.184628 C 18.611232 277.184628 25.128526 281.985713 25.151677 283.782675 C 25.174553 285.579636 18.611232 290.396707 18.611232 290.396707 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
|
||||
<path style="fill:none;stroke-width:2.38125;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 24.831145 283.768067 L 9.980579 283.768067 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
|
||||
<path style="fill:none;stroke-width:2.210049;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 11.765414 277.999048 L 11.765414 275.983529 C 11.765414 273.642518 9.871162 273.611099 9.871162 273.611099 C 9.871162 273.611099 6.150459 273.558458 3.805038 273.558458 C 1.459342 273.558458 1.717862 275.920967 1.717862 275.920967 L 1.702152 283.850198 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
|
||||
<path style="fill:none;stroke-width:2.210049;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 11.765414 289.701073 L 11.765414 291.716592 C 11.765414 294.057879 9.871162 294.089298 9.871162 294.089298 C 9.871162 294.089298 6.150459 294.141939 3.805038 294.141939 C 1.459342 294.141939 1.647582 291.811401 1.647582 291.811401 L 1.702152 283.850198 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
2
assets/svg/share.svg.license
Normal file
2
assets/svg/share.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
2
assets/svg/up.svg.license
Normal file
2
assets/svg/up.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
2
assets/svg/upload.svg.license
Normal file
2
assets/svg/upload.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText: Pieter Vander Vennet
|
||||
SPDX-License-Identifier: CC0-1.0
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
|
||||
"id": "playgrounds",
|
||||
"title": {
|
||||
"en": "Playgrounds",
|
||||
|
|
|
|||
|
|
@ -941,11 +941,6 @@ video {
|
|||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -956,6 +951,11 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
|
|
@ -2027,6 +2027,10 @@ video {
|
|||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-4 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
|
@ -2039,10 +2043,6 @@ video {
|
|||
column-gap: 0px;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-1 {
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
|
@ -2258,10 +2258,6 @@ video {
|
|||
align-self: stretch;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
|
@ -3453,10 +3449,6 @@ video {
|
|||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
|
@ -3493,6 +3485,10 @@ video {
|
|||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-1\.5 {
|
||||
padding-bottom: 0.375rem;
|
||||
}
|
||||
|
|
@ -4408,9 +4404,10 @@ video {
|
|||
--interactive-background: #dddddd;
|
||||
--interactive-foreground: black;
|
||||
--interactive-contrast: #ff00ff;
|
||||
--button-background: #383838;
|
||||
--button-background: #282828;
|
||||
--button-background-hover: #686868;
|
||||
--button-foreground: white;
|
||||
--button-border-color: #F7F7F7;
|
||||
--disabled: #DBDBDB;
|
||||
/**
|
||||
* Base colour of interactive elements, mainly the 'subtle button'
|
||||
|
|
@ -4559,9 +4556,9 @@ button, .button {
|
|||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
margin: 0.25rem;
|
||||
border: 1px solid var(--foreground-color);
|
||||
border: 1px solid var(--button-background-hover);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 30px;
|
||||
border-radius: 15px;
|
||||
background: var(--background-color);
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
|
@ -4578,9 +4575,14 @@ button:focus, .button:focus {
|
|||
border-color: var(--interactive-contrast);
|
||||
}
|
||||
|
||||
.focus {
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
}
|
||||
|
||||
button.primary, .button.primary {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
}
|
||||
|
||||
button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
|
||||
|
|
@ -4592,6 +4594,12 @@ button.disabled {
|
|||
color: var(--disabled);
|
||||
}
|
||||
|
||||
button.disabled svg path {
|
||||
transition: all 200ms;
|
||||
fill: var(--disabled);
|
||||
stroke: var(--disabled);
|
||||
}
|
||||
|
||||
button.primary.disabled, .button.primary.disabled {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--disabled);
|
||||
|
|
@ -4648,12 +4656,11 @@ label:not(.neutral-label):not(.button) {
|
|||
/**
|
||||
* Label should _contain_ the input element
|
||||
*/
|
||||
border: 2px solid var(--interactive-background);
|
||||
padding: 0.25rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin:0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--low-interaction-background);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: all 250ms;
|
||||
|
|
@ -4664,27 +4671,12 @@ label.button {
|
|||
}
|
||||
|
||||
label:hover:not(.neutral-label) {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
}
|
||||
|
||||
label:not(.no-image-background):not(.neutral-label) img {
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
label:not(.neutral-label) svg path {
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
label:hover:not(.no-image-background):not(.neutral-label) svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
label.checked:not(.neutral-label) {
|
||||
border: 2px solid var(--foreground-color);
|
||||
color: var(--foreground-color);
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -4924,10 +4916,6 @@ svg.apply-fill path {
|
|||
}
|
||||
}
|
||||
|
||||
.glowing-shadow {
|
||||
animation: glowing 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/************************* LEGACY MARKER - CLEANUP BELOW ********************************/
|
||||
|
||||
.slideshow-item img {
|
||||
|
|
@ -7170,6 +7158,10 @@ svg.apply-fill path {
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.sm\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -7269,6 +7261,10 @@ svg.apply-fill path {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.sm\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
|
@ -7335,6 +7331,10 @@ svg.apply-fill path {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.md\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -7537,6 +7537,10 @@ svg.apply-fill path {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.md\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -1,36 +1,4 @@
|
|||
|
||||
/**
|
||||
Some utility functions which are only used to render data
|
||||
*/
|
||||
|
||||
.question .form-text-field > input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.question {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
padding: 1em;
|
||||
border-radius: 0.75rem;
|
||||
font-size: larger !important;
|
||||
overflow-wrap: initial;
|
||||
}
|
||||
|
||||
.question form {
|
||||
display: inline-block;
|
||||
max-width: 90vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.question svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mapping-icon-small-height {
|
||||
|
|
|
|||
|
|
@ -83,15 +83,18 @@ export default class MetaTagging {
|
|||
let lastUpdateMoment = new Date()
|
||||
const tags = state?.featureProperties?.getStore(feature.properties.id)
|
||||
console.log("Binding an updater to", feature)
|
||||
let updateCount = 0
|
||||
tags?.addCallbackD(() => {
|
||||
console.log("Received an update! Re-calculating the metatags")
|
||||
console.log("Received an update! Re-calculating the metatags, timediff:", new Date().getTime() - lastUpdateMoment.getTime())
|
||||
|
||||
if (feature !== state.selectedElement.data) {
|
||||
return true // Unregister, we are not the selected element anymore
|
||||
}
|
||||
if (new Date().getTime() - lastUpdateMoment.getTime() < 250) {
|
||||
if (new Date().getTime() - lastUpdateMoment.getTime() < (250 + updateCount * 50)) {
|
||||
return
|
||||
}
|
||||
|
||||
updateCount ++
|
||||
lastUpdateMoment = new Date()
|
||||
window.requestIdleCallback(() => {
|
||||
this.updateCurrentSelectedElement()
|
||||
|
|
|
|||
|
|
@ -653,17 +653,14 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
|
|||
const specialVisualisations = ValidationUtils.getAllSpecialVisualisations(
|
||||
<any>json.tagRenderings
|
||||
)
|
||||
|
||||
const usedSpecialFunctions = new Set(
|
||||
specialVisualisations.map((sv) =>
|
||||
typeof sv === "string" ? undefined : sv.func.funcName
|
||||
)
|
||||
)
|
||||
if (!allIds.has("lod")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("lod"))
|
||||
}
|
||||
if (!usedSpecialFunctions.has("minimap")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("minimap"))
|
||||
}
|
||||
|
||||
/***** ADD TO TOP ****/
|
||||
|
||||
if (
|
||||
this._desugaring.tagRenderings.has("just_created") &&
|
||||
|
|
@ -672,6 +669,26 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
|
|||
json.tagRenderings.unshift(this._desugaring.tagRenderings.get("just_created"))
|
||||
}
|
||||
|
||||
if (!allIds.has("nothing_known")) {
|
||||
const indexFirstQuestion = json.tagRenderings.findIndex(tr => tr["question"] !== undefined)
|
||||
json.tagRenderings.splice(indexFirstQuestion,
|
||||
0,
|
||||
this._desugaring.tagRenderings.get("nothing_known"))
|
||||
console.log("aDDING",this._desugaring.tagRenderings.get("nothing_known"))
|
||||
}
|
||||
|
||||
|
||||
/***** ADD TO BOTTOM ****/
|
||||
|
||||
|
||||
if (!allIds.has("lod")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("lod"))
|
||||
}
|
||||
if (!usedSpecialFunctions.has("minimap")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("minimap"))
|
||||
}
|
||||
|
||||
|
||||
if (json.allowSplit && !usedSpecialFunctions.has("split_button")) {
|
||||
json.tagRenderings.push({
|
||||
id: "split-button",
|
||||
|
|
@ -693,6 +710,19 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
|
|||
})
|
||||
}
|
||||
|
||||
if (!usedSpecialFunctions.has("favourite_status")) {
|
||||
json.tagRenderings.push({
|
||||
id: "favourite_status",
|
||||
render: { "*": "{favourite_status()}" },
|
||||
})
|
||||
}
|
||||
if (!allIds.has("share")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("share"))
|
||||
}
|
||||
|
||||
if (!allIds.has("qr_code")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("qr_code"))
|
||||
}
|
||||
if (
|
||||
json.source !== "special" &&
|
||||
json.source !== "special:library" &&
|
||||
|
|
@ -703,20 +733,7 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
|
|||
json.tagRenderings.push(this._desugaring.tagRenderings.get("last_edit"))
|
||||
}
|
||||
|
||||
if (!usedSpecialFunctions.has("favourite_status")) {
|
||||
json.tagRenderings.push({
|
||||
id: "favourite_status",
|
||||
render: { "*": "{favourite_status()}" },
|
||||
})
|
||||
}
|
||||
|
||||
if (!allIds.has("qr_code")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("qr_code"))
|
||||
}
|
||||
|
||||
if (!allIds.has("share")) {
|
||||
json.tagRenderings.push(this._desugaring.tagRenderings.get("share"))
|
||||
}
|
||||
|
||||
if (!usedSpecialFunctions.has("all_tags")) {
|
||||
const trc: QuestionableTagRenderingConfigJson = {
|
||||
|
|
@ -768,6 +785,9 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
|
|||
* // should handle a simple special case
|
||||
* RewriteSpecial.convertIfNeeded({"special": {"type":"image_carousel"}}, ConversionContext.test()) // => {'*': "{image_carousel()}"}
|
||||
*
|
||||
* // should add a class to the special element
|
||||
* RewriteSpecial.convertIfNeeded({"special": {"type":"qr_code"}, class:"inline"}, ConversionContext.test()) // => {'*': "{qr_code():inline}"}
|
||||
*
|
||||
* // should handle special case with a parameter
|
||||
* RewriteSpecial.convertIfNeeded({"special": {"type":"image_carousel", "image_key": "some_image_key"}}, ConversionContext.test()) // => {'*': "{image_carousel(some_image_key)}"}
|
||||
*
|
||||
|
|
@ -784,7 +804,7 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
|
|||
* // should warn for unexpected keys
|
||||
* const context = ConversionContext.test()
|
||||
* RewriteSpecial.convertIfNeeded({"special": {type: "image_carousel"}, "en": "xyz"}, context) // => {'*': "{image_carousel()}"}
|
||||
* context.getAll("error")[0].message // => "The only keys allowed next to a 'special'-block are 'before' and 'after'. Perhaps you meant to put 'en' into the special block?"
|
||||
* context.getAll("error")[0].message // => "The only keys allowed next to a 'special'-block are 'before', 'after' and 'class'. Perhaps you meant to put 'en' into the special block?"
|
||||
*
|
||||
* // should give an error on unknown visualisations
|
||||
* const context = ConversionContext.test()
|
||||
|
|
@ -863,9 +883,9 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
|
|||
return undefined
|
||||
}
|
||||
Array.from(Object.keys(input))
|
||||
.filter((k) => k !== "special" && k !== "before" && k !== "after")
|
||||
.filter((k) => k !== "special" && k !== "before" && k !== "after" && k !== "class")
|
||||
.map((k) => {
|
||||
return `The only keys allowed next to a 'special'-block are 'before' and 'after'. Perhaps you meant to put '${k}' into the special block?`
|
||||
return `The only keys allowed next to a 'special'-block are 'before', 'after' and 'class'. Perhaps you meant to put '${k}' into the special block?`
|
||||
})
|
||||
.forEach((e) => context.err(e))
|
||||
|
||||
|
|
@ -917,6 +937,8 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
|
|||
|
||||
const before = Translations.T(input.before)
|
||||
const after = Translations.T(input.after)
|
||||
const clss: string = input.class !== undefined ? ":"+input.class : ""
|
||||
|
||||
|
||||
for (const ln of Object.keys(before?.translations ?? {})) {
|
||||
foundLanguages.add(ln)
|
||||
|
|
@ -930,7 +952,7 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
|
|||
.map((nm) => RewriteSpecial.escapeStr(special[nm] ?? ""))
|
||||
.join(",")
|
||||
return {
|
||||
"*": `{${type}(${args})}`,
|
||||
"*": `{${type}(${args})${clss}}`,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -955,7 +977,7 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
|
|||
}
|
||||
const beforeText = before?.textFor(ln) ?? ""
|
||||
const afterText = after?.textFor(ln) ?? ""
|
||||
result[ln] = `${beforeText}{${type}(${args.map((a) => a).join(",")})}${afterText}`
|
||||
result[ln] = `${beforeText}{${type}(${args.map((a) => a).join(",")})${clss}}${afterText}`
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,22 +84,18 @@
|
|||
<Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col link-underline">
|
||||
<h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
|
||||
<Tr t={t.title} />
|
||||
</h1>
|
||||
<p>
|
||||
<Tr
|
||||
cls="my-4 mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
|
||||
cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
|
||||
t={Translations.t.index.intro}
|
||||
/>
|
||||
<span class="link-underline">
|
||||
<a href="#about">
|
||||
<Tr t={Translations.t.index.learnMore} />
|
||||
<ChevronDoubleRight class="inline h-4 w-4" />
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,8 @@
|
|||
}}
|
||||
>
|
||||
<label
|
||||
class={twMerge(cls, drawAttention ? "glowing-shadow" : "")}
|
||||
class:focus={drawAttention}
|
||||
class={cls}
|
||||
for={id}
|
||||
on:click|preventDefault={() => {
|
||||
inputElement.click()
|
||||
|
|
|
|||
|
|
@ -14,13 +14,16 @@
|
|||
<div
|
||||
class="absolute top-0 left-0 h-screen w-screen"
|
||||
on:click={() => {
|
||||
console.log("OnClose")
|
||||
dispatch("close")
|
||||
}}
|
||||
style="background-color: #00000088; z-index: 20"
|
||||
/>
|
||||
<!-- draw a _second_ absolute div, placed using 'bottom' which will be above the navigation bar on mobile browsers -->
|
||||
<div class={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"} style="z-index: 21">
|
||||
<div class="content normal-background h-full" on:click|stopPropagation={() => {}}>
|
||||
<div class="absolute bottom-0 right-0 h-full w-screen p-4 md:p-6 pointer-events-none" style="z-index: 21" on:click={() =>{
|
||||
console.log("Closing...")
|
||||
dispatch("close")}}>
|
||||
<div class="content normal-background h-full pointer-events-auto" on:click|stopPropagation={() => {}}>
|
||||
<div class="h-full rounded-xl">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
import Translations from "../i18n/Translations.js"
|
||||
import Tr from "./Tr.svelte"
|
||||
import Login from "../../assets/svg/Login.svelte"
|
||||
import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
|
||||
import ArrowLeftOnRectangle from "@babeard/svelte-heroicons/solid/ArrowLeftOnRectangle"
|
||||
|
||||
export let osmConnection: OsmConnection
|
||||
export let clss: string | undefined = undefined
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
</script>
|
||||
|
||||
<button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
|
||||
<Login class="m-1 w-12" />
|
||||
<ArrowLeftOnRectangle class="m-1 w-12" />
|
||||
<slot>
|
||||
<Tr t={Translations.t.general.loginWithOpenStreetMap} />
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@
|
|||
import Logout from "../../assets/svg/Logout.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Tr from "./Tr.svelte"
|
||||
import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
|
||||
|
||||
export let osmConnection: OsmConnection
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="as-link"
|
||||
on:click={() => {
|
||||
osmConnection.LogOut()
|
||||
}}
|
||||
>
|
||||
<Logout class="h-6 w-6" />
|
||||
<ArrowRightOnRectangle class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.logout} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
import FilterConfig from "../../Models/ThemeConfig/FilterConfig"
|
||||
import If from "../Base/If.svelte"
|
||||
import Dropdown from "../Base/Dropdown.svelte"
|
||||
import { onDestroy } from "svelte"
|
||||
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import FilterviewWithFields from "./FilterviewWithFields.svelte"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
|
|
@ -40,20 +39,11 @@
|
|||
return filteredLayer.appliedFilters.get(option.id)
|
||||
}
|
||||
|
||||
let mainElem: HTMLElement
|
||||
$: onDestroy(
|
||||
highlightedLayer.addCallbackAndRun((highlightedLayer) => {
|
||||
if (highlightedLayer === filteredLayer.layerDef.id) {
|
||||
mainElem?.classList?.add("glowing-shadow")
|
||||
} else {
|
||||
mainElem?.classList?.remove("glowing-shadow")
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
{#if filteredLayer.layerDef.name}
|
||||
<div bind:this={mainElem} class="mb-1.5">
|
||||
<div class:focus={$highlightedLayer === filteredLayer.layerDef.id} class="mb-1.5">
|
||||
<Checkbox selected={isDisplayed}>
|
||||
<If condition={filteredLayer.isDisplayed}>
|
||||
<ToSvelte
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@
|
|||
$: onDestroy(
|
||||
highlightedLayer.addCallbackAndRun((highlightedLayer) => {
|
||||
if (highlightedLayer === layerproperties.id) {
|
||||
mainElem?.classList?.add("glowing-shadow")
|
||||
mainElem?.classList?.add("focus")
|
||||
} else {
|
||||
mainElem?.classList?.remove("glowing-shadow")
|
||||
mainElem?.classList?.remove("focus")
|
||||
}
|
||||
})
|
||||
)
|
||||
|
|
|
|||
|
|
@ -85,9 +85,9 @@
|
|||
</script>
|
||||
|
||||
{#if theme.id !== personal.id || $unlockedPersonal}
|
||||
<a class={"button theme-button w-full text-ellipsis"} href={$href}>
|
||||
<a class={"button theme-button w-full text-ellipsis"} style="justify-content: start" href={$href}>
|
||||
<img src={theme.icon} class="m-1 mr-2 block h-11 w-11 sm:m-2 sm:mr-4" alt="" />
|
||||
<span class="flex flex-col overflow-hidden text-ellipsis">
|
||||
<span class="flex flex-col overflow-hidden text-ellipsis ">
|
||||
<Tr t={title} />
|
||||
|
||||
{#if selected}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{#if $tags[key] && $tags[key] !== externalProperties[key]}
|
||||
<div class:glowing-shadow={onOverwrite}>
|
||||
<div class:focus={onOverwrite}>
|
||||
<span class="subtle">
|
||||
<Tr t={t.currentInOsmIs} />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
{/if}
|
||||
{#if currentStep === "init"}
|
||||
{#each $missing as key (key)}
|
||||
<div class:glowing-shadow={applyAllHovered} class="mx-2 rounded-2xl">
|
||||
<div class:focus={applyAllHovered} class="mx-2 rounded-2xl">
|
||||
<ComparisonAction
|
||||
{key}
|
||||
{state}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
{/if}
|
||||
</Loading>
|
||||
{:else}
|
||||
<button class="flex w-full" on:click={clicked}>
|
||||
<button class="w-full" style="justify-content: start" on:click={clicked}>
|
||||
<slot name="image">
|
||||
<ArrowDownTrayIcon class="mr-2 h-12 w-12 shrink-0" />
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
|
|||
this.location.setData({ ...this.location.data })
|
||||
}
|
||||
this.zoom = state?.zoom ?? new UIEventSource(1)
|
||||
this.minzoom = state?.minzoom ?? new UIEventSource(0)
|
||||
this.minzoom = state?.minzoom ?? new UIEventSource(0.5)// 0.5 is the maplibre minzoom
|
||||
this.maxzoom = state?.maxzoom ?? new UIEventSource(24)
|
||||
this.zoom.addCallbackAndRunD((z) => {
|
||||
if (z < this.minzoom.data) {
|
||||
|
|
|
|||
|
|
@ -104,8 +104,7 @@ export default class NoteCommentElement extends Combine {
|
|||
])
|
||||
this.SetClass("flex flex-col pb-2 mb-2 border-gray-500 border-b")
|
||||
if (comment.highlighted) {
|
||||
this.SetClass("glowing-shadow")
|
||||
console.log(">>>", index, totalNumberOfComments)
|
||||
this.SetClass("focus")
|
||||
if (index + 2 === totalNumberOfComments) {
|
||||
console.log("Scrolling into view")
|
||||
requestAnimationFrame(() => {
|
||||
|
|
|
|||
23
src/UI/Popup/NothingKnown.svelte
Normal file
23
src/UI/Popup/NothingKnown.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Displays a 'nothing is yet known' if all questions are unanswered
|
||||
*/
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
|
||||
export let state: SpecialVisualizationState
|
||||
export let tags: UIEventSource<Record<string, string>>
|
||||
export let layer: LayerConfig
|
||||
export let text: string
|
||||
export let cssClasses: string = ""
|
||||
let knowableRenderings = layer.tagRenderings.filter(tr => tr.question !== undefined)
|
||||
let hasKnownQuestion = tags.mapD(t => knowableRenderings.some(tr => tr.IsKnown(t)))
|
||||
|
||||
</script>
|
||||
|
||||
{#if !$hasKnownQuestion}
|
||||
<span class={cssClasses}>
|
||||
{text}
|
||||
</span>
|
||||
{/if}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Scissors from "../../assets/svg/Scissors.svelte"
|
||||
import WaySplitMap from "../BigComponents/WaySplitMap.svelte"
|
||||
import BackButton from "../Base/BackButton.svelte"
|
||||
import SplitAction from "../../Logic/Osm/Actions/SplitAction"
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
import Loading from "../Base/Loading.svelte"
|
||||
import { OsmWay } from "../../Logic/Osm/OsmObject"
|
||||
import type { WayId } from "../../Models/OsmFeature"
|
||||
import { Utils } from "../../Utils"
|
||||
import Scissors from "@babeard/svelte-heroicons/solid/Scissors"
|
||||
|
||||
export let state: SpecialVisualizationState
|
||||
export let id: WayId
|
||||
|
|
@ -79,7 +78,7 @@
|
|||
{#if step === "deleted"}
|
||||
<!-- Empty -->
|
||||
{:else if step === "initial"}
|
||||
<button on:click={() => downloadWay()}>
|
||||
<button class="w-full" on:click={() => downloadWay()}>
|
||||
<Scissors class="h-6 w-6 shrink-0" />
|
||||
<Tr t={t.inviteToSplit} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@
|
|||
export let feature: Feature
|
||||
export let layer: LayerConfig | undefined
|
||||
|
||||
export let clss: string = ""
|
||||
|
||||
let language = Locale.language
|
||||
let lang = t.actualLanguage($language)
|
||||
let txt: string = t.textFor($language)
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
function createVisualisation(specpart: Exclude<RenderingSpecification, string>): BaseUIElement {
|
||||
{
|
||||
try {
|
||||
return specpart.func.constr(state, tags, specpart.args, feature, layer)
|
||||
return specpart.func.constr(state, tags, specpart.args, feature, layer)?.SetClass(specpart.style)
|
||||
} catch (e) {
|
||||
console.error(
|
||||
"Could not construct a special visualisation with specification",
|
||||
|
|
@ -66,16 +68,16 @@
|
|||
{#if lang === "*"}
|
||||
{#each specs as specpart}
|
||||
{#if typeof specpart === "string"}
|
||||
<span>
|
||||
<span class={clss}>
|
||||
{@html Utils.purify(Utils.SubstituteKeys(specpart, $tags))}
|
||||
<WeblateLink context={t.context} />
|
||||
</span>
|
||||
{:else if $tags !== undefined}
|
||||
<ToSvelte construct={() => createVisualisation(specpart)} />
|
||||
<ToSvelte construct={() => createVisualisation(specpart)?.SetClass(clss)} />
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<span {lang}>
|
||||
<span {lang} class={clss}>
|
||||
{#each specs as specpart}
|
||||
{#if typeof specpart === "string"}
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@
|
|||
</script>
|
||||
|
||||
{#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))}
|
||||
<div {id} class={twMerge("link-underline inline-block w-full", config?.classes, extraClasses)}>
|
||||
<div {id} class={twMerge("link-underline inline-block w-full h-full", extraClasses)}>
|
||||
{#if $trs.length === 1}
|
||||
<TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} />
|
||||
<TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} clss={config?.classes?.join(" ") ?? ""}/>
|
||||
{/if}
|
||||
{#if $trs.length > 1}
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -60,12 +60,13 @@
|
|||
}
|
||||
const highlighted = highlightedRendering.data
|
||||
if (config.id === highlighted) {
|
||||
htmlElem.classList.add("glowing-shadow")
|
||||
htmlElem.classList.add("focus")
|
||||
htmlElem.tabIndex = -1
|
||||
htmlElem.scrollIntoView({ behavior: "smooth" })
|
||||
Utils.focusOnFocusableChild(htmlElem)
|
||||
} else {
|
||||
htmlElem.classList.remove("glowing-shadow")
|
||||
htmlElem.classList.remove("focus")
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@
|
|||
export let tags: UIEventSource<Record<string, string>>
|
||||
export let state: SpecialVisualizationState
|
||||
export let layer: LayerConfig
|
||||
|
||||
/**
|
||||
* Css classes to apply
|
||||
*/
|
||||
export let clss: string = ""
|
||||
export let mapping: {
|
||||
readonly then: Translation
|
||||
readonly searchTerms?: Record<string, string[]>
|
||||
|
|
@ -33,8 +38,8 @@
|
|||
icon={mapping.icon}
|
||||
clss={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}`, "mr-2")}
|
||||
/>
|
||||
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
|
||||
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
|
||||
</div>
|
||||
{:else if mapping.then !== undefined}
|
||||
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
|
||||
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<div class="border-2 border-dashed border-gray-300">
|
||||
<div class="border-2 border-dashed border-gray-300 p-2">
|
||||
{#if _reviews.length > 1}
|
||||
<StarsBar score={$average} />
|
||||
{/if}
|
||||
|
|
@ -35,10 +35,11 @@
|
|||
<SingleReview {review} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="subtle italic m-2">
|
||||
<Tr t={Translations.t.reviews.no_reviews_yet} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex justify-end">
|
||||
<Mangrove_logo class="h-12 w-12 shrink-0 p-1" />
|
||||
<Tr cls="text-sm subtle" t={Translations.t.reviews.attribution} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
</a>
|
||||
{/if}
|
||||
<div class="flex justify-end">
|
||||
<Mangrove_logo class="h-12 w-12 shrink-0 p-1" />
|
||||
<Mangrove_logo class="h-6 w-6 shrink-0 p-1" />
|
||||
<Tr cls="text-sm subtle" t={t.attribution} />
|
||||
</div>
|
||||
</LoginToggle>
|
||||
|
|
|
|||
|
|
@ -82,8 +82,8 @@ export default class SpecialVisualisationUtils {
|
|||
}
|
||||
|
||||
const element: RenderingSpecification = {
|
||||
args: args,
|
||||
style: style,
|
||||
args,
|
||||
style,
|
||||
func: knownSpecial,
|
||||
}
|
||||
return [...partBefore, element, ...partAfter]
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -7,12 +7,11 @@
|
|||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<div class="flex-col flex gap-y-2">
|
||||
<h1>Stylesheet testing grounds</h1>
|
||||
|
||||
This document exists to explore the style hierarchy.
|
||||
|
||||
<div class="normal-background">
|
||||
<h2>Normal background</h2>
|
||||
There are a few styles, such as the
|
||||
<span class="literal-code">normal-background</span>
|
||||
|
|
@ -24,10 +23,8 @@
|
|||
<div class="warning">Warning</div>
|
||||
<div class="information">Some important information</div>
|
||||
<div class="thanks">Thank you! Operation successful</div>
|
||||
|
||||
<Login class="h-12 w-12" />
|
||||
<Loading>Loading...</Loading>
|
||||
</div>
|
||||
|
||||
<div class="low-interaction flex flex-col">
|
||||
<h2>Low interaction</h2>
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
import Github from "../assets/svg/Github.svelte"
|
||||
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
|
||||
import Share from "@babeard/svelte-heroicons/solid/Share"
|
||||
import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
|
||||
|
||||
export let state: ThemeViewState
|
||||
let layout = state.layout
|
||||
|
|
@ -255,12 +256,13 @@
|
|||
<img
|
||||
role="presentation"
|
||||
alt=""
|
||||
class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8"
|
||||
class="mr-0.5 block h-4 w-4 sm:mr-1 md:mr-2 md:h-8 md:w-8"
|
||||
src={layout.icon}
|
||||
/>
|
||||
<b class="mr-1">
|
||||
<Tr t={layout.title} />
|
||||
</b>
|
||||
<ChevronRight class="w-4 h-4"/>
|
||||
</div>
|
||||
</MapControlButton>
|
||||
<MapControlButton
|
||||
|
|
@ -328,7 +330,7 @@
|
|||
{/if}
|
||||
</If>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex items-center">
|
||||
<!-- bottom left elements -->
|
||||
<If condition={state.featureSwitches.featureSwitchFilter}>
|
||||
<MapControlButton
|
||||
|
|
@ -348,13 +350,13 @@
|
|||
/>
|
||||
</If>
|
||||
<a
|
||||
class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
|
||||
class="self-center bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl px-1 ml-1 text-white opacity-50 hover:opacity-100"
|
||||
on:click={() => {
|
||||
state.guistate.themeViewTab.setData("copyright")
|
||||
state.guistate.themeIsOpened.setData(true)
|
||||
}}
|
||||
>
|
||||
© OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
|
||||
© <span class="hidden sm:inline sm:pr-2 "> OpenStreetMap<span class="hidden md:inline md:pr-2 w-24">, {rasterLayerName}</span></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,10 @@
|
|||
--interactive-foreground: black;
|
||||
--interactive-contrast: #ff00ff;
|
||||
|
||||
--button-background: #383838;
|
||||
--button-background: #282828;
|
||||
--button-background-hover: #686868;
|
||||
--button-foreground: white;
|
||||
--button-border-color: #F7F7F7;
|
||||
--disabled: #DBDBDB;
|
||||
|
||||
/**
|
||||
|
|
@ -191,9 +192,9 @@ button, .button {
|
|||
margin: 0.25rem;
|
||||
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--foreground-color);
|
||||
border: 1px solid var(--button-background-hover);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 30px;
|
||||
border-radius: 15px;
|
||||
|
||||
background: var(--background-color);
|
||||
transition: all 200ms;
|
||||
|
|
@ -213,9 +214,14 @@ button:focus, .button:focus {
|
|||
border-color: var(--interactive-contrast);
|
||||
}
|
||||
|
||||
.focus {
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
}
|
||||
|
||||
button.primary, .button.primary {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
}
|
||||
|
||||
button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
|
||||
|
|
@ -226,6 +232,14 @@ button.disabled {
|
|||
border-color: var(--disabled);
|
||||
color: var(--disabled);
|
||||
}
|
||||
button.disabled svg path {
|
||||
transition: all 200ms;
|
||||
}
|
||||
button.disabled svg path {
|
||||
fill: var(--disabled);
|
||||
stroke: var(--disabled);
|
||||
}
|
||||
|
||||
|
||||
button.primary.disabled, .button.primary.disabled {
|
||||
color: var(--button-foreground);
|
||||
|
|
@ -284,12 +298,11 @@ label:not(.neutral-label):not(.button) {
|
|||
/**
|
||||
* Label should _contain_ the input element
|
||||
*/
|
||||
border: 2px solid var(--interactive-background);
|
||||
padding: 0.25rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin:0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--low-interaction-background);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: all 250ms;
|
||||
|
|
@ -300,27 +313,13 @@ label.button {
|
|||
}
|
||||
|
||||
label:hover:not(.neutral-label) {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
label:not(.no-image-background):not(.neutral-label) img {
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
label:not(.neutral-label) svg path {
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
label:hover:not(.no-image-background):not(.neutral-label) svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
label.checked:not(.neutral-label) {
|
||||
border: 2px solid var(--foreground-color);
|
||||
color: var(--foreground-color);
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -566,20 +565,7 @@ svg.apply-fill path {
|
|||
}
|
||||
}
|
||||
|
||||
.glowing-shadow {
|
||||
-webkit-animation: glowing 1s ease-in-out infinite alternate;
|
||||
-moz-animation: glowing 1s ease-in-out infinite alternate;
|
||||
animation: glowing 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes glowing {
|
||||
from {
|
||||
box-shadow: 0 0 20px 10px #eaaf2588, inset 0 0 0px 1px #eaaf25;
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px 20px #eaaf2588, inset 0 0 5px 1px #eaaf25;
|
||||
}
|
||||
}
|
||||
|
||||
/************************* LEGACY MARKER - CLEANUP BELOW ********************************/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue