extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-25 03:51:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] [refactor] improve lines and add more variables

Browse Source
This commit is contained in:
zombieFox 2018-12-27 09:50:30 -07:00
parent fe92c77fcd
commit d3b70401a5
4 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/base.css
View File

@ -24,6 +24,7 @@
--root-font-size: 14px; --root-font-size: 14px;
--radius: 2px; --radius: 2px;
--accent: 255, 170, 51; --accent: 255, 170, 51;
--line-width: 3px;
--background: var(--gray-01); --background: var(--gray-01);
--animation-speed-fast: 0.1s; --animation-speed-fast: 0.1s;
--animation-speed-medium: 0.2s; --animation-speed-medium: 0.2s;

4
css/button.css
View File

@ -12,8 +12,8 @@ input[type="submit"] {
min-height: 2.5em; min-height: 2.5em;
line-height: 1; line-height: 1;
border: 0; border: 0;
border-top-width: 3px; border-top-width: var(--line-width);
border-bottom-width: 3px; border-bottom-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--radius);

7
css/form.css
View File

@ -13,7 +13,7 @@ input[type="text"] {
line-height: 2.5em; line-height: 2.5em;
height: 2.5em; height: 2.5em;
width: 100%; width: 100%;
border-width: 2px; border-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--radius);
@ -28,6 +28,7 @@ input[type="password"]:hover,
input[type="search"]:hover, input[type="search"]:hover,
input[type="tel"]:hover, input[type="tel"]:hover,
input[type="text"]:hover { input[type="text"]:hover {
background-color: var(--gray-16);
border-color: rgb(var(--accent)); border-color: rgb(var(--accent));
color: var(--black); color: var(--black);
outline: 0; outline: 0;
@ -40,11 +41,11 @@ input[type="search"]:focus,
input[type="tel"]:focus, input[type="tel"]:focus,
input[type="text"]:focus { input[type="text"]:focus {
background-color: var(--white); background-color: var(--white);
border-color: rgb(var(--accent)); border-color: transparent;
color: var(--black); color: var(--black);
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 2px rgb(var(--accent));
outline: 0; outline: 0;
z-index: 2; z-index: 2;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 var(--line-width) rgb(var(--accent));
} }
input[type="email"]::placeholder, input[type="email"]::placeholder,

6
css/links.css
View File

@ -23,7 +23,7 @@
border-radius: var(--radius); border-radius: var(--radius);
padding: 0 1em; padding: 0 1em;
width: 100%; width: 100%;
height: calc(100% - 3px); height: calc(100% - var(--line-width));
display: flex; display: flex;
z-index: 3; z-index: 3;
position: relative; position: relative;
@ -74,11 +74,11 @@
content: ""; content: "";
background-color: rgb(var(--accent)); background-color: rgb(var(--accent));
border-radius: var(--radius); border-radius: var(--radius);
width: calc(100% - 0.5em); width: calc(100% - calc(var(--line-width) + var(--line-width)));
height: calc(100% - 0.25em); height: calc(100% - 0.25em);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0.25em; left: var(--line-width);
z-index: -1; z-index: -1;
} }