(새 문서: →See [[mw:Reference Tooltips]]: .referencetooltip { position: absolute; list-style: none; list-style-image: none; opacity: 0; font-size:...) |
잔글 |
||
(사용자 2명의 중간 판 6개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
− | /* | + | /* Drawer css start */ |
− | + | .mode-drawer #reference-drawer { | |
− | . | + | position: fixed; |
− | + | bottom: 0; | |
− | + | left: 0; | |
− | + | right: 0; | |
− | + | -webkit-transition: -webkit-transform .25s, opacity .25s, visibility 0s .25s; | |
− | + | -ms-transition: -ms-transform .25s, opacity .25s, visibility 0s .25s; | |
− | + | transition: transform .25s, opacity .25s, visibility 0s .25s; | |
− | + | -webkit-transform: translate(0,100px); | |
− | + | -ms-transform: translate(0,100px); | |
+ | transform: translate(0,100px); | ||
+ | border: 1px solid #e1e8ed; | ||
+ | z-index: 10000; | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | box-shadow: 0 -2px 5px rgba(0, 0, 0, .4); | ||
} | } | ||
− | . | + | |
− | + | .mode-drawer #reference-drawer.visible { | |
− | + | -webkit-transition: -webkit-transform .25s, opacity .25s; | |
− | + | -ms-transition: -ms-transform .25s, opacity .25s; | |
− | + | transition: transform .25s, opacity .25s; | |
− | + | -webkit-transform: translate(0,0); | |
− | + | -ms-transform: translate(0,0); | |
− | + | transform: translate(0,0); | |
− | + | opacity: 1; | |
+ | visibility: visible; | ||
} | } | ||
− | . | + | |
− | + | .mode-drawer #reference-drawer .settings-icon { | |
− | + | display: none; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | /* Drawer css end */ |
− | + | ||
− | + | /* Tooltip css */ | |
− | + | .mode-tooltip #reference-drawer { | |
− | + | position: absolute; | |
− | + | display: none; | |
− | + | opacity: 0; | |
− | + | font-size : 0.9em; | |
− | + | max-width: 300px; | |
− | + | border-radius: 4px; | |
− | + | box-shadow: 0 0 12px rgba(0,0,0,.375); | |
+ | z-index: 10000; | ||
} | } | ||
− | . | + | |
− | + | .mode-tooltip #reference-drawer .close-icon { | |
− | + | display: none; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | ||
− | + | /* common css */ | |
+ | #reference-drawer { | ||
+ | padding: 10px 15px; | ||
+ | background: #fcfcfc; | ||
} | } | ||
− | + | ||
− | + | #reference-origin { | |
− | + | padding-right: 8px; | |
− | |||
− | |||
} | } | ||
− | + | ||
− | + | #reference-settings { | |
− | + | position: fixed; | |
− | + | top: 50%; | |
− | + | left: 50%; | |
+ | width: 300px; | ||
+ | height: 200px; | ||
+ | margin-top: -100px; | ||
+ | margin-left: -150px; | ||
+ | padding: 10px; | ||
+ | background: white; | ||
+ | box-shadow: 0 0 6px gray; | ||
+ | z-index: 1003; | ||
} | } | ||
− | . | + | |
− | + | #reference-settings .content { | |
− | + | height: 150px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | #reference-settings .content label > input { | |
− | + | margin-right: 4px; | |
} | } | ||
− | . | + | |
− | + | #reference-settings .foot { | |
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | #reference-settings .foot input { | ||
+ | margin-left: 4px; | ||
+ | } | ||
+ | |||
+ | #reference-drawer .settings-icon { | ||
+ | margin: -5px -8px 0 5px; | ||
+ | float: right; | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | background: url(//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Cog%2C_Web_Fundamentals.svg/14px-Cog%2C_Web_Fundamentals.svg.png); | ||
+ | pointer: cursor; | ||
+ | } | ||
+ | |||
+ | #reference-drawer .close-icon { | ||
+ | float: right; | ||
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | background: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/24px-VisualEditor_-_Icon_-_Close.svg.png); | ||
+ | background-position: -4px -4px; | ||
} | } |
2020년 3월 18일 (수) 23:53 기준 최신판
/* Drawer css start */
.mode-drawer #reference-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: -webkit-transform .25s, opacity .25s, visibility 0s .25s;
-ms-transition: -ms-transform .25s, opacity .25s, visibility 0s .25s;
transition: transform .25s, opacity .25s, visibility 0s .25s;
-webkit-transform: translate(0,100px);
-ms-transform: translate(0,100px);
transform: translate(0,100px);
border: 1px solid #e1e8ed;
z-index: 10000;
opacity: 0;
visibility: hidden;
box-shadow: 0 -2px 5px rgba(0, 0, 0, .4);
}
.mode-drawer #reference-drawer.visible {
-webkit-transition: -webkit-transform .25s, opacity .25s;
-ms-transition: -ms-transform .25s, opacity .25s;
transition: transform .25s, opacity .25s;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
opacity: 1;
visibility: visible;
}
.mode-drawer #reference-drawer .settings-icon {
display: none;
}
/* Drawer css end */
/* Tooltip css */
.mode-tooltip #reference-drawer {
position: absolute;
display: none;
opacity: 0;
font-size : 0.9em;
max-width: 300px;
border-radius: 4px;
box-shadow: 0 0 12px rgba(0,0,0,.375);
z-index: 10000;
}
.mode-tooltip #reference-drawer .close-icon {
display: none;
}
/* common css */
- reference-drawer {
padding: 10px 15px;
background: #fcfcfc;
}
- reference-origin {
padding-right: 8px;
}
- reference-settings {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -150px;
padding: 10px;
background: white;
box-shadow: 0 0 6px gray;
z-index: 1003;
}
- reference-settings .content {
height: 150px;
}
- reference-settings .content label > input {
margin-right: 4px;
}
- reference-settings .foot {
text-align: right;
}
- reference-settings .foot input {
margin-left: 4px;
}
- reference-drawer .settings-icon {
margin: -5px -8px 0 5px;
float: right;
width: 14px;
height: 14px;
background: url(//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Cog%2C_Web_Fundamentals.svg/14px-Cog%2C_Web_Fundamentals.svg.png);
pointer: cursor;
}
- reference-drawer .close-icon {
float: right;
width: 16px;
height: 16px;
background: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/24px-VisualEditor_-_Icon_-_Close.svg.png);
background-position: -4px -4px;
}