Annotations GUI

lib/globalStyle.css

@@ -32,6 +32,7 @@
   --ons-color-soft-blue-grey: #dee7ee;
   --ons-color-light-blue-grey: #e9eff4;
   --ons-color-leaf-green: #0f8243;
+  --ons-color-leaf-green-dark-5: #0c6b37;
   --ons-color-ruby-red: #d0021b;
   --ons-color-jaffa-orange: #fa6401;
   --ons-color-sun-yellow: #fbc900;
@@ -480,3 +481,221 @@ h5#source {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+
+/* Annotations */
+#annotation-toolbar fieldset {
+  border: 1px solid var(--ons-color-ocean-blue);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+#annotation-toolbar fieldset legend {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ons-color-night-blue);
+  padding: 0 0.5rem;
+}
+
+#annotation-toolbar .options-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1rem;
+}
+
+#annotation-toolbar .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+#annotation-toolbar .option-icon svg{
+  stroke: var(--ons-color-grey-75);
+}
+
+/* 2. Style the visual card (the <label>) */
+#annotation-toolbar .option-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 200ms ease-in-out;
+  text-align: center;
+  height:100%;
+}
+
+#annotation-toolbar .option-card span {
+  font-size: 0.875rem;
+  color: var(--ons-color-grey-100);
+}
+
+/* 3. Hover State */
+#annotation-toolbar .option-card:hover {
+  border-color: var(--ons-color-night-blue);
+  background-color: var(--ons-color-sky-blue);
+}
+
+/* 4. Checked State (Uses the adjacent sibling selector) */
+/* Select the label (.option-card) when the hidden input before it is checked */
+#annotation-toolbar input[type="radio"]:checked~.option-card {
+  background-color: var(--ons-color-spring-green);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Style the text and icon when the card is checked */
+#annotation-toolbar input[type="radio"]:checked~.option-card span {
+  color: var(--ons-color-white);
+}
+
+#annotation-toolbar input[type="radio"]:checked~.option-card .option-icon svg{
+  stroke: var(--ons-color-white);
+}
+
+
+/* Button Styling */
+.ons-btn{
+  background:rgba(0,0,0,0);
+  border:0;
+  border-radius:0;
+  cursor:pointer;
+  display:inline-block;
+  font-family:inherit;
+  margin:0;
+  padding:0;
+  position:relative;
+  text-align:center;
+  text-decoration:none;
+  text-rendering:optimizelegibility;
+  vertical-align:top;
+  white-space:nowrap
+}
+
+#annotation-toolbar .ons-btn::after{
+  border:0.1875em solid rgba(0,0,0,0);
+  inset:0 0-0.1875em 0;
+  content:"";
+  position:absolute
+}
+
+.ons-btn+.ons-btn{
+  margin-left:.5rem
+}
+
+.ons-btn:focus,
+.ons-btn:focus-visible{
+  outline:3px solid rgba(0,0,0,0); /* Sets up the focus outline */
+  outline-offset:1px
+}
+
+.ons-btn:focus .ons-btn__inner{
+  background:var(--ons-color-focus);
+  box-shadow:0 0.1875em 0 var(--ons-color-text-link-focus);
+  color:var(--ons-color-text-link-focus)
+}
+
+.ons-btn:focus .ons-btn__inner .ons-icon{
+  fill:var(--ons-color-text-link-focus)
+}
+
+.ons-btn:focus:hover:not(:active,.active) .ons-btn__inner{
+  background:var(--ons-color-focus-dark)
+}
+
+.ons-btn:hover .ons-btn__inner{
+  background:var(--ons-color-button-hover)
+}
+
+.ons-btn__inner{
+  background:var(--ons-color-button);
+  border-radius:3px;
+  box-shadow:0 0.1875rem 0 var(--ons-color-button-shadow);
+  color:var(--ons-color-text-inverse);
+  display:flex;
+  align-items:center;
+  padding:.75rem 1rem;
+  pointer-events:none;
+  position:relative
+}
+
+.ons-btn__inner .ons-icon{
+  fill:var(--ons-color-text-inverse);
+  height:18px;
+  width:18px
+}
+
+.ons-btn:active .ons-btn__inner,
+.ons-btn:active:focus .ons-btn__inner,
+.ons-btn.active .ons-btn__inner,
+.ons-btn.active:focus .ons-btn__inner{
+  background:var(--ons-color-button);
+  box-shadow:none;
+  color:var(--ons-color-text-inverse)
+}
+
+.ons-btn:active .ons-btn__inner .ons-icon,
+.ons-btn:active:focus .ons-btn__inner .ons-icon,
+.ons-btn.active .ons-btn__inner .ons-icon,
+.ons-btn.active:focus .ons-btn__inner .ons-icon{
+  fill:var(--ons-color-text-inverse)
+}
+
+.ons-btn:active,
+.ons-btn.active{
+  top:0.1875em /* This is the physical shift */
+}
+
+.ons-btn--text-link{
+  vertical-align:baseline
+}
+
+.ons-btn--text-link .ons-btn__inner{
+  background:rgba(0,0,0,0);
+  border:0;
+  border-radius:0;
+  box-shadow:none;
+  color:var(--ons-color-text-link);
+  font-weight:400;
+  padding:0
+}
+
+.ons-btn--text-link .ons-btn__inner .ons-icon{
+  fill:var(--ons-color-text-link)
+}
+
+/* Hover and Active/Pressed States */
+.ons-btn--text-link:hover .ons-btn__inner,
+.ons-btn--text-link:active .ons-btn__inner,
+.ons-btn--text-link.active .ons-btn__inner{
+  background:none;
+  color:var(--ons-color-text-link-hover)
+}
+
+.ons-btn--text-link:focus:hover .ons-btn__inner{
+  color:var(--ons-color-black)
+}
+
+/* Focus State */
+.ons-btn--text-link:focus .ons-btn__inner,
+.ons-btn--text-link:active:focus .ons-btn__inner,
+.ons-btn--text-link.active:focus .ons-btn__inner{
+  background-color:var(--ons-color-focus);
+  /* The !important overrides typical button box-shadows */
+  box-shadow:0 -2px var(--ons-color-focus),0 4px var(--ons-color-text-link-focus) !important;
+  color:var(--ons-color-text-link-focus)
+}
+
+/* Icon Focus State */
+.ons-btn--text-link:focus .ons-btn__inner .ons-icon,
+.ons-btn--text-link:active:focus .ons-btn__inner .ons-icon,
+.ons-btn--text-link.active:focus .ons-btn__inner .ons-icon{
+  fill:var(--ons-color-text-link-focus)
+}