mirror of https://github.com/mosra/magnum.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
6.4 KiB
211 lines
6.4 KiB
/* |
|
This file is part of Magnum. |
|
|
|
Copyright © 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, |
|
2020 Vladimír Vondruš <mosra@centrum.cz> |
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a |
|
copy of this software and associated documentation files (the "Software"), |
|
to deal in the Software without restriction, including without limitation |
|
the rights to use, copy, modify, merge, publish, distribute, sublicense, |
|
and/or sell copies of the Software, and to permit persons to whom the |
|
Software is furnished to do so, subject to the following conditions: |
|
|
|
The above copyright notice and this permission notice shall be included |
|
in all copies or substantial portions of the Software. |
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL |
|
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER |
|
DEALINGS IN THE SOFTWARE. |
|
*/ |
|
|
|
/* Colors kept in sync with m.css dark theme, https://mcss.mosra.cz */ |
|
|
|
*, ::before, ::after { box-sizing: border-box; } |
|
|
|
body { |
|
margin: 1rem; |
|
padding: 0; |
|
font-family: sans-serif; |
|
font-size: 16px; |
|
background-color: #2f363f; /*var(--background-color)*/ |
|
color: #dcdcdc; /*var(--color)*/ |
|
} |
|
|
|
/* .mn-container makes the canvas occupy the whole page width |
|
.mn-sizer centers it |
|
.mn-expander does aspect ratio preservation |
|
.mn-listener snaps to #expander edges |
|
.mn-listener::before does the border, which finally goes below the canvas |
|
.mn-canvas is the canvas |
|
|
|
The #container, #sizer, #expander, #listener, #canvas IDs are kept for |
|
backwards compatibility purposes but are discouraged as the mn-prefixed |
|
classes are less likely to clash with other markup and allow more than one |
|
canvas on a page. TODO: remove in 2022 and require classes */ |
|
.mn-container, #container { |
|
margin: 1rem -1rem 1rem -1rem; |
|
} |
|
.mn-sizer, #sizer { |
|
margin-left: auto; |
|
margin-right: auto; |
|
max-width: 100%; |
|
width: 640px; |
|
} |
|
.mn-expander, #expander { |
|
position: relative; |
|
} |
|
.mn-listener, #listener { |
|
position: absolute; |
|
top: 0; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
} |
|
.mn-listener::before, #listener::before { |
|
position: absolute; |
|
content: ' '; |
|
top: 0; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: -1; |
|
border-style: solid; |
|
border-width: 0.125rem; |
|
border-radius: 0.2rem; /*var(--border-radius)*/ |
|
border-color: #405363; /*var(--line-color)*/ |
|
} |
|
|
|
/* Canvas size and aspect ratio knobs. Again the unprefixed variants are for |
|
backwards compatibility purposes. */ |
|
.mn-container.mn-fullsize, #container.fullsize { |
|
position: absolute; |
|
top: 0; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
margin: 0; |
|
} |
|
.mn-container.mn-fullsize .mn-sizer, #container.fullsize #sizer, |
|
.mn-container.mn-fullsize .mn-expander, #container.fullsize #expander { |
|
width: 100%; height: 100%; |
|
} |
|
|
|
.mn-container.mn-width-240 .mn-sizer, #container.width-240 #sizer { |
|
width: 240px; |
|
} |
|
.mn-container.mn-width-320 .mn-sizer, #container.width-320 #sizer { |
|
width: 320px; |
|
} |
|
.mn-container.mn-width-360 .mn-sizer, #container.width-360 #sizer { |
|
width: 360px; |
|
} |
|
.mn-container.mn-width-480 .mn-sizer, #container.width-480 #sizer { |
|
width: 480px; |
|
} |
|
.mn-container.mn-width-600 .mn-sizer, #container.width-600 #sizer { |
|
width: 600px; |
|
} |
|
.mn-container.mn-width-640 .mn-sizer, #container.width-640 #sizer, |
|
.mn-container .mn-sizer, #container #sizer { |
|
width: 640px; /* default */ |
|
} |
|
.mn-container.mn-width-800 .mn-sizer, #container.width-800 #sizer { |
|
width: 800px; |
|
} |
|
|
|
.mn-container.mn-aspect-1-1 .mn-expander, #container.aspect-1-1 #expander { |
|
padding-bottom: 100%; |
|
} |
|
.mn-container.mn-aspect-4-3 .mn-expander, #container.aspect-4-3 #expander, |
|
.mn-container:not(.mn-fullsize):not([class*='mn-aspect-']) .mn-expander, |
|
#container:not(.fullsize):not([class*='aspect-']) #expander { |
|
padding-bottom: 75%; /* default */ |
|
} |
|
.mn-container.mn-aspect-3-4 .mn-expander, #container.aspect-3-4 #expander { |
|
padding-bottom: 133.3333%; |
|
} |
|
.mn-container.mn-aspect-3-2 .mn-expander, #container.aspect-3-2 #expander { |
|
padding-bottom: 66.6667%; |
|
} |
|
.mn-container.mn-aspect-2-3 .mn-expander, #container.aspect-2-3 #expander { |
|
padding-bottom: 150%; |
|
} |
|
.mn-container.mn-aspect-16-9 .mn-expander, #container.aspect-16-9 #expander { |
|
padding-bottom: 56.25% |
|
} |
|
.mn-container.mn-aspect-9-16 .mn-expander, #container.aspect-9-16 #expander { |
|
padding-bottom: 177.7778% |
|
} |
|
.mn-container.mn-aspect-2-1 .mn-expander, #container.aspect-2-1 #expander { |
|
padding-bottom: 50%; |
|
} |
|
.mn-container.mn-aspect-1-2 .mn-expander, #container.aspect-1-2 #expander { |
|
padding-bottom: 200%; |
|
} |
|
|
|
.mn-canvas, #canvas, pre.mn-log, pre#log { |
|
max-width: 100%; |
|
width: 100%; |
|
z-index: 10; |
|
border-radius: 0.2rem; /*var(--border-radius)*/ |
|
} |
|
.mn-canvas:focus, #canvas:focus { |
|
outline-color: #5b9dd9; /*var(--header-link-current-color)*/ |
|
} |
|
.mn-canvas, #canvas { |
|
height: 100%; |
|
margin-bottom: -0.25rem; /* otherwise there's scrollbar w/ fullsize (why?) */ |
|
} |
|
.mn-status, #status, .mn-status-description, #status-description { |
|
position: absolute; |
|
text-align: center; |
|
width: 100%; |
|
z-index: 9; |
|
} |
|
.mn-status, #status { |
|
top: 10%; |
|
font-size: 1.5rem; |
|
font-weight: 600; |
|
} |
|
.mn-status-description, #status-description { |
|
top: 22.5%; |
|
padding-left: 2rem; |
|
padding-right: 2rem; |
|
} |
|
.mn-canvas.mn-hidden, #canvas.hidden { |
|
display: none; |
|
} |
|
pre.mn-log, pre#log { |
|
/* Make it fill at least the space given to it but let it expand beyond |
|
(scrollbars in that tiny area are useless) */ |
|
min-height: 100%; |
|
padding: 0.5rem 1rem; |
|
white-space: pre-wrap; /* same as .m-console-wrap */ |
|
word-break: break-all; |
|
margin-top: 0; /* stupid defaults */ |
|
color: #e6e6e6; /*var(--code-color)*/ |
|
background-color: #282e36; /*var(--code-background-color)*/ |
|
font-size: 0.8rem; /* so 80 columns fits into 640 pixels */ |
|
} |
|
|
|
/* Styling for extra content */ |
|
h1 { |
|
text-align: center; |
|
font-size: 1.75rem; |
|
font-weight: 600; |
|
} |
|
.mn-sizer p, #sizer p { |
|
text-align: center; |
|
} |
|
code { |
|
font-family: monospace, monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ |
|
font-size: 0.9em; |
|
padding: 0.125rem; |
|
color: #e6e6e6; /*var(--code-color)*/ |
|
background-color: #282e36; /*var(--code-background-color)*/ |
|
}
|
|
|