Uit Hack42
k (http://meyerweb.com/eric/css/edge/popups/demo.html) |
|||
(47 tussenliggende versies door 4 gebruikers niet weergegeven) | |||
Regel 31: | Regel 31: | ||
-webkit-box-shadow: 0px 2px 6px 0px #333; | -webkit-box-shadow: 0px 2px 6px 0px #333; | ||
box-shadow: 0px 2px 6px 0px #333; | box-shadow: 0px 2px 6px 0px #333; | ||
+ | -webkit-transition: -webkit-transform .15s linear; | ||
+ | } | ||
+ | |||
+ | .polaroidlayout:hover { | ||
+ | -webkit-transform: scale(1.25); | ||
+ | -moz-transform: scale(1.25); | ||
+ | position: relative; | ||
} | } | ||
Regel 76: | Regel 83: | ||
#navr { | #navr { | ||
horizontal-align:center; | horizontal-align:center; | ||
− | |||
width:100%; | width:100%; | ||
top: 0px; | top: 0px; | ||
− | background-color: rgba( | + | background-color: rgba(238, 238, 238, 1); |
− | height: | + | height: 6em; |
} | } | ||
#navr2 { | #navr2 { | ||
Regel 159: | Regel 165: | ||
#firstHeading { text-align: center; } | #firstHeading { text-align: center; } | ||
− | /** popups in mentions, de server had toch niets te doen. niemand doet een span in een a anyhow */ | + | /** popups in mentions, de server had toch niets te doen. niemand doet een span in een a anyhow, toch wel :) */ |
+ | |||
+ | .mentioneduser a { | ||
+ | position: relative; | ||
+ | } | ||
− | a span {display: none;} | + | .mentioneduser a span {display: none; z-index: 1000;} |
− | a:hover span { | + | .mentioneduser a:hover span { |
display: block; | display: block; | ||
− | position: absolute; top: | + | position: absolute; |
− | left: | + | top: 5px; |
− | width: | + | left: -50%; |
+ | width: 200px; | ||
padding: 5px; | padding: 5px; | ||
margin: 10px; | margin: 10px; | ||
− | z-index: | + | z-index: 1000; |
color: #AAA; | color: #AAA; | ||
− | background: | + | background: white; |
font: 10px Verdana, sans-serif; | font: 10px Verdana, sans-serif; | ||
− | text-align: | + | border: 1px solid silver; |
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .mentioneduser a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .3columns | ||
+ | { | ||
+ | -moz-column-count:3; | ||
+ | -moz-column-gap:20px; | ||
+ | -webkit-column-count:3; | ||
+ | -webkit-column-gap:20px; | ||
+ | column-count:3; | ||
+ | column-gap:20px; | ||
+ | } | ||
+ | |||
+ | table.subtle { | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | table.subtle td { | ||
+ | border: 1px solid #bbb; | ||
+ | padding: .1em .5em; | ||
+ | } | ||
+ | |||
+ | .activities_box { | ||
+ | font-size: 1.2em; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | vertical-align: top; | ||
+ | position: relative; | ||
+ | min-height: 200px; | ||
+ | margin: 8px; | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | width: 530px; | ||
+ | border: 1px solid gray; | ||
+ | background-color: #ffffff; | ||
+ | border-bottom-left-radius: 8px; | ||
+ | border-top-left-radius: 8px; | ||
+ | border-top-right-radius: 8px; | ||
+ | border-bottom-right-radius: 8px; | ||
+ | box-shadow: inset 0px 0px 189px -60px rgba(0,0,0,0.75); | ||
+ | } | ||
+ | |||
+ | /* Static Header. */ | ||
+ | #navr { | ||
+ | position: fixed; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | |||
+ | #mw_header { | ||
+ | position: fixed; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | |||
+ | #p-cactions{ | ||
+ | position: fixed; | ||
+ | height: 20px; | ||
+ | background-color: white; | ||
+ | border-bottom: 1px solid black; | ||
+ | width: 100%; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | |||
+ | /* Lower mw content a bit. */ | ||
+ | #mw_content { | ||
+ | margin: 1em 0 0 14em !important; | ||
+ | } | ||
+ | |||
+ | #p-personal { | ||
+ | position: fixed; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | |||
+ | #mw_portlets { | ||
+ | position: fixed; | ||
+ | overflow: scroll; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-attachment: fixed; | ||
+ | } | ||
+ | |||
+ | /* End Static Header */ | ||
+ | |||
+ | /* | ||
+ | Same header size as the front page... | ||
+ | */ | ||
+ | #mw_main { | ||
+ | margin-top: 7.5em !important; | ||
+ | } | ||
+ | |||
+ | #mw_header{ | ||
+ | margin-top: 1em !important; | ||
+ | } | ||
+ | |||
+ | #p-personal { | ||
+ | top: 6em !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Tegen afgeknipte tekst in de voorpagina-header, underline iets verder naarbeneden ook */ | ||
+ | h1 { | ||
+ | overflow: visible; | ||
+ | line-height: 1em; | ||
+ | } | ||
+ | |||
+ | |||
+ | #footer { | ||
+ | margin-left: 182px; | ||
+ | } | ||
+ | |||
+ | .bugblue { | ||
+ | filter: hue-rotate(144deg) !important; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes rotating /* Safari and Chrome */ { | ||
+ | from { | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | to { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | -o-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | @keyframes rotating { | ||
+ | from { | ||
+ | -ms-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | to { | ||
+ | -ms-transform: rotate(360deg); | ||
+ | -moz-transform: rotate(360deg); | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | -o-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | .rotating { | ||
+ | -webkit-animation: rotating 2s linear infinite; | ||
+ | -moz-animation: rotating 2s linear infinite; | ||
+ | -ms-animation: rotating 2s linear infinite; | ||
+ | -o-animation: rotating 2s linear infinite; | ||
+ | animation: rotating 2s linear infinite; | ||
} | } |
Huidige versie van 26 apr 2024 om 15:14
/** CSS die hier wordt geplaatst heeft invloed op alle skins */ @font-face { font-family: 'GoodDogRegular'; src: url('../../blog/wp-content/uploads/2012/02/GoodDog-webfont.eot'); src: url('../../blog/wp-content/uploads/2012/02/GoodDog-webfont.eot?#iefix') format('embedded-opentype'), url('../../blog/wp-content/uploads/2012/02/GoodDog-webfont.woff') format('woff'), url('../../blog/wp-content/uploads/2012/02/GoodDog-webfont.ttf') format('truetype'), url('../../blog/wp-content/uploads/2012/02/GoodDog-webfont.svg#GoodDogRegular') format('svg'); font-weight: normal; font-style: normal; } .polaroidfont { font-family: "GoodDogRegular", Georgia, serif; font-size: 25px; text-decoration:none; margin-bottom: 0px; padding-bottom:0px; margin-top: 0px; padding-top:0px;} .polaroidfont a:link { color: black; text-decoration: none; } .polaroidfont a:visited { color: black; text-decoration: none; } .polaroidfont a:hover { color: black; text-decoration: none; } .polaroidfont a:active { color: black; text-decoration: none; } .polaroidlayout { display:inline-block; margin: 2px; padding: 10px 10px 10px 10px; text-align:center; border: 1px inset gray; background-color: #ffffff; -moz-box-shadow: 0px 2px 6px 0px #333; -webkit-box-shadow: 0px 2px 6px 0px #333; box-shadow: 0px 2px 6px 0px #333; -webkit-transition: -webkit-transform .15s linear; } .polaroidlayout:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); position: relative; } .rotate2 {-webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); } .rotate5 {-webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } .rotate7 {-webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -o-transform: rotate(7deg); transform: rotate(7deg); } .rotate10 {-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } .rotate12 {-webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -ms-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } .rotate15 {-webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } .rotate20 {-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .rotate25 {-webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); } .rotate30 {-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .rotate35 {-webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } .rotate40 {-webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); } .rotate45 {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .rotate90 {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .rotate135 {-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .rotate180 {-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .rotate225 {-webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } .rotate270 {-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .rotate315 {-webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .rotate320 {-webkit-transform: rotate(320deg); -moz-transform: rotate(320deg); -ms-transform: rotate(320deg); -o-transform: rotate(320deg); transform: rotate(320deg); } .rotate325 {-webkit-transform: rotate(325deg); -moz-transform: rotate(325deg); -ms-transform: rotate(325deg); -o-transform: rotate(325deg); transform: rotate(325deg); } .rotate330 {-webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -ms-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); } .rotate335 {-webkit-transform: rotate(335deg); -moz-transform: rotate(335deg); -ms-transform: rotate(335deg); -o-transform: rotate(335deg); transform: rotate(335deg); } .rotate340 {-webkit-transform: rotate(340deg); -moz-transform: rotate(340deg); -ms-transform: rotate(340deg); -o-transform: rotate(340deg); transform: rotate(340deg); } .rotate345 {-webkit-transform: rotate(345deg); -moz-transform: rotate(345deg); -ms-transform: rotate(345deg); -o-transform: rotate(345deg); transform: rotate(345deg); } .rotate348 {-webkit-transform: rotate(348deg); -moz-transform: rotate(348deg); -ms-transform: rotate(348deg); -o-transform: rotate(348deg); transform: rotate(348deg); } .rotate350 {-webkit-transform: rotate(350deg); -moz-transform: rotate(350deg); -ms-transform: rotate(350deg); -o-transform: rotate(350deg); transform: rotate(350deg); } .rotate353 {-webkit-transform: rotate(353deg); -moz-transform: rotate(353deg); -ms-transform: rotate(353deg); -o-transform: rotate(353deg); transform: rotate(353deg); } .rotate355 {-webkit-transform: rotate(355deg); -moz-transform: rotate(355deg); -ms-transform: rotate(355deg); -o-transform: rotate(355deg); transform: rotate(355deg); } .rotate358 {-webkit-transform: rotate(358deg); -moz-transform: rotate(358deg); -ms-transform: rotate(358deg); -o-transform: rotate(358deg); transform: rotate(358deg); } .traanplaat { background-image: url(/mediawiki/skins/modern/wikiback3.jpg); background-repeat: repeat; } .traanplaatcartoon { background-image: url(/mediawiki/skins/modern/wikiback3.jpg); background-repeat: repeat; background-attachment:fixed; } .agenda { background-image: url(https://hack42.nl/mediawiki/images/4/40/Agenda-background.jpg); background-repeat: no-repeat; background-position: right bottom; } .iam50percent { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; } /** opgenomen voor blog menu emulatie */ /* Menu */ #navr { horizontal-align:center; width:100%; top: 0px; background-color: rgba(238, 238, 238, 1); height: 6em; } #navr2 { width: 950px; margin: 0 auto; position: relative; padding: 0px; top: -1px; } .menu { margin-left: 0px; margin-top: 1px; list-style: none; padding-bottom: 5px; font-weight: bold; font-family: arial, verdana, sans-serif; } .menu li { float: left; } .menu li a:link, .menu li a:visited { padding: 11px 10px 10px 10px; display: block; color: #777; text-decoration: none; text-transform: uppercase; font-size: 16px; margin-right: 5px; } .menu li li a:link, .menu li li a:visited { margin-right: 0; } .menu li.current_page_item a { color: #fff; background: #8282a1; } .menu li a:hover { color: #fff; background: #161650; } /* /Menu */ /* clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ .feeder { position: absolute; right: 0; top: 10px; font-size: 130%; } .feeder a:link, .feeder a:visited { background: url(https://hack42.nl/blog/wp-content/themes/yashfa/images/feed-icon.png) 0 0 no-repeat; padding-left: 18px; color: #FD6A11; font-family: arial, verdana, sans-serif; } /** /opgenomen voor blog menu emulatie */ #firstHeading { text-align: center; } /** popups in mentions, de server had toch niets te doen. niemand doet een span in een a anyhow, toch wel :) */ .mentioneduser a { position: relative; } .mentioneduser a span {display: none; z-index: 1000;} .mentioneduser a:hover span { display: block; position: absolute; top: 5px; left: -50%; width: 200px; padding: 5px; margin: 10px; z-index: 1000; color: #AAA; background: white; font: 10px Verdana, sans-serif; border: 1px solid silver; text-decoration: none; } .mentioneduser a:hover { text-decoration: none; } .3columns { -moz-column-count:3; -moz-column-gap:20px; -webkit-column-count:3; -webkit-column-gap:20px; column-count:3; column-gap:20px; } table.subtle { border-collapse: collapse; } table.subtle td { border: 1px solid #bbb; padding: .1em .5em; } .activities_box { font-size: 1.2em; display: inline-block; overflow: hidden; vertical-align: top; position: relative; min-height: 200px; margin: 8px; padding: 0px 0px 0px 0px; width: 530px; border: 1px solid gray; background-color: #ffffff; border-bottom-left-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; box-shadow: inset 0px 0px 189px -60px rgba(0,0,0,0.75); } /* Static Header. */ #navr { position: fixed; z-index: 500; } #mw_header { position: fixed; z-index: 500; } #p-cactions{ position: fixed; height: 20px; background-color: white; border-bottom: 1px solid black; width: 100%; z-index: 500; } /* Lower mw content a bit. */ #mw_content { margin: 1em 0 0 14em !important; } #p-personal { position: fixed; z-index: 500; } #mw_portlets { position: fixed; overflow: scroll; height: 100%; } body { background-attachment: fixed; } /* End Static Header */ /* Same header size as the front page... */ #mw_main { margin-top: 7.5em !important; } #mw_header{ margin-top: 1em !important; } #p-personal { top: 6em !important; } /* Tegen afgeknipte tekst in de voorpagina-header, underline iets verder naarbeneden ook */ h1 { overflow: visible; line-height: 1em; } #footer { margin-left: 182px; } .bugblue { filter: hue-rotate(144deg) !important; } @-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }