mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-21 02:20:12 +00:00
109 lines
2.7 KiB
SCSS
109 lines
2.7 KiB
SCSS
@use 'sass:meta';
|
|
@use 'styles/font/material-icons';
|
|
|
|
@use 'sass:math';
|
|
|
|
@import '@fontsource/open-sans/400.css';
|
|
@import '@fontsource/open-sans/400-italic.css';
|
|
@import '@fontsource/open-sans/700.css';
|
|
@import '@fontsource/open-sans/300.css';
|
|
|
|
@include meta.load-css('styles/_css-variables');
|
|
@include meta.load-css('styles/themes');
|
|
@include meta.load-css('styles/page');
|
|
@include meta.load-css('styles/util');
|
|
@include meta.load-css('styles/components/components');
|
|
|
|
* {
|
|
//box-shadow: none !important;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
p,
|
|
input,
|
|
textarea,
|
|
pre,
|
|
[contenteditable] {
|
|
user-select: text;
|
|
-webkit-touch-callout: default;
|
|
}
|
|
|
|
body.isDisableAnimations {
|
|
*,
|
|
*:after,
|
|
*:before {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
// ===============================
|
|
// iOS Safe Area Handling
|
|
// ===============================
|
|
|
|
// Native mobile platforms get safe area padding
|
|
body.isNativeMobile {
|
|
// Apply safe area padding to the viewport
|
|
padding-top: var(--safe-area-top);
|
|
padding-left: var(--safe-area-left);
|
|
padding-right: var(--safe-area-right);
|
|
|
|
// Bottom padding only when keyboard is not visible
|
|
// Skip when bottom nav is present — the nav and content area handle it themselves
|
|
&:not(.isKeyboardVisible):not(.hasMobileBottomNav) {
|
|
padding-bottom: var(--safe-area-bottom);
|
|
}
|
|
}
|
|
|
|
// iOS-specific adjustments
|
|
body.isIOS {
|
|
// Prevent overscroll bounce effect
|
|
overscroll-behavior: none;
|
|
|
|
// Ensure the viewport extends behind safe areas
|
|
// This allows us to color the areas behind notch/home indicator
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
|
|
// Keyboard visible adjustments
|
|
body.isKeyboardVisible {
|
|
// Remove bottom safe area when keyboard is visible
|
|
padding-bottom: 0;
|
|
|
|
// Optionally adjust for keyboard height
|
|
// Elements can use --keyboard-height to position above keyboard
|
|
}
|
|
|
|
// ===============================
|
|
// iPad-Specific Optimizations
|
|
// ===============================
|
|
|
|
body.isIPad {
|
|
// iPad has more screen real estate - use wider content
|
|
--component-max-width: 900px;
|
|
|
|
// Larger touch targets are less necessary on iPad
|
|
--touch-target-min: 40px;
|
|
|
|
// Better use of horizontal space in landscape
|
|
@media (min-width: 1024px) {
|
|
--component-max-width: 1000px;
|
|
}
|
|
|
|
// Split-view support: when iPad is in split-view mode,
|
|
// the viewport is narrower - detect and adjust
|
|
@media (max-width: 500px) {
|
|
// In narrow split-view, use phone-like layout
|
|
--component-max-width: 100%;
|
|
}
|
|
|
|
// iPad in landscape with enough space for side-by-side content
|
|
@media (min-width: 1024px) and (orientation: landscape) {
|
|
// Wider dialogs on iPad landscape
|
|
.mat-mdc-dialog-container {
|
|
max-width: 700px;
|
|
}
|
|
}
|
|
}
|