recentpopularlog in

kme : css   390

« earlier  
How do I identify and eliminate unused CSS styles from my bloated stylesheet? - Stack Overflow
<code class="language-bash">npm install uncss -g</code>
Then
<code class="language-bash">uncss http://example.com/ > out.css</code>
webdevel  css  minifier  cleaner  commandline  build  toolchain  maybesolution 
5 days ago by kme
How To Specify Typical Device Breakpoints With Media Queries
<code class="language-css">/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}</code>
webdesign  webdevel  breakpoints  css  mediaqueries  solution 
9 days ago by kme
Bookmarklet · Issue #20 · kognise/water.css
<code class="language-javascript">javascript:(()=%3E{let%20a=document,b=b=%3Ea.querySelectorAll(b),d=(b,c)=%3EObject.assign(a.createElement(b),c);b(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),b(%22*%22).forEach(a=%3Ea.style=%22%22),a.head.append(d(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/gh/kognise/water.css%40latest/dist/light.css%22}),d(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))})()</code>
css  stylesheet  readability  bookmarklet 
november 2019 by kme
Is there a CSS selector for elements containing certain text? - Stack Overflow
Not possible without JavaScript
<code class="language-javascript">
// using jQuery
$('td:contains("male")')
</code>
css  selector  webdesign  webdevel  workaround  solution 
september 2019 by kme
css3 - How can I transition height: 0; to height: auto; using CSS? - Stack Overflow
Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get.
css  animation  css3  transitions  webdesign  dammitbrain  solution 
june 2019 by kme
Tracking cursor position in real-time with remote monitoring (without JavaScript) · GitHub
Tracking cursor position in real-time with remote monitoring (without JavaScript) - noscript-tracking.go
golang  tracking  css  webdevel  interesting  hack 
may 2019 by kme
GitHub - kkuchta/css-only-chat: A truly monstrous async web chat using no JS whatsoever on the frontend
A truly monstrous async web chat using no JS whatsoever on the frontend - kkuchta/css-only-chat
webdevel  css  chat  webapp  hack 
may 2019 by kme
necolas/normalize.css: A modern alternative to CSS resets | https://github.com/
A modern alternative to CSS resets. Contribute to necolas/normalize.css development by creating an account on GitHub.
html  css  webdesign  cssreset  boilerplate 
february 2019 by kme
xpath - How can I match on an attribute that contains a certain string? - Stack Overflow | https://stackoverflow.com/
This naïve approach works, if you can be reasonably assured that one class will not be contained as a substring of another (that you *don't* want to match):

<code class="language-xpath">
//div[contains(@class, 'atag') and contains(@class ,'btag')]
</code>
mjv's answer is a good start but will fail if atag is not the first classname listed.

The usual approach is the rather unwieldy:
<code class="language-xpath">
//*[contains(concat(' ', @class, ' '), ' atag ')]
</code>

this works as long as classes are separated by spaces only, and not other forms of whitespace. This is almost always the case. If it might not be, you have to make it more unwieldy still:
<code class="language-xpath">
//*[contains(concat(' ', normalize-space(@class), ' '), ' atag ')]
</code>

(Selecting by classname-like space-separated strings is such a common case it's surprising there isn't a specific XPath function for it, like CSS3's '[class~="atag"]'.)
webdevel  xpath  css  class  solution 
february 2019 by kme
javascript - How to position loading animation inside input box? - Stack Overflow | https://stackoverflow.com/
You can also do it as a background image in CSS. Just create a CSS class and apply at the time of loading the data. After Ajax call is completed remove the "loading" CSS class from the text input box.<code class="language-css">
.loading {
background-color: #ffffff;
background-image: url("http://loadinggif.com/images/image-selection/3.gif");
background-size: 25px 25px;
background-position:right center;
background-repeat: no-repeat;
}</code>
webdesign  webdevel  css  animation  animatedgif  solution 
october 2018 by kme
Indeterminate Checkboxes | CSS-Tricks | https://css-tricks.com/
<code class="language-html"><!-- Inline click handler, just for demo -->
<input type="checkbox" id="cb1" onclick="ts(this)"></code>

<code class="language-javascript">
function ts(cb) {
if (cb.readOnly) cb.checked=cb.readOnly=false;
else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}</code>
webdesign  webdeve  html  jquery  css  javascript  checkbox  tristate  tipsandtricks 
may 2018 by kme
javascript - How can I change the default width of a Twitter Bootstrap modal box? - Stack Overflow | https://stackoverflow.com/
Note 3: In Bootstrap 3 and 4, there is a modal-lg class. So this may be sufficient, but if you want to make it responsive, you still need the fix I provided for Bootstrap 3.


You need to use this like this:
<code class="language-html">
<div class="modal fade" id="{{ modal_window_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_label_id }}">
<div class="modal-dialog modal-lg" role="document">
{# bootstrap version > 3.1.0 required for this to work #}
<div class="modal-content">
</div>
</div>
</div>
</code>

For Boostrap < 3:
<code class="language-css">body .modal-admin {
/* new custom width */
width: 750px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -375px;
}</code>
bootstrap  css  ui  webdevel  solution 
february 2018 by kme
Damko | How to configure ReText on Linux | Blog
<code class="language-css">
body
{
font-size:15px;
line-height:1.7;
overflow-x:hidden;

background-color: white;
/*
border-radius: 3px;
border: 3px solid #EEE;
box-shadow: inset 0 0 0 1px #CECECE;
*/
font-family: Helvetica, arial, freesans, clean, sans-serif;
width: 912px;
padding: 30px;
margin: 2em auto;

color:#333333;
}


.body-classic{
color:#444;
font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', "Hiragino Sans GB", "STXihei", "", serif;
font-size:16px;
line-height:1.5em;
background:#fefefe;
width: 45em;
margin: 10px auto;
padding: 1em;
outline: 1300px solid #FAFAFA;
}

body>:first-child
{
margin-top:0!important;
}

body>:last-child
{
margin-bottom:0!important;
}

blockquote,dl,ol,p,pre,table,ul {
border: 0;
margin: 15px 0;
padding: 0;
}

body a {
color: #4183c4;
text-decoration: none;
}

body a:hover {
text-decoration: underline;
}

body a.absent
{
color:#c00;
}

body a.anchor
{
display:block;
padding-left:30px;
margin-left:-30px;
cursor:pointer;
position:absolute;
top:0;
left:0;
bottom:0
}

/*h4,h5,h6{ font-weight: bold; }*/

.octicon{
font:normal normal 16px sans-serif;
width: 1em;
height: 1em;
line-height:1;
display:inline-block;
text-decoration:none;
-webkit-font-smoothing:antialiased
}

.octicon-link {
background: url("data:image/svg+xml;utf8,<?xml version='1.0' standalone='no'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 832'> <metadata>Copyright (C) 2013 by GitHub</metadata> <!-- scale(0.01565557729941) --> <path transform='' d='M768 64h-192s-254 0-256 256c0 22 3 43 8 64h137c-11-19-18-41-18-64 0-128 128-128 128-128h192s128 0 128 128-128 128-128 128 0 64-64 128h64s256 0 256-256-256-256-256-256z m-72 192h-137c11 19 18 41 18 64 0 128-128 128-128 128h-192s-128 0-128-128 128-128 128-128-4-65 66-128h-66s-256 0-256 256 256 256 256 256h192s256 0 256-256c0-22-4-44-8-64z'/> </svg>");
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}

.octicon-link:before{
content:'\a0';
}

body h1,body h2,body h3,body h4,body h5,body h6{
margin:1em 0 15px;
padding:0;
font-weight:bold;
line-height:1.7;
cursor:text;
position:relative
}

body h1 .octicon-link,body h2 .octicon-link,body h3 .octicon-link,body h4 .octicon-link,body h5 .octicon-link,body h6 .octicon-link{
display:none;
color:#000
}

body h1:hover a.anchor,body h2:hover a.anchor,body h3:hover a.anchor,body h4:hover a.anchor,body h5:hover a.anchor,body h6:hover a.anchor{
text-decoration:none;
line-height:1;
padding-left:0;
margin-left:-22px;
top:15%
}

body h1:hover a.anchor .octicon-link,body h2:hover a.anchor .octicon-link,body h3:hover a.anchor .octicon-link,body h4:hover a.anchor .octicon-link,body h5:hover a.anchor .octicon-link,body h6:hover a.anchor .octicon-link{
display:inline-block
}

body h1 tt,body h1 code,body h2 tt,body h2 code,body h3 tt,body h3 code,body h4 tt,body h4 code,body h5 tt,body h5 code,body h6 tt,body h6 code{
font-size:inherit
}

body h1{
font-size:2.5em;
border-bottom:1px solid #ddd
}

body h2{
font-size:2em;
border-bottom:1px solid #eee
}

body h3{
font-size:1.5em
}

body h4{
font-size:1.2em
}

body h5{
font-size:1em
}

body h6{
color:#777;
font-size:1em
}

body p,body blockquote,body ul,body ol,body dl,body table,body pre{
margin:15px 0
}

body h1 tt,body h1 code,body h2 tt,body h2 code,body h3 tt,body h3 code,body h4 tt,body h4 code,body h5 tt,body h5 code,body h6 tt,body h6 code
{
font-size:inherit;
}


body hr
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC);
background-repeat: repeat-x;
/*background:transparent url(http://overblown.net/files/markdown/dirty-shade.png) repeat-x 0 0;*/
background-color: transparent;
background-position: 0;
border:0 none;
color:#ccc;
height:4px;
margin:15px 0;
padding:0;
}

body li p.first
{
display:inline-block;
}

body ul,body ol
{
padding-left:30px;
}

body ul.no-list,body ol.no-list
{
list-style-type:none;
padding:0;
}

body ul ul,body ul ol,body ol ol,body ol ul
{
margin-bottom:0;
margin-top:0;
}

body dl
{
padding:0;
}

body dl dt
{
font-size:14px;
font-style:italic;
font-weight:700;
margin-top:15px;
padding:0;
}

body dl dd
{
margin-bottom:15px;
padding:0 15px;
}

body blockquote
{
border-left:4px solid #DDD;
color:#777;
padding:0 15px;
}

body blockquote>:first-child
{
margin-top:0;
}

body blockquote>:last-child
{
margin-bottom:0;
}

body table
{
display:block;
overflow:auto;
width:100%;
}

body table th
{
font-weight:700;
}

body table th,body table td
{
border:1px solid #ddd;
padding:6px 13px;
}

body table tr
{
background-color:#fff;
border-top:1px solid #ccc;
}

/*body table tr:nth-child(2n)
{
background-color:#f8f8f8;
}*/

body img
{
-moz-box-sizing:border-box;
box-sizing:border-box;
max-width:100%;
}

body span.frame
{
display:block;
overflow:hidden;
}

body span.frame>span
{
border:1px solid #ddd;
display:block;
float:left;
margin:13px 0 0;
overflow:hidden;
padding:7px;
width:auto;
}

body span.frame span img
{
display:block;
float:left;
}

body span.frame span span
{
clear:both;
color:#333;
display:block;
padding:5px 0 0;
}

body span.align-center
{
clear:both;
display:block;
overflow:hidden;
}

body span.align-center>span
{
display:block;
margin:13px auto 0;
overflow:hidden;
text-align:center;
}

body span.align-center span img
{
margin:0 auto;
text-align:center;
}

body span.align-right
{
clear:both;
display:block;
overflow:hidden;
}

body span.align-right>span
{
display:block;
margin:13px 0 0;
overflow:hidden;
text-align:right;
}

body span.align-right span img
{
margin:0;
text-align:right;
}

body span.float-left
{
display:block;
float:left;
margin-right:13px;
overflow:hidden;
}

body span.float-left span
{
margin:13px 0 0;
}

body span.float-right
{
display:block;
float:right;
margin-left:13px;
overflow:hidden;
}

body span.float-right>span
{
display:block;
margin:13px auto 0;
overflow:hidden;
text-align:right;
}

body code,body tt
{
background-color:#f8f8f8;
border:1px solid #ddd;
border-radius:3px;
margin:0 2px;
padding:0 5px;
}

body code
{
white-space:nowrap;
}


code,pre{
font-family:Consolas, "Liberation Mono", Courier, monospace;
font-size:12px
}

body pre>code
{
background:transparent;
border:none;
margin:0;
padding:0;
white-space:pre;
}

body .highlight pre,body pre
{
background-color:#f8f8f8;
border:1px solid #ddd;
font-size:13px;
line-height:19px;
overflow:auto;
padding:6px 10px;
border-radius:3px
}

body pre code,body pre tt
{
background-color:transparent;
border:none;
margin:0;
padding:0;
}

body .task-list{
list-style-type:none;
padding-left:10px
}

.task-list-item{
padding-left:20px
}

.task-list-item label{
font-weight:normal
}

.task-list-item.enabled label{
cursor:pointer
}

.task-list-item+.task-list-item{
margin-top:5px
}

.task-list-item-checkbox{
float:left;
margin-left:-20px;
margin-top:7px
}


.highlight{
background:#ffffff
}

.highlight .c{
color:#999988;
font-style:italic
}

.highlight .err{
color:#a61717;
background-color:#e3d2d2
}

.highlight .k{
font-weight:bold
}

.highlight .o{
font-weight:bold
}

.highlight .cm{
color:#999988;
font-style:italic
}

.highlight .cp{
color:#999999;
font-weight:bold
}

.highlight .c1{
color:#999988;
font-style:italic
}

.highlight .cs{
color:#999999;
font-weight:bold;
font-style:italic
}

.highlight .gd{
color:#000000;
background-color:#ffdddd
}

.highlight .gd .x{
color:#000000;
background-color:#ffaaaa
}

.highlight .ge{
font-style:italic
}

.highlight .gr{
color:#aa0000
}

.highlight .gh{
color:#999999
}

.highlight .gi{
color:#000000;
background-color:#ddffdd
}

.highlight .gi .x{
color:#000000;
background-color:#aaffaa
}

.highlight .go{
color:#888888
}

.highlight .gp{
color:#555555
}

.highlight .gs{
font-weight:bold
}

.highlight .gu{
color:#800080;
font-weight:bold
}

.highlight .gt{
color:#aa0000… [more]
markdown  retext  configuration  github  css  solution 
november 2017 by kme
Gussy up Pinboard Notes
Here's a userstyle to improve the appearance of the Markdown note display:

<code class="language-css">
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("notes.pinboard.in") {
blockquote.note {
font-family: Menlo, Open Sans, Arial, helvetica;
}

blockquote.note a:hover {
text-decoration: underline !important;
}

code {
margin: inherit !important;
padding: 0 3px 2px;
color: #222;
background: #efefef;
font-family: "Ubuntu Mono",Roboto,"DejaVu Sans Mono",monaco,courier,monospace;
}
}
</code>

See also: https://github.com/ernstki/pinboard-usermods
pinboard  userstyle  css  annoyance  solution  webdesign  essential  movein 
october 2017 by kme
Changing the child element's CSS when the parent is hovered with jQuery - Stack Overflow | https://stackoverflow.com/
No need to use the JavaScript or jquery, CSS is enough:

.child{ display:none; }
.parent:hover .child{ display:block; }
css  hover  webdesign  webdevel  solution 
october 2017 by kme
« earlier      
per page:    204080120160

Copy this bookmark:





to read