diff --git a/src/ui/_base.scss b/src/ui/_base.scss index 2ee904d..9bf236c 100644 --- a/src/ui/_base.scss +++ b/src/ui/_base.scss @@ -194,9 +194,18 @@ $transition-duration: 300ms; font-weight: bold; } +// Cf. https://css-tricks.com/box-sizing/ +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + body { height: 100vh; width: 100vw; + margin: 0px; padding: 0px; outline: 0px; diff --git a/src/ui/components/_panel.scss b/src/ui/components/_panel.scss index ef24da3..9dc3efd 100644 --- a/src/ui/components/_panel.scss +++ b/src/ui/components/_panel.scss @@ -5,8 +5,9 @@ $panel-aspect-ratio: 1/1.618; @mixin panel($padding-v: 2%, $padding-h: 2%) { padding: $padding-v $padding-h; - height: calc(100% - (2 * $padding-v) - (2 * $border-big-width)); - width: calc(100% - (2 * $padding-h) - (2 * $border-big-width)); + height: 100%; + width: 100%; + flex-shrink: 0; border: $border-big; diff --git a/src/ui/components/login.scss b/src/ui/components/login.scss index 0c23b7e..8953a3a 100644 --- a/src/ui/components/login.scss +++ b/src/ui/components/login.scss @@ -73,7 +73,7 @@ overflow: hidden; &__content { - height: calc(100% + (2 * $border-normal-width)); + height: 100%; aspect-ratio: 1; } } diff --git a/src/ui/components/modal.scss b/src/ui/components/modal.scss index c6db37a..6c7ae37 100644 --- a/src/ui/components/modal.scss +++ b/src/ui/components/modal.scss @@ -67,7 +67,7 @@ $modal-max-height: 55vh; border-radius: $border-radius; &__placeholder { - width: calc(100% + (2 * $border-normal-width)); + width: 100%; height: 100%; } diff --git a/src/ui/components/text_input.scss b/src/ui/components/text_input.scss index d83cba6..ce09044 100644 --- a/src/ui/components/text_input.scss +++ b/src/ui/components/text_input.scss @@ -3,17 +3,14 @@ %base-text-input { $horizontal-padding: 1vw; - height: calc(100% - (2 * $border-normal-width)); - width: calc(100% - (2 * $horizontal-padding)); + height: 100%; + width: 100%; border: $border-normal; border-color: get-color(primary, 90); border-radius: $border-radius; - padding-left: $horizontal-padding; - padding-right: $horizontal-padding; - padding-top: 0px; - padding-bottom: 0px; + padding: 0px $horizontal-padding; } %base-input {