mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-01 11:27:14 -05:00
2c97238a7f
This patch makes iframe borders render identically in all supported browsers (i.e. no border). Although Chrome does not displays borders around iframes by default, Firefox and Edge (IE) had visible iframe borders prior to this patch. This is because, as [previously mentioned](https://github.com/codecombat/codecombat/pull/3122#discussion_r42338590), the DOM property was mistyped as `frameborder` when it should be `frameBorder`. As this is presentational issue, it feels more appropriate to fix it using CSS. Therefore, I've removed the buggy JS code and added a generic CSS solution to reset iframes' border styling.
395 lines
9.6 KiB
Sass
395 lines
9.6 KiB
Sass
@import "app/styles/bootstrap/variables"
|
||
@import "app/styles/mixins"
|
||
|
||
body
|
||
position: absolute !important
|
||
|
||
// https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important
|
||
.secret
|
||
display: none
|
||
|
||
h1, h2, h3, h4, h5, h6
|
||
font-variant: small-caps
|
||
|
||
a
|
||
cursor: pointer
|
||
|
||
iframe
|
||
border: none
|
||
|
||
.error
|
||
left: 8px
|
||
|
||
.selectable
|
||
cursor: pointer
|
||
|
||
.modal-dialog
|
||
padding: 5px
|
||
margin-top: 30px
|
||
margin-bottom: 0px
|
||
padding-top: 30px
|
||
.background-wrapper
|
||
background: url("/images/pages/base/modal_background.png")
|
||
background-size: 100% 100%
|
||
border: 0
|
||
@include box-shadow(0 0 0 #000)
|
||
//position: absolute
|
||
width: 99%
|
||
|
||
.background-wrapper.plain
|
||
background: white
|
||
|
||
.plain
|
||
h1, h2, h3, h4, h5, h6
|
||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
|
||
|
||
.modal-content
|
||
@include box-shadow(none)
|
||
|
||
.modal-header
|
||
margin: 0 14px
|
||
padding: 8px 0
|
||
border-bottom-color: #ccc
|
||
|
||
.close
|
||
font-size: 28px
|
||
padding: 15px
|
||
margin-right: -15px
|
||
margin-top: -15px
|
||
@include opacity(0.60)
|
||
&:hover
|
||
@include opacity(1)
|
||
|
||
.modal-footer
|
||
background-color: transparent
|
||
margin: 0 14px
|
||
border-bottom-color: #ccc
|
||
.modal-footer.linkedin
|
||
text-align: center
|
||
.signin-text
|
||
font-size: 15px
|
||
padding-bottom: 10px
|
||
.login-link
|
||
cursor: pointer
|
||
|
||
|
||
// loading screens for everything but the play view
|
||
.loading-screen
|
||
.progress
|
||
width: 50%
|
||
margin: 0 25%
|
||
margin-bottom: 20px
|
||
|
||
// all loading screens
|
||
.loading-container
|
||
text-align: center
|
||
.progress-bar
|
||
width: 0%
|
||
transition: width 0.1s ease
|
||
.errors .alert
|
||
padding: 5px
|
||
display: block
|
||
margin: 10px auto
|
||
.btn
|
||
margin-left: 10px
|
||
|
||
|
||
.modal
|
||
overflow-y: auto !important
|
||
.wait
|
||
h3
|
||
text-align: center
|
||
.progress
|
||
width: 50%
|
||
margin: 10px auto
|
||
.progress-bar
|
||
width: 100%
|
||
|
||
table.table
|
||
background-color: white
|
||
|
||
//.ui-autocomplete
|
||
// z-index: $zindexAutocomplete
|
||
|
||
.ui-slider
|
||
border: 1px solid black
|
||
.ui-slider-handle
|
||
border: 1px solid black !important
|
||
|
||
// Override jQuery UI widget images that we don't use
|
||
.ui-widget-content, .ui-widget-header, .ui-widget-overlay, .ui-widget-shadow
|
||
background-image: none
|
||
|
||
.ui-widget-content, .ui-state-default, .ui-widget-header
|
||
.ui-state-default, .ui-state-focus, .ui-state-active, .ui-state-highlight, .ui-state-error
|
||
background-image: none
|
||
|
||
// DOM highlight pointer arrow
|
||
|
||
.highlight-pointer
|
||
position: absolute
|
||
left: 0
|
||
top: 0
|
||
height: 100px
|
||
opacity: 0.0
|
||
pointer-events: none
|
||
z-index: 10
|
||
|
||
// Fonts
|
||
|
||
.header-font
|
||
font-family: $headings-font-family
|
||
font-variant: small-caps
|
||
|
||
body[lang='ja']
|
||
h1, h2, h3, h4, h5, h6
|
||
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||
font-variant: small-caps
|
||
letter-spacing: -1px !important
|
||
|
||
.header-font
|
||
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||
font-variant: small-caps
|
||
letter-spacing: -1px !important
|
||
|
||
#top-nav
|
||
.navbar-nav
|
||
li
|
||
a.header-font
|
||
font-size: 16px
|
||
|
||
@media only screen and (max-width: 800px)
|
||
.main-content-area
|
||
width: 100%
|
||
.content
|
||
width: 100%
|
||
|
||
.footer-link-text a
|
||
font-size: 17px
|
||
margin-left: 3px
|
||
margin-right: 3px
|
||
|
||
.share-buttons
|
||
margin-bottom: 20px
|
||
.partner-badges
|
||
display: none
|
||
|
||
// point the new glyphicons to the fonts in public
|
||
|
||
@font-face
|
||
font-family: 'Glyphicons Halflings'
|
||
src: url("/fonts/glyphicons-halflings-regular.eot")
|
||
src: url("/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/glyphicons-halflings-regular.woff") format("woff"), url("/fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
|
||
|
||
.spr:after
|
||
content: " "
|
||
.spl:before
|
||
content: " "
|
||
|
||
a[data-toggle="coco-modal"]
|
||
cursor: pointer
|
||
|
||
.achievement-corner
|
||
position: fixed
|
||
bottom: 0px
|
||
right: 0px
|
||
z-index: 1001
|
||
|
||
kbd
|
||
padding: 2px 4px
|
||
font-size: 90%
|
||
color: #fff
|
||
background-color: #333
|
||
border-radius: 3px
|
||
@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .25))
|
||
|
||
.gem
|
||
display: inline-block
|
||
background: transparent url(/images/common/gem.png) no-repeat center
|
||
background-size: contain
|
||
width: 80px
|
||
height: 80px
|
||
margin: 0px 2px
|
||
|
||
&.gem-20
|
||
width: 20px
|
||
height: 20px
|
||
|
||
&.gem-25
|
||
width: 25px
|
||
height: 25px
|
||
|
||
&.gem-30
|
||
width: 30px
|
||
height: 30px
|
||
|
||
&.gem-40
|
||
width: 40px
|
||
height: 40px
|
||
|
||
&.gem-60
|
||
width: 60px
|
||
height: 60px
|
||
|
||
.popover
|
||
border-style: solid
|
||
border-image: url(/images/level/popover_border_background.png) 16 12 fill stretch
|
||
border-width: 16px 12px
|
||
.arrow
|
||
display: none
|
||
.btn
|
||
font-size: 20px
|
||
width: 100%
|
||
|
||
.btn.btn-illustrated
|
||
background: 0
|
||
border: 0
|
||
border-radius: 0
|
||
@include box-shadow(none)
|
||
border-style: solid
|
||
border-image: url(/images/common/button-background-active-border.png) 14 20 20 20 fill round
|
||
border-width: 7px 10px 10px 10px
|
||
padding: 0
|
||
font-family: $headings-font-family
|
||
text-transform: uppercase
|
||
font-weight: bold
|
||
color: rgb(248, 197, 146)
|
||
|
||
&.btn-lg
|
||
border-width: 14px 20px 20px 20px
|
||
height: 60px
|
||
line-height: 34px
|
||
|
||
&.btn-primary
|
||
border-image-source: url(/images/common/button-background-primary-active-border.png)
|
||
&.btn-success
|
||
border-image-source: url(/images/common/button-background-success-active-border.png)
|
||
color: darken(white, 5%)
|
||
&.btn-warning
|
||
border-image-source: url(/images/common/button-background-warning-active-border.png)
|
||
color: darken(white, 5%)
|
||
&.btn-danger
|
||
border-image-source: url(/images/common/button-background-danger-active-border.png)
|
||
|
||
&:hover
|
||
color: lighten(rgb(248, 197, 146), 5%)
|
||
&.btn-success
|
||
color: white
|
||
&.btn-warning
|
||
color: white
|
||
|
||
&:active
|
||
&.btn-lg
|
||
border-image-source: url(/images/common/button-background-pressed-border.png)
|
||
&:not(.btn-lg)
|
||
border-image: url(/images/common/button-background-pressed-border.png) 14 16 16 20 fill round
|
||
padding: 2px 0 0 2px
|
||
border-width: 7px 8px 8px 10px
|
||
|
||
&.btn-primary
|
||
border-image-source: url(/images/common/button-background-primary-pressed-border.png)
|
||
&.btn-success
|
||
border-image-source: url(/images/common/button-background-success-pressed-border.png)
|
||
&.btn-warning
|
||
border-image-source: url(/images/common/button-background-warning-pressed-border.png)
|
||
&.btn-danger
|
||
border-image-source: url(/images/common/button-background-danger-pressed-border.png)
|
||
|
||
&.disabled, &:disabled
|
||
border-image: url(/images/common/button-background-disabled-border.png) 14 20 20 20 fill round
|
||
@include opacity(1)
|
||
|
||
&.btn-primary
|
||
border-image-source: url(/images/common/button-background-primary-disabled-border.png)
|
||
&.btn-success
|
||
border-image-source: url(/images/common/button-background-success-inactive-border.png)
|
||
&.btn-warning
|
||
border-image-source: url(/images/common/button-background-warning-disabled-border.png)
|
||
&.btn-danger
|
||
border-image-source: url(/images/common/button-background-danger-disabled-border.png)
|
||
|
||
> *
|
||
@include opacity(0.5)
|
||
|
||
> *
|
||
@include opacity(0.75)
|
||
|
||
&:hover > *
|
||
@include opacity(1)
|
||
|
||
|
||
html.no-borderimage
|
||
.popover
|
||
border: 0
|
||
background: transparent url(/images/level/popover_background.png)
|
||
background-size: 100% 100%
|
||
padding: 10px 20px
|
||
|
||
.btn.btn-illustrated
|
||
border: 0
|
||
background-image: url(/images/common/button-background-active.png)
|
||
background-size: 100% 100%
|
||
padding: 7px 10px 10px 10px
|
||
|
||
&.btn-primary
|
||
background-image: url(/images/common/button-background-primary-active.png)
|
||
&.btn-success
|
||
background-image: url(/images/common/button-background-success-active.png)
|
||
&.btn-warning
|
||
background-image: url(/images/common/button-background-warning-active.png)
|
||
&.btn-danger
|
||
background-image: url(/images/common/button-background-danger-active.png)
|
||
|
||
&:active
|
||
background-image: url(/images/common/button-background-pressed.png)
|
||
padding: 9px 8px 8px 12px
|
||
border: 0
|
||
|
||
&.btn-primary
|
||
background-image: url(/images/common/button-background-primary-pressed.png)
|
||
&.btn-success
|
||
background-image: url(/images/common/button-background-success-pressed.png)
|
||
&.btn-warning
|
||
background-image: url(/images/common/button-background-warning-pressed.png)
|
||
&.btn-danger
|
||
background-image: url(/images/common/button-background-danger-pressed.png)
|
||
|
||
&.disabled, &:disabled
|
||
background-image: url(/images/common/button-background-disabled.png)
|
||
|
||
&.btn-primary
|
||
background-image: url(/images/common/button-background-primary-disabled.png)
|
||
&.btn-success
|
||
background-image: url(/images/common/button-background-success-inactive.png)
|
||
&.btn-warning
|
||
background-image: url(/images/common/button-background-warning-disabled.png)
|
||
&.btn-danger
|
||
background-image: url(/images/common/button-background-danger-disabled.png)
|
||
|
||
|
||
body > iframe[src^="https://apis.google.com"]
|
||
display: none
|
||
|
||
#module-load-progress
|
||
position: absolute
|
||
top: 0
|
||
left: 0
|
||
right: 0
|
||
height: 5px
|
||
z-index: 1
|
||
transition: 1s
|
||
|
||
.progress-bar
|
||
background-color: lightblue
|
||
|
||
.treema-node input[type='checkbox']
|
||
@include scale(1.25)
|
||
width: auto
|
||
margin: 8px 15px 8px 15px
|
||
|
||
.particle-man
|
||
position: absolute
|
||
z-index: 100
|
||
top: 0
|
||
left: 0
|
||
pointer-events: none
|