fix css conflict

This commit is contained in:
Hakim El Hattab 2018-08-21 09:27:55 +02:00
parent 4b1866b040
commit 7dbf519104
2 changed files with 48 additions and 48 deletions

View file

@ -1294,9 +1294,9 @@ body {
transition-duration: 1200ms; } transition-duration: 1200ms; }
/********************************************* /*********************************************
* LINK PREVIEW OVERLAY * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/ *********************************************/
.reveal .overlay { .reveal > .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1308,11 +1308,11 @@ body {
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; } transition: all 0.3s ease; }
.reveal .overlay.visible { .reveal > .overlay.visible {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .overlay .spinner { .reveal > .overlay .spinner {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 50%;
@ -1326,7 +1326,7 @@ body {
opacity: 0.6; opacity: 0.6;
transition: all 0.3s ease; } transition: all 0.3s ease; }
.reveal .overlay header { .reveal > .overlay header {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -1335,7 +1335,7 @@ body {
z-index: 2; z-index: 2;
border-bottom: 1px solid #222; } border-bottom: 1px solid #222; }
.reveal .overlay header a { .reveal > .overlay header a {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -1345,10 +1345,10 @@ body {
opacity: 0.6; opacity: 0.6;
box-sizing: border-box; } box-sizing: border-box; }
.reveal .overlay header a:hover { .reveal > .overlay header a:hover {
opacity: 1; } opacity: 1; }
.reveal .overlay header a .icon { .reveal > .overlay header a .icon {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -1356,13 +1356,13 @@ body {
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; } background-repeat: no-repeat; }
.reveal .overlay header a.close .icon { .reveal > .overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); } background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }
.reveal .overlay header a.external .icon { .reveal > .overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); } background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }
.reveal .overlay .viewport { .reveal > .overlay .viewport {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -1372,7 +1372,7 @@ body {
bottom: 0; bottom: 0;
left: 0; } left: 0; }
.reveal .overlay.overlay-preview .viewport iframe { .reveal > .overlay.overlay-preview .viewport iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
@ -1382,11 +1382,11 @@ body {
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; } transition: all 0.3s ease; }
.reveal .overlay.overlay-preview.loaded .viewport iframe { .reveal > .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .overlay.overlay-preview.loaded .viewport-inner { .reveal > .overlay.overlay-preview.loaded .viewport-inner {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 0; left: 0;
@ -1395,46 +1395,46 @@ body {
text-align: center; text-align: center;
letter-spacing: normal; } letter-spacing: normal; }
.reveal .overlay.overlay-preview .x-frame-error { .reveal > .overlay.overlay-preview .x-frame-error {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease 0.3s; } transition: opacity 0.3s ease 0.3s; }
.reveal .overlay.overlay-preview.loaded .x-frame-error { .reveal > .overlay.overlay-preview.loaded .x-frame-error {
opacity: 1; } opacity: 1; }
.reveal .overlay.overlay-preview.loaded .spinner { .reveal > .overlay.overlay-preview.loaded .spinner {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
-webkit-transform: scale(0.2); -webkit-transform: scale(0.2);
transform: scale(0.2); } transform: scale(0.2); }
.reveal .overlay.overlay-help .viewport { .reveal > .overlay.overlay-help .viewport {
overflow: auto; overflow: auto;
color: #fff; } color: #fff; }
.reveal .overlay.overlay-help .viewport .viewport-inner { .reveal > .overlay.overlay-help .viewport .viewport-inner {
width: 600px; width: 600px;
margin: auto; margin: auto;
padding: 20px 20px 80px 20px; padding: 20px 20px 80px 20px;
text-align: center; text-align: center;
letter-spacing: normal; } letter-spacing: normal; }
.reveal .overlay.overlay-help .viewport .viewport-inner .title { .reveal > .overlay.overlay-help .viewport .viewport-inner .title {
font-size: 20px; } font-size: 20px; }
.reveal .overlay.overlay-help .viewport .viewport-inner table { .reveal > .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff; border: 1px solid #fff;
border-collapse: collapse; border-collapse: collapse;
font-size: 16px; } font-size: 16px; }
.reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal > .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td { .reveal > .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px; width: 200px;
padding: 14px; padding: 14px;
border: 1px solid #fff; border: 1px solid #fff;
vertical-align: middle; } vertical-align: middle; }
.reveal .overlay.overlay-help .viewport .viewport-inner table th { .reveal > .overlay.overlay-help .viewport .viewport-inner table th {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; } padding-bottom: 20px; }

View file

@ -1416,10 +1416,10 @@ $controlsArrowAngleActive: 36deg;
/********************************************* /*********************************************
* LINK PREVIEW OVERLAY * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/ *********************************************/
.reveal .overlay { .reveal > .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1431,12 +1431,12 @@ $controlsArrowAngleActive: 36deg;
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay.visible { .reveal > .overlay.visible {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.reveal .overlay .spinner { .reveal > .overlay .spinner {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 50%;
@ -1452,7 +1452,7 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay header { .reveal > .overlay header {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -1461,7 +1461,7 @@ $controlsArrowAngleActive: 36deg;
z-index: 2; z-index: 2;
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
} }
.reveal .overlay header a { .reveal > .overlay header a {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -1472,10 +1472,10 @@ $controlsArrowAngleActive: 36deg;
box-sizing: border-box; box-sizing: border-box;
} }
.reveal .overlay header a:hover { .reveal > .overlay header a:hover {
opacity: 1; opacity: 1;
} }
.reveal .overlay header a .icon { .reveal > .overlay header a .icon {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -1484,14 +1484,14 @@ $controlsArrowAngleActive: 36deg;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.reveal .overlay header a.close .icon { .reveal > .overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
} }
.reveal .overlay header a.external .icon { .reveal > .overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
} }
.reveal .overlay .viewport { .reveal > .overlay .viewport {
position: absolute; position: absolute;
display: flex; display: flex;
top: 40px; top: 40px;
@ -1500,7 +1500,7 @@ $controlsArrowAngleActive: 36deg;
left: 0; left: 0;
} }
.reveal .overlay.overlay-preview .viewport iframe { .reveal > .overlay.overlay-preview .viewport iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
@ -1512,12 +1512,12 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay.overlay-preview.loaded .viewport iframe { .reveal > .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.reveal .overlay.overlay-preview.loaded .viewport-inner { .reveal > .overlay.overlay-preview.loaded .viewport-inner {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 0; left: 0;
@ -1526,26 +1526,26 @@ $controlsArrowAngleActive: 36deg;
text-align: center; text-align: center;
letter-spacing: normal; letter-spacing: normal;
} }
.reveal .overlay.overlay-preview .x-frame-error { .reveal > .overlay.overlay-preview .x-frame-error {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease 0.3s; transition: opacity 0.3s ease 0.3s;
} }
.reveal .overlay.overlay-preview.loaded .x-frame-error { .reveal > .overlay.overlay-preview.loaded .x-frame-error {
opacity: 1; opacity: 1;
} }
.reveal .overlay.overlay-preview.loaded .spinner { .reveal > .overlay.overlay-preview.loaded .spinner {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: scale(0.2); transform: scale(0.2);
} }
.reveal .overlay.overlay-help .viewport { .reveal > .overlay.overlay-help .viewport {
overflow: auto; overflow: auto;
color: #fff; color: #fff;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner { .reveal > .overlay.overlay-help .viewport .viewport-inner {
width: 600px; width: 600px;
margin: auto; margin: auto;
padding: 20px 20px 80px 20px; padding: 20px 20px 80px 20px;
@ -1553,25 +1553,25 @@ $controlsArrowAngleActive: 36deg;
letter-spacing: normal; letter-spacing: normal;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner .title { .reveal > .overlay.overlay-help .viewport .viewport-inner .title {
font-size: 20px; font-size: 20px;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner table { .reveal > .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff; border: 1px solid #fff;
border-collapse: collapse; border-collapse: collapse;
font-size: 16px; font-size: 16px;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal > .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td { .reveal > .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px; width: 200px;
padding: 14px; padding: 14px;
border: 1px solid #fff; border: 1px solid #fff;
vertical-align: middle; vertical-align: middle;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner table th { .reveal > .overlay.overlay-help .viewport .viewport-inner table th {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }