b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
155 lines
2.6 KiB
CSS
Executable file
155 lines
2.6 KiB
CSS
Executable file
/* ----------------------------------
|
|
* Confirm
|
|
* ---------------------------------- */
|
|
|
|
/* Main dialog setup */
|
|
gaia-confirm {
|
|
background: #2d2d2d;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding-bottom: 7rem;
|
|
font-size: 0;
|
|
text-align: start;
|
|
/* Using font-size: 0; we avoid the unwanted visual space (about 3px)
|
|
created by white-spaces and break lines in the code betewen inline-block elements */
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
transition: transform ease-in-out 0.3s, visibility 0.3s;
|
|
/**
|
|
magic number ideally to place confirm dialogs on top.
|
|
*/
|
|
z-index: 2147483646;
|
|
}
|
|
|
|
gaia-confirm[hidden] {
|
|
transform: translateY(100%);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.confirm section {
|
|
height: 100%;
|
|
font-weight: 300;
|
|
font-size: 2.2rem;
|
|
color: #FAFAFA;
|
|
padding: 0 1.5rem;
|
|
box-sizing: padding-box;
|
|
width: 100%;
|
|
display: inline-block;
|
|
max-height: 100%;
|
|
vertical-align: middle;
|
|
white-space: normal;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 1.6rem;
|
|
line-height: 1.5em;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 1rem 1.5rem 0;
|
|
overflow: hidden;
|
|
max-height: 7rem;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Specific component code */
|
|
p {
|
|
word-wrap: break-word;
|
|
margin: 1rem 0 0;
|
|
padding: 1rem 1.5rem;
|
|
border-top: 0.1rem solid #686868;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
p img {
|
|
margin-inline-end: 2rem;
|
|
}
|
|
p img:-moz-dir(ltr) { float: left; }
|
|
p img:-moz-dir(rtl) { float: right; }
|
|
|
|
p strong {
|
|
font-weight: 300;
|
|
}
|
|
|
|
p small {
|
|
font-size: 1.4rem;
|
|
font-weight: normal;
|
|
color: #cbcbcb;
|
|
display: block;
|
|
}
|
|
|
|
dl {
|
|
border-top: 0.1rem solid #686868;
|
|
margin: 1rem 0 0;
|
|
overflow: hidden;
|
|
padding-top: 1rem;
|
|
font-size: 1.6rem;
|
|
line-height: 2.2rem;
|
|
}
|
|
|
|
dl > dt {
|
|
clear: both;
|
|
width: 7rem;
|
|
padding-inline-start: 1.5rem;
|
|
font-weight: 500;
|
|
text-align: start;
|
|
}
|
|
dl > dt:-moz-dir(ltr) { float: left; }
|
|
dl > dt:-moz-dir(rtl) { float: right; }
|
|
|
|
dl > dd {
|
|
padding-inline-end: 1.5rem;
|
|
font-weight: 300;
|
|
text-overflow: ellipsis;
|
|
vertical-align: top;
|
|
overflow: hidden;
|
|
}
|
|
|
|
figure {
|
|
margin: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
figure img {
|
|
padding-inline-end: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
figure figcaption {
|
|
font-size: 2.1rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 2rem 1.5rem;
|
|
border-top: 0.1rem solid #686868;
|
|
list-style: none;
|
|
font-size: 1.6rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul li {
|
|
word-wrap: break-word;
|
|
line-height: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
ul li:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
ul li ul {
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|