use button CSS variables in more places

This commit is contained in:
zadam 2022-09-18 13:52:19 +02:00
parent 552d872047
commit 84f72edf1d
12 changed files with 25 additions and 19 deletions

View File

@ -23,7 +23,7 @@ const TPL = `
padding: 5px;
border: 1px solid var(--button-border-color);
background-color: var(--button-background-color);
border-radius: 4px;
border-radius: var(--button-border-radius);
color: var(--button-text-color);
position: absolute;
top: 10px;

View File

@ -57,8 +57,10 @@ const TPL = `
}
.add-new-attribute-button:hover, .save-attributes-button:hover {
border: 1px solid var(--main-border-color);
border-radius: 2px;
border: 1px solid var(--button-border-color);
border-radius: var(--button-border-radius);
background: var(--button-background-color);
color: var(--button-text-color);
}
.attribute-errors {

View File

@ -45,11 +45,11 @@ const TPL = `
.global-menu .zoom-buttons a {
display: inline-block;
border: 1px solid var(--button-border-color);
border-radius: 3px;
padding: 3px;
margin-left: 3px;
border-radius: var(--button-border-radius);
color: var(--button-text-color);
background-color: var(--button-background-color);
padding: 3px;
margin-left: 3px;
}
.global-menu .zoom-buttons a:hover {

View File

@ -8,7 +8,7 @@ const TPL = `
height: 21px !important;
padding: 0 !important;
border-radius: 8px;
border-radius: var(--button-border-radius);
transform: scale(0.9);
border: none;
opacity: 0.8;

View File

@ -3,7 +3,7 @@ import BasicWidget from "../basic_widget.js";
const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
const TPL = `
<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog">
<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">

View File

@ -2,7 +2,7 @@ import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";
const TPL = `
<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog">
<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">

View File

@ -37,11 +37,11 @@ const TPL = `
margin-right: 20px;
font-size: large;
border: 1px solid transparent;
border-radius: 5px;
border-radius: var(--button-border-radius);
}
.token-table-button:hover {
border: 1px solid var(--main-border-color);
border: 1px solid var(--button-border-color);
}
</style>`;

View File

@ -2,10 +2,10 @@ import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";
const TPL = `
<div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog">
<div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="prompt-dialog-form">
<form class="prompt-dialog-form">
<div class="modal-header">
<h5 class="prompt-title modal-title mr-auto">Prompt</h5>
@ -34,7 +34,7 @@ export default class PromptDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$dialogBody = this.$widget.find(".modal-body");
this.$form = this.$widget.find("#prompt-dialog-form");
this.$form = this.$widget.find(".prompt-dialog-form");
this.$question = null;
this.$answer = null;

View File

@ -16,7 +16,10 @@ const TPL = `
padding: 0.25rem 0.4rem;
font-size: 0.875rem;
line-height: 0.5;
border-radius: 0.2rem;
border: 1px solid var(--button-border-color);
border-radius: var(--button-border-radius);
background: var(--button-background-color);
color: var(--button-text-color);
}
.sql-console-result-container {

View File

@ -93,7 +93,7 @@ const TAB_ROW_TPL = `
.note-new-tab:hover {
background-color: var(--accented-background-color);
border-radius: 5px;
border-radius: var(--button-border-radius);
}
.tab-row-filler {

View File

@ -53,11 +53,12 @@ const TPL = `
padding: 5px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 5px;
border-radius: var(--button-border-radius);
color: var(--button-text-color);
}
.edit-text-note-button:hover {
border-color: var(--main-border-color);
border-color: var(--button-border-color);
}
</style>

View File

@ -109,7 +109,6 @@ button.close:hover {
.icon-action {
border: 1px solid transparent;
border-radius: 3px;
padding: 5px;
width: 35px;
height: 35px;
@ -117,6 +116,7 @@ button.close:hover {
font-size: 1.5em;
color: var(--button-text-color);
background: var(--button-background-color);
border-radius: var(--button-border-radius);
}
.icon-action:hover:not(.disabled) {