tethys/public/css/search_style.css
Arno Kaimbacher 578021e07e - tethys favicon also in oai: oai2_style.xslt
- zenodo search: adapted search_style.css, App.vue, dataservice.ts, vs-results.vue
2020-06-10 21:09:35 +02:00

499 lines
10 KiB
CSS
Vendored
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.result-list-info {
display: block;
justify-content: flex-end;
font-size: 16px;
color: rgb(66, 66, 66);
box-sizing: border-box;
}
.results {
padding-left: 4%;
}
.columns.right-bar {
margin-left: 0% !important;
}
section.search {
padding: 31.2px 0 0 0;
}
/* zenodo */
.label-success {
background-color: #5cb85c;
}
.label-default {
background-color: #777;
}
.label-info {
background-color: #6aa3d5;
}
.label {
display: inline-block;
padding: .2em .12em .3em;
font-size: 75%;
color: #fff;
border-radius: .25em;
margin-right:1.25em;
/* margin-left: 10px; */
}
/* .record-elem .h4, record-elem h4 {
font-size: 18px;
} */
.record-elem p a {
color: #000;
}
/* .record-elem h4 a {
color: #000;
} */
a.ng-binding {
cursor: pointer;
}
.record-elem h4 a {
cursor: pointer;
color: #000;
text-decoration: none;
font-weight: bold;
/* margin-left: 10px; */
font-size: 16px;
}
.record-elem h4 a:hover {
color: #777;
text-decoration: none;
}
/* .search-detail a:hover {
color: rgb(0, 128, 0);
} */
.record-elem .h4, .record-elem h4 {
font-size: 16px;
letter-spacing: .05em;
}
.record-detail h1, .record-detail p,
.record-elem h4,
.record-elem p, .well {
word-wrap: break-word;
}
.record-elem p span {
color: #000;
font-size: 14px;
}
.post {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
margin-bottom:10px;
margin-top: 15px;
}
.record-elem{
border-top: 1px solid rgb(238, 238, 238);
}
/* Search items */
/* .search-items {
list-style: none;
width: 100%;
display: inline-block;
}
.search-items li {
position: relative;
overflow: hidden;
height: 360px;
margin: 0!important;
width: 50%;
border: 10px solid white;
position: relative;
padding-left: 15px;
padding-right: 15px;
}
.search-items li:nth-child(3n) {
margin-left: 0;
}
.search-items li img{
width: auto;
height: 100%;
display: block;
} */
/* Work detail */
/* .search-detail {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
align-items: center;
box-shadow: inset rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
opacity: 1;
border: 1px solid rgb(238, 238, 238);
box-sizing: border-box;
min-height: 300px;
font-size: 16px;
padding:20px;
} */
/* Larger than mobile */
@media (max-width: 750px) {
.search-items li.columns {
width: 100%;
}
}
/* filter items in the left bar */
/*-------------------------------------------------- */
.left-bar .panel-title {
text-transform: capitalize;
margin-top: 8px;
margin-bottom: 2px;
color: white;
display: block;
font-weight: bold;
}
.overflowing {
color: #444444;
list-style: none;
z-index: 999;
}
.overflowing span {
color: #444444;
font-style: italic;
text-decoration: underline;
cursor: pointer;
}
ul.filter-items li {
min-height: 15px;
color: #444;
font-size: 12px;
list-style-type: none;
/*list-style-position:inside;*/
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the lists container
*/
list-style-position: outside;
/*
* Because the bullet is outside of the lists
* container, indent the list entirely
*/
margin-left: 1em;
}
.filter-items.limited li:nth-of-type(1n+3) {
display: none;
}
/* ul.filter-items .active {
background-color: lightgray;
} */
ul.filter-items li a {
cursor: pointer;
color:#ffffff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
/* ul.filter-items li a:hover {
color: #0099cc;
cursor: pointer;
} */
/* Relativer Tooltip */
.tooltip {
position: relative;
text-decoration: none;
font-weight: bolder;
color: #444444;
cursor: pointer;
overflow: visible;
font-size: 8px;
}
.search-container {
display: flex;
flex-direction: row;
flex-flow: wrap;
/* justify-content: space-between; */
min-height: 500px;
}
.sidebar.left-bar {
float: left;
border-left: none;
/* width: 250px; */
width: 100%;
height: 100%;
padding: 1rem;
/* height: 100vh; */
overflow-y: auto;
background-color: #3abac4;
opacity: .9;
color: white;
position: relative;
}
.left-bar .sidebar-image {
background: url("../images/csm_kabel.png") no-repeat;
background-size: cover;
background-position: 50% 50%;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
opacity: .2;
}
.sidebar-image:after {
content: '';
opacity: .17;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: -moz-linear-gradient(right, #A8EB12 0%, #3abac4 100%);
background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%);
background-image: -webkit-linear-gradient(right, #A8EB12 0%, #3abac4 100%);
background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
.card {
z-index: 1;
position: relative;
}
.sidebar.right-bar {
border: none;
/* margin-left: 250px; */
/* background-color: lightblue; */
}
.left-bar .indexheader {
font-weight: bold;
display: block;
color: white;
font-family: Monoton, cursive;
/* font-size: 2rem; */
text-align: center;
}
.sidebar-simplesearch {
position: relative;
/* margin-bottom: 2.5em; */
white-space: nowrap;
}
.search-input {
height: 50px !important;
border-color: currentcolor currentcolor rgb(204, 204, 204) !important;
border-style: none none solid !important;
border-width: medium medium 1px !important;
border-image: none 100% / 1 / 0 stretch !important;
/* background: rgb(250, 250, 250) none repeat scroll 0% 0%; */
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
background-color: rgb(250, 250, 250) !important;
width: 100%;
outline: currentcolor none medium;
border-radius: 0px !important;
}
.css-1gklxk5 {
position: absolute;
top: 8px;
cursor: pointer;
/* padding-left: 12px; */
padding: 0 10px;
left: 0.25em;
border: none;
}
.css-1gklxk5 svg.search-icon {
fill: rgb(0, 128, 0);
}
.sidebar-simplesearch input[type=text] {
padding: 0.00em 40px;
color: #666;
}
.css-subject {
display: flex;
-moz-box-pack: center;
justify-content: center;
flex-wrap: wrap;
}
.css-keyword {
background: mediumseagreen none repeat scroll 0% 0%;
margin: 3px;
padding: 4px;
color: white;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
}
.abstract {
overflow: hidden;
/* white-space: nowrap; */
text-overflow: ellipsis;
max-height: 140px;
}
/* overflow for abstracts */
.clamped {
line-height: 1.5;
overflow: hidden;
position: relative;
}
.clamped-2 {
/* Clamp to 2 lines, ie line-height x 2: */
max-height: 4.5em;
}
.ellipsis {
background: #fff;
bottom: 0;
position: absolute;
right: 0;
}
.fill {
background: #fff;
height: 100%;
position: absolute;
width: 100%;
}
.filter-items {
list-style: outside none none;
padding: 0px 0px 12px;
margin: 0px;
/* max-height: 240px; */
position: relative;
overflow-y: auto;
}
.filter-items li {
min-height: 30px;
display: flex;
flex-direction: row;
-moz-box-align: center;
align-items: center;
padding-left: 2px;
}
.css-w1gpbi {
border: 0px none;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0px;
position: absolute;
width: 1px;
white-space: nowrap;
}
.css-w1gpbi:checked + label::before {
animation: 0s ease 0s 1 normal none running none;
background-color: rgb(255, 255, 255);
border-color: rgb(11, 106, 255);
}
.css-w1gpbi + label::before, .css-w1gpbi + label::after {
border-radius: 50%;
}
.css-w1gpbi + label::before {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(92, 92, 92);
content: "";
/* color: rgb(11, 106, 255); */
margin-right: calc(8px);
width: calc(17px);
height: 16px;
display: inline-block;
vertical-align: middle;
margin-top: 2px;
}
.css-w1gpbi:checked + label::after {
transform: scale(1);
}
.css-w1gpbi + label::after {
box-sizing: content-box;
content: "";
position: absolute;
top: 11px;
left: calc(3px);
width: calc(12px);
height: calc(12px);
margin-top: calc(-6px);
transform: scale(0);
transform-origin: 50% center 0px;
transition: transform 200ms ease-out 0s;
z-index: 999;
background-color: rgb(108,110,107);
}
.css-w1gpbi + label {
position: relative;
-moz-user-select: none;
display: flex;
width: 100%;
height: 100%;
margin: 0.4rem 0px;
align-items: flex-start;
cursor: pointer;
}
/* .active-filter-items a {
flex-wrap: wrap;
margin: 2px 3px;
padding: 5px 8px;
font-size: 0.95rem;
position: relative;
} */
.filter-link {
display: inline-flex;
-moz-box-pack: center;
justify-content: center;
-moz-box-align: center;
align-items: center;
border-radius: 3px;
border: 1px solid transparent;
min-height: 30px;
overflow-wrap: break-word;
padding: 5px 12px;
line-height: 1.2rem;
background-color: rgb(238, 238, 238);
color: rgb(66, 66, 66);
cursor: pointer;
-moz-user-select: none;
transition: all 0.3s ease 0s;
}