adding new f0ck style, various css changes

public/s/css/f0ck.css

@@ -255,6 +255,26 @@ html[theme="paper"] {
   --scroller-bg: #424242;
 }
 
+html[theme="paper"] ._204863 {
+  color: white;
+}
+
+html[theme="paper"] svg.iconset {
+  background: black;
+}
+
+html[theme="paper"] svg.iconset:hover {
+  background: rgb(31, 30, 30);
+}
+
+html[theme="paper"] .iconset#a_favo {
+  fill: var(--white);
+}
+
+html[theme="paper"] .iconset#a_delete {
+  stroke: var(--white);
+}
+
 html[theme="paper"] .pagination > a, .pagination > span  {
   border-radius: 3px;
   border: 1px solid var(--black);
@@ -523,6 +543,18 @@ html[theme="iced"] {
   --tooltip-bg: #0a3f53;
 }
 
+html[theme="iced"] ._204863 {
+  background: -webkit-linear-gradient(left, #102c5e, #111d37);
+}
+
+html[theme="iced"] svg.iconset {
+  background: #111d37;
+}
+
+html[theme="iced"] svg.iconset:hover {
+  background: #1b2f5a;
+}
+
 html[theme="iced"] .pagination > a, .pagination > span  {
   border-radius: 3px;
   border: 1px solid var(--black);
@@ -605,20 +637,6 @@ html[theme="f0ck95"] .metadata {
     color: var(--black);
 }
 
-html[theme="f0ck95"] ._204863 {
-  content: " ";
-  background: -webkit-linear-gradient(left,#08216b,#a5cef7);
-  text-align: left;
-  width: 100%;
-  color: white;
-  height: 20px;
-  display: block;
-  border-left: inset 2px silver;
-  border-top: inset 2px silver;
-  border-right: outset 2px silver;
-  border-bottom: outset 2px silver;
-}
-
 html[theme="f0ck95"] .container {
   padding-top: 10px;
 }
@@ -722,6 +740,60 @@ html[theme="f0ck95"] .badge-danger {
   border-radius: 0; 
 }
 
+html[theme="f0ck95"] ._204863 {
+  content: " ";
+  background: -webkit-linear-gradient(left,#08216b,#a5cef7);
+  text-align: left;
+  width: 100%;
+  color: white;
+  height: auto;
+  display: flex;
+  border-left: inset 2px silver;
+  border-top: inset 2px silver;
+  border-right: outset 2px silver;
+  border-bottom: outset 2px silver;
+  justify-content: space-between;
+  line-height: 1.7;
+}
+
+html[theme="f0ck95"] .iconset#a_delete {
+  stroke: var(--black);
+}
+
+html[theme="f0ck95"] .iconset#a_favo {
+  fill: var(--black);
+}
+
+html[theme="f0ck95"] .gapD {
+  height: 16px;
+  background: #08f;
+  width: max-content;
+  display: flex;
+}
+
+html[theme="f0ck95"] svg.iconset {
+  display: inline-block;
+  height: 18px;
+  cursor: pointer;
+  width: 21px;
+  background: silver;
+  margin: 1px;
+  padding: 1px;
+  border: 1px outset silver;
+  position: relative;
+  right: 2px;
+}
+
+html[theme="f0ck95"] .gapRight {
+  display: flex;
+  align-items: center;
+}
+
+html[theme="f0ck95"] .populateME {
+  position: relative;
+  left: 5px;
+}
+
 /* f0ck95dARK */
 html[theme='f0ck95d'] {
   --accent: #fff;
@@ -761,16 +833,18 @@ html[theme='f0ck95d'] {
 
 html[theme="f0ck95d"] ._204863 {
   content: " ";
-  background: -webkit-linear-gradient(left,#08216b,#a5cef7);
+  background: -webkit-linear-gradient(left,#0e111a,#073c71);
   text-align: left;
   width: 100%;
   color: white;
-  height: 20px;
-  display: block;
-  border-left: inset 1px silver;
-  border-top: inset 1px silver;
-  border-right: outset 1px silver;
-  border-bottom: outset 1px silver;
+  height: auto;
+  display: flex;
+  border-left: inset 2px silver;
+  border-top: inset 2px silver;
+  border-right: outset 2px silver;
+  border-bottom: outset 2px silver;
+  justify-content: space-between;
+  line-height: 1.7;
 }
 
 html[theme="f0ck95d"] .embed-responsive-16by9::before {
@@ -1462,8 +1536,28 @@ span.placeholder {
   margin-left: auto;
   z-index: 1;
   position: relative;
+  padding-top: 5px;
 }
 
+.gapRight {
+  display: flex;
+  align-items: center;
+}
+
+._204863 {
+  content: " ";
+  background: -webkit-linear-gradient(left,#131313,#4f4a4f);
+  text-align: left;
+  width: 100%;
+  color: var(--accent);
+  height: auto;
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.7;
+  border: 1px solid black;
+}
+
+
 .index-container {
   width: 100%;
   padding: 5px;
@@ -2192,10 +2286,20 @@ table.table tbody tr:nth-of-type(odd) {
 /* buttons */
 svg.iconset {
   display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: sub;
+  height: 18px;
+  width: 21px;
   cursor: pointer;
+  background: #312c2c;
+  margin: 1px;
+  padding: 1px;
+  border: 1px outset #221d1d;
+  position: relative;
+  right: 2px;
+}
+
+svg.iconset:hover {
+    background: #7b7b77;
+    transition: .2s ease;
 }
 
 /* favorites */

views/item.html

@@ -1,6 +1,14 @@
 @include(snippets/header)
   <div class="container">
-    <span hidden class="_204863"></span>
+    <div class="_204863">
+      <div class="gapLeft">
+        <span class="populateME"><b><i>f0ck</i></b> - {{ item.id }}</span>
+      </div>
+      <div class="gapRight">
+        <svg class="iconset" id="a_favo"><use href="/s/img/iconset.svg#heart_{{ Object.values(item.favorites).filter(u => u.user == session.user)[0] ? 'solid' : 'regular' }}"></use></svg>
+        <svg class="iconset" id="a_delete"><use href="/s/img/iconset.svg#cross"></use></svg> 
+      </div>
+    </div>
     <div class="content">
       <div class="next-post">
         @if(pagination.prev)
@@ -49,8 +57,6 @@
         <a href="/{{ item.id }}" style="--hover-image: url('/t/{{ item.id }}.webp');" class="id-link">{{ item.id }}</a>
         @if(session)
         (<a id="a_username" href="/user/{{ user.name.toLowerCase() }}/f0cks@if(tmp.mime)/{{ tmp.mime }}@endif">{{ user.name }}</a>) 
-        <svg class="iconset" id="a_delete"><use href="/s/img/iconset.svg#cross"></use></svg> 
-        <svg class="iconset" id="a_favo"><use href="/s/img/iconset.svg#heart_{{ Object.values(item.favorites).filter(u => u.user == session.user)[0] ? 'solid' : 'regular' }}"></use></svg>
         @endif
       </span>
       <span class="badge badge-dark">{{ user.network }} / {{ user.channel }}</span>