MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(Created page with "→CSS placed here will be applied to all skins: .iphone { width: 360px; height: 756px; background: #f9f7f9; border: 5px solid #c1bfc1; border-radius: 45px; opacity: 0.8; } .highlight { width: 352px; height: 748px; border: 3px solid #fff; border-radius: 45px; position: relative; z-index: 10; top: -1485px; left: 6px; } .circle { width: 11px; height: 11px; background: #333; border-radius: 50%; position: relative; top: -745px;...") |
No edit summary |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
. | .phone { | ||
position: relative; | |||
width: 360px; | |||
height: 640px; | |||
margin: auto; | |||
border: 16px rgb(75, 75, 75) solid; | |||
border-top-width: 60px; | |||
} | border-bottom-width: 60px; | ||
border-radius: 36px; | |||
} | |||
. | .phone:before { | ||
content: ''; | |||
display: block; | |||
width: 60px; | |||
height: 5px; | |||
position: absolute; | |||
top: -30px; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
} | background: #333; | ||
border-radius: 10px; | |||
} | |||
. | .phone:after { | ||
content: ''; | |||
display: block; | |||
width: 35px; | |||
height: 35px; | |||
position: absolute; | |||
left: 50%; | |||
bottom: -65px; | |||
} | transform: translate(-50%, -50%); | ||
background: #333; | |||
border-radius: 50%; | |||
} | |||
. | .phone .content { | ||
width: 360px; | |||
height: 640px; | |||
background: white; | |||
} | |||
. | |||
} |
Revision as of 19:43, 29 June 2023
/* CSS placed here will be applied to all skins */
.phone {
position: relative;
width: 360px;
height: 640px;
margin: auto;
border: 16px rgb(75, 75, 75) solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
.phone:before {
content: '';
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 10px;
}
.phone:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
}
.phone .content {
width: 360px;
height: 640px;
background: white;
}