1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00

Style updates

This commit is contained in:
Romein van Buren 2023-05-29 20:22:06 +02:00
parent f230b4587f
commit 035d5211d9
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
3 changed files with 23 additions and 20 deletions

View File

@ -81,7 +81,7 @@
margin-right: auto; margin-right: auto;
margin-bottom: auto; margin-bottom: auto;
width: 100%; width: 100%;
border-radius: 10px; border-radius: var(--radius);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
cursor: auto; cursor: auto;
@ -97,7 +97,7 @@
header { header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 1rem; padding: 0.75rem;
} }
header .title { header .title {
font-size: 1.5rem; font-size: 1.5rem;
@ -114,14 +114,14 @@
overflow-y: auto; overflow-y: auto;
} }
.content.padded { .content.padded {
padding: 1rem; padding: 0.75rem;
} }
header + .content.padded { header + .content.padded {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
footer { footer {
padding: 1rem; padding: 0.75rem;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
</style> </style>

View File

@ -171,19 +171,20 @@
</div> </div>
<div class="form-row actions"> <div class="form-row actions">
<!-- <CodeExample {code} /> -->
<button class="btn" type="button" on:click={loadQuery}>
<Icon name="upload" /> Load query…
</button>
<button class="btn" type="button" on:click={saveQuery}>
<Icon name="save" /> Save as…
</button>
<button class="btn" type="button" on:click={() => exportInfo = {}}>
<Icon name="save" /> Export results…
</button>
<button type="submit" class="btn" title="Run query"> <button type="submit" class="btn" title="Run query">
<Icon name="play" /> Run <Icon name="play" /> Run
</button> </button>
<button class="btn secondary" type="button" on:click={() => exportInfo = {}}>
<Icon name="save" /> Export results…
</button>
<div class="field">
<button class="btn secondary" type="button" on:click={loadQuery}>
<Icon name="upload" /> Load query…
</button>
<button class="btn secondary" type="button" on:click={saveQuery}>
<Icon name="save" /> Save as…
</button>
</div>
</div> </div>
</form> </form>

View File

@ -1,5 +1,6 @@
:root { :root {
--darwin-titlebar-height: 36px; --darwin-titlebar-height: 36px;
--radius: 4px;
} }
html, html,
@ -55,10 +56,11 @@ select:disabled {
background-color: #00008b; background-color: #00008b;
border: 1px solid #00008b; border: 1px solid #00008b;
padding: 0.5rem; padding: 0.5rem;
border-radius: 10px; border-radius: var(--radius);
color: #fff; color: #fff;
} }
.btn:focus { .btn:focus,
.btn:active {
box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2); box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
outline: none; outline: none;
} }
@ -163,15 +165,15 @@ select:disabled {
background-position: right 0.5rem center; background-position: right 0.5rem center;
} }
.field > :first-child { .field > :first-child {
border-top-left-radius: 10px; border-top-left-radius: var(--radius);
border-bottom-left-radius: 10px; border-bottom-left-radius: var(--radius);
} }
.field > *:not(:last-child) { .field > *:not(:last-child) {
border-right: none; border-right: none;
} }
.field > :last-child { .field > :last-child {
border-top-right-radius: 10px; border-top-right-radius: var(--radius);
border-bottom-right-radius: 10px; border-bottom-right-radius: var(--radius);
} }
code, code,