@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400&display=swap');
* {font-family: 'Cairo'}
#logo {
background: url(/img/rsd.png) no-repeat center;
background-size: contain;
width: 350px;
height: 110px;
}
.fa.fa-icon-black, .fa.fa-icon-white, .fa.fa-icon-header, .fa-solid.fa-icon-black, .fa-solid.fa-icon-white, .fa-solid.fa-icon-header {
color: #DCB720;
}
.btn-default:link, .btn-default:visited, .btn-secondary:link, .btn-secondary:visited {
color: #FFF;
}
#opac-main-search {
background: #DCB720;
}
div#opaccredits {
background: #0b150a;
border-top: 2px solid #DCB720;
}
.btn-primary, .btn-primary:hover, .btn-primary:active {
background: #6B6605;
}
.o-ft-copy {
color: #fff;
justify-content: center;
margin: auto;
}
#moresearches {
justify-content: center;
margin: .5em 0px;
padding: 0 15px;
}
#wrapper {
padding-left: 0px;
padding-right: 0px;
}
.opac-panel-hd {
background: #6B6605;
padding: 4px 10px;
display: flex;
align-items: center;
font-size: 12px;
gap: 5px;
color: #fff;
}
.nvrgs1 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px;
font-size: 12px;
color: #6B6605;
border-radius: 4px;
transition: all .13s;
}
.preloader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-image: url('/img/default.gif');
background-repeat: no-repeat;
background-color: #FFF;
background-position: center;
}
/* new */
/* =====================================================
KOHA OPAC RESULTS
Dar Rashid for Publishing Theme
Version 1.0
=====================================================*/
:root{
/* Dar Rashid Publishing brand palette (from client-supplied swatches) */
--primary:#A39B08; /* Olive - solid backgrounds (buttons, header bars) */
--primary-dark:#6B6605; /* Deep olive - hover/darker backgrounds */
--primary-light:#C9BF1E; /* Light olive-mustard */
--accent:#DCB720; /* Mustard gold - badges/hover backgrounds */
--accent-light:#F5C579; /* Light tan/gold - subtle background tints */
--ink:#4A4703; /* Deep olive-brown - links, headings, text on white (readable) */
--ink-soft:#6B6605; /* Slightly lighter ink - secondary link states */
--bg:#F7F7F5;
--white:#ffffff;
--text:#253047;
--muted:#6B7280;
--border:#E6E6E6;
--radius:14px;
--shadow:
0 8px 24px rgba(27,42,74,.08);
--shadow-hover:
0 18px 40px rgba(27,42,74,.18);
--transition:.30s;
}
/*******************************************
GENERAL
********************************************/
body{
background:var(--bg);
color:var(--text);
font-family:
"Cairo",
sans-serif;
}
.container{
max-width:1350px;
}
/*******************************************
LINKS
********************************************/
a{
color:var(--ink);
transition:var(--transition);
}
a:hover{
color:var(--ink-soft);
text-decoration:none;
}
/*******************************************
HEADINGS
********************************************/
h1,h2,h3,h4,h5{
color:var(--ink);
font-weight:700;
}
/*******************************************
SEARCH BAR
********************************************/
#searchform,
.searchresults{
background:#fff;
border-radius:16px;
box-shadow:var(--shadow);
padding:20px;
margin-bottom:25px;
}
input[type=text],
input[type=search],
.form-control{
border:1px solid var(--border);
border-radius:10px;
min-height:46px;
transition:.25s;
}
input:focus{
border-color:var(--accent);
box-shadow:
0 0 0 .2rem
rgba(201,162,39,.20);
}
/*******************************************
BUTTONS
********************************************/
.btn-primary,
.btn-default,
.btn-success{
/* background:var(--primary);*/
background:#0b150a;
border:none;
border-radius:10px;
color:white;
transition:.3s;
}
.btn-primary:hover,
.btn-default:hover,
.btn-success:hover{
background:var(--accent);
color:var(--ink);
}
/*******************************************
BREADCRUMB
********************************************/
.breadcrumb{
background:white;
border-radius:12px;
padding:12px 20px;
box-shadow:var(--shadow);
}
.breadcrumb a{
color:var(--ink);
}
.breadcrumb .active{
color:var(--ink-soft);
}
/*******************************************
SORT BAR
********************************************/
.sorting,
.sortresults,
.results_toolbar{
background:white;
border-radius:12px;
padding:14px 18px;
margin-bottom:18px;
box-shadow:var(--shadow);
}
/*******************************************
RESULTS NUMBER
********************************************/
.results_summary{
color:var(--muted);
line-height:1.9;
}
.results_summary strong{
color:var(--ink);
}
/*******************************************
BOOK CARD
********************************************/
.searchresults li:hover,
.searchresults .record:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
}
/*******************************************
BOOK COVER
********************************************/
.coverimages img,
.cover-image img,
.no-image{
border-radius:10px;
box-shadow:
0 8px 18px rgba(0,0,0,.15);
}
/*******************************************
TITLE
********************************************/
.title,
.results_title,
.biblio-title{
font-weight:700;
}
.title a,
.results_title a{
color:var(--ink);
}
.title a:hover{
color:var(--ink-soft);
}
/*******************************************
AUTHOR
********************************************/
.author,
.results_author{
color:#555;
margin-top:8px;
}
.author a{
color:var(--ink);
}
/*******************************************
TAGS
********************************************/
.label,
.label-default{
background:#FBF0DC;
color:var(--ink);
border-radius:50px;
padding:5px 12px;
font-size:12px;
font-weight:600;
}
/*******************************************
AVAILABILITY
********************************************/
/*
.available{
background:var(--accent);
color:var(--ink);
display:inline-block;
padding:6px 14px;
border-radius:50px;
font-weight:700;
}
*/
.unavailable{
background:#EEE;
color:#777;
display:inline-block;
padding:6px 14px;
border-radius:50px;
}
/*******************************************
SIDEBAR
********************************************/
.sidebar,
.refine,
.facets{
background:white;
border-radius:14px;
padding:18px;
box-shadow:var(--shadow);
}
.sidebar h3,
.refine h3{
color:var(--ink);
font-size:18px;
border-bottom:2px solid var(--accent);
padding-bottom:8px;
margin-bottom:18px;
}
.sidebar ul{
padding:0;
}
.sidebar li{
list-style:none;
padding:7px 0;
}
.sidebar li a{
color:#555;
}
.sidebar li a:hover{
color:var(--ink-soft);
}
/*******************************************
PAGINATION
********************************************/
/*******************************************
RESPONSIVE
********************************************/
@media(max-width:768px){
.searchresults li{
padding:5px;
}
.title{
font-size:18px;
}
.sidebar{
margin-top:20px;
}
}
/*=====================================================
RESULTS CARDS
======================================================*/
/* البطاقة */
.searchresults .record,
.searchresults .bibliocol{
position:relative;
background:#fff;
border:1px solid #ECECEC;
padding:15px;
margin-bottom:25px;
overflow:hidden;
}
/* خط زخرفي */
/*
.searchresults li:before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:4px;
background:
linear-gradient(
90deg,
#DCB720,
#F5C579,
#DCB720);
}
*/
/*************************************************
Cover
**************************************************/
.coverimages{
text-align:center;
}
.coverimages img{
width:145px;
border-radius:10px;
transition:.35s;
}
.coverimages img:hover{
transform:scale(1.05);
}
/*************************************************
Title
**************************************************/
.biblio-title,
.title{
font-weight:700;
line-height:1.6;
margin-bottom:12px;
}
.biblio-title a{
color:#4A4703;
}
.biblio-title a:hover{
color:#6B6605;
}
/*************************************************
Author
**************************************************/
.author,
.results_author{
font-size:15px;
color:#666;
margin-bottom:12px;
}
.author a{
color:#4A4703;
font-weight:600;
}
/*************************************************
Publisher
**************************************************/
.results_summary.publisher{
color:#666;
}
/*************************************************
Subjects
**************************************************/
.results_summary.subjects a{
display:inline-block;
margin:4px;
padding:6px 12px;
border-radius:50px;
background:#FBF0DC;
color:#4A4703;
font-size:13px;
transition:.25s;
}
.results_summary.subjects a:hover{
background:#DCB720;
}
/*************************************************
Availability
**************************************************/
/*
.available{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 16px;
background:#DCB720;
color:#4A4703;
border-radius:30px;
font-weight:700;
}
.available:before{
content:"✓";
font-size:14px;
}
*/
.unavailable{
display:inline-flex;
align-items:center;
padding:7px 16px;
border-radius:30px;
background:#EFEFEF;
color:#777;
}
/*************************************************
Buttons
**************************************************/
.actions a,
.links a{
display:inline-block;
padding:9px 18px;
border-radius:10px;
background:#A39B08;
color:#fff;
font-weight:600;
transition:.3s;
margin:5px;
}
.actions a:hover,
.links a:hover {
background:#DCB720;
color:#4A4703;
}
/*************************************************
Holdings Table
**************************************************/
table.items{
border-collapse:collapse;
width:100%;
margin-top:15px;
}
table.items th{
background:#A39B08;
color:#fff;
border:none;
padding:12px;
}
table.items td{
padding:12px;
border-bottom:1px solid #EEE;
}
table.items tr:hover{
background:#FAF8F1;
}
/*************************************************
Labels
**************************************************/
.label,
.badge{
background:#FBF0DC;
color:#4A4703;
border-radius:30px;
padding:5px 12px;
font-weight:600;
}
/*************************************************
Lists
**************************************************/
.results_summary{
margin-bottom:10px;
line-height:2;
}
.results_summary strong{
color:#4A4703;
}
/*************************************************
Icons
**************************************************/
.fa,
.fa-solid{
color:#DCB720;
}
/*************************************************
Accordion
**************************************************/
.accordion-item{
border:none;
border-radius:12px;
overflow:hidden;
margin-bottom:10px;
}
.accordion-button{
background:#A39B08;
color:#fff;
font-weight:700;
}
.accordion-button:not(.collapsed){
background:#DCB720;
color:#4A4703;
}
/*************************************************
Hover Animation
**************************************************/
.searchresults li{
transition:.35s;
}
.searchresults li:hover{
transform:translateY(-5px);
box-shadow:0 18px 35px rgba(27,42,74,.18);
}
/*====================================================
SIDEBAR / FACETS
=====================================================*/
#search-facets,
#refine,
.refine,
.facets,
.searchfacets{
background:#fff;
border-radius:16px;
padding:22px;
box-shadow:0 10px 28px rgba(27,42,74,.08);
border-top:4px solid #DCB720;
margin-bottom:25px;
}
/************************************************/
#search-facets h3,
.refine h3,
.facets h3{
color:#4A4703;
font-size:19px;
font-weight:700;
margin-bottom:18px;
padding-bottom:10px;
border-bottom:2px solid #DCB720;
}
/************************************************/
#search-facets ul,
.refine ul{
list-style:none;
padding:0;
margin:0;
}
/************************************************/
#search-facets li,
.refine li{
border-bottom:1px solid #F0F0F0;
transition:.25s;
}
#search-facets li:last-child{
border-bottom:none;
}
/************************************************/
#search-facets li a,
.refine li a{
display:block;
padding:11px 8px;
color:#555;
font-weight:500;
transition:.25s;
border-radius:8px;
}
#search-facets li a:hover{
background:#F7F7F5;
color:#4A4703;
padding-right:16px;
}
/************************************************/
#search-facets .facet-count{
float:left;
background:#DCB720;
color:#4A4703;
padding:2px 10px;
border-radius:20px;
font-size:12px;
font-weight:700;
}
/************************************************/
.morefacet a{
color:#6B6605;
font-weight:700;
}
/************************************************/
.current_facet{
background:#A39B08;
color:#fff;
border-radius:10px;
padding:8px 12px;
margin-bottom:10px;
}
/************************************************/
.removefacet{
color:#6B6605;
margin-right:8px;
}
/************************************************/
/* SEARCH OPTIONS */
/************************************************/
.searchresults .sort_by,
.sorting,
.results_toolbar{
background:#fff;
border-radius:5px;
box-shadow:0 10px 24px rgba(27,42,74,.08);
padding:10px;
margin-bottom:10px;
}
/************************************************/
select{
border:1px solid #DDD;
border-radius:10px;
min-height:44px;
transition:.25s;
}
select:focus{
border-color:#DCB720;
box-shadow:
0 0 0 .2rem rgba(201,162,39,.18);
}
/************************************************/
/* SEARCH BOX */
/************************************************/
.searchbox,
.search-form{
background:#fff;
border-radius:16px;
padding:25px;
box-shadow:0 10px 24px rgba(27,42,74,.08);
border-top:4px solid #DCB720;
}
.searchbox label{
color:#4A4703;
font-weight:700;
}
/************************************************/
input[type="search"],
input[type="text"]{
border-radius:12px;
min-height:48px;
}
/************************************************/
button[type="submit"],
.search-btn{
background:#0b150a;
color:#fff;
border:none;
border-radius:12px;
min-height:48px;
padding:0 24px;
transition:.3s;
}
button[type="submit"]:hover{
background:#DCB720;
color:#4A4703;
}
/************************************************/
/* BREADCRUMB */
/************************************************/
.breadcrumb{
background:#fff;
border-radius:12px;
padding:14px 20px;
box-shadow:0 8px 20px rgba(27,42,74,.06);
}
.breadcrumb-item a{
color:#4A4703;
}
.breadcrumb-item.active{
color:#6B6605;
}
/************************************************/
/* RESULT COUNT */
/************************************************/
#numresults,
.results-count{
display:inline-block;
background:#A39B08;
color:#fff;
padding:8px 16px;
border-radius:30px;
font-weight:700;
}
/************************************************/
/* SORT BUTTONS */
/************************************************/
.btn-group .btn{
border-radius:10px;
border:none;
background:#F7F7F5;
color:#4A4703;
margin:2px;
}
.btn-group .btn:hover{
background:#DCB720;
}
.btn-group .active{
background:#A39B08;
color:#fff;
}
/*=========================================================
OPAC DETAIL PAGE
Hassan Hanafi Library Theme
==========================================================*/
/*************************************************
BOOK HEADER
*************************************************/
#catalog_detail,
.record,
.bibliodetails,
.maincontent{
background:#fff;
border-radius:18px;
padding:28px;
box-shadow:0 12px 30px rgba(27,42,74,.08);
margin-bottom:25px;
}
/*************************************************
BOOK COVER
*************************************************/
.coverimage,
.coverimages,
.cover-slider{
text-align:center;
}
.coverimage img,
.coverimages img{
width:220px;
border-radius:12px;
border:4px solid #fff;
box-shadow:
0 15px 35px rgba(27,42,74,.18);
transition:.35s;
}
.coverimage img:hover{
transform:scale(1.04);
}
/*************************************************
TITLE
*************************************************/
/* h1.title,
.record-title,
{
color:#4A4703;
font-weight:700;
line-height:1.5;
margin-bottom:18px;
border-bottom:3px solid #DCB720;
padding-bottom:12px;
}
*/
/*************************************************
AUTHOR
*************************************************/
.author,
.author-name{
color:#666;
font-size:16px;
margin-bottom:12px;
}
.author a{
color:#4A4703;
font-weight:600;
}
.author a:hover{
color:#6B6605;
}
/*************************************************
SUMMARY
*************************************************/
.results_summary,
.biblioinfo{
line-height:2;
color:#555;
}
.results_summary strong{
color:#4A4703;
}
/*************************************************
TAGS
*************************************************/
.subjects a,
.results_summary.subjects a{
display:inline-block;
margin:5px;
padding:6px 14px;
background:#FBF0DC;
color:#4A4703;
border-radius:30px;
transition:.25s;
}
.subjects a:hover{
background:#DCB720;
}
/*************************************************
BUTTONS
*************************************************/
/*
.btn,
.btn-primary,
.btn-default,
.placehold {
background:#A39B08;
color:#fff;
border:none;
border-radius:12px;
padding:10px 22px;
transition:.3s;
}
.btn:hover,
.placehold:hover{
background:#DCB720;
color:#4A4703;
}
*/
/*************************************************
STATUS BADGE
*************************************************/
/*
.available{
display:inline-flex;
align-items:center;
gap:8px;
background:#DCB720;
color:#4A4703;
padding:8px 18px;
border-radius:40px;
font-weight:700;
}
.available:before{
content:"✓";
}
*/
.unavailable{
background:#EEE;
color:#777;
padding:8px 18px;
border-radius:40px;
}
/*************************************************
HOLDINGS TABLE
*************************************************/
table.items{
width:100%;
border-collapse:collapse;
margin-top:20px;
border-radius:12px;
overflow:hidden;
}
table.items thead{
background:#A39B08;
}
table.items th{
color:#fff;
padding:14px;
font-weight:600;
border:none;
}
table.items td{
padding:14px;
border-bottom:1px solid #EEE;
}
table.items tr:nth-child(even){
background:#FAFAFA;
}
table.items tr:hover{
background:#FBF0DC;
}
/*************************************************
MARC TABLE
*************************************************/
table.marc{
width:100%;
border-collapse:collapse;
}
table.marc td{
border-bottom:1px solid #EEE;
padding:12px;
}
table.marc td:first-child{
width:90px;
font-weight:700;
color:#4A4703;
}
/*************************************************
TABS
*************************************************/
.nav-tabs{
border:none;
margin-top:30px;
}
.nav-tabs .nav-link{
border:none;
background:#F7F7F5;
color:#4A4703;
border-radius:10px 10px 0 0;
margin-left:5px;
padding:12px 22px;
}
.nav-tabs .nav-link.active{
background:#A39B08;
color:#fff;
}
.tab-content{
background:#fff;
padding:25px;
border-radius:0 14px 14px 14px;
box-shadow:0 10px 25px rgba(27,42,74,.08);
}
/*************************************************
SIDEBAR
*************************************************/
.sidebar,
.record-side{
background:#fff;
border-radius:16px;
box-shadow:0 10px 24px rgba(27,42,74,.08);
padding:20px;
}
.sidebar h3{
color:#4A4703;
border-bottom:2px solid #DCB720;
padding-bottom:8px;
}
/*************************************************
LINKS
*************************************************/
.record a{
color:#4A4703;
}
.record a:hover{
color:#6B6605;
}
/*************************************************
QR CODE
*************************************************/
.qrcode{
padding:15px;
background:#fff;
border-radius:12px;
box-shadow:0 8px 20px rgba(27,42,74,.08);
}
/*************************************************
SOCIAL SHARE
*************************************************/
.share{
display:flex;
gap:10px;
}
.share a{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#A39B08;
color:#fff;
}
.share a:hover{
background:#DCB720;
color:#4A4703;
}
/*************************************************
RELATED TITLES
*************************************************/
.related-records{
margin-top:35px;
}
.related-record{
background:#fff;
border-radius:14px;
box-shadow:0 10px 22px rgba(27,42,74,.08);
padding:18px;
transition:.3s;
}
.related-record:hover{
transform:translateY(-5px);
}
/*************************************************
RESPONSIVE
*************************************************/
@media(max-width:992px){
.coverimage img{
width:180px;
}
h1.title{
font-size:1.6rem;
}
}
@media(max-width:768px){
#catalog_detail{
padding:18px;
}
.coverimage{
margin-bottom:20px;
}
table.items{
display:block;
overflow-x:auto;
}
}
@media (max-width: 767px) {
/* Convert the table structure to flex blocks on mobile */
#searchresults table.table,
#searchresults table.table tbody,
#searchresults table.table tr {
display: block;
width: 100%;
}
#searchresults table.table tr {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 12px 5px;
border-bottom: 1px solid #ddd;
}
/* Make cells float/inline properly */
#searchresults td.selectcol,
#searchresults td.numcol {
display: inline-block;
width: auto;
padding-right: 8px;
}
#searchresults td.covercol {
display: block;
width: 90px; /* Gives the cover image fixed breathing room */
flex-shrink: 0;
margin-right: 10px;
}
#searchresults td.bibliocol {
display: block;
flex: 1; /* Allows text to take remaining width next to cover */
min-width: 0;
word-break: break-word;
}
/* Keep cover thumbnail scaled properly */
#searchresults td.covercol img {
max-width: 100%;
height: auto;
}
}
/*=====================================================
DAR RASHID PUBLISHING — OPAC HEADER BANNER (single image, animated)
Paste this EXACT markup into: Administration > System preferences > OpacHeader
(use the "Source code" / button in the editor toolbar — do NOT type
this into the plain WYSIWYG canvas, or the editor may strip attributes)
=====================================================*/
.dr-opac-banner{
position:relative;
width:100%;
min-height:220px;
overflow:hidden;
border-radius:0 0 var(--radius) var(--radius);
box-shadow:var(--shadow);
margin-bottom:20px;
cursor:pointer;
animation:drFadeIn .8s ease both;
}
.dr-opac-banner::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(180deg, rgba(107,102,5,.35), rgba(107,102,5,.05)),
url('/opac-tmpl/bootstrap/images/dar-rashid-opac-header.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
animation:drKenBurns 20s ease-in-out infinite alternate;
transition:filter .5s ease;
}
.dr-opac-banner:hover::before{
animation-play-state:paused;
filter:brightness(1.08) saturate(1.1);
}
.dr-opac-banner::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:4px;
background:linear-gradient(90deg,
var(--accent-light), var(--accent), var(--primary),
var(--accent), var(--accent-light));
background-size:200% 100%;
animation:drShimmer 6s linear infinite;
}
@media(max-width:768px){
.dr-opac-banner{
min-height:140px;
}
}
span.results_summary.online_resources li a {
align-items: center;
appearance: none;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgb(0 0 0 / 20%) 0 3px 5px -1px, rgb(0 0 0 / 14%) 0 6px 10px 0, rgb(0 0 0 / 12%) 0 1px 18px 0;
box-sizing: border-box;
color: #3c4043;
cursor: pointer;
display: inline-flex;
fill: currentcolor;
font-size: 14px;
font-weight: 200;
height: 45px;
justify-content: center;
letter-spacing: .25px;
line-height: normal;
max-width: 100%;
overflow: visible;
padding: 5px 10px;
position: relative;
text-align: center;
text-transform: none;
transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: auto;
will-change: transform, opacity;
z-index: 0;
}
span.results_summary.online_resources li a:hover {
background-color: #FBF0DC;
}
/*=====================================================
DAR RASHID PUBLISHING — OPAC MAIN USER BLOCK (image slider)
IMPORTANT: image URLs live HERE in the CSS, not as inline "style"
attributes in the HTML. Koha's rich-text editor (TinyMCE) strips
inline style attributes on save, which is why slides disappeared
before. Keeping the URLs in the stylesheet avoids that completely.
Paste this EXACT markup into: Administration > System preferences >
OpacMainUserBlock (use the "Source code" / button in the editor
toolbar — do NOT type this into the plain WYSIWYG canvas):
TO ADD/REMOVE SLIDES:
1. Add/remove a plain in the HTML above.
2. Add/remove a matching :nth-child(n) rule below with its image
and a delay of (n-1) * 5s.
3. Update animation-duration on .dr-slide (slide count * 5s).
=====================================================*/
.dr-main-userblock{
position:relative;
width:100%;
min-height:320px;
overflow:hidden;
border-radius:var(--radius);
box-shadow:var(--shadow);
margin-bottom:25px;
background:var(--primary-dark);
animation:drFadeIn .8s .15s ease both;
}
.dr-main-userblock::before{
content:"";
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(180deg, rgba(163,155,8,.30), rgba(163,155,8,.05));
pointer-events:none;
}
.dr-main-userblock::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:4px;
z-index:3;
background:linear-gradient(90deg,
var(--accent-light), var(--accent), var(--primary),
var(--accent), var(--accent-light));
background-size:200% 100%;
animation:drShimmer 6s linear infinite;
}
.dr-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
animation-name:drSlideFade;
animation-duration:20s; /* slide count (4) * 5s each */
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-fill-mode:backwards;
}
.dr-slide:first-child{
opacity:1; /* first slide visible immediately, no flash on load */
}
.dr-slide:nth-child(1){
background-image:url('/img/rsd/01.jpg');
animation-delay:1s;
}
.dr-slide:nth-child(2){
background-image:url('/img/rsd/02.jpg');
animation-delay:3s;
}
.dr-slide:nth-child(3){
background-image:url('/img/rsd/03.jpg');
animation-delay:5s;
}
.dr-slide:nth-child(4){
background-image:url('/img/rsd/04.jpg');
animation-delay:7s;
}
.dr-slide:nth-child(5){
background-image:url('/img/rsd/05.jpg');
animation-delay:9s;
}
.dr-slide:nth-child(6){
background-image:url('/img/rsd/06.jpg');
animation-delay:11s;
}
.dr-slide:nth-child(7){
background-image:url('/img/rsd/07.jpg');
animation-delay:13s;
}
.dr-slide:nth-child(8){
background-image:url('/img/rsd/08.jpg');
animation-delay:15s;
}
.dr-slide:nth-child(9){
background-image:url('/img/rsd/09.jpg');
animation-delay:17s;
}
.dr-slide:nth-child(10){
background-image:url('/img/rsd/10.jpg');
animation-delay:19s;
}
/* add more rules here if you add more slides, e.g.:
.dr-slide:nth-child(5){
background-image:url('/opac-tmpl/bootstrap/images/dar-rashid-slide-5.jpg');
animation-delay:20s;
}
*/
.dr-main-userblock:hover .dr-slide{
/* animation-play-state:paused;*/
}
@keyframes drSlideFade{
0% { opacity:1; }
20% { opacity:1; }
25% { opacity:0; }
95% { opacity:0; }
100% { opacity:1; }
}
@media(max-width:768px){
.dr-main-userblock{
min-height:180px;
}
}
/*=====================================================
SHARED ANIMATIONS FOR BANNERS ABOVE
=====================================================*/
@keyframes drKenBurns{
from{ transform:scale(1); }
to{ transform:scale(1.12); }
}
@keyframes drShimmer{
0%{ background-position:0% 0; }
100%{ background-position:200% 0; }
}
@keyframes drFadeIn{
from{ opacity:0; transform:translateY(-14px); }
to{ opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion: reduce){
.dr-opac-banner,
.dr-opac-banner::before,
.dr-opac-banner::after,
.dr-main-userblock,
.dr-main-userblock::after,
.dr-slide{
animation:none !important;
transition:none !important;
}
.dr-slide{
opacity:1 !important;
}
}
h6.mb-4.footerh6 {
color: #e7e7e7;
}
.btn-primary:hover, .btn-default:hover, .btn-success:hover {
background: #444444;
}
#action a i.fa, #action a i.fa-solid, #action button i.fa, #action button i.fa-solid {
color: #d9b520;
}
#a_listResults {
color: #4A4703;
}