R11/toolcss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

T259 Added modal stylesheet

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-16 17:01:24 +02:00
parent 368658e2d6
commit 332c6ce179
2 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common.css
View File

@@ -4,5 +4,5 @@
@import url('css/r11tables.css'); @import url('css/r11tables.css');
@import url('css/r11tool.css'); @import url('css/r11tool.css');
@import url('css/r11tooltip.css'); @import url('css/r11tooltip.css');
@import url('css/r11modal.css');

104
css/r11modal.css Normal file
View File

@@ -0,0 +1,104 @@
#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
background: rgba(0, 0 , 0, 0.5);
pointer-events: none;
}
#overlay.active {
pointer-events: all;
opacity: 1;
}
.modal {
display: none;
width: 390px;
min-height: 71px;
max-height: 700px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 5px;
border: 1px solid #f0f0f0;
}
.modal.active {
display: block;
}
.modal div.header {
width: 384px;
height: 24px;
background: #2e3133;
color: white;
font-size: 24px;
font-weight: 700;
padding: 3px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal div.header button {
font-size: 100%;
font-family: inherit;
border: 0;
padding: 0;
background: 0;
color: inherit;
cursor: pointer;
}
.modal div.header button:hover {
color: white;
font-weight: 700;
}
.modal div.body {
width: 370px;
padding: 10px;
background: #f0f0f0;
color: #2e3133;
min-height: 16px;
text-align: justify;
font-size: 16px;
}
.modal div.function {
width: 385px;
min-height: 30px;
padding-top: 5px;
display: flex;
justify-content: space-evenly;
background: inherit;
}
.modal div.function button {
min-height: 22px;
min-width: 34px;
max-width: 74px;
padding: 3px 20px;
outline: none;
border: 1px solid #f0f0f0;
background: rgba(205,205,205,1);
font-size: 16px;
text-align: center;
cursor: pointer;
}
.modal div.function button:hover {
filter: brightness(110%);
}
.r-exclamation:before {
content: '!';
color: #3bc4f1;
font-style: normal;
}