Browse Source

[bugfix] colorfulNames style

B Thibault 8 years ago
parent
commit
4b105fb17d
4 changed files with 17 additions and 13 deletions
  1. 3 1
      cli/config.js
  2. 3 2
      cli/uiMessage.js
  3. 9 9
      srv/public/mimouchat.min.js
  4. 2 1
      srv/public/style.css

+ 3 - 1
cli/config.js

@@ -67,9 +67,11 @@ Config.prototype.compileCSS = function() {
         rules[".chatsystem-content .chatmsg-authorGroup"] = ["display: flex"];
         rules[".chatsystem-content .chatmsg-authorGroup"] = ["display: flex"];
         rules[".chatsystem-content .chatmsg-authorGroup .chatmsg-author"] = ["position:initial", "vertical-align:top", "min-width:75px"];
         rules[".chatsystem-content .chatmsg-authorGroup .chatmsg-author"] = ["position:initial", "vertical-align:top", "min-width:75px"];
         rules[".chatsystem-content .chatmsg-authorGroup .chatmsg-author-messages"] = ["padding-top:0", "padding-left:0", "display:inline-block", "margin-top:-4px", "flex:1"];
         rules[".chatsystem-content .chatmsg-authorGroup .chatmsg-author-messages"] = ["padding-top:0", "padding-left:0", "display:inline-block", "margin-top:-4px", "flex:1"];
+        rules[".chatmsg-author-name::before"] = [ "content:'<'" ];
+        rules[".chatmsg-author-name::after"] = [ "content:'>'" ];
     }
     }
     if (!this.isColorfulNames()) {
     if (!this.isColorfulNames()) {
-        rules[".chatsystem-content .chatmsg-authorGroup .chatmsg-author .chatmsg-author-name"] = ["background-color: transparent !important;"];
+        rules[".chatmsg-authorGroup .chatmsg-item .chatmsg-link-user, .chatsystem-content a.chatmsg-author-name, .chatmsg-author-name"] = ["background-color: transparent !important;"];
     }
     }
     for (var i in rules) {
     for (var i in rules) {
         css += i +'{';
         css += i +'{';

+ 3 - 2
cli/uiMessage.js

@@ -101,7 +101,7 @@ var AbstractUiMessage = (function() {
                 link = '#' +user.privateRoom.id;
                 link = '#' +user.privateRoom.id;
                 text = '@' +user.getName();
                 text = '@' +user.getName();
                 style = "background-color:" +makeUserColor(user.getName());
                 style = "background-color:" +makeUserColor(user.getName());
-                classes = [ "userLink" ]; // FIXME R.
+                classes = [ R.klass.msg.linkuser, R.klass.msg.link ];
             } else {
             } else {
                 return null;
                 return null;
             }
             }
@@ -113,13 +113,14 @@ var AbstractUiMessage = (function() {
                 isInternal = true;
                 isInternal = true;
                 link = '#' +newLink;
                 link = '#' +newLink;
                 text = '#' +chan.name;
                 text = '#' +chan.name;
-                classes = [ "chanLink" ]; // FIXME R.
+                classes = [ R.klass.msg.linkchan, R.klass.msg.link ];
             } else {
             } else {
                 return null;
                 return null;
             }
             }
         } else {
         } else {
             if (!link.match(/^(https?|mailto):\/\//i))
             if (!link.match(/^(https?|mailto):\/\//i))
                 return null;
                 return null;
+            classes = [ R.klass.msg.link ];
             isInternal = false;
             isInternal = false;
         }
         }
         return {
         return {

+ 9 - 9
srv/public/mimouchat.min.js

@@ -121,17 +121,17 @@ r.b[a]);break}}var e=document.createElement("div"),f=document.createElement("hea
 E,r;e.className="chat-context-roominfo";f.className="roominfo-title";g.className="roominfo-topic";m.className="roominfo-purpose";l.className="roominfo-phone";w.className="roominfo-pincount";x.className="roominfo-pinlist";M.className="roominfo-usercount";H.className="roominfo-userlist";z.className=p.className="roominfo-author";f.appendChild(h);e.appendChild(f);e.appendChild(k);g.appendChild(n);g.appendChild(p);m.appendChild(t);m.appendChild(z);k.appendChild(g);k.appendChild(l);k.appendChild(m);k.appendChild(w);
 E,r;e.className="chat-context-roominfo";f.className="roominfo-title";g.className="roominfo-topic";m.className="roominfo-purpose";l.className="roominfo-phone";w.className="roominfo-pincount";x.className="roominfo-pinlist";M.className="roominfo-usercount";H.className="roominfo-userlist";z.className=p.className="roominfo-author";f.appendChild(h);e.appendChild(f);e.appendChild(k);g.appendChild(n);g.appendChild(p);m.appendChild(t);m.appendChild(z);k.appendChild(g);k.appendChild(l);k.appendChild(m);k.appendChild(w);
 k.appendChild(x);k.appendChild(M);k.appendChild(H);var I=null;return{cb:function(b,c){this.Z();E=b;r=c;a();return this},update:function(){this.Z();a();return this},show:function(a){this.Z();a.appendChild(e);e.classList.remove("hidden");return this},qb:function(){this.Z();e.classList.add("hidden");return this},Z:function(){I&&clearTimeout(I);I=null;return this},rb:function(){I||(I=setTimeout(function(){e.classList.add("hidden");I=null},300));return this},ub:function(a){for(;a;){if(a===e)return!0;a=
 k.appendChild(x);k.appendChild(M);k.appendChild(H);var I=null;return{cb:function(b,c){this.Z();E=b;r=c;a();return this},update:function(){this.Z();a();return this},show:function(a){this.Z();a.appendChild(e);e.classList.remove("hidden");return this},qb:function(){this.Z();e.classList.add("hidden");return this},Z:function(){I&&clearTimeout(I);I=null;return this},rb:function(){I||(I=setTimeout(function(){e.classList.add("hidden");I=null},300));return this},ub:function(a){for(;a;){if(a===e)return!0;a=
 a.parentNode}return!1}}}();function Y(a,b,c,d){ka.call(this,a,b,0,c,d)}Y.prototype=Object.create(ka.prototype);Y.prototype.constructor=Y;Y.prototype.b=function(a,b){return!0===a.isMeMessage?new fc(this.id,a,b):!0===a.isNotice?new gc(this.id,a,b):new hc(this.id,a,b)};function ec(a){a.a.forEach(function(a){a.H()})}
 a.parentNode}return!1}}}();function Y(a,b,c,d){ka.call(this,a,b,0,c,d)}Y.prototype=Object.create(ka.prototype);Y.prototype.constructor=Y;Y.prototype.b=function(a,b){return!0===a.isMeMessage?new fc(this.id,a,b):!0===a.isNotice?new gc(this.id,a,b):new hc(this.id,a,b)};function ec(a){a.a.forEach(function(a){a.H()})}
-var Z=function(){function a(a,d){return Aa(d,{B:a.context.self.S.B,aa:function(a){":"===a[0]&&":"===a[a.length-1]&&(a=a.substr(1,a.length-2));if(a=$a(a)){var b=document.createElement("span");b.className="emoji-small";b.appendChild(a);return b.outerHTML}return null},ka:function(c){return b(a,c)}})}function b(a,b){var c=b.indexOf("|"),d;if(-1===c)var h=b;else{h=b.substr(0,c);var k=b.substr(c+1)}if("@"===h[0])if(h=ta(a.context)+"|"+h.substr(1),d=F(h)){a=!0;h="#"+d.W.id;k="@"+d.getName();d="background-color:"+
-zb(d.getName());var g=["userLink"]}else return null;else if("#"===h[0])if(h=ta(a.context)+"|"+h.substr(1),k=wa(h))a=!0,h="#"+h,k="#"+k.name,g=["chanLink"];else return null;else{if(!h.match(/^(https?|mailto):\/\//i))return null;a=!1}return{link:h,text:k||h,style:d,Sa:g,Xa:a}}return{H:function(a){a.U=!0;return a},X:function(a){a.c&&a.c.parentElement&&(a.c.remove(),delete a.c);return a},L:function(a){a.c?a.U&&(a.U=!1,a.N()):a.wa().N();return a.c},N:function(b){var c=F(b.O);b.c.o.innerHTML=J.P(b.o);b.c.Da.innerHTML=
-a(b,b.text);b.c.xa.textContent=c?c.getName():b.username||"?";for(var c=document.createDocumentFragment(),e=0,f=b.s.length;e<f;e++){var h=b.s[e];h&&(h=Sb(b,h,e))&&c.appendChild(h)}b.c.s.textContent="";b.c.s.appendChild(c);c=b.b;e=document.createDocumentFragment();if(b.D)for(var k in b.D){var f=c,h=b.id,g=k,n=b.D[k],p=$a(g);if(p){for(var l=document.createElement("li"),m=document.createElement("a"),t=document.createElement("span"),z=document.createElement("span"),w=[],x=0,M=n.length;x<M;x++){var H=F(n[x]);
-H&&w.push(H.getName())}w.sort();z.textContent=w.join(", ");t.appendChild(p);t.className="emoji-small";m.href="javascript:toggleReaction('"+f+"', '"+h+"', '"+g+"')";m.appendChild(t);m.appendChild(z);l.className="chatmsg-reaction-item";l.appendChild(m);f=l}else console.warn("Reaction id not found: "+g),f=null;f&&e.appendChild(f)}b.c.D.textContent="";b.c.D.appendChild(e);b.c.ca.ja&&(b.c.ca.ja.style.backgroundImage=b.A?'url("star_full.png")':'url("star_empty.png")');b.F&&(b.c.F.innerHTML=J.F(b.F),b.c.classList.add("edited"));
-return b},K:function(a){return a.L().cloneNode(!0)},w:function(b,d){return a(b,d)}}}();function fc(a,b,c){y.call(this,b,c);this.context=D(C.context,a);this.b=a;this.c=Z.c;this.U=Z.U}fc.prototype=Object.create(A.prototype);q=fc.prototype;q.constructor=fc;q.H=function(){return Z.H(this)};q.w=function(a){return Z.w(this,a)};q.X=function(){return Z.X(this)};q.L=function(){return Z.L(this)};q.wa=function(){this.c=Qb(this);this.c.classList.add("chatmsg-me_message");return this};q.K=function(){return Z.K(this)};
-q.N=function(){Z.N(this);return this};q.update=function(a,b){A.prototype.update.call(this,a,b);this.H()};function hc(a,b,c){y.call(this,b,c);this.context=D(C.context,a);this.b=a;this.c=Z.c;this.U=Z.U}hc.prototype=Object.create(y.prototype);q=hc.prototype;q.constructor=hc;q.H=function(){return Z.H(this)};q.w=function(a){return Z.w(this,a)};q.X=function(){return Z.X(this)};q.L=function(){return Z.L(this)};q.wa=function(){this.c=Qb(this);return this};q.K=function(){return Z.K(this)};
-q.N=function(){Z.N(this);return this};
+var Z=function(){function a(a,d){return Aa(d,{B:a.context.self.S.B,aa:function(a){":"===a[0]&&":"===a[a.length-1]&&(a=a.substr(1,a.length-2));if(a=$a(a)){var b=document.createElement("span");b.className="emoji-small";b.appendChild(a);return b.outerHTML}return null},ka:function(c){return b(a,c)}})}function b(a,b){var c=b.indexOf("|"),d;if(-1===c)var h=b;else{h=b.substr(0,c);var k=b.substr(c+1)}if("@"===h[0])if(h=ta(a.context)+"|"+h.substr(1),d=F(h))a=!0,h="#"+d.W.id,k="@"+d.getName(),d="background-color:"+
+zb(d.getName()),b=["chatmsg-link-user","chatmsg-link"];else return null;else if("#"===h[0])if(h=ta(a.context)+"|"+h.substr(1),k=wa(h))a=!0,h="#"+h,k="#"+k.name,b=["chatmsg-link-chan","chatmsg-link"];else return null;else{if(!h.match(/^(https?|mailto):\/\//i))return null;b=["chatmsg-link"];a=!1}return{link:h,text:k||h,style:d,Sa:b,Xa:a}}return{H:function(a){a.U=!0;return a},X:function(a){a.c&&a.c.parentElement&&(a.c.remove(),delete a.c);return a},L:function(a){a.c?a.U&&(a.U=!1,a.N()):a.wa().N();return a.c},
+N:function(b){var c=F(b.O);b.c.o.innerHTML=J.P(b.o);b.c.Da.innerHTML=a(b,b.text);b.c.xa.textContent=c?c.getName():b.username||"?";for(var c=document.createDocumentFragment(),e=0,f=b.s.length;e<f;e++){var h=b.s[e];h&&(h=Sb(b,h,e))&&c.appendChild(h)}b.c.s.textContent="";b.c.s.appendChild(c);c=b.b;e=document.createDocumentFragment();if(b.D)for(var k in b.D){var f=c,h=b.id,g=k,n=b.D[k],p=$a(g);if(p){for(var l=document.createElement("li"),m=document.createElement("a"),t=document.createElement("span"),
+z=document.createElement("span"),w=[],x=0,M=n.length;x<M;x++){var H=F(n[x]);H&&w.push(H.getName())}w.sort();z.textContent=w.join(", ");t.appendChild(p);t.className="emoji-small";m.href="javascript:toggleReaction('"+f+"', '"+h+"', '"+g+"')";m.appendChild(t);m.appendChild(z);l.className="chatmsg-reaction-item";l.appendChild(m);f=l}else console.warn("Reaction id not found: "+g),f=null;f&&e.appendChild(f)}b.c.D.textContent="";b.c.D.appendChild(e);b.c.ca.ja&&(b.c.ca.ja.style.backgroundImage=b.A?'url("star_full.png")':
+'url("star_empty.png")');b.F&&(b.c.F.innerHTML=J.F(b.F),b.c.classList.add("edited"));return b},K:function(a){return a.L().cloneNode(!0)},w:function(b,d){return a(b,d)}}}();function fc(a,b,c){y.call(this,b,c);this.context=D(C.context,a);this.b=a;this.c=Z.c;this.U=Z.U}fc.prototype=Object.create(A.prototype);q=fc.prototype;q.constructor=fc;q.H=function(){return Z.H(this)};q.w=function(a){return Z.w(this,a)};q.X=function(){return Z.X(this)};q.L=function(){return Z.L(this)};
+q.wa=function(){this.c=Qb(this);this.c.classList.add("chatmsg-me_message");return this};q.K=function(){return Z.K(this)};q.N=function(){Z.N(this);return this};q.update=function(a,b){A.prototype.update.call(this,a,b);this.H()};function hc(a,b,c){y.call(this,b,c);this.context=D(C.context,a);this.b=a;this.c=Z.c;this.U=Z.U}hc.prototype=Object.create(y.prototype);q=hc.prototype;q.constructor=hc;q.H=function(){return Z.H(this)};q.w=function(a){return Z.w(this,a)};q.X=function(){return Z.X(this)};q.L=function(){return Z.L(this)};
+q.wa=function(){this.c=Qb(this);return this};q.K=function(){return Z.K(this)};q.N=function(){Z.N(this);return this};
 q.update=function(a,b){y.prototype.update.call(this,a,b);this.H();if(a=this.text.match(/^<?https:\/\/www\.openstreetmap\.org\/\?mlat=(-?[0-9\.]+)(&amp;|&)mlon=(-?[0-9\.]+)(&amp;|&)macc=([0-9\.]+)[^\s]*/))this.text=this.text.substr(0,a.index)+this.text.substr(a.index+a[0].length).trim(),this.s.unshift({color:"#008000",text:a[0],footer:"Open Street Map",footer_icon:"https://www.openstreetmap.org/assets/favicon-32x32-36d06d8a01933075bc7093c9631cffd02d49b03b659f767340f256bb6839d990.png",geo:{latitude:a[1],
 q.update=function(a,b){y.prototype.update.call(this,a,b);this.H();if(a=this.text.match(/^<?https:\/\/www\.openstreetmap\.org\/\?mlat=(-?[0-9\.]+)(&amp;|&)mlon=(-?[0-9\.]+)(&amp;|&)macc=([0-9\.]+)[^\s]*/))this.text=this.text.substr(0,a.index)+this.text.substr(a.index+a[0].length).trim(),this.s.unshift({color:"#008000",text:a[0],footer:"Open Street Map",footer_icon:"https://www.openstreetmap.org/assets/favicon-32x32-36d06d8a01933075bc7093c9631cffd02d49b03b659f767340f256bb6839d990.png",geo:{latitude:a[1],
 longitude:a[3],accuracy:a[5]}})};function gc(a,b,c){y.call(this,b,c);this.context=D(C.context,a);this.b=a;this.a=null;this.U=!0}gc.prototype=Object.create(B.prototype);q=gc.prototype;q.constructor=gc;q.H=function(){return Z.H(this)};q.w=function(a){return Z.w(this,a)};q.X=function(){this.a&&this.a.parentElement&&(this.a.remove(),delete this.a);this.c&&delete this.c;return this};q.L=function(){Z.L(this);return this.a};q.K=function(){return this.a.cloneNode(!0)};
 longitude:a[3],accuracy:a[5]}})};function gc(a,b,c){y.call(this,b,c);this.context=D(C.context,a);this.b=a;this.a=null;this.U=!0}gc.prototype=Object.create(B.prototype);q=gc.prototype;q.constructor=gc;q.H=function(){return Z.H(this)};q.w=function(a){return Z.w(this,a)};q.X=function(){this.a&&this.a.parentElement&&(this.a.remove(),delete this.a);this.c&&delete this.c;return this};q.L=function(){Z.L(this);return this.a};q.K=function(){return this.a.cloneNode(!0)};
 q.wa=function(){this.c=Qb(this);this.a=document.createElement("span");this.c.classList.add("chatmsg-notice");this.a.className="chatmsg-notice";this.a.textContent=J.ab;this.a.appendChild(this.c);return this};q.N=function(){Z.N(this);return this};q.update=function(a,b){B.prototype.update.call(this,a,b);this.H()};var W;function Xb(a){this.T={};for(var b=0,c=a.length;b<c;b++)null===a[b].service&&null===a[b].device&&Lb(this,JSON.parse(a[b].config))}function Lb(a,b){if(b.services)for(var c in b.services)a.T[c]=b.services[c];void 0!==b.emojiProvider&&(a.h=b.emojiProvider);void 0!==b.displayAvatar&&(a.a=b.displayAvatar);void 0!==b.colorfulNames&&(a.b=b.colorfulNames)}
 q.wa=function(){this.c=Qb(this);this.a=document.createElement("span");this.c.classList.add("chatmsg-notice");this.a.className="chatmsg-notice";this.a.textContent=J.ab;this.a.appendChild(this.c);return this};q.N=function(){Z.N(this);return this};q.update=function(a,b){B.prototype.update.call(this,a,b);this.H()};var W;function Xb(a){this.T={};for(var b=0,c=a.length;b<c;b++)null===a[b].service&&null===a[b].device&&Lb(this,JSON.parse(a[b].config))}function Lb(a,b){if(b.services)for(var c in b.services)a.T[c]=b.services[c];void 0!==b.emojiProvider&&(a.h=b.emojiProvider);void 0!==b.displayAvatar&&(a.a=b.displayAvatar);void 0!==b.colorfulNames&&(a.b=b.colorfulNames)}
-function ac(){var a=W,b={},c="";!1===a.a&&(b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author-img-wrapper"]=["display: none"],b[".chatsystem-content .chatmsg-authorGroup"]=["display: flex"],b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author"]=["position:initial","vertical-align:top","min-width:75px"],b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author-messages"]=["padding-top:0","padding-left:0","display:inline-block","margin-top:-4px","flex:1"]);!0===a.b||(b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author .chatmsg-author-name"]=
-["background-color: transparent !important;"]);for(var d in b)c+=d+"{",b[d].forEach(function(a){c+=a+";"}),c+="}";return c}W=new Xb([]);var ab=function(){var a=[];return{Wa:function(b){for(var c=0,d=a.length;c<d;c++)if(-1!==a[c].names.indexOf(b))return a[c];return null},ob:function(b){var c=[];a.forEach(function(a){for(var d=0,f=a.names.length;d<f;d++)if(a.names[d].substr(0,b.length)===b){c.push(a);break}});return c},yb:function(b){b.V="client";b.exec=b.exec.bind(b);a.push(b)}}}();function ic(){return new Promise(function(a,b){"geolocation"in window.navigator?navigator.geolocation.getCurrentPosition(function(c){c?a(c):b("denied")}):b("geolocation not available")})}
+function ac(){var a=W,b={},c="";!1===a.a&&(b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author-img-wrapper"]=["display: none"],b[".chatsystem-content .chatmsg-authorGroup"]=["display: flex"],b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author"]=["position:initial","vertical-align:top","min-width:75px"],b[".chatsystem-content .chatmsg-authorGroup .chatmsg-author-messages"]=["padding-top:0","padding-left:0","display:inline-block","margin-top:-4px","flex:1"],b[".chatmsg-author-name::before"]=
+["content:'<'"],b[".chatmsg-author-name::after"]=["content:'>'"]);!0===a.b||(b[".chatmsg-authorGroup .chatmsg-item .chatmsg-link-user, .chatsystem-content a.chatmsg-author-name, .chatmsg-author-name"]=["background-color: transparent !important;"]);for(var d in b)c+=d+"{",b[d].forEach(function(a){c+=a+";"}),c+="}";return c}W=new Xb([]);var ab=function(){var a=[];return{Wa:function(b){for(var c=0,d=a.length;c<d;c++)if(-1!==a[c].names.indexOf(b))return a[c];return null},ob:function(b){var c=[];a.forEach(function(a){for(var d=0,f=a.names.length;d<f;d++)if(a.names[d].substr(0,b.length)===b){c.push(a);break}});return c},yb:function(b){b.V="client";b.exec=b.exec.bind(b);a.push(b)}}}();function ic(){return new Promise(function(a,b){"geolocation"in window.navigator?navigator.geolocation.getCurrentPosition(function(c){c?a(c):b("denied")}):b("geolocation not available")})}
 ya.push(function(){ab.yb({name:"/sherlock",names:["/sherlock","/sharelock"],usage:"",description:J.hb,exec:function(a,b){ic().then(function(a){var c=a.coords.latitude,e=a.coords.longitude;cb(b,"https://www.openstreetmap.org/?mlat="+c+"&mlon="+e+"&macc="+a.coords.accuracy+"#map=17/"+c+"/"+e)}).catch(function(a){console.error("Error: ",a)})}})});
 ya.push(function(){ab.yb({name:"/sherlock",names:["/sherlock","/sharelock"],usage:"",description:J.hb,exec:function(a,b){ic().then(function(a){var c=a.coords.latitude,e=a.coords.longitude;cb(b,"https://www.openstreetmap.org/?mlat="+c+"&mlon="+e+"&macc="+a.coords.accuracy+"#map=17/"+c+"/"+e)}).catch(function(a){console.error("Error: ",a)})}})});
 })();
 })();

+ 2 - 1
srv/public/style.css

@@ -111,7 +111,8 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chatmsg-author { display: inline-block; }
 .chatmsg-author { display: inline-block; }
 .chatmsg-author-img-wrapper { height: 36px; width: 36px; margin-right: 10px; }
 .chatmsg-author-img-wrapper { height: 36px; width: 36px; margin-right: 10px; }
 .chatmsg-author-img { max-height: 36px; max-width: 36px; border-radius: 3px; }
 .chatmsg-author-img { max-height: 36px; max-width: 36px; border-radius: 3px; }
-.chatsystem-content a.chatmsg-author-name, .chatmsg-author-name { text-decoration: none; display: inline; font-weight: bold; color: #000; padding: 0 4px; border-radius: 3px;}
+.chatsystem-content a.chatmsg-author-name, .chatmsg-author-name { text-decoration: none; display: inline; font-weight: bold; color: #000; }
+.chatmsg-authorGroup .chatmsg-item .chatmsg-link-user, .chatsystem-content a.chatmsg-author-name, .chatmsg-author-name { padding: 0 4px; border-radius: 3px;}
 .chatmsg-msg { display: block; vertical-align: top; }
 .chatmsg-msg { display: block; vertical-align: top; }
 .chatmsg-reactions:empty,.chatmsg-attachments:empty { display: none; }
 .chatmsg-reactions:empty,.chatmsg-attachments:empty { display: none; }
 .chatmsg-reactions { padding: 0 0 0 24px; margin: 5px 0; list-style: none; }
 .chatmsg-reactions { padding: 0 0 0 24px; margin: 5px 0; list-style: none; }