mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-20 16:42:56 +00:00
126 lines
2.4 KiB
SCSS
126 lines
2.4 KiB
SCSS
/*!
|
|
* Copyright (C) 2022 StApps
|
|
* This program is free software: you can redistribute it and/or modify it
|
|
* under the terms of the GNU General Public License as published by the Free
|
|
* Software Foundation, version 3.
|
|
*
|
|
* This program is distributed in the hope that it will be useful, but WITHOUT
|
|
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
|
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
|
* more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License along with
|
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
ion-content {
|
|
// fixes the unexpected issue that the content is not fullscreen (behind the header)
|
|
position: absolute;
|
|
div.map-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
}
|
|
& > div {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
ion-toolbar:first-of-type {
|
|
padding: 0 var(--spacing-md) var(--spacing-xs);
|
|
}
|
|
|
|
::ng-deep {
|
|
.stapps-location {
|
|
ion-icon {
|
|
color: #fd435c;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.stapps-device-location {
|
|
ion-icon {
|
|
color: #4387fd;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
div.floating-content {
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
width: 100%;
|
|
padding: 0 var(--spacing-md) 8vh;
|
|
justify-content: center;
|
|
|
|
ion-card {
|
|
margin: 0;
|
|
}
|
|
|
|
div.map-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
stapps-map-item {
|
|
width: 550px;
|
|
position: center;
|
|
justify-self: center;
|
|
margin: var(--spacing-sm) auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.floating-buttons {
|
|
z-index: 1000;
|
|
position: absolute;
|
|
bottom: 15px;
|
|
right: 10px;
|
|
}
|
|
|
|
div.map-buttons {
|
|
ion-button {
|
|
margin: 4px;
|
|
// important for iOS
|
|
--box-shadow: var(--map-box-shadow);
|
|
align-self: flex-end;
|
|
}
|
|
|
|
ion-button::part(native) {
|
|
background: white;
|
|
}
|
|
|
|
ion-button::part(native):hover,
|
|
ion-button::part(native):focus {
|
|
background: whitesmoke;
|
|
}
|
|
}
|
|
|
|
div.map-buttons.above {
|
|
min-width: 70%;
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 667px) {
|
|
div.map-buttons.above {
|
|
display: flex;
|
|
}
|
|
div.floating-content {
|
|
justify-content: normal;
|
|
padding: 0 var(--spacing-md) var(--spacing-lg);
|
|
stapps-map-item {
|
|
display: grid;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.map-buttons.floating-buttons {
|
|
display: none;
|
|
}
|
|
}
|