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; padding: 5px;
border: 1px solid var(--button-border-color); border: 1px solid var(--button-border-color);
background-color: var(--button-background-color); background-color: var(--button-background-color);
border-radius: 4px; border-radius: var(--button-border-radius);
color: var(--button-text-color); color: var(--button-text-color);
position: absolute; position: absolute;
top: 10px; top: 10px;

View File

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

View File

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

View File

@ -8,7 +8,7 @@ const TPL = `
height: 21px !important; height: 21px !important;
padding: 0 !important; padding: 0 !important;
border-radius: 8px; border-radius: var(--button-border-radius);
transform: scale(0.9); transform: scale(0.9);
border: none; border: none;
opacity: 0.8; 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 DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
const TPL = ` 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-dialog modal-dialog-scrollable" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">

View File

@ -2,7 +2,7 @@ import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js"; import BasicWidget from "../basic_widget.js";
const TPL = ` 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-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">

View File

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

View File

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

View File

@ -16,7 +16,10 @@ const TPL = `
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 0.5; 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 { .sql-console-result-container {

View File

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

View File

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

View File

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