틀:PluginX/setup.css: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
백괴게임>Bd3076 (새 문서: #px-box { width: 380px; margin: auto; padding: 0px; border: none; box-shadow: 7px 7px 4px grey; } #px-info { font-weight: bold; background-color: rgb(127, 219, 207);...) |
>BANIP (BANIP님이 틀:PluginX/setup.css 문서의 콘텐츠 모델을 "위키텍스트"에서 "CSS"(으)로 바꾸었습니다) |
||
(사용자 4명의 중간 판 24개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
.pluginx-script-wrapper{ | |||
display:none; | |||
} | } | ||
# | |||
.pluginx-popup-wrapper { | |||
--var--header-bg-color: hsl(238 20% 30%); | |||
display: none; | |||
position: fixed; | |||
z-index: 9999; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
} | |||
/* .pluginx-popup-wrapper 하위요소 스크롤바 지정 */ | |||
.pluginx-popup-wrapper *::-webkit-scrollbar { | |||
width: 4px; | |||
height: 4px; | |||
background-color: #fff; | |||
} | |||
.pluginx-popup-wrapper *::-webkit-scrollbar-thumb { | |||
background-color: var(--var--header-bg-color); | |||
border-radius: 4px; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup { | |||
position: absolute; | |||
overflow: hidden; | |||
transform: translate(-50%, -50%); | |||
top: 50%; | |||
left: 50%; | |||
width: calc(100% - 16px); | |||
height: 80%; | |||
max-width: 800px; | |||
background-color: white; | |||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | |||
display: grid; | |||
grid-template-rows: 40px 1fr 40px; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-header { | |||
height: 40px; | |||
background-color: var(--var--header-bg-color); | |||
border-bottom: 1px solid #ddd; | |||
color:#fff; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-title { | |||
float: left; | |||
padding: 10px; | |||
font-size: 20px; | |||
font-weight: bold; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-content-wrapper { | |||
overflow: auto; | |||
background: #edf6fc; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-content { | |||
display: none; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-code { | |||
padding: 10px; | |||
font-size: 14px; | |||
font-family: monospace; | |||
white-space: pre; | |||
overflow: auto; | |||
background: #f4f6fe; | |||
color: #003399; | |||
max-height: 16rem; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-summary { | |||
padding: 10px; | |||
font-size: 14px; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-summary .severity{ | |||
font-weight: bold; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-summary .severity.safe{ | |||
color: #009900; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-summary .severity.warning{ | |||
color: #ff9900; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-summary .severity.danger{ | |||
color: #ff0000; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-footer { | |||
border-top: 1px solid #ddd; | |||
display: flex; | |||
position: relative; | |||
align-items: center; | |||
justify-content: space-around; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-footer > .pluginx-btn { | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
cursor: pointer; | |||
transition: background 0.2s; | |||
background: #fff; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-footer > .pluginx-btn:hover { | |||
background: #eee; | |||
} | |||
.pluginx-popup-wrapper .pluginx-popup-footer > .pluginx-btn:nth-child(1) { | |||
border-right: 1px solid #ddd; | |||
} | |||
.pluginx-popup-wrapper .pluginx-trust-check-wrapper { | |||
position: absolute; | |||
right: 0; | |||
background: #fff; | |||
border: 1px solid rgb(221, 221, 221); | |||
padding: 4px; | |||
transform: translateY(-100%); | |||
} | } |
2023년 8월 28일 (월) 17:43 기준 최신판
.pluginx-script-wrapper{
display:none;
}
.pluginx-popup-wrapper {
--var--header-bg-color: hsl(238 20% 30%);
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/* .pluginx-popup-wrapper 하위요소 스크롤바 지정 */
.pluginx-popup-wrapper *::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #fff;
}
.pluginx-popup-wrapper *::-webkit-scrollbar-thumb {
background-color: var(--var--header-bg-color);
border-radius: 4px;
}
.pluginx-popup-wrapper .pluginx-popup {
position: absolute;
overflow: hidden;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: calc(100% - 16px);
height: 80%;
max-width: 800px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: grid;
grid-template-rows: 40px 1fr 40px;
}
.pluginx-popup-wrapper .pluginx-popup-header {
height: 40px;
background-color: var(--var--header-bg-color);
border-bottom: 1px solid #ddd;
color:#fff;
}
.pluginx-popup-wrapper .pluginx-popup-title {
float: left;
padding: 10px;
font-size: 20px;
font-weight: bold;
}
.pluginx-popup-wrapper .pluginx-popup-content-wrapper {
overflow: auto;
background: #edf6fc;
}
.pluginx-popup-wrapper .pluginx-popup-content {
display: none;
}
.pluginx-popup-wrapper .pluginx-popup-code {
padding: 10px;
font-size: 14px;
font-family: monospace;
white-space: pre;
overflow: auto;
background: #f4f6fe;
color: #003399;
max-height: 16rem;
}
.pluginx-popup-wrapper .pluginx-popup-summary {
padding: 10px;
font-size: 14px;
}
.pluginx-popup-wrapper .pluginx-popup-summary .severity{
font-weight: bold;
}
.pluginx-popup-wrapper .pluginx-popup-summary .severity.safe{
color: #009900;
}
.pluginx-popup-wrapper .pluginx-popup-summary .severity.warning{
color: #ff9900;
}
.pluginx-popup-wrapper .pluginx-popup-summary .severity.danger{
color: #ff0000;
}
.pluginx-popup-wrapper .pluginx-popup-footer {
border-top: 1px solid #ddd;
display: flex;
position: relative;
align-items: center;
justify-content: space-around;
}
.pluginx-popup-wrapper .pluginx-popup-footer > .pluginx-btn {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background 0.2s;
background: #fff;
}
.pluginx-popup-wrapper .pluginx-popup-footer > .pluginx-btn:hover {
background: #eee;
}
.pluginx-popup-wrapper .pluginx-popup-footer > .pluginx-btn:nth-child(1) {
border-right: 1px solid #ddd;
}
.pluginx-popup-wrapper .pluginx-trust-check-wrapper {
position: absolute;
right: 0;
background: #fff;
border: 1px solid rgb(221, 221, 221);
padding: 4px;
transform: translateY(-100%);
}