틀:PluginX/setup.css: 두 판 사이의 차이
imported>Regurus 잔글 (Regurus의 편집을 [[특수:기여/imported>Bd3076|imported>Bd3076]]의 마지막 판으로 되돌림) |
>BANIP (PluginX 버전업) |
||
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; | |||
} | |||
.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년 7월 9일 (일) 23:20 판
.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; }
.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%); }