Preserve Native Focus Ring

mecha-cms · Apr 28, 2024 · 6173bf2 · 6173bf2
1 parent 6a1dd6a
commit 6173bf2
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/.factory/index.css.scss b/.factory/index.css.scss
@@ -151,6 +151,10 @@ label {
  user-select: none;
 }
 
+p > label {
+ line-height: calc(2rem - 2px);
+}
+
 dfn,
 em,
 var {
@@ -341,7 +345,6 @@ textarea {
  font-size: 85%;
  height: 2rem;
  line-height: calc(2rem - 2px); // Minus the border width
- outline: 0;
  padding: 0 0.5rem;
  vertical-align: middle;
  width: 12rem;
@@ -362,10 +365,6 @@ button {
  text-align: center;
  text-decoration: none !important;
  width: auto;
- &:focus {
- outline: 1px dotted #eee;
- outline-offset: -3px;
- }
 }
 
 input[type='button'],
@@ -504,6 +503,10 @@ body {
  padding: 12px 0 10px;
  p {
  margin: 0;
+ &:only-child {
+ flex: 1;
+ text-align: right;
+ }
  }
  }
  > header {

diff --git a/about.page b/about.page
@@ -6,7 +6,7 @@ images:
 - /lot/y/blogger-scribe/index.png
 author: Taufik Nurrohman
 type: Markdown
-version: 1.0.4
+version: 1.0.5
 ...
 
 This is not a clone of the original Scribe template. I didn’t make it from the original source code, but by refactoring

diff --git a/index.css b/index.css
@@ -158,6 +158,30 @@ details summary {
  user-select: none;
 }
 
+p > label,
+p > select,
+p > input[type=checkbox],
+p > button[type=checkbox],
+p > [type=checkbox][role=button],
+p > input[type=file],
+p > button[type=file],
+p > [type=file][role=button],
+p > input[type=radio],
+p > button[type=radio],
+p > [type=radio][role=button],
+p > input[type=range],
+p > button[type=range],
+p > [type=range][role=button],
+p > input[type=color],
+p > button[type=color],
+p > [type=color][role=button],
+p > input[type=image],
+p > button[type=image],
+p > [type=image][role=button],
+details p > summary {
+ line-height: calc(2rem - 2px);
+}
+
 dl,
 ol,
 ul {
@@ -350,7 +374,6 @@ textarea {
  font-size: 85%;
  height: 2rem;
  line-height: calc(2rem - 2px);
- outline: 0;
  padding: 0 0.5rem;
  vertical-align: middle;
  width: 12rem;
@@ -379,14 +402,6 @@ button[type=submit] {
  text-decoration: none !important;
  width: auto;
 }
-button:focus,
-[role=button]:focus,
-input[type=button]:focus,
-input[type=reset]:focus,
-input[type=submit]:focus {
- outline: 1px dotted #eee;
- outline-offset: -3px;
-}
 
 button::-moz-focus-inner,
 [role=button]::-moz-focus-inner,
@@ -728,6 +743,10 @@ body > div > footer {
 body > div > footer p {
  margin: 0;
 }
+body > div > footer p:only-child {
+ flex: 1;
+ text-align: right;
+}
 body > div > header {
  background-position: 0 100%;
  padding: 0 0 12px;