input outline

tangly1024 · tangly1024 · commit 883e2cd7a14d · 2023-03-09T14:00:57.000+08:00
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,9 +21,10 @@ module.exports = {
         }
       },
       maxWidth: {
-        side: '14rem'
+        side: '14rem',
+        '9/10': '90%'
       }
-    },
+    }
   },
   variants: {
     extend: {}
diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
           <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/example/components/SearchInput.js b/themes/example/components/SearchInput.js
@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     ref={searchInputRef}
     type='text'
     placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
diff --git a/themes/fukasawa/components/ArticleLock.js b/themes/fukasawa/components/ArticleLock.js
@@ -30,7 +30,7 @@ export const ArticleLock = props => {
           <div className="flex mx-4">
             <input
               id="password" type='password'
-              className="w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
+              className="outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
             ></input>
             <div
               onClick={submitPassword}
diff --git a/themes/fukasawa/components/SearchInput.js b/themes/fukasawa/components/SearchInput.js
@@ -53,7 +53,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     <input
       ref={searchInputRef}
       type='text'
-      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
+      className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
diff --git a/themes/hexo/components/ArticleLock.js b/themes/hexo/components/ArticleLock.js
@@ -25,7 +25,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/hexo/components/SearchInput.js b/themes/hexo/components/SearchInput.js
@@ -69,7 +69,7 @@ const SearchInput = props => {
         ref={searchInputRef}
         type="text"
         className={
-          'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+          'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
         }
         onKeyUp={handleKeyUp}
         onCompositionStart={lockSearchInput}
diff --git a/themes/matery/components/ArticleLock.js b/themes/matery/components/ArticleLock.js
@@ -25,7 +25,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/matery/components/SearchInput.js b/themes/matery/components/SearchInput.js
@@ -69,7 +69,7 @@ const SearchInput = props => {
         ref={searchInputRef}
         type="text"
         className={
-          'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+          'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
         }
         onKeyUp={handleKeyUp}
         onCompositionStart={lockSearchInput}
diff --git a/themes/medium/components/ArticleLock.js b/themes/medium/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/medium/components/SearchInput.js b/themes/medium/components/SearchInput.js
@@ -61,7 +61,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
     <input
       ref={searchInputRef}
       type='text'
-      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
diff --git a/themes/next/components/ArticleLock.js b/themes/next/components/ArticleLock.js
@@ -30,7 +30,7 @@ export const ArticleLock = props => {
           <div className="flex mx-4">
             <input
               id="password" type='password'
-              className="w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
+              className="outline-none w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
             ></input>
             <div
               onClick={submitPassword}
diff --git a/themes/next/components/SearchInput.js b/themes/next/components/SearchInput.js
@@ -66,7 +66,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     ref={searchInputRef}
     type='text'
     placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
+    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
diff --git a/themes/nobelium/LayoutTag.js b/themes/nobelium/LayoutTag.js
@@ -25,7 +25,7 @@ export const LayoutTag = props => {
           placeholder={
             currentTag ? `Search in #${currentTag}` : 'Search Articles'
           }
-          className="block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
+          className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
           onChange={e => setSearchValue(e.target.value)}
         />
         <svg
diff --git a/themes/nobelium/components/ArticleLock.js b/themes/nobelium/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
           <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/nobelium/components/SearchInput.js b/themes/nobelium/components/SearchInput.js
@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     ref={searchInputRef}
     type='text'
     placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
@@ -1,7 +1,7 @@
 import CommonHead from '@/components/CommonHead'
 import React from 'react'
 import { Header } from './components/Header'
-import { Nav } from './components/Nav'
+import { NavBar } from './components/NavBar'
 import { Footer } from './components/Footer'
 // import { Title } from './components/Title'
 import { SideBar } from './components/SideBar'
@@ -30,25 +30,25 @@ const LayoutBase = props => {
             {/* 顶部LOGO */}
             <Header {...props} />
 
-            {/* 菜单 */}
-            <Nav {...props} />
+            {/* 导航栏 */}
+            <NavBar {...props} />
 
             {/* 主体 */}
-            <div id='container-inner' className="w-full relative z-10">
+            <div id='container-wrap' className="w-full relative">
 
                 {/* <Title {...props} /> */}
 
-                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full relative container mx-auto justify-start md:flex items-start pt-12 px-2'}>
+                <div id='container-inner' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + '  max-w-9/10 w-full relative container mx-auto flex justify-center items-start pt-12'}>
 
-                    <div className='w-full max-w-6xl'>{children}</div>
+                    <div className='w-full flex-grow'>{children}</div>
 
                     <SideBar {...props} />
 
                 </div>
 
             </div>
 
-            <div className='fixed right-4 bottom-4 z-10'>
+            <div className='fixed right-4 bottom-4'>
                 <JumpToTopButton />
             </div>
 
diff --git a/themes/simple/components/ArticleLock.js b/themes/simple/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
           <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/simple/components/DropMenu.js b/themes/simple/components/DropMenu.js
@@ -5,23 +5,26 @@ export const DropMenu = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <div className='pt-3' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
-        <Link
-            href={link?.to}
-            className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
-            {link?.name}
-            {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-        </Link>
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {/* 大屏菜单 */}
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>
+
+            {/* 子菜单 */}
+            {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
+                {link.subMenus.map(sLink => {
+                  return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800  py-3 pr-6 pl-2'>
+                        <Link href={sLink.to}>
+                            <span className='text-xs'>{sLink.title}</span>
+                        </Link>
+                    </li>
+                })}
+            </ul>}
 
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
-            {link.subMenus.map(sLink => {
-              return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800  py-3 pr-6 pl-2'>
-                    <Link href={sLink.to}>
-                        <span className='text-xs'>{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
     </div>
 }
diff --git a/themes/simple/components/Header.js b/themes/simple/components/Header.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import CONFIG_SIMPLE from '../config_simple'
 // import CONFIG_SIMPLE from '../config_simple'
 
 /**
@@ -19,12 +20,12 @@ export const Header = (props) => {
                     <div className='flex space-x-12'>
                         <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
                             {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
+                            <img src={siteInfo?.icon} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
                         </div>
 
                         <div>
-                            <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
-                            <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
+                            <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
+                            <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.LOGO_DESCRIPTION }}/>
                         </div>
                    </div>
                 </Link>
diff --git a/themes/simple/components/NavBar.js b/themes/simple/components/NavBar.js
@@ -3,14 +3,15 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
-import { DropMenu } from './DropMenu'
+import { NavBarMenu } from './NavBarMenu'
 
 /**
  * 菜单导航
  * @param {*} props
  * @returns
  */
-export const Nav = ({ customNav, customMenu }) => {
+export const NavBar = (props) => {
+  const { customNav, customMenu } = props
   const { locale } = useGlobal()
   const [showSearchInput, changeShowSearchInput] = useState(false)
   const router = useRouter()
@@ -47,23 +48,17 @@ export const Nav = ({ customNav, customMenu }) => {
   }
 
   return (
-        <nav className="w-full bg-white md:pt-0 px-6 relative z-20 shadow-md border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
-            <div className="container mx-auto max-w-8xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <div className="w-full h-12 text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start space-x-4">
-                    {showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='h-full px-4 w-full' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..."/>}
-
-                    {!showSearchInput && links?.map(link => {
-                      if (link?.show) {
-                        return <DropMenu key={link.id} link={link}/>
-                      } else {
-                        return null
-                      }
-                    })}
+        <nav className="w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
+            <div id="nav-bar-inner" className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start">
+                {/* 左侧菜单 */}
+                <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
+                    {showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
+                    {!showSearchInput && (<NavBarMenu {...props}/>)}
                 </div>
 
-                <div className="w-full md:w-1/3 text-center md:text-right hidden md:block">
+                <div className="absolute right-12 h-full text-center px-2 flex items-center">
                     {/* <!-- extra links --> */}
-                    <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass ' + ' cursor-pointer'} onClick={toggleShowSearchInput}></i>
+                    <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass' + ' align-middle cursor-pointer'} onClick={toggleShowSearchInput}></i>
                 </div>
             </div>
         </nav>
diff --git a/themes/simple/components/NavBarMenu.js b/themes/simple/components/NavBarMenu.js
diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js
diff --git a/themes/simple/components/TopBar.js b/themes/simple/components/TopBar.js
diff --git a/themes/simple/config_simple.js b/themes/simple/config_simple.js

Original file line number	Diff line number	Diff line change
`@@ -21,9 +21,10 @@ module.exports = {`
`21`	`21`	`}`
`22`	`22`	`},`
`23`	`23`	`maxWidth: {`
`24`		`- side: '14rem'`
	`24`	`+ side: '14rem',`
	`25`	`+ '9/10': '90%'`
`25`	`26`	`}`
`26`		`- },`
	`27`	`+ }`
`27`	`28`	`},`
`28`	`29`	`variants: {`
`29`	`30`	`extend: {}`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ const SearchInput = props => {`
`69`	`69`	`ref={searchInputRef}`
`70`	`70`	`type="text"`
`71`	`71`	`className={`
`72`		`- 'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'`
	`72`	`+ 'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'`
`73`	`73`	`}`
`74`	`74`	`onKeyUp={handleKeyUp}`
`75`	`75`	`onCompositionStart={lockSearchInput}`