changed searchbar style

This commit is contained in:
Roberto Tonino 2020-06-09 22:32:54 +02:00
parent 03a9cb5c86
commit 2ca5ce4bfa
7 changed files with 97 additions and 34 deletions

File diff suppressed because one or more lines are too long

View File

@ -72,8 +72,11 @@
<main id="main_content">
<div id="middle_section">
<header id="search">
<div class="search__icon">
<i class="material-icons">search</i>
</div>
<input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
placeholder="Search or paste a link..." autofocus>
placeholder="Search something or paste a link..." autofocus>
</header>
<section id="content">
<div id="container">

View File

@ -7,15 +7,69 @@
}
/* Center section */
#search > #searchbar {
width: calc(100% - 32px);
height: 32px;
padding: 0px 8px;
margin: 8px;
border: 0px;
border-radius: 6px;
$icon-dimension: 2rem;
#search {
background-color: var(--secondary-background);
color: var(--primary-text);
width: 100%;
padding: 0 1em;
margin-bottom: 20px;
margin-right: 32px;
display: flex;
align-items: center;
border: 1px solid transparent;
transition: border 200ms ease-in-out;
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
// cursor: pointer;
i {
font-size: $icon-dimension;
transition: color 250ms ease-in-out;
color: var(--main-text);
@include removeSelectionBackground;
}
&:hover {
i {
// color: var(--accent-color);
}
}
}
&:focus-within {
border: 1px solid var(--main-text);
}
$searchbar-height: calc(2rem + 1em);
#searchbar {
height: $searchbar-height;
padding-left: 0.5em;
border: 0px;
border-radius: 0px;
background-color: var(--secondary-background);
color: var(--primary-text);
font-size: 2rem;
font-family: 'Open Sans';
font-weight: 300;
&:focus {
outline: none;
}
// Removing Chrome autofill color
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
}
}
}
#content {

View File

@ -58,8 +58,9 @@
#theme_togglers {
position: relative;
opacity: 1;
visibility: visible;
transition-delay: 200ms;
}
.main_tablinks_text {
display: inline-block;
opacity: 1;
@ -79,11 +80,10 @@
#theme_togglers {
display: flex;
opacity: 0;
visibility: hidden;
width: 100%;
justify-content: space-evenly;
align-items: center;
transition: all 50ms ease-in-out 200ms;
transition: all 50ms ease 0s;
}
.theme_toggler {

View File

@ -29,32 +29,32 @@ html[data-theme='light'] {
}
html[data-theme='dark'] {
--main-background: #141414;
--secondary-background: #242424;
--main-text: #eeeeee;
--main-text-inverted: #333333;
--panels-background: #1a1a1a;
--panels-text: #ffffff;
--accent-text: #dfdfdf;
--main-background: hsl(0, 0%, 8%);
--secondary-background: hsl(0, 0%, 14%);
--main-text: hsl(0, 0%, 93%);
--main-text-inverted: hsl(0, 0%, 20%);
--panels-background: hsl(0, 0%, 10%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--table-bg: #141414;
--table-zebra: #242424;
--table-highlight: #343434;
--table-bg: hsl(0, 0%, 8%);
--table-zebra: hsl(0, 0%, 14%);
--table-highlight: hsl(0, 0%, 20%);
}
html[data-theme='purple'] {
--main-background: #0c041b;
--secondary-background: #130a29;
--main-text: #eeeeee;
--accent-color: #460ead;
--main-text-inverted: #100822;
--panels-background: #100727;
--panels-text: #ffffff;
--accent-text: #dfdfdf;
--main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%);
--main-text: hsl(0, 0%, 93%);
--accent-color: hsl(261, 85%, 37%);
--main-text-inverted: hsl(258, 62%, 8%);
--panels-background: hsl(257, 70%, 9%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--table-bg: #0c041b;
--table-zebra: #130a29;
--table-highlight: #321874;
--table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);
}
body {

View File

@ -0,0 +1,5 @@
@mixin removeSelectionBackground {
&::selection {
background: none;
}
}

View File

@ -1,5 +1,6 @@
@import './base/base';
@import './base/normalize';
@import './base/mixins';
@import './globals/globals';
@import './globals/tables';