diff --git a/assets/layers/charging_station/as3112.svg b/assets/layers/charging_station/as3112.svg new file mode 100644 index 000000000..c42a47caf --- /dev/null +++ b/assets/layers/charging_station/as3112.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/layers/charging_station/as3112.svg.license b/assets/layers/charging_station/as3112.svg.license new file mode 100644 index 000000000..b4ccbe777 --- /dev/null +++ b/assets/layers/charging_station/as3112.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: Yanpas +SPDX-License-Identifier: CC-BY-SA-4.0 \ No newline at end of file diff --git a/assets/layers/charging_station/charging_station.json b/assets/layers/charging_station/charging_station.json index dcfaad56b..669f6bc1d 100644 --- a/assets/layers/charging_station/charging_station.json +++ b/assets/layers/charging_station/charging_station.json @@ -1300,6 +1300,252 @@ "path": "./assets/layers/charging_station/bs1363.svg", "class": "medium" } + }, + { + "if": "socket:nema5_15=1", + "ifnot": "socket:nema5_15=", + "then": { + "en": "NEMA 5-15 (Type B)", + "nl": "NEMA 5-15 (VS 3-pin)" + }, + "icon": { + "path": "./assets/layers/charging_station/nema-5-15.svg", + "class": "medium" + }, + "hideInAnswer": { + "and": [ + "_country!=as", + "_country!=ai", + "_country!=ag", + "_country!=aw", + "_country!=bb", + "_country!=bz", + "_country!=bm", + "_country!=bo", + "_country!=vg", + "_country!=ky", + "_country!=co", + "_country!=cr", + "_country!=cu", + "_country!=do", + "_country!=ec", + "_country!=sv", + "_country!=pf", + "_country!=gu", + "_country!=gt", + "_country!=gy", + "_country!=ht", + "_country!=hn", + "_country!=jm", + "_country!=jp", + "_country!=jo", + "_country!=la", + "_country!=lb", + "_country!=lr", + "_country!=mx", + "_country!=fm", + "_country!=ms", + "_country!=ni", + "_country!=ne", + "_country!=pw", + "_country!=pa", + "_country!=py", + "_country!=pe", + "_country!=ph", + "_country!=pr", + "_country!=sr", + "_country!=th", + "_country!=tt", + "_country!=tm", + "_country!=ve", + "_country!=vn" + ] + } + }, + { + "if": { + "and": [ + "socket:nema5_15~*", + "socket:nema5_15!=1" + ] + }, + "then": { + "en": "NEMA 5-15 (Type B)", + "nl": "NEMA 5-15 (VS 3-pin)" + }, + "hideInAnswer": true, + "icon": { + "path": "./assets/layers/charging_station/nema-5-15.svg", + "class": "medium" + } + }, + { + "if": "socket:sev1011_t23=1", + "ifnot": "socket:sev1011_t23=", + "then": { + "en": "SEV 1011 T23 (Type J)", + "nl": "SEV 1011 T23 (Zwitserse 3-pin)" + }, + "icon": { + "path": "./assets/layers/charging_station/typej.svg", + "class": "medium" + }, + "hideInAnswer": { + "and": [ + "_country!=jo", + "_country!=li", + "_country!=mg", + "_country!=mv", + "_country!=rw", + "_country!=ch" + ] + } + }, + { + "if": { + "and": [ + "socket:sev1011_t23~*", + "socket:sev1011_t23!=1" + ] + }, + "then": { + "en": "SEV 1011 T23 (Type J)", + "nl": "SEV 1011 T23 (Zwitserse 3-pin)" + }, + "hideInAnswer": true, + "icon": { + "path": "./assets/layers/charging_station/typej.svg", + "class": "medium" + } + }, + { + "if": "socket:as3112=1", + "ifnot": "socket:as3112=", + "then": { + "en": "AS3112 (Type I)", + "nl": "AS3112 (Australische 3-pin)" + }, + "icon": { + "path": "./assets/layers/charging_station/as3112.svg", + "class": "medium" + }, + "hideInAnswer": { + "and": [ + "_country!=as", + "_country!=ar", + "_country!=au", + "_country!=cn", + "_country!=ck", + "_country!=fj", + "_country!=ki", + "_country!=nr", + "_country!=nz", + "_country!=nu", + "_country!=pg", + "_country!=sb", + "_country!=tj", + "_country!=to", + "_country!=tv", + "_country!=uy", + "_country!=uz", + "_country!=vu" + ] + } + }, + { + "if": { + "and": [ + "socket:as3112~*", + "socket:as3112!=1" + ] + }, + "then": { + "en": "AS3112 (Type I)", + "nl": "AS3112 (Australische 3-pin)" + }, + "hideInAnswer": true, + "icon": { + "path": "./assets/layers/charging_station/as3112.svg", + "class": "medium" + } + }, + { + "if": "socket:nema_5_20=1", + "ifnot": "socket:nema_5_20=", + "then": { + "en": "NEMA 5-20 (Type B)", + "nl": "NEMA 5-20 (VS 3-pin)" + }, + "icon": { + "path": "./assets/layers/charging_station/nema-5-20.svg", + "class": "medium" + }, + "hideInAnswer": { + "and": [ + "_country!=as", + "_country!=ai", + "_country!=ag", + "_country!=aw", + "_country!=bb", + "_country!=bz", + "_country!=bm", + "_country!=bo", + "_country!=vg", + "_country!=ky", + "_country!=co", + "_country!=cr", + "_country!=cu", + "_country!=do", + "_country!=ec", + "_country!=sv", + "_country!=pf", + "_country!=gu", + "_country!=gt", + "_country!=gy", + "_country!=ht", + "_country!=hn", + "_country!=jm", + "_country!=jp", + "_country!=jo", + "_country!=la", + "_country!=lb", + "_country!=lr", + "_country!=mx", + "_country!=fm", + "_country!=ms", + "_country!=ni", + "_country!=ne", + "_country!=pw", + "_country!=pa", + "_country!=py", + "_country!=pe", + "_country!=ph", + "_country!=pr", + "_country!=sr", + "_country!=th", + "_country!=tt", + "_country!=tm", + "_country!=ve", + "_country!=vn" + ] + } + }, + { + "if": { + "and": [ + "socket:nema_5_20~*", + "socket:nema_5_20!=1" + ] + }, + "then": { + "en": "NEMA 5-20 (Type B)", + "nl": "NEMA 5-20 (VS 3-pin)" + }, + "hideInAnswer": true, + "icon": { + "path": "./assets/layers/charging_station/nema-5-20.svg", + "class": "medium" + } } ] }, @@ -1658,6 +1904,78 @@ [ "3kW" ] + ], + [ + "socket:nema5_15", + "socket:nema5_15", + { + "en": "NEMA 5-15 (Type B)", + "nl": "NEMA 5-15 (VS 3-pin)" + }, + "nema-5-15.svg", + [ + "120" + ], + [ + "15" + ], + [ + "1.8 kW" + ] + ], + [ + "socket:sev1011_t23", + "socket:sev1011_t23", + { + "en": "SEV 1011 T23 (Type J)", + "nl": "SEV 1011 T23 (Zwitserse 3-pin)" + }, + "typej.svg", + [ + "230" + ], + [ + "16" + ], + [ + "3.7 kW" + ] + ], + [ + "socket:as3112", + "socket:as3112", + { + "en": "AS3112 (Type I)", + "nl": "AS3112 (Australische 3-pin)" + }, + "as3112.svg", + [ + "230" + ], + [ + "10" + ], + [ + "2.3 kW" + ] + ], + [ + "socket:nema_5_20", + "socket:nema_5_20", + { + "en": "NEMA 5-20 (Type B)", + "nl": "NEMA 5-20 (VS 3-pin)" + }, + "nema-5-20.svg", + [ + "120" + ], + [ + "20" + ], + [ + "2.4 kW" + ] ] ] }, @@ -2413,7 +2731,13 @@ } } ], - "lineRendering": [], + "lineRendering": [ + { + "color": "black", + "width": 2, + "fillColor": "#80808080" + } + ], "pointRendering": [ { "location": [ @@ -2711,6 +3035,34 @@ "nl": "Heeft een
BS1363 (VK 3-pin)
" }, "osmTags": "socket:bs1363~*" + }, + { + "question": { + "en": "Has a
NEMA 5-15 (Type B)
connector", + "nl": "Heeft een
NEMA 5-15 (VS 3-pin)
" + }, + "osmTags": "socket:nema5_15~*" + }, + { + "question": { + "en": "Has a
SEV 1011 T23 (Type J)
connector", + "nl": "Heeft een
SEV 1011 T23 (Zwitserse 3-pin)
" + }, + "osmTags": "socket:sev1011_t23~*" + }, + { + "question": { + "en": "Has a
AS3112 (Type I)
connector", + "nl": "Heeft een
AS3112 (Australische 3-pin)
" + }, + "osmTags": "socket:as3112~*" + }, + { + "question": { + "en": "Has a
NEMA 5-20 (Type B)
connector", + "nl": "Heeft een
NEMA 5-20 (VS 3-pin)
" + }, + "osmTags": "socket:nema_5_20~*" } ] } @@ -2870,6 +3222,42 @@ "mW", "kW" ] + }, + "socket:nema5_15:voltage": "voltage", + "socket:nema5_15:current": "current", + "socket:nema5_15:output": { + "quantity": "power", + "denominations": [ + "mW", + "kW" + ] + }, + "socket:sev1011_t23:voltage": "voltage", + "socket:sev1011_t23:current": "current", + "socket:sev1011_t23:output": { + "quantity": "power", + "denominations": [ + "mW", + "kW" + ] + }, + "socket:as3112:voltage": "voltage", + "socket:as3112:current": "current", + "socket:as3112:output": { + "quantity": "power", + "denominations": [ + "mW", + "kW" + ] + }, + "socket:nema_5_20:voltage": "voltage", + "socket:nema_5_20:current": "current", + "socket:nema_5_20:output": { + "quantity": "power", + "denominations": [ + "mW", + "kW" + ] } } ], diff --git a/assets/layers/charging_station/charging_station.proto.json b/assets/layers/charging_station/charging_station.proto.json index 56995a929..4bbdde3f3 100644 --- a/assets/layers/charging_station/charging_station.proto.json +++ b/assets/layers/charging_station/charging_station.proto.json @@ -874,7 +874,13 @@ } } ], - "lineRendering": [], + "lineRendering": [ + { + "color": "black", + "width": 2, + "fillColor": "#80808080" + } + ], "pointRendering": [ { "location": [ @@ -1043,4 +1049,4 @@ }, "neededChangesets": 10 } -} +} \ No newline at end of file diff --git a/assets/layers/charging_station/license_info.json b/assets/layers/charging_station/license_info.json index 8f25c84e1..e4c481f44 100644 --- a/assets/layers/charging_station/license_info.json +++ b/assets/layers/charging_station/license_info.json @@ -99,6 +99,16 @@ ], "sources": [] }, + { + "path": "as3112.svg", + "license": "CC-BY-SA-4.0", + "authors": [ + "Yanpas" + ], + "sources": [ + "https://commons.wikimedia.org/wiki/File:Plug_types.svg" + ] + }, { "path": "bosch-3pin.svg", "license": "CC0-1.0", @@ -125,6 +135,36 @@ "https://commons.wikimedia.org/wiki/File:Plug_types.svg" ] }, + { + "path": "nema-5-15.svg", + "license": "CC-BY-SA-4.0", + "authors": [ + "Yanpas" + ], + "sources": [ + "https://commons.wikimedia.org/wiki/File:Plug_types.svg" + ] + }, + { + "path": "nema-5-20.svg", + "license": "CC-BY-SA-4.0", + "authors": [ + "Modified from Yanpas" + ], + "sources": [ + "https://commons.wikimedia.org/wiki/File:Plug_types.svg" + ] + }, + { + "path": "typej.svg", + "license": "CC-BY-SA-4.0", + "authors": [ + "Modified from Yanpas" + ], + "sources": [ + "https://commons.wikimedia.org/wiki/File:Plug_types.svg" + ] + }, { "path": "under_construction.svg", "license": "CC0-1.0", diff --git a/assets/layers/charging_station/nema-5-15.svg b/assets/layers/charging_station/nema-5-15.svg new file mode 100644 index 000000000..bba21647f --- /dev/null +++ b/assets/layers/charging_station/nema-5-15.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/layers/charging_station/nema-5-15.svg.license b/assets/layers/charging_station/nema-5-15.svg.license new file mode 100644 index 000000000..b4ccbe777 --- /dev/null +++ b/assets/layers/charging_station/nema-5-15.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: Yanpas +SPDX-License-Identifier: CC-BY-SA-4.0 \ No newline at end of file diff --git a/assets/layers/charging_station/nema-5-20.svg b/assets/layers/charging_station/nema-5-20.svg new file mode 100644 index 000000000..ca2035075 --- /dev/null +++ b/assets/layers/charging_station/nema-5-20.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/layers/charging_station/nema-5-20.svg.license b/assets/layers/charging_station/nema-5-20.svg.license new file mode 100644 index 000000000..9f0b3ad3c --- /dev/null +++ b/assets/layers/charging_station/nema-5-20.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: Modified from Yanpas +SPDX-License-Identifier: CC-BY-SA-4.0 \ No newline at end of file diff --git a/assets/layers/charging_station/typej.svg b/assets/layers/charging_station/typej.svg new file mode 100644 index 000000000..3511cf05e --- /dev/null +++ b/assets/layers/charging_station/typej.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/layers/charging_station/typej.svg.license b/assets/layers/charging_station/typej.svg.license new file mode 100644 index 000000000..9f0b3ad3c --- /dev/null +++ b/assets/layers/charging_station/typej.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: Modified from Yanpas +SPDX-License-Identifier: CC-BY-SA-4.0 \ No newline at end of file diff --git a/assets/layers/charging_station/types.csv b/assets/layers/charging_station/types.csv index 4a9444e36..d73c64835 100644 --- a/assets/layers/charging_station/types.csv +++ b/assets/layers/charging_station/types.csv @@ -16,3 +16,7 @@ socket:USB-A,,usb_port.svg,USB to charge phones and small electronics,,,5 socket:bosch_3pin,,bosch-3pin.svg,Bosch Active Connect with 3 pins and cable,,,,,,Bosch Active Connect met 3 pinnen aan een kabel,bicycle,car;motorcar;hgv;bus, socket:bosch_5pin,,bosch-5pin.svg,Bosch Active Connect with 5 pins and cable,,,,,,Bosch Active Connect met 5 pinnen aan een kabel,bicycle,car;motorcar;hgv;bus, socket:bs1363,,bs1363.svg,BS1363 (Type G),bh;bd;bz;bt;bw;bn;kh;cy;dm;gh;gi;gd;gg;gy;id;iq;ie;im;je;jo;ke;kw;lb;mo;mw;mv;mt;mu;ng;om;pk;qa;rw;sa;sc;sl;sb;lk;sd;tz;ug;vu;vn;ye;zm;zw,,230,13,3kW,BS1363 (VK 3-pin),*,, +socket:nema5_15,,nema-5-15.svg,NEMA 5-15 (Type B),as;ai;ag;aw;bb;bz;bm;bo;vg;ky;co;cr;cu;do;ec;sv;pf;gu;gt;gy;ht;hn;jm;jp;jo;la;lb;lr;mx;fm;ms;ni;ne;pw;pa;py;pe;ph;pr;sr;th;tt;tm;ve;vn,,120,15,1.8 kW,NEMA 5-15 (VS 3-pin),*,, +socket:sev1011_t23,,typej.svg,SEV 1011 T23 (Type J),jo;li;mg;mv;rw;ch,,230,16,3.7 kW,SEV 1011 T23 (Zwitserse 3-pin),*,, +socket:as3112,,as3112.svg,AS3112 (Type I),as;ar;au;cn;ck;fj;ki;nr;nz;nu;pg;sb;tj;to;tv;uy;uz;vu,,230,10,2.3 kW,AS3112 (Australische 3-pin),*,, +socket:nema_5_20,,nema-5-20.svg,NEMA 5-20 (Type B),as;ai;ag;aw;bb;bz;bm;bo;vg;ky;co;cr;cu;do;ec;sv;pf;gu;gt;gy;ht;hn;jm;jp;jo;la;lb;lr;mx;fm;ms;ni;ne;pw;pa;py;pe;ph;pr;sr;th;tt;tm;ve;vn,,120,20,2.4 kW,NEMA 5-20 (VS 3-pin),*,, diff --git a/assets/layers/recycling/license_info.json b/assets/layers/recycling/license_info.json index c4d0f589e..1d9f7fd52 100644 --- a/assets/layers/recycling/license_info.json +++ b/assets/layers/recycling/license_info.json @@ -180,6 +180,17 @@ "https://github.com/streetcomplete/StreetComplete/blob/master/res/graphics/recycling%20icons/plastic_packaging.svg" ] }, + { + "path": "pmd.svg", + "license": "CC-BY-SA-4.0", + "authors": [ + "Modified from Tobias Zwick" + ], + "sources": [ + "https://github.com/streetcomplete/StreetComplete/blob/master/res/graphics/recycling%20icons/cans.svg", + "https://github.com/streetcomplete/StreetComplete/blob/master/res/graphics/recycling%20icons/plastic_packaging.svg" + ] + }, { "path": "printer_cartridges.svg", "license": "CC-BY-4.0", diff --git a/assets/layers/recycling/pmd.svg b/assets/layers/recycling/pmd.svg new file mode 100644 index 000000000..86df370db --- /dev/null +++ b/assets/layers/recycling/pmd.svg @@ -0,0 +1,408 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/layers/recycling/pmd.svg.license b/assets/layers/recycling/pmd.svg.license new file mode 100644 index 000000000..964ccb3a1 --- /dev/null +++ b/assets/layers/recycling/pmd.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: Modified from Tobias Zwick +SPDX-License-Identifier: CC-BY-SA-4.0 \ No newline at end of file diff --git a/assets/layers/recycling/recycling.json b/assets/layers/recycling/recycling.json index 2d359d3a6..81e21b463 100644 --- a/assets/layers/recycling/recycling.json +++ b/assets/layers/recycling/recycling.json @@ -238,6 +238,15 @@ }, "then": "./assets/layers/recycling/plastic.svg" }, + { + "if": { + "and": [ + "_waste_amount>1", + "recycling:pmd=yes" + ] + }, + "then": "./assets/layers/recycling/pmd.svg" + }, { "if": { "and": [ @@ -465,6 +474,15 @@ }, "then": "./assets/layers/recycling/plastic.svg" }, + { + "if": { + "and": [ + "_waste_amount=1", + "recycling:pmd=yes" + ] + }, + "then": "./assets/layers/recycling/pmd.svg" + }, { "if": { "and": [ @@ -640,6 +658,7 @@ "recycling:plastic_bottles=", "recycling:plastic_packaging=", "recycling:plastic=", + "recycling:pmd=", "recycling:printer_cartridges=", "recycling:scrap_metal=", "recycling:shoes=", @@ -1093,6 +1112,18 @@ "class": "medium" } }, + { + "if": "recycling:pmd=yes", + "ifnot": "recycling:pmd=", + "then": { + "en": "Plastic packaging, metal packaging and drink cartons (PMD) can be recycled here", + "nl": "Plastic verkpakkingen, metalen verkpakkingen en drankpakken kunnen hier gerecycled worden" + }, + "icon": { + "path": "./assets/layers/recycling/pmd.svg", + "class": "medium" + } + }, { "if": "recycling:printer_cartridges=yes", "ifnot": "recycling:printer_cartridges=", @@ -1571,6 +1602,13 @@ }, "osmTags": "recycling:plastic=yes" }, + { + "question": { + "en": "Recycling of plastic packaging, metal packaging and drink cartons (PMD)", + "nl": "Recycling van plastic verkpakkingen, metalen verkpakkingen en drankpakken (PMD)" + }, + "osmTags": "recycling:pmd=yes" + }, { "question": { "en": "Recycling of scrap metal", @@ -1672,4 +1710,4 @@ "enableRelocation": true, "enableImproveAccuracy": true } -} +} \ No newline at end of file diff --git a/assets/layers/waste_basket/waste_basket.json b/assets/layers/waste_basket/waste_basket.json index 2c572b62e..d5d359797 100644 --- a/assets/layers/waste_basket/waste_basket.json +++ b/assets/layers/waste_basket/waste_basket.json @@ -206,6 +206,13 @@ "cs": "Odpadkový koš na plasty" } }, + { + "if": "waste=pmd", + "then": { + "en": "A waste basket for plastic packaging, metal packaging and drink cartons (PMD)", + "nl": "Een vuilnisbak voor plastic verpakkingen, metalen verpakkingen en drankpakken (PMD)" + } + }, { "if": "waste=paper", "then": { @@ -237,8 +244,8 @@ }, "condition": { "or": [ - "waste=dog_excrement", - "waste=trash", + "waste~i~.*dog_excrement.*", + "waste~i~.*trash.*", "waste=" ] }, @@ -397,6 +404,20 @@ "cs": "Odpadkový koš na plast" }, "osmTags": "waste~i~.*plastic.*" + }, + { + "question": { + "en": "Waste basket for plastic packaging, metal packaging and drink cartons (PMD)", + "nl": "Vuilnisbak voor plastic verpakkingen, metalen verpakkingen en drankpakken (PMD)" + }, + "osmTags": "waste~i~.*pmd.*" + }, + { + "question": { + "en": "Waste basket for paper", + "nl": "Vuilnisbak voor papier" + }, + "osmTags": "waste~i~.*paper.*" } ] }, @@ -432,16 +453,5 @@ "allowMove": { "enableRelocation": false, "enableImproveAccuracy": true - }, - "cs": { - "0": { - "iconSize": { - "mappings": { - "0": { - "then": "Odpadkový koš" - } - } - } - } } -} +} \ No newline at end of file diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index c6244ef36..b1b8180ec 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -900,6 +900,10 @@ video { margin-right: 4rem; } +.mb-4 { + margin-bottom: 1rem; +} + .mt-4 { margin-top: 1rem; } @@ -932,10 +936,6 @@ video { margin-right: 0.25rem; } -.mb-4 { - margin-bottom: 1rem; -} - .ml-1 { margin-left: 0.25rem; } @@ -2339,7 +2339,7 @@ input { color: var(--foreground-color); } -input[type=text] { +input[type="text"] { width: 100%; } @@ -2362,12 +2362,12 @@ input[type=text] { .low-interaction { background: var(--low-interaction-background); - color: var(--low-interaction-foreground) + color: var(--low-interaction-foreground); } .interactive { background: var(--interactive-background); - color: var(--interactive-foreground) + color: var(--interactive-foreground); } .border-interactive { @@ -2386,7 +2386,8 @@ input[type=text] { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ -button.small, .button.small { +button.small, +.button.small { line-height: 1rem; margin: 0; margin-left: 0.5rem; @@ -2407,7 +2408,30 @@ button.small, .button.small { color: var(--low-interaction-foreground); } -button, .button { +.button.theme-button { + margin: 0; + margin-top: 0.25rem; + margin-bottom: 0.25rem; + /* Margin should be removed on larger screens */ + @media (min-width: 768px) { + margin: 0; + + margin-top: 0; + + margin-bottom: 0; + } + /* Experimental support for foldable devices */ + @media (horizontal-viewport-segments: 2) { + margin: 0; + + margin-top: 0; + + margin-bottom: 0; + } +} + +button, +.button { align-items: center; display: inline-flex; line-height: 1.25rem; @@ -2430,60 +2454,72 @@ button, .button { box-shadow: 0 5px 10px #88888888; } -button.selected, .button.selected { +button.selected, +.button.selected { background-color: var(--catch-detail-color); border-color: var(--catch-detail-color); color: var(--catch-detail-foregroundcolor); } -button.selected svg path, .button.selected svg path { +button.selected svg path, +.button.selected svg path { fill: var(--catch-detail-foregroundcolor) !important; } -button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path { +button:not(.no-image-background):not(.soft) svg path, +.button:not(.no-image-background):not(.soft) svg path { fill: var(--interactive-foreground) !important; transition: all 250ms; } -.interactive button, .interactive .button { +.interactive button, +.interactive .button { background: var(--interactive-background); color: var(--interactive-foreground); } -button:hover, .button:hover { +button:hover, +.button:hover { background-color: var(--catch-detail-color); color: var(--catch-detail-foregroundcolor); border: 2px solid var(--catch-detail-color-contrast); } -button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img { +button:hover:not(.no-image-background) img, +.button:hover:not(.no-image-background) img { background: var(--low-interaction-background); border-radius: 100rem; } -button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path { +button:hover:not(.no-image-background) svg path, +.button:hover:not(.no-image-background) svg path { fill: var(--catch-detail-foregroundcolor) !important; } -button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path { +button.disabled:hover:not(.no-image-background) svg path, +.button.disabled:hover:not(.no-image-background) svg path { fill: var(--low-interaction-foreground) !important; } -button.primary, .button.primary { +button.primary, +.button.primary { color: var(--button-foreground); background: var(--button-background); } -button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path { +button.primary:not(.no-image-background) svg path, +.button.primary:not(.no-image-background) svg path { fill: var(--button-foreground) !important; transition: all 250ms; } -button.disabled.low-interaction, .button.disabled.low-interaction { +button.disabled.low-interaction, +.button.disabled.low-interaction { background-color: var(--low-interaction-background-50); } -button.disabled, .button.disabled { +button.disabled, +.button.disabled { cursor: default; border: 2px dashed var(--button-background); background: unset; @@ -2491,7 +2527,8 @@ button.disabled, .button.disabled { box-shadow: none; } -button.disabled:hover, .button.disabled:hover { +button.disabled:hover, +.button.disabled:hover { cursor: default; border: 2px dashed var(--button-background); background: unset; @@ -2505,18 +2542,21 @@ button.link { } button.link:hover { - color:unset; + color: unset; } -.interactive button.disabled svg path, .interactive .button.disabled svg path { +.interactive button.disabled svg path, +.interactive .button.disabled svg path { fill: var(--interactive-foreground) !important; } -.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path { +.low-interaction button.disabled svg path, +.low-interaction .button.disabled svg path { fill: var(--low-interaction-foreground) !important; } -.normal-background button.disabled svg path, .normal-background .button.disabled svg path { +.normal-background button.disabled svg path, +.normal-background .button.disabled svg path { fill: var(--foreground-color) !important; } @@ -2529,12 +2569,14 @@ button.link:hover { width: 100%; } -button.soft, .button.soft { +button.soft, +.button.soft { border: 2px solid var(--interactive-background); margin: 0; } -button.soft:hover, .button.soft:hover { +button.soft:hover, +.button.soft:hover { background-color: var(--interactive-background); color: var(--interactive-foreground); border: 2px solid var(--catch-detail-color-contrast); @@ -2572,7 +2614,7 @@ select:hover { border-color: var(--catch-detail-color-contrast); } -.neutral-label{ +.neutral-label { /** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries. * Placed here for autocompletion */ @@ -2600,7 +2642,7 @@ label.button { label:hover:not(.neutral-label) { background-color: var(--catch-detail-color); color: var(--catch-detail-foregroundcolor); - border: 2px solid var(--interactive-contrast) + border: 2px solid var(--interactive-contrast); } label:not(.no-image-background):not(.neutral-label) img { @@ -2708,7 +2750,8 @@ textarea { color: #7193bb; } -.literal-code, code { +.literal-code, +code { /* A codeblock */ display: inline-block; background-color: lightgray; @@ -2831,18 +2874,18 @@ a.link-underline { } svg.apply-fill path { - fill: var(--svg-color) + fill: var(--svg-color); } .compass_arrow { - width: calc( 2.5rem - 1px ) ; - height: calc( 2.5rem - 1px ) + width: calc(2.5rem - 1px); + height: calc(2.5rem - 1px); } @media (min-width: 640px) { .compass_arrow { - width: calc( 2.75rem - 1px ) ; - height: calc( 2.75rem - 1px ) + width: calc(2.75rem - 1px); + height: calc(2.75rem - 1px); } } @@ -2923,6 +2966,16 @@ svg.apply-fill path { max-width: 100%; } +/************************* Experimental support for foldable devices ********************************/ + +@media (horizontal-viewport-segments: 2) { + .theme-list { + display: grid; + grid-auto-flow: row; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + .hover\:bg-indigo-200:hover { --tw-bg-opacity: 1; background-color: rgb(199 210 254 / var(--tw-bg-opacity)); diff --git a/src/UI/AllThemesGui.svelte b/src/UI/AllThemesGui.svelte index 5c1694fb4..0809f0838 100644 --- a/src/UI/AllThemesGui.svelte +++ b/src/UI/AllThemesGui.svelte @@ -136,7 +136,7 @@
- diff --git a/src/UI/Base/ModalRight.svelte b/src/UI/Base/ModalRight.svelte index d887487c2..b0d9a6930 100644 --- a/src/UI/Base/ModalRight.svelte +++ b/src/UI/Base/ModalRight.svelte @@ -16,6 +16,7 @@ role="dialog" style="max-width: 100vw; max-height: 100vh" tabindex="-1" + id="modal-right" use:trapFocus > @@ -30,3 +31,12 @@
+ + + diff --git a/src/UI/BigComponents/ThemeButton.svelte b/src/UI/BigComponents/ThemeButton.svelte index 468c70e95..3f8809ba0 100644 --- a/src/UI/BigComponents/ThemeButton.svelte +++ b/src/UI/BigComponents/ThemeButton.svelte @@ -85,7 +85,7 @@ {#if theme.id !== personal.id || $unlockedPersonal} - + diff --git a/src/UI/BigComponents/ThemesList.svelte b/src/UI/BigComponents/ThemesList.svelte index b8811ffc7..29ba02ef6 100644 --- a/src/UI/BigComponents/ThemesList.svelte +++ b/src/UI/BigComponents/ThemesList.svelte @@ -24,7 +24,7 @@
-
+
{#each filteredThemes as theme (theme.id)} {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)} diff --git a/src/index.css b/src/index.css index 0c904441a..be11f7942 100644 --- a/src/index.css +++ b/src/index.css @@ -12,51 +12,49 @@ @tailwind utilities; :root { - /* + /* * The main colour scheme of mapcomplete is configured here. * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. */ - /* Main color of the application: the background and text colours */ - --background-color: white; - /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ - --foreground-color: black; + /* Main color of the application: the background and text colours */ + --background-color: white; + /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ + --foreground-color: black; - /* A colour scheme to indicate an error or warning */ - --alert-color: #fee4d1; - --alert-foreground-color: var(--foreground-color); + /* A colour scheme to indicate an error or warning */ + --alert-color: #fee4d1; + --alert-foreground-color: var(--foreground-color); - --low-interaction-background: #eeeeee; - --low-interaction-background-50: #eeeeee90; - --low-interaction-foreground: black; - --low-interaction-contrast: #ff00ff; + --low-interaction-background: #eeeeee; + --low-interaction-background-50: #eeeeee90; + --low-interaction-foreground: black; + --low-interaction-contrast: #ff00ff; - --interactive-background: #dddddd; - --interactive-foreground: black; - --interactive-contrast: #ff00ff; + --interactive-background: #dddddd; + --interactive-foreground: black; + --interactive-contrast: #ff00ff; - --button-background: black; - --button-foreground: white; + --button-background: black; + --button-foreground: white; - /** + /** * Base colour of interactive elements, mainly the 'subtle button' * @deprecated */ - --subtle-detail-color: #dbeafe; - --subtle-detail-color-contrast: black; - --subtle-detail-color-light-contrast: lightgrey; + --subtle-detail-color: #dbeafe; + --subtle-detail-color-contrast: black; + --subtle-detail-color-light-contrast: lightgrey; + --catch-detail-color: black; /*#3a3aeb;*/ + --catch-detail-foregroundcolor: white; + --catch-detail-color-contrast: #fb3afb; - --catch-detail-color: black; /*#3a3aeb;*/ - --catch-detail-foregroundcolor: white; - --catch-detail-color-contrast: #fb3afb; + --image-carousel-height: 350px; - - --image-carousel-height: 350px; - - /** Technical value, used by icon.svelte + /** Technical value, used by icon.svelte */ - --svg-color: #000000; + --svg-color: #000000; } /***********************************************************************\ @@ -64,65 +62,64 @@ \***********************************************************************/ html, body { - height: 100%; - min-height: 100vh; - min-height: -webkit-fill-available; - margin: 0; - padding: 0; - background-color: var(--background-color); - color: var(--foreground-color); - font-family: "Helvetica Neue", Arial, sans-serif; + height: 100%; + min-height: 100vh; + min-height: -webkit-fill-available; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--foreground-color); + font-family: "Helvetica Neue", Arial, sans-serif; } svg, img { - box-sizing: content-box; - width: 100%; - height: 100%; + box-sizing: content-box; + width: 100%; + height: 100%; } li { - margin-left: 0.5em; - padding-left: 0.2em; - margin-top: 0.1em; + margin-left: 0.5em; + padding-left: 0.2em; + margin-top: 0.1em; } li::marker { - content: "•"; + content: "•"; } h1 { - font-size: xx-large; - margin-top: 0.6em; - margin-bottom: 0.4em; - font-weight: bold; + font-size: xx-large; + margin-top: 0.6em; + margin-bottom: 0.4em; + font-weight: bold; } - h2 { - font-size: x-large; - margin-top: 0.5em; - margin-bottom: 0.3em; - font-weight: bold; + font-size: x-large; + margin-top: 0.5em; + margin-bottom: 0.3em; + font-weight: bold; } h3 { - font-size: larger; - margin-top: 0.6em; - margin-bottom: 0; - font-weight: bold; + font-size: larger; + margin-top: 0.6em; + margin-bottom: 0; + font-weight: bold; } p { - padding-top: 0.1em; + padding-top: 0.1em; } input { - color: var(--foreground-color); + color: var(--foreground-color); } -input[type=text] { - width: 100%; +input[type="text"] { + width: 100%; } /************************* BIG CATEGORIES ********************************/ @@ -132,35 +129,34 @@ input[type=text] { * and some interactive elements */ - .subtle-background { - background: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); + background: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); } .normal-background { - background: var(--background-color); - color: var(--foreground-color); + background: var(--background-color); + color: var(--foreground-color); } .low-interaction { - background: var(--low-interaction-background); - color: var(--low-interaction-foreground) + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); } .interactive { - background: var(--interactive-background); - color: var(--interactive-foreground) + background: var(--interactive-background); + color: var(--interactive-foreground); } .border-interactive { - border: 2px dashed var(--catch-detail-color-contrast); - border-radius: 0.5rem; + border: 2px dashed var(--catch-detail-color-contrast); + border-radius: 0.5rem; } .border-region { - border: 2px dashed var(--interactive-background); - border-radius: 0.5rem; + border: 2px dashed var(--interactive-background); + border-radius: 0.5rem; } /******************* Styling of input elements **********************/ @@ -169,251 +165,281 @@ input[type=text] { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ -button.small, .button.small { - line-height: 1rem; - margin: 0; - margin-left: 0.5rem; - padding: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - height: fit-content; - font-size: unset; - border: 2px solid var(--button-background); - border-radius: 0.5rem; - font-weight: normal; - transition: all 250ms; - --tw-text-opacity: 1; - --tw-bg-opacity: 1; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); +button.small, +.button.small { + line-height: 1rem; + margin: 0; + margin-left: 0.5rem; + padding: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + height: fit-content; + font-size: unset; + border: 2px solid var(--button-background); + border-radius: 0.5rem; + font-weight: normal; + transition: all 250ms; + --tw-text-opacity: 1; + --tw-bg-opacity: 1; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); } -button, .button { - align-items: center; - display: inline-flex; - line-height: 1.25rem; - margin: 0.2rem; - padding: 0.4rem; - padding-left: 0.6rem; - padding-right: 0.6rem; - font-size: large; - font-weight: bold; - border: 2px solid var(--button-background); - border-radius: 0.5rem; - transition: all 250ms; - --tw-text-opacity: 1; - --tw-bg-opacity: 1; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); +.button.theme-button { + margin: 0; + margin-top: 0.25rem; + margin-bottom: 0.25rem; + + /* Margin should be removed on larger screens */ + @media (min-width: 768px) { + margin: 0; + margin-top: 0; + margin-bottom: 0; + } + + /* Experimental support for foldable devices */ + @media (horizontal-viewport-segments: 2) { + margin: 0; + margin-top: 0; + margin-bottom: 0; + } +} + +button, +.button { + align-items: center; + display: inline-flex; + line-height: 1.25rem; + margin: 0.2rem; + padding: 0.4rem; + padding-left: 0.6rem; + padding-right: 0.6rem; + font-size: large; + font-weight: bold; + border: 2px solid var(--button-background); + border-radius: 0.5rem; + transition: all 250ms; + --tw-text-opacity: 1; + --tw-bg-opacity: 1; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); } .button-shadow { - box-shadow: 0 5px 10px #88888888; + box-shadow: 0 5px 10px #88888888; } +button.selected, +.button.selected { + background-color: var(--catch-detail-color); + border-color: var(--catch-detail-color); - -button.selected, .button.selected { - background-color: var(--catch-detail-color); - border-color: var(--catch-detail-color); - - color: var(--catch-detail-foregroundcolor); + color: var(--catch-detail-foregroundcolor); } -button.selected svg path, .button.selected svg path { - fill: var(--catch-detail-foregroundcolor) !important; +button.selected svg path, +.button.selected svg path { + fill: var(--catch-detail-foregroundcolor) !important; } -button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path { - fill: var(--interactive-foreground) !important;; - transition: all 250ms; +button:not(.no-image-background):not(.soft) svg path, +.button:not(.no-image-background):not(.soft) svg path { + fill: var(--interactive-foreground) !important; + transition: all 250ms; } -.interactive button, .interactive .button { - background: var(--interactive-background); - color: var(--interactive-foreground); +.interactive button, +.interactive .button { + background: var(--interactive-background); + color: var(--interactive-foreground); } -button:hover, .button:hover { - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); - border: 2px solid var(--catch-detail-color-contrast); +button:hover, +.button:hover { + background-color: var(--catch-detail-color); + color: var(--catch-detail-foregroundcolor); + border: 2px solid var(--catch-detail-color-contrast); } -button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img { - background: var(--low-interaction-background); - border-radius: 100rem; +button:hover:not(.no-image-background) img, +.button:hover:not(.no-image-background) img { + background: var(--low-interaction-background); + border-radius: 100rem; } - -button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path { - fill: var(--catch-detail-foregroundcolor) !important;; +button:hover:not(.no-image-background) svg path, +.button:hover:not(.no-image-background) svg path { + fill: var(--catch-detail-foregroundcolor) !important; } -button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path { - fill: var(--low-interaction-foreground) !important;; +button.disabled:hover:not(.no-image-background) svg path, +.button.disabled:hover:not(.no-image-background) svg path { + fill: var(--low-interaction-foreground) !important; } - -button.primary, .button.primary { - color: var(--button-foreground); - background: var(--button-background); +button.primary, +.button.primary { + color: var(--button-foreground); + background: var(--button-background); } -button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path { - fill: var(--button-foreground) !important;; - transition: all 250ms; +button.primary:not(.no-image-background) svg path, +.button.primary:not(.no-image-background) svg path { + fill: var(--button-foreground) !important; + transition: all 250ms; } -button.disabled.low-interaction, .button.disabled.low-interaction { - background-color: var(--low-interaction-background-50); +button.disabled.low-interaction, +.button.disabled.low-interaction { + background-color: var(--low-interaction-background-50); } - -button.disabled, .button.disabled { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; - box-shadow: none; +button.disabled, +.button.disabled { + cursor: default; + border: 2px dashed var(--button-background); + background: unset; + color: unset; + box-shadow: none; } - - -button.disabled:hover, .button.disabled:hover { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; +button.disabled:hover, +.button.disabled:hover { + cursor: default; + border: 2px dashed var(--button-background); + background: unset; + color: unset; } button.link { - border: none; - text-decoration: underline; - background-color: unset; + border: none; + text-decoration: underline; + background-color: unset; } button.link:hover { - color:unset; + color: unset; } -.interactive button.disabled svg path, .interactive .button.disabled svg path { - fill: var(--interactive-foreground) !important;; +.interactive button.disabled svg path, +.interactive .button.disabled svg path { + fill: var(--interactive-foreground) !important; } - -.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path { - fill: var(--low-interaction-foreground) !important;; +.low-interaction button.disabled svg path, +.low-interaction .button.disabled svg path { + fill: var(--low-interaction-foreground) !important; } -.normal-background button.disabled svg path, .normal-background .button.disabled svg path { - fill: var(--foreground-color) !important; +.normal-background button.disabled svg path, +.normal-background .button.disabled svg path { + fill: var(--foreground-color) !important; } - .links-w-full a:not(.weblate-link) { - display: flex; - column-gap: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - width: 100%; + display: flex; + column-gap: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + width: 100%; } -button.soft, .button.soft { - border: 2px solid var(--interactive-background); - margin: 0; +button.soft, +.button.soft { + border: 2px solid var(--interactive-background); + margin: 0; } -button.soft:hover, .button.soft:hover { - background-color: var(--interactive-background); - color: var(--interactive-foreground); - border: 2px solid var(--catch-detail-color-contrast); +button.soft:hover, +.button.soft:hover { + background-color: var(--interactive-background); + color: var(--interactive-foreground); + border: 2px solid var(--catch-detail-color-contrast); } .links-as-button a { - /* + /* * Let a 'link' mimick a button, but not entirely */ - padding: 3px; - margin: 0; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); - border: 2px solid var(--interactive-background); - border-radius: 0.5rem; + padding: 3px; + margin: 0; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); + border: 2px solid var(--interactive-background); + border-radius: 0.5rem; } .links-as-button a:hover { - background-color: var(--interactive-background); - color: var(--interactive-foregroundcolor); - border-color: var(--catch-detail-color-contrast); + background-color: var(--interactive-background); + color: var(--interactive-foregroundcolor); + border-color: var(--catch-detail-color-contrast); } .links-as-button a:hover svg path { - fill: var(--catch-detail-foregroundcolor) !important; + fill: var(--catch-detail-foregroundcolor) !important; } select { - border: 2px solid #00000000; - color: var(--foreground-color) !important; - background-color: var(--low-interaction-background) !important; + border: 2px solid #00000000; + color: var(--foreground-color) !important; + background-color: var(--low-interaction-background) !important; } select:hover { - border-color: var(--catch-detail-color-contrast); + border-color: var(--catch-detail-color-contrast); } - -.neutral-label{ - /** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries. +.neutral-label { + /** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries. * Placed here for autocompletion */ } 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; - border-radius: 0.5rem; - background-color: var(--low-interaction-background); - width: 100%; - box-sizing: border-box; - transition: all 250ms; + border: 2px solid var(--interactive-background); + padding: 0.25rem; + padding-right: 0.5rem; + padding-left: 0.5rem; + border-radius: 0.5rem; + background-color: var(--low-interaction-background); + width: 100%; + box-sizing: border-box; + transition: all 250ms; } label.button { - width: 100%; + width: 100%; } 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(--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); + padding: 0.25rem; + border-radius: 0.25rem; + background: var(--low-interaction-background); } label:not(.neutral-label) svg path { - transition: all 250ms; + transition: all 250ms; } label:hover:not(.no-image-background):not(.neutral-label) svg path { - fill: var(--catch-detail-foregroundcolor) !important; + fill: var(--catch-detail-foregroundcolor) !important; } label.checked:not(.neutral-label) { - border: 2px solid var(--foreground-color); + border: 2px solid var(--foreground-color); } textarea { - color: black; + color: black; } /************************* OTHER CATEGORIES ********************************/ @@ -424,97 +450,96 @@ textarea { */ .thanks { - /* The class to indicate 'operation successful' or 'thank you for contributing' */ - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - border: 3px dotted #58cd27; - background-color: #58cd2722; + /* The class to indicate 'operation successful' or 'thank you for contributing' */ + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + border: 3px dotted #58cd27; + background-color: #58cd2722; } .alert { - /* The class to convey important information, e.g. 'invalid', 'something went wrong', 'warning: testmode', ... */ - background-color: var(--alert-color); - color: var(--alert-foreground-color); - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; - border: 2px dotted #ff9143; + /* The class to convey important information, e.g. 'invalid', 'something went wrong', 'warning: testmode', ... */ + background-color: var(--alert-color); + color: var(--alert-foreground-color); + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; + border: 2px dotted #ff9143; } - .warning { - /* The class to convey important information, but not as grave as 'alert' */ - background-color: var(--low-interaction-background); - color: var(--alert-foreground-color); - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; - border: 3px dotted #ff9143; + /* The class to convey important information, but not as grave as 'alert' */ + background-color: var(--low-interaction-background); + color: var(--alert-foreground-color); + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; + border: 3px dotted #ff9143; } .low-interaction .warning { - background-color: var(--interactive-background); + background-color: var(--interactive-background); } .information { - /* The class to convey important information which does _not_ denote an error... */ - background-color: var(--low-interaction-background); - color: var(--alert-foreground-color); - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; - border: 3px dotted var(--catch-detail-color-contrast); + /* The class to convey important information which does _not_ denote an error... */ + background-color: var(--low-interaction-background); + color: var(--alert-foreground-color); + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; + border: 3px dotted var(--catch-detail-color-contrast); } .low-interaction .interactive { - background-color: var(--interactive-background); + background-color: var(--interactive-background); } .subtle { - /* For all information that is not important for 99% of the users */ - color: #666; - font-weight: normal; + /* For all information that is not important for 99% of the users */ + color: #666; + font-weight: normal; } .low-interaction .subtle { - color: #444; + color: #444; } .interactive .subtle { - color: #333; + color: #333; } .link-underline .subtle a { - text-decoration: underline 1px #7193bb88; - color: #7193bb; + text-decoration: underline 1px #7193bb88; + color: #7193bb; } - -.literal-code, code { - /* A codeblock */ - display: inline-block; - background-color: lightgray; - padding: 0.1rem; - padding-left: 0.35rem; - padding-right: 0.35rem; - word-break: break-word; - color: black; - box-sizing: border-box; - font-family: monospace; +.literal-code, +code { + /* A codeblock */ + display: inline-block; + background-color: lightgray; + padding: 0.1rem; + padding-left: 0.35rem; + padding-right: 0.35rem; + word-break: break-word; + color: black; + box-sizing: border-box; + font-family: monospace; } .interactive .literal-code { - background-color: #b3b3b3; + background-color: #b3b3b3; } /************************** UTILITY ************************/ @@ -523,184 +548,181 @@ textarea { * Utility classes are there for a specific function to pin down browser behaviour (and cannot be changed) */ - .text-white a { - /* Used solely in 'imageAttribution' and in many themes*/ - color: var(--background-color); + /* Used solely in 'imageAttribution' and in many themes*/ + color: var(--background-color); } .bg-black-transparent { - background-color: #00000088; + background-color: #00000088; } .block-ruby { - display: block ruby; + display: block ruby; } - .rounded-left-full { - border-bottom-left-radius: 999rem; - border-top-left-radius: 999rem; + border-bottom-left-radius: 999rem; + border-top-left-radius: 999rem; } .rounded-right-full { - border-bottom-right-radius: 999rem; - border-top-right-radius: 999rem; + border-bottom-right-radius: 999rem; + border-top-right-radius: 999rem; } - .no-images img { - /* Used solely in 'imageAttribution' and in many themes for the label*/ - display: none; + /* Used solely in 'imageAttribution' and in many themes for the label*/ + display: none; } .weblate-link { - display: inline-block; - flex-shrink: 0; - margin: 0; - padding: 0.25rem; - width: 1.2rem; - height: 1.2rem; - border: unset; - border-radius: 5rem; - backdrop-filter: var(--low-interaction-background); + display: inline-block; + flex-shrink: 0; + margin: 0; + padding: 0.25rem; + width: 1.2rem; + height: 1.2rem; + border: unset; + border-radius: 5rem; + backdrop-filter: var(--low-interaction-background); } - .no-weblate .weblate-link { - display: none !important; + display: none !important; } .link-underline a { - text-decoration: underline 1px var(--foreground-color); + text-decoration: underline 1px var(--foreground-color); } a.link-underline { - text-decoration: underline 1px var(--foreground-color); + text-decoration: underline 1px var(--foreground-color); } .link-no-underline a { - text-decoration: none; + text-decoration: none; } .disable-links a { - pointer-events: none; - text-decoration: none !important; - color: var(--subtle-detail-color-contrast) !important; + pointer-events: none; + text-decoration: none !important; + color: var(--subtle-detail-color-contrast) !important; } .enable-links a { - pointer-events: unset; - text-decoration: underline !important; - color: unset !important; + pointer-events: unset; + text-decoration: underline !important; + color: unset !important; } .disable-links a.must-link, .disable-links .must-link a { - /* Hide links if they are disabled */ - display: none; + /* Hide links if they are disabled */ + display: none; } - .zebra-table tr:nth-child(even) { - background-color: #f2f2f2; + background-color: #f2f2f2; } - /************************* MISC ELEMENTS *************************/ .selected svg:not(.noselect *) path.selectable { - /* A marker on the map gets the 'selected' class when it's properties are displayed + /* A marker on the map gets the 'selected' class when it's properties are displayed */ - stroke: white !important; - stroke-width: 20px !important; - overflow: visible !important; - -webkit-animation: glowing-drop-shadow 1s ease-in-out infinite alternate; - -moz-animation: glowing-drop-shadow 1s ease-in-out infinite alternate; - animation: glowing-drop-shadow 1s ease-in-out infinite alternate; + stroke: white !important; + stroke-width: 20px !important; + overflow: visible !important; + -webkit-animation: glowing-drop-shadow 1s ease-in-out infinite alternate; + -moz-animation: glowing-drop-shadow 1s ease-in-out infinite alternate; + animation: glowing-drop-shadow 1s ease-in-out infinite alternate; } .selected svg { - /* A marker on the map gets the 'selected' class when it's properties are displayed + /* A marker on the map gets the 'selected' class when it's properties are displayed */ - overflow: visible !important; + overflow: visible !important; } svg.apply-fill path { - fill: var(--svg-color) + fill: var(--svg-color); } .compass_arrow { - width: calc( 2.5rem - 1px ) ; - height: calc( 2.5rem - 1px ) + width: calc(2.5rem - 1px); + height: calc(2.5rem - 1px); } @media (min-width: 640px) { - .compass_arrow { - width: calc( 2.75rem - 1px ) ; - height: calc( 2.75rem - 1px ) - } + .compass_arrow { + width: calc(2.75rem - 1px); + height: calc(2.75rem - 1px); + } } - - - @-webkit-keyframes glowing-drop-shadow { - from { - filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6)); - } - to { - filter: drop-shadow(5px 5px 80px rgb(0.5 0.5 0.5 / 0.8)); - } + from { + filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6)); + } + to { + filter: drop-shadow(5px 5px 80px rgb(0.5 0.5 0.5 / 0.8)); + } } @keyframes slide { - /* This is the animation on the marker to add a new point - it slides through all the possible presets */ - from { - transform: translateX(0%); - } + /* This is the animation on the marker to add a new point - it slides through all the possible presets */ + from { + transform: translateX(0%); + } - to { - transform: translateX(calc(-100% + 42px)); - } + to { + transform: translateX(calc(-100% + 42px)); + } } .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-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; - } + 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 ********************************/ - .slideshow-item img { - /* Legacy: should be replace when the image element is ported to Svelte*/ - height: var(--image-carousel-height); - width: unset; + /* Legacy: should be replace when the image element is ported to Svelte*/ + height: var(--image-carousel-height); + width: unset; } .animate-height { - /* Legacy: should be replaced by headlessui disclosure in time */ - transition: max-height 0.5s ease-in-out; - overflow-y: hidden; + /* Legacy: should be replaced by headlessui disclosure in time */ + transition: max-height 0.5s ease-in-out; + overflow-y: hidden; } - .min-h-32 { - min-height: 8rem; + min-height: 8rem; } .max-w-full { - max-width: 100%; + max-width: 100%; +} + +/************************* Experimental support for foldable devices ********************************/ +@media (horizontal-viewport-segments: 2) { + .theme-list { + display: grid; + grid-auto-flow: row; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } }