widget
authorRadek Czajka <rczajka@rczajka.pl>
Tue, 20 Jun 2023 12:47:57 +0000 (14:47 +0200)
committerRadek Czajka <rczajka@rczajka.pl>
Tue, 20 Jun 2023 12:47:57 +0000 (14:47 +0200)
src/wolnelektury/static/scss/widget.scss
src/wolnelektury/templates/widget.html

index 7d78730..81b889e 100644 (file)
@@ -2,11 +2,12 @@ html, body {
     padding: 0;
     margin: 0;
     overflow: hidden;
+    font-family: sans-serif;
 }
 
 
 #wl {
-    background-color: #191919;
+    background-color: #083F4D;
     position:relative;
 
     a, a:visited, a:hover {
@@ -17,35 +18,34 @@ html, body {
         img {
             border: 0;
             max-width: 100%;
-            margin: 0;
+            margin: 0 0 0 25px;
             vertical-align: middle;
         }
     }
 
     #wl-form {
-        background: #444;
+        background: #083F4D;
         color: white;
-        height: 2.8125rem;
+        height: 45px;
         position: relative;
     }
     #wl-search {
         position: absolute;
         left: .3125rem;
-        right: 2.9rem;
-        right: 22%;
-        top: .3125rem;
+        right: 10px;
+        top: 0;
     }
 
     #id_qq {
-        font-family: Georgia;
+        font-family: sans-serif;
         font-size: 0.8125rem;
-        
+
+        outline: 0;
         background-color: #FFFFFF;
         border: medium none;
-        border-radius: 0.3125rem;
-        box-shadow: 0 0 0.40625rem #444444 inset;
+        border-radius: 20px;
         color: #000000;
-        height: 2.0625rem;
+        height: 40px;
         width: 100%;
 
         line-height: 2.03125rem;
@@ -56,68 +56,57 @@ html, body {
 
         &::-moz-placeholder {
             color: #767676;
-            font-family: Georgia;
+            font-family: sans-serif;
             font-style: italic;
         }
     }
 
     button {
-        background: #018189;
+        background: transparent;
         border: none;
-        color: white;
+        color: #083F4D;
         display: inline-block;
         font-size: .6875rem;
         position: absolute;
-        right: 0;
+        right: 10px;
         top: 0;
+        bottom: 10px;
         width: 2rem;
 
-        width: 20%;
-        height: 2.8125rem;
+        width: 40px;
+        height: 40px;
         margin: 0;
         padding: 0;
+        border-radius: 20px;
+        z-index:300;
 
         img {
             max-width: 100%;
         }
     }
-
 }
 
 .ui-menu {
     width: 100%;
-    font-size: 0.7rem;
     list-style-type: none;
     padding: 0;
     margin: 0;
-    border-style: solid;
-    border-color: #ddd;
-    border-width: 1px 0;
 
     li {
-        clear: right;
-
-        &:nth-child(odd) {
-            background-color: rgba(255,255,255,.95);
-        }
-
-        &:nth-child(even){
-            background-color: rgba(238,238,238,.95);
-        }
-
+        background-color: white;
         &:hover{
-            background-color: #053469;
+            background-color: #083F4D;
             color:white;
         }
 
         .ui-state-hover {
-            background-color: #fdf5ce;
+            background-color: #083F4D;
+            color:white;
         }
 
         .search-hint-label {
-            line-height: 1.636em;
+            line-height: 30px;
             display: inline-block;
-            max-width: 80%;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -144,7 +133,7 @@ html, body {
 
     a {
         text-decoration: none;
-        color: #0D7E85;
-        padding: 5px;
+        color: black;
+        padding: 0 10px;
     }
 }
index 3eb3422..b47b491 100644 (file)
@@ -13,7 +13,7 @@
     <body>
       <div id="wl">
         <a href="/">
-          <img src="{% static 'img/logo-neon.png' %}">
+          <img src="{% static '2022/images/logo.svg' %}">
         </a>
         <form action="{% url 'wlsearch' %}" method="get" accept-charset="utf-8" id="wl-form">
           <div id="wl-search">