mirror of
https://github.com/searxng/searxng.git
synced 2024-08-25 07:20:15 +02:00
Redo Color Theme and css cleanup
* remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
This commit is contained in:
parent
7c2a518d12
commit
740fca00cc
@ -5,11 +5,12 @@
|
|||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
.rounded-corners;
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--color-autocompoleter-background);
|
background-color: var(--color-autocomplete-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
@ -23,12 +24,13 @@
|
|||||||
|
|
||||||
> li {
|
> li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 5px 0 5px 10px;
|
padding: 8px 0 8px 8px;
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus,
|
||||||
background-color: var(--color-base);
|
&:hover {
|
||||||
|
background-color: var(--color-autocomplete-background-hover);
|
||||||
|
|
||||||
a:active,
|
a:active,
|
||||||
a:focus,
|
a:focus,
|
||||||
@ -45,8 +47,8 @@
|
|||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: var(--color-autocompleter-background);
|
background-color: var(--color-autocomplete-background);
|
||||||
border: 1px solid var(--color-base);
|
border: 1px solid var(--color-base-border);
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
@ -63,7 +65,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.autocomplete > ul > li {
|
.autocomplete > ul > li {
|
||||||
padding: 7px 0 7px 10px;
|
|
||||||
border-bottom: 1px solid var(--color-result-top-border);
|
border-bottom: 1px solid var(--color-result-top-border);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
@ -5,14 +5,25 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
/// Basic Colors
|
/// Base Colors
|
||||||
--color-base: #3498db;
|
--color-base: #084999;
|
||||||
--color-base-dark: #084999;
|
--color-base-font: #444;
|
||||||
--color-base-light: #ecf0f1;
|
--color-base-border: #ddd;
|
||||||
--color-highlight: #094089;
|
|
||||||
--color-black: #000;
|
|
||||||
--color-base-border: #d7d7d7;
|
|
||||||
--color-base-shadow: #ccc;
|
--color-base-shadow: #ccc;
|
||||||
|
--color-base-background: #fff;
|
||||||
|
--color-url-font: #29314d;
|
||||||
|
--color-url-visited-font: #684898;
|
||||||
|
--color-header-footer-background: #f7f7f7;
|
||||||
|
|
||||||
|
/// Button Colors
|
||||||
|
--color-btn-background: #084999;
|
||||||
|
--color-btn-font: #fff;
|
||||||
|
|
||||||
|
/// Search Input Colors
|
||||||
|
--color-search-border: #ddd;
|
||||||
|
--color-search-background: #fff;
|
||||||
|
--color-search-font: #222;
|
||||||
|
--color-search-background-hover: #084999;
|
||||||
|
|
||||||
/// Modal Colors
|
/// Modal Colors
|
||||||
--color-error: #db3434;
|
--color-error: #db3434;
|
||||||
@ -22,68 +33,46 @@ html {
|
|||||||
--color-success: #42db34;
|
--color-success: #42db34;
|
||||||
--color-success-background: lighten(#42db34, 40%);
|
--color-success-background: lighten(#42db34, 40%);
|
||||||
|
|
||||||
/// General Colors
|
/// Categories Colors
|
||||||
--color-font: #444;
|
--color-categories-item-selected-font: #084999;
|
||||||
--color-font-light: #888;
|
--color-categories-item-border-selected: #084999;
|
||||||
--color-url-font: #29314d;
|
|
||||||
--color-url-visited-font: #684898;
|
|
||||||
|
|
||||||
/// Header
|
/// Autocompleter Colors
|
||||||
--color-header-background: #f7f7f7;
|
--color-autocomplete-background: #fff;
|
||||||
|
--color-autocomplete-background-hover: #f7f7f7;
|
||||||
/// Footer
|
|
||||||
--color-footer-background: #f7f7f7;
|
|
||||||
|
|
||||||
/// Search-Input
|
|
||||||
--color-search-border: var(--color-base);
|
|
||||||
--color-search-background: #fff;
|
|
||||||
--color-search-font: #222;
|
|
||||||
--color-search-help: white;
|
|
||||||
|
|
||||||
/// Autocompleter
|
|
||||||
--color-autocompleter-background: white;
|
|
||||||
|
|
||||||
/// Categories
|
|
||||||
--color-categories-item-selected: var(--color-base);
|
|
||||||
--color-categories-item-selected-font: #fff;
|
|
||||||
--color-categories-item-border-selected: var(--color-base-dark);
|
|
||||||
--color-categories-item-border-unselected: #e8e7e6;
|
|
||||||
|
|
||||||
/// Results
|
/// Results
|
||||||
--color-download-button-background: var(--color-base);
|
|
||||||
--color-download-button-font: #fff;
|
|
||||||
--color-result-torrent-border: lightgray;
|
--color-result-torrent-border: lightgray;
|
||||||
--color-result-top-border: #e8e7e6;
|
--color-result-top-border: #e8e7e6;
|
||||||
--color-result-vim-selected: #f7f7f7;
|
--color-result-vim-selected: #f7f7f7;
|
||||||
|
--color-result-description-highlight-font: #000;
|
||||||
|
|
||||||
// Link to result
|
// Link to result
|
||||||
--color-result-link-font: var(--color-base-dark);
|
--color-result-link-font: #084999;
|
||||||
|
--color-result-link-font-highlight: #084999;
|
||||||
--color-result-link-visited-font: var(--color-url-visited-font);
|
--color-result-link-visited-font: var(--color-url-visited-font);
|
||||||
|
|
||||||
// Url to result
|
// Url to result
|
||||||
--color-result-url-font: #25a55b;
|
--color-result-url-font: #000;
|
||||||
|
|
||||||
// Publish Date
|
|
||||||
--color-result-publishdate-font: var(--color-font-light);
|
|
||||||
|
|
||||||
// Images
|
|
||||||
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
|
|
||||||
--color-result-image-span-font: #fff;
|
|
||||||
|
|
||||||
// Search-URL
|
// Search-URL
|
||||||
--color-result-search-url-border: #888;
|
--color-result-search-url-border: #888;
|
||||||
--color-result-search-url-font: #444;
|
--color-result-search-url-font: #444;
|
||||||
|
|
||||||
|
// Publish Date
|
||||||
|
--color-result-publishdate-font: #777;
|
||||||
|
|
||||||
|
// Images
|
||||||
|
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
|
||||||
|
--color-result-image-span-font: #fff;
|
||||||
|
--color-result-image-background: #084999;
|
||||||
|
|
||||||
/// Settings
|
/// Settings
|
||||||
--color-settings-tr-hover: #ececec;
|
--color-settings-tr-hover: #ececec;
|
||||||
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
||||||
|
|
||||||
// Labels
|
|
||||||
--color-settings-return-background: var(--color-base);
|
|
||||||
--color-settings-return-font: #fff;
|
|
||||||
|
|
||||||
/// Other
|
/// Other
|
||||||
--color-engines-font: var(--color-font-light);
|
--color-engines-font: #888;
|
||||||
|
|
||||||
/// From Toolkit
|
/// From Toolkit
|
||||||
--color-toolkit-badge-font: #fff;
|
--color-toolkit-badge-font: #fff;
|
||||||
@ -94,16 +83,16 @@ html {
|
|||||||
--color-toolkit-dialog-background: #fff;
|
--color-toolkit-dialog-background: #fff;
|
||||||
--color-toolkit-tabs-label-border: #fff;
|
--color-toolkit-tabs-label-border: #fff;
|
||||||
--color-toolkit-tabs-section-border: #000;
|
--color-toolkit-tabs-section-border: #000;
|
||||||
--color-toolkit-select-border: #d7d7d7;
|
--color-toolkit-select-border: #ddd;
|
||||||
--color-toolkit-checkbox-onoff-background: #dcdcdc;
|
--color-toolkit-checkbox-onoff-background: #dcdcdc;
|
||||||
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
|
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
|
||||||
--color-toolkit-checkbox-onoff-label-background: #3498db;
|
--color-toolkit-checkbox-onoff-label-background: #084999;
|
||||||
--color-toolkit-checkbox-onoff-checked-background: #dcdcdc;
|
--color-toolkit-checkbox-onoff-checked-background: #dcdcdc;
|
||||||
--color-toolkit-checkbox-label-background: #fff;
|
--color-toolkit-checkbox-label-background: #fff;
|
||||||
--color-toolkit-checkbox-label-shadow1: #fff;
|
--color-toolkit-checkbox-label-shadow1: #fff;
|
||||||
--color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5);
|
--color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5);
|
||||||
--color-toolkit-checkbox-label-border: #333;
|
--color-toolkit-checkbox-label-border: #333;
|
||||||
--color-toolkit-checkbox-input-border: #3498db;
|
--color-toolkit-checkbox-input-border: #084999;
|
||||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||||
--color-toolkit-engine-tooltip-border: #ddd;
|
--color-toolkit-engine-tooltip-border: #ddd;
|
||||||
@ -116,6 +105,7 @@ html {
|
|||||||
@results-offset: 10rem;
|
@results-offset: 10rem;
|
||||||
@results-tablet-offset: 0.5rem;
|
@results-tablet-offset: 0.5rem;
|
||||||
@results-gap: 5rem;
|
@results-gap: 5rem;
|
||||||
|
@results-margin: 2rem;
|
||||||
@search-width: 40rem;
|
@search-width: 40rem;
|
||||||
|
|
||||||
/// From style.less
|
/// From style.less
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
text-size-adjust: @property;
|
text-size-adjust: @property;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-corners (@radius: 4px) {
|
.rounded-corners (@radius: 10px) {
|
||||||
-webkit-border-radius: @radius;
|
-webkit-border-radius: @radius;
|
||||||
-moz-border-radius: @radius;
|
-moz-border-radius: @radius;
|
||||||
border-radius: @radius;
|
border-radius: @radius;
|
||||||
|
@ -1,9 +1,3 @@
|
|||||||
.column-reliability {
|
|
||||||
.engine-tooltip {
|
|
||||||
right: 12rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#tab-contentquery table td,
|
#tab-contentquery table td,
|
||||||
#tab-contentquery table th {
|
#tab-contentquery table th {
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
@ -83,15 +77,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.preferences_back {
|
.preferences_back {
|
||||||
background: none repeat scroll 0 0 var(--color-settings-return-background);
|
background: none repeat scroll 0 0 var(--color-btn-background);
|
||||||
color: var(--color-settings-return-font);
|
color: var(--color-btn-font);
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
.rounded-corners;
|
.rounded-corners;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 2px 4px;
|
margin: 2px 4px;
|
||||||
padding: 0.5em;
|
padding: 0.7em;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -5,12 +5,12 @@
|
|||||||
#search {
|
#search {
|
||||||
padding: 0 2em 0 @results-offset;
|
padding: 0 2em 0 @results-offset;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: var(--color-header-background);
|
background: var(--color-header-footer-background);
|
||||||
border-bottom: 1px solid var(--color-base-border);
|
border-bottom: 1px solid var(--color-base-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search_wrapper {
|
#search_wrapper {
|
||||||
padding: 10px 0;
|
padding: 20px 0 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search_box {
|
.search_box {
|
||||||
@ -32,8 +32,7 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 1.8em;
|
width: 1.8em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2px;
|
padding: 8px 2px;
|
||||||
height: 2.2em;
|
|
||||||
background: none repeat scroll 0 0 var(--color-search-background);
|
background: none repeat scroll 0 0 var(--color-search-background);
|
||||||
border-top: 1px solid var(--color-search-border);
|
border-top: 1px solid var(--color-search-border);
|
||||||
border-bottom: 1px solid var(--color-search-border);
|
border-bottom: 1px solid var(--color-search-border);
|
||||||
@ -46,7 +45,7 @@
|
|||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--color-search-border);
|
color: var(--color-search-background-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.empty * {
|
&.empty * {
|
||||||
@ -60,8 +59,7 @@
|
|||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2px;
|
padding: 8px;
|
||||||
height: 2.2em;
|
|
||||||
background: none repeat scroll 0 0 var(--color-search-background);
|
background: none repeat scroll 0 0 var(--color-search-background);
|
||||||
border: 1px solid var(--color-search-border);
|
border: 1px solid var(--color-search-border);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -73,10 +71,11 @@
|
|||||||
|
|
||||||
#q {
|
#q {
|
||||||
outline: medium none;
|
outline: medium none;
|
||||||
padding-left: 8px;
|
padding-left: 12px;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
width: @search-width;
|
width: @search-width;
|
||||||
|
border-radius: 10px 0 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#q::-ms-clear,
|
#q::-ms-clear,
|
||||||
@ -86,12 +85,12 @@
|
|||||||
|
|
||||||
#send_search {
|
#send_search {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
width: 2.2em;
|
border-radius: 0 10px 10px 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--color-search-border);
|
background-color: var(--color-search-background-hover);
|
||||||
color: var(--color-base-light);
|
color: var(--color-search-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -229,7 +228,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:checked + label {
|
input[type="checkbox"]:checked + label {
|
||||||
background: var(--color-categories-item-selected);
|
|
||||||
color: var(--color-categories-item-selected-font);
|
color: var(--color-categories-item-selected-font);
|
||||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||||
}
|
}
|
||||||
@ -237,21 +235,4 @@
|
|||||||
|
|
||||||
#categories_container {
|
#categories_container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.help {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: -20px;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 1s ease;
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-align: center;
|
|
||||||
background: var(--color-search-help);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .help {
|
|
||||||
opacity: 0.8;
|
|
||||||
transition: opacity 1s ease;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -39,7 +39,7 @@ html {
|
|||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
.text-size-adjust;
|
.text-size-adjust;
|
||||||
|
|
||||||
color: var(--color-font);
|
color: var(--color-base-font);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -76,7 +76,7 @@ footer {
|
|||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--color-footer-background);
|
background-color: var(--color-header-footer-background);
|
||||||
border-top: 1px solid var(--color-base-border);
|
border-top: 1px solid var(--color-base-border);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@ -99,10 +99,10 @@ footer {
|
|||||||
|
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
#results button[type="submit"] {
|
#results button[type="submit"] {
|
||||||
padding: 0.5rem;
|
padding: 0.7rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--color-download-button-background);
|
background: var(--color-btn-background);
|
||||||
color: var(--color-download-button-font);
|
color: var(--color-btn-font);
|
||||||
.rounded-corners;
|
.rounded-corners;
|
||||||
|
|
||||||
border: 0;
|
border: 0;
|
||||||
@ -145,7 +145,7 @@ article.result-images[data-vim-selected]::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
margin: 19px 0 18px 0;
|
margin: @results-margin 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@ -191,7 +191,7 @@ article.result-images[data-vim-selected]::before {
|
|||||||
line-height: 1.24;
|
line-height: 1.24;
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
color: var(--color-black);
|
color: var(--color-result-description-highlight-font);
|
||||||
background: inherit;
|
background: inherit;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@ -226,7 +226,6 @@ article.result-images[data-vim-selected]::before {
|
|||||||
width: 20em;
|
width: 20em;
|
||||||
min-width: 20em;
|
min-width: 20em;
|
||||||
min-height: 8em;
|
min-height: 8em;
|
||||||
// background: var(--color-base-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.image {
|
&.image {
|
||||||
@ -270,9 +269,8 @@ article.result-images[data-vim-selected]::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
color: var(--color-highlight);
|
color: var(--color-result-link-font-highlight);
|
||||||
background: inherit;
|
background: inherit;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-images {
|
.result-images {
|
||||||
@ -288,7 +286,7 @@ article.result-images[data-vim-selected]::before {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
background: var(--color-base-dark);
|
background: var(--color-result-image-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
span a {
|
span a {
|
||||||
@ -445,14 +443,14 @@ article.result-images[data-vim-selected]::before {
|
|||||||
#search_url .title,
|
#search_url .title,
|
||||||
#apis .title {
|
#apis .title {
|
||||||
margin: 2em 0 0.5em 0;
|
margin: 2em 0 0.5em 0;
|
||||||
color: var(--color-font);
|
color: var(--color-base-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
#answers {
|
#answers {
|
||||||
grid-area: answers;
|
grid-area: answers;
|
||||||
border: 1px solid var(--color-base-border);
|
border: 1px solid var(--color-base-border);
|
||||||
padding: 0.9em;
|
padding: 0.9em;
|
||||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
.rounded-corners;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
display: none;
|
display: none;
|
||||||
@ -481,7 +479,7 @@ article.result-images[data-vim-selected]::before {
|
|||||||
border: 1px solid var(--color-base-border);
|
border: 1px solid var(--color-base-border);
|
||||||
padding: 0.9em;
|
padding: 0.9em;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
.rounded-corners;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0 0 0.5em 0;
|
margin: 0 0 0.5em 0;
|
||||||
@ -574,17 +572,18 @@ article.result-images[data-vim-selected]::before {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
box-shadow: 0 0 5px var(--color-base-shadow);
|
||||||
background: white;
|
background: var(--color-base-background);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 8rem;
|
bottom: 8rem;
|
||||||
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
||||||
transition: opacity 0.5s;
|
transition: opacity 0.5s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
.rounded-corners;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.6em;
|
padding: 0.7em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -123,8 +123,8 @@ div.selectable_url {
|
|||||||
padding: 1em 1em 1em 2.7em;
|
padding: 1em 1em 1em 2.7em;
|
||||||
margin: 0 0 1em 0;
|
margin: 0 0 1em 0;
|
||||||
border: 1px solid var(--color-toolkit-dialog-border);
|
border: 1px solid var(--color-toolkit-dialog-border);
|
||||||
border-radius: 4px;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
.rounded-corners;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
Loading…
Reference in New Issue
Block a user