extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2025-06-27 04:51:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve settings dialog

Browse Source 
* Fix issue where it would overflow the viewport if using high enough zoom
* Some minor design improvements
This commit is contained in:
Jonatan Heyman 2023-12-24 00:23:07 +01:00
parent bb9a39fe6e
commit 5d7af5031d
1 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/settings/Settings.vue
View File

@ -60,7 +60,7 @@
<template> <template>
<div class="settings"> <div class="settings">
<div class="dialog"> <div class="dialog">
<div> <div class="dialog-content">
<h1>Settings</h1> <h1>Settings</h1>
<div class="row"> <div class="row">
<div class="entry"> <div class="entry">
@ -134,11 +134,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottom-bar">
<button <button
@click="$emit('closeSettings')" @click="$emit('closeSettings')"
class="close" class="close"
>Close</button> >Close</button>
</div> </div>
</div>
<div class="shader"></div> <div class="shader"></div>
</div> </div>
</template> </template>
@ -167,20 +170,25 @@
left: 50% left: 50%
top: 50% top: 50%
transform: translate(-50%, -50%) transform: translate(-50%, -50%)
width: 100% width: 700px
height: 100% height: 560px
max-width: 700px max-width: 100%
max-height: 500px max-height: 100%
display: flex
flex-direction: column
border-radius: 5px border-radius: 5px
padding: 40px
background: #fff background: #fff
color: #333 color: #333
overflow-y: auto
&:active, &:selected, &:focus, &:focus-visible &:active, &:selected, &:focus, &:focus-visible
border: none border: none
outline: none outline: none
+dark-mode +dark-mode
background: #333 background: #333
color: #eee color: #eee
.dialog-content
flex-grow: 1
padding: 40px
h1 h1
font-size: 20px font-size: 20px
font-weight: 600 font-weight: 600
@ -208,10 +216,13 @@
position: relative position: relative
top: 2px top: 2px
left: -3px left: -3px
.bottom-bar
border-radius: 0 0 5px 5px
background: #eee
text-align: right
padding: 10px 20px
+dark-mode
background: #222
.close .close
height: 32px height: 28px
position: absolute
bottom: 30px
right: 30px
</style> </style>