diff --git a/src/components/map/tooltips/MapLocationTooltip.tsx b/src/components/map/tooltips/MapLocationTooltip.tsx index 82cc465..a54233d 100644 --- a/src/components/map/tooltips/MapLocationTooltip.tsx +++ b/src/components/map/tooltips/MapLocationTooltip.tsx @@ -1,4 +1,5 @@ import {MapLocation} from "../../../types/MapLocation.ts"; +import "./Tooltip.scss"; interface MapLocationTooltipProps { location: MapLocation; diff --git a/src/components/map/tooltips/MapRegionTooltip.tsx b/src/components/map/tooltips/MapRegionTooltip.tsx index 4d7dd66..2b60cb2 100644 --- a/src/components/map/tooltips/MapRegionTooltip.tsx +++ b/src/components/map/tooltips/MapRegionTooltip.tsx @@ -3,6 +3,7 @@ import CapitalIcon from "../../icons/CapitalIcon.tsx"; import PopulationIcon from "../../icons/PopulationIcon.tsx"; import RulerIcon from "../../icons/RulerIcon.tsx"; import DescriptionIcon from "../../icons/DescriptionIcon.tsx"; +import "./Tooltip.scss"; interface MapLocationTooltipProps { region: MapRegion; diff --git a/src/components/map/tooltips/Tooltip.scss b/src/components/map/tooltips/Tooltip.scss new file mode 100644 index 0000000..4358b82 --- /dev/null +++ b/src/components/map/tooltips/Tooltip.scss @@ -0,0 +1,97 @@ +.tooltip { + position: absolute; + display: none; + padding: 10px; + background-color: rgba(0, 0, 0, 0.8); + color: #fff; + border-radius: 5px; + z-index: 1000; + max-width: 300px; + + flex-direction: column; + gap: 15px; + + //-webkit-user-select: none; + //-ms-user-select: none; + //user-select: none; + + h3 { + margin: 0; + font-size: 26px; + } + + a.titlelink { + color: #fff; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .border { + width: 100%; + height: 1px; + background-color: #fff; + } + + span { + font-size: 1.2rem; + } + + img.locationimg { + width: 100%; + height: auto; + border-radius: 5px; + } + + a.more { + display: flex; + align-items: center; + gap: 7px; + + img { + --hw: 23px; + height: var(--hw); + width: var(--hw); + } + } + + .detailbox { + display: flex; + //align-items: center; + gap: 7px; + + img, svg { + --hw: 23px; + height: var(--hw); + width: var(--hw); + min-width: var(--hw); + } + + span { + font-size: 1.2rem; + //margin-top: 0px; + } + } + + @media (max-width: 768px) { + h3 { + font-size: 1.2rem; + } + + span { + font-size: .8rem; + } + + .detailbox { + img, svg { + --hw: 15px; + } + + span { + font-size: .8rem; + } + } + } +} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index dc28da8..950242a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -80,109 +80,11 @@ a { } @media (max-width: 1200px) { - body { + #root { flex-direction: column; } .legend { max-width: 100%; } -} - -.tooltip { - position: absolute; - display: none; - padding: 10px; - background-color: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 5px; - z-index: 1000; - max-width: 300px; - - flex-direction: column; - gap: 15px; - - //-webkit-user-select: none; - //-ms-user-select: none; - //user-select: none; - - h3 { - margin: 0; - font-size: 26px; - } - - a.titlelink { - color: #fff; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - .border { - width: 100%; - height: 1px; - background-color: #fff; - } - - span { - font-size: 1.2rem; - } - - img.locationimg { - width: 100%; - height: auto; - border-radius: 5px; - } - - a.more { - display: flex; - align-items: center; - gap: 7px; - - img { - --hw: 23px; - height: var(--hw); - width: var(--hw); - } - } - - .detailbox { - display: flex; - //align-items: center; - gap: 7px; - - img, svg { - --hw: 23px; - height: var(--hw); - width: var(--hw); - min-width: var(--hw); - } - - span { - font-size: 1.2rem; - //margin-top: 0px; - } - } - - @media (max-width: 768px) { - h3 { - font-size: 1.2rem; - } - - span { - font-size: .8rem; - } - - .detailbox { - img, svg { - --hw: 15px; - } - - span { - font-size: .8rem; - } - } - } } \ No newline at end of file