memos random

css/main.css

@@ -34,7 +34,7 @@ input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
     line-height: 2.5rem;
     color: rgb(55,65,81);
 }
-.memo-editor{
+.memo-editor,#randomlist{
     border: 2px solid rgb(229,231,235);
     border-radius: .5rem;
     background-color: rgb(255,255,255);
@@ -44,6 +44,15 @@ input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-duration: .15s;
 }
+#randomlist{
+    border: 1px solid rgb(229,231,235);
+    color: #666;
+    padding: 1rem;
+}
+.random-time{font-size:13px;margin-bottom:6px;color: #999;font-style:italic;}
+#random-link{float: right;margin-top: -5px;cursor: pointer;}
+.random-image{width:180px;height:180px;max-width:100%;object-fit: cover;border-radius: .25rem;margin:5px 5px 5px 0;}
+
 .btns-container{text-align:right;}
 .common-editor-inputer,input.inputer{
     font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
@@ -109,9 +118,10 @@ input.inputer{border-bottom: 1px solid #ccc;width:75%;}
 .common-tools-container svg.icon,#blog_info_edit svg.icon{width:24px;height:24px;opacity: 0.6;cursor: pointer;}
 #newtodo svg.icon{padding-top: 2px;}
 #tags svg.icon{padding: 2px;width:23px;height:23px;}
-#tags:hover svg,#getlink:hover svg,#locked:hover svg,#unlock:hover svg,#newtodo:hover svg,#upres:hover svg{opacity: 1;}
+#random svg.icon{padding:2px;width:19px;height:19px;}
+#tags:hover svg,#getlink:hover svg,#locked:hover svg,#unlock:hover svg,#newtodo:hover svg,#upres:hover svg,#random:hover svg{opacity: 1;}
 
-#locked,#taglist,#visibilitylist{display: none;}
+#locked,#taglist,#visibilitylis,#randomlist{display: none;}
 .tag-list,.visibility-list {
     margin-top: .5rem;
     max-height: 13rem;