Annotations: improve form styling

eeditiones · Jan 26, 2024 · 54cde2c · 54cde2c
1 parent 8e1ab51
commit 54cde2c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/resources/css/annotate.css b/resources/css/annotate.css
@@ -11,6 +11,63 @@ html {
 /* Fore style overwrites for annotations  */
 /* Fore style overwrites for annotations  */
 /* Fore style overwrites for annotations  */
+
+fx-group fx-control {
+    padding-left: .5rem;
+}
+
+fx-control input, fx-control select {
+    box-sizing: border-box;
+    margin: 0 0 .5rem 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    font-size: 1rem;
+    color: var(--paper-input-container-input-color);
+}
+
+fx-control label {
+    font-size: 1rem;
+    margin-bottom: 5px;
+    color: #333;
+    /* Text color */
+}
+
+fx-control input[type="text"] {
+    width: calc(100% - 2rem);
+    padding: 12px 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+    /* Remove default focus outline */
+    transition: border-color 0.2s ease;
+}
+
+fx-control input[type="text"]:focus {
+    border-color: #007bff;
+    /* Change border color on focus */
+}
+
+fx-control select {
+    width: calc(100% - 2rem);
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    outline: none;
+    /* Remove default focus outline */
+    background-color: #fff;
+    /* Background color */
+    transition: outline 0.3s ease;
+    /* Add transition effect for outline */
+}
+
+/* Apply hover and focus styles */
+fx-control select:hover,
+fx-control select:focus {
+    outline: 2px solid #007bff;
+    /* Increase outline width and change color on hover and focus */
+}
+
 /*!
  * Toastify js 1.11.0
  * https://github.com/apvarun/toastify-js

diff --git a/templates/pages/annotate.html b/templates/pages/annotate.html
@@ -120,9 +120,7 @@
                         <iron-form id="edit-form">
                             <form action="">
                                 <div class="annotation-form person organization place term">
-                                    <paper-input class="form-ref" name="ref" data-i18n="[label]annotations.reference" label="Reference">
-                                        <paper-icon-button slot="prefix" icon="search" data-i18n="[label]annotations.lookup"></paper-icon-button>
-                                    </paper-input>
+                                    <paper-input class="form-ref" name="ref" data-i18n="[label]annotations.reference" label="Reference"></paper-input>
                                     <div class="authority-info"><pb-i18n key="dialogs.loading">Loading ...</pb-i18n></div>
                                     <pb-restricted group="tei">
                                         <paper-icon-button icon="editor:mode-edit" id="edit-entity" data-i18n="[title]annotations.edit-entity"></paper-icon-button>