fix: Fix and homogeneize outlines

flusio · Sep 21, 2022 · d1d3bf0 · d1d3bf0
1 parent 933815d
commit d1d3bf0
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 26 deletions.
diff --git a/src/assets/stylesheets/application.css b/src/assets/stylesheets/application.css
@@ -55,6 +55,10 @@ body {
     background: linear-gradient(to bottom, var(--color-body), var(--color-purple-1) 420px);
 }
 
+*:focus {
+    outline: var(--width-border-bold) solid var(--color-purple-4);
+}
+
 .sr-only {
     position: absolute;
 

diff --git a/src/assets/stylesheets/components/anchors.css b/src/assets/stylesheets/components/anchors.css
@@ -13,10 +13,6 @@ a:focus {
     color: var(--color-link);
 }
 
-a:focus {
-    outline-color: var(--color-purple-4);
-}
-
 .anchor--discreet {
     text-decoration: none;
 }

diff --git a/src/assets/stylesheets/components/cards.css b/src/assets/stylesheets/components/cards.css
@@ -219,24 +219,17 @@
     background-color: rgba(0, 0, 0, 0.3);
 }
 
-.card--illustrated .card__body:focus-visible {
-    outline: 3px solid var(--color-purple-5);
-}
-
 .card--illustrated .sticker {
     text-shadow: none;
 }
 
 .card__title {
-    overflow: hidden;
-
     margin-top: 0;
     margin-bottom: var(--space-medium);
 
     font-size: var(--size-normal);
     font-weight: bold;
     line-height: 1.25;
-    text-overflow: ellipsis;
 }
 
 .card__title a {
@@ -245,6 +238,12 @@
     text-decoration: none;
 }
 
+.card__title-ellipsis {
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+}
+
 .card__text {
     margin-top: var(--space-small);
     margin-bottom: var(--space-small);

diff --git a/src/assets/stylesheets/components/forms.css b/src/assets/stylesheets/components/forms.css
@@ -114,7 +114,7 @@ input[type="radio"]:focus + label::before {
 }
 
 input[type="checkbox"]:focus + label::before {
-    box-shadow: 0 0 0 1px var(--color-purple-5);
+    outline: var(--width-border-bold) solid var(--color-purple-4);
 }
 
 input[type="checkbox"]:checked + label::before,

diff --git a/src/assets/stylesheets/components/layout.css b/src/assets/stylesheets/components/layout.css
@@ -70,7 +70,7 @@
 }
 
 .layout__main:focus {
-    outline: none;
+    outline: 0;
 }
 
 .layout__back a {
@@ -214,10 +214,6 @@
     background-color: var(--color-purple-2);
 }
 
-.banner__container--anchor:focus {
-    outline-color: var(--color-purple-4);
-}
-
 .layout--error {
     text-align: center;
 }

diff --git a/src/views/collections/_collection.phtml b/src/views/collections/_collection.phtml
@@ -6,7 +6,7 @@
 
 <div class="card card--illustrated" style="background-image: url('<?= url_media('covers', $collection->image_filename, 'collection-card.svg') ?>');">
     <a class="card__body" href="<?= url('collection', ['id' => $collection->id]) ?>">
-        <div class="card__title">
+        <div class="card__title card__title-ellipsis">
             <?= protect($collection->name) ?>
         </div>
 

diff --git a/src/views/discovery/show.phtml b/src/views/discovery/show.phtml
@@ -27,7 +27,7 @@
             <?php foreach ($topics as $topic): ?>
                 <div class="card card--illustrated" style="background-image: url('<?= url_media('cards', $topic->image_filename) ?>');">
                     <a class="card__body" href="<?= url('topic', ['id' => $topic->id]) ?>">
-                        <h2 class="card__title">
+                        <h2 class="card__title card__title-ellipsis">
                             <?= protect($topic->label) ?>
                         </h2>
 

diff --git a/src/views/links/_link.phtml b/src/views/links/_link.phtml
@@ -104,6 +104,7 @@
     <div class="card__body">
         <h2 class="card__title">
             <a
+                class="card__title-ellipsis"
                 target="_blank"
                 rel="noopener noreferrer"
                 href="<?= protect($link->url) ?>"

diff --git a/src/views/links/index.phtml b/src/views/links/index.phtml
@@ -27,7 +27,7 @@
         <div class="cards cards--centered">
             <div class="card card--illustrated card--illustrated-alt" style="background-image: url('<?= url_static('bookmarks-card.png') ?>');">
                 <a class="card__body" href="<?= url('bookmarks') ?>">
-                    <div class="card__title">
+                    <div class="card__title card__title-ellipsis">
                         <?= protect($bookmarks->name()) ?>
                     </div>
 
@@ -39,7 +39,7 @@
 
             <div class="card card--illustrated card--illustrated-alt" style="background-image: url('<?= url_static('read-card.png') ?>');">
                 <a class="card__body" href="<?= url('read list') ?>">
-                    <div class="card__title">
+                    <div class="card__title card__title-ellipsis">
                         <?= protect($read_list->name()) ?>
                     </div>
 

diff --git a/src/views/links/searches/show.phtml b/src/views/links/searches/show.phtml
@@ -82,10 +82,9 @@
                     <div class="card__body">
                         <h2 class="card__title">
                             <a
-                                class="anchor--hidden"
+                                class="card__title-ellipsis"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                tabindex="-1"
                                 href="<?= protect($existing_link->url) ?>"
                             >
                                 <?= protect($existing_link->title) ?>
@@ -139,10 +138,9 @@
                     <div class="card__body">
                         <h2 class="card__title">
                             <a
-                                class="anchor--hidden"
+                                class="card__title-ellipsis"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                tabindex="-1"
                                 href="<?= protect($default_link->url) ?>"
                             >
                                 <?= protect($default_link->title) ?>
@@ -179,7 +177,7 @@
             <?php foreach ($feeds as $feed): ?>
                 <div class="card card--illustrated" style="background-image: url('<?= url_media('covers', $feed->image_filename, 'collection-card.svg') ?>');">
                     <a class="card__body card__body--large" href="<?= url('collection', ['id' => $feed->id]) ?>">
-                        <div class="card__title">
+                        <div class="card__title card__title-ellipsis">
                             <?= protect($feed->name) ?>
                         </div>