PythonMapper/Public/scss/PythonMapper.css

210 lines
17 KiB
CSS
Raw Normal View History

.python-mapper {
position: relative;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
overflow: hidden; }
.python-mapper, .python-mapper input, .python-mapper button, .python-mapper select {
font-family: "Roboto"; }
.python-mapper pre, .python-mapper textarea,
.python-mapper .wmd-code-block,
.python-mapper .wmd-code-block ol > li::marker,
.python-mapper .wmd-code-doc > .description {
font-family: "Roboto Mono"; }
.python-mapper [data-icon]::before {
font-family: "FA6FR"; }
.python-mapper input, .python-mapper button, .python-mapper select, .python-mapper textarea {
font-size: 1em; }
.python-mapper [data-visible=false], .python-mapper [data-hidden=true] {
display: none; }
.python-mapper[data-gui-mode=light], .python-mapper[data-gui-mode=default][data-dark-mode=false] {
background-color: #EFEFEF;
color: #222; }
.python-mapper[data-gui-mode=light] a[href], .python-mapper[data-gui-mode=light] [onclick], .python-mapper[data-gui-mode=light] [onmouseover], .python-mapper[data-gui-mode=light] [onmousedown], .python-mapper[data-gui-mode=light] button, .python-mapper[data-gui-mode=light] [type=button], .python-mapper[data-gui-mode=light] [type=reset], .python-mapper[data-gui-mode=light] [type=submit], .python-mapper[data-gui-mode=light] [data-role=link], .python-mapper[data-gui-mode=light] [data-role=button], .python-mapper[data-gui-mode=default][data-dark-mode=false] a[href], .python-mapper[data-gui-mode=default][data-dark-mode=false] [onclick], .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmouseover], .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmousedown], .python-mapper[data-gui-mode=default][data-dark-mode=false] button, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=button], .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=reset], .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=submit], .python-mapper[data-gui-mode=default][data-dark-mode=false] [data-role=link], .python-mapper[data-gui-mode=default][data-dark-mode=false] [data-role=button] {
color: #459; }
.python-mapper[data-gui-mode=light] a[href]:hover, .python-mapper[data-gui-mode=light] [onclick]:hover, .python-mapper[data-gui-mode=light] [onmouseover]:hover, .python-mapper[data-gui-mode=light] [onmousedown]:hover, .python-mapper[data-gui-mode=light] button:hover, .python-mapper[data-gui-mode=light] [type=button]:hover, .python-mapper[data-gui-mode=light] [type=reset]:hover, .python-mapper[data-gui-mode=light] [type=submit]:hover, .python-mapper[data-gui-mode=light] [data-role=link]:hover, .python-mapper[data-gui-mode=light] [data-role=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] a[href]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [onclick]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmouseover]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmousedown]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] button:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=reset]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=submit]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [data-role=link]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [data-role=button]:hover {
color: #BA5; }
.python-mapper[data-gui-mode=light] [onmouseover], .python-mapper[data-gui-mode=light] [onmousedown], .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmouseover], .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmousedown] {
color: #333c5e; }
.python-mapper[data-gui-mode=light] [onmouseover]:hover, .python-mapper[data-gui-mode=light] [onmousedown]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmouseover]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [onmousedown]:hover {
color: #6f663c; }
.python-mapper[data-gui-mode=light] button, .python-mapper[data-gui-mode=light] [type=button], .python-mapper[data-gui-mode=light] [type=reset], .python-mapper[data-gui-mode=light] [type=submit], .python-mapper[data-gui-mode=light] [data-role=button], .python-mapper[data-gui-mode=default][data-dark-mode=false] button, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=button], .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=reset], .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=submit], .python-mapper[data-gui-mode=default][data-dark-mode=false] [data-role=button] {
border: 0.1em solid #459;
box-shadow: 0em 0em 0.4em #459; }
.python-mapper[data-gui-mode=light] button:hover, .python-mapper[data-gui-mode=light] [type=button]:hover, .python-mapper[data-gui-mode=light] [type=reset]:hover, .python-mapper[data-gui-mode=light] [type=submit]:hover, .python-mapper[data-gui-mode=light] [data-role=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] button:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=reset]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [type=submit]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] [data-role=button]:hover {
border-color: #BA5;
box-shadow: 0em 0em 0.4em #BA5; }
.python-mapper[data-gui-mode=light] .wmd-dictionary-item, .python-mapper[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-item {
color: #333c5e; }
.python-mapper[data-gui-mode=light] .wmd-dictionary-item:hover, .python-mapper[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-item:hover {
color: #6f663c; }
.python-mapper[data-gui-mode=light] header, .python-mapper[data-gui-mode=light] footer, .python-mapper[data-gui-mode=default][data-dark-mode=false] header, .python-mapper[data-gui-mode=default][data-dark-mode=false] footer {
box-shadow: 0em 0em 0.125em #EFEFEF, 0em 0em 0.25em #EFEFEF, 0em 0em 0.5em #EFEFEF, 0em 0em 1em #EFEFEF, 0em 0em 2em #EFEFEF; }
.python-mapper[data-gui-mode=light] .wmd-dictionary-box, .python-mapper[data-gui-mode=light] .wmd-main-menu, .python-mapper[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-box, .python-mapper[data-gui-mode=default][data-dark-mode=false] .wmd-main-menu {
background-color: #EFEFEF;
box-shadow: 0.1em 0.1em 0.2em #222; }
.python-mapper[data-gui-mode=light] .wmd-dictionary-box a[href], .python-mapper[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-box a[href] {
background-color: rgba(0, 0, 0, 0.1); }
.python-mapper[data-gui-mode=dark], .python-mapper[data-gui-mode=default][data-dark-mode=true] {
background-color: #222;
color: #EFEFEF; }
.python-mapper[data-gui-mode=dark] a[href], .python-mapper[data-gui-mode=dark] [onclick], .python-mapper[data-gui-mode=dark] [onmouseover], .python-mapper[data-gui-mode=dark] [onmousedown], .python-mapper[data-gui-mode=dark] button, .python-mapper[data-gui-mode=dark] [type=button], .python-mapper[data-gui-mode=dark] [type=reset], .python-mapper[data-gui-mode=dark] [type=submit], .python-mapper[data-gui-mode=dark] [data-role=link], .python-mapper[data-gui-mode=dark] [data-role=button], .python-mapper[data-gui-mode=default][data-dark-mode=true] a[href], .python-mapper[data-gui-mode=default][data-dark-mode=true] [onclick], .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmouseover], .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmousedown], .python-mapper[data-gui-mode=default][data-dark-mode=true] button, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=button], .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=reset], .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=submit], .python-mapper[data-gui-mode=default][data-dark-mode=true] [data-role=link], .python-mapper[data-gui-mode=default][data-dark-mode=true] [data-role=button] {
color: #6674aa; }
.python-mapper[data-gui-mode=dark] a[href]:hover, .python-mapper[data-gui-mode=dark] [onclick]:hover, .python-mapper[data-gui-mode=dark] [onmouseover]:hover, .python-mapper[data-gui-mode=dark] [onmousedown]:hover, .python-mapper[data-gui-mode=dark] button:hover, .python-mapper[data-gui-mode=dark] [type=button]:hover, .python-mapper[data-gui-mode=dark] [type=reset]:hover, .python-mapper[data-gui-mode=dark] [type=submit]:hover, .python-mapper[data-gui-mode=dark] [data-role=link]:hover, .python-mapper[data-gui-mode=dark] [data-role=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] a[href]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [onclick]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmouseover]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmousedown]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] button:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=reset]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=submit]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [data-role=link]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [data-role=button]:hover {
color: #c5b874; }
.python-mapper[data-gui-mode=dark] [onmouseover], .python-mapper[data-gui-mode=dark] [onmousedown], .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmouseover], .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmousedown] {
color: #abb2cd; }
.python-mapper[data-gui-mode=dark] [onmouseover]:hover, .python-mapper[data-gui-mode=dark] [onmousedown]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmouseover]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [onmousedown]:hover {
color: #dad4b2; }
.python-mapper[data-gui-mode=dark] button, .python-mapper[data-gui-mode=dark] [type=button], .python-mapper[data-gui-mode=dark] [type=reset], .python-mapper[data-gui-mode=dark] [type=submit], .python-mapper[data-gui-mode=dark] [data-role=button], .python-mapper[data-gui-mode=default][data-dark-mode=true] button, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=button], .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=reset], .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=submit], .python-mapper[data-gui-mode=default][data-dark-mode=true] [data-role=button] {
border: 0.1em solid #6674aa;
box-shadow: 0em 0em 0.4em #6674aa; }
.python-mapper[data-gui-mode=dark] button:hover, .python-mapper[data-gui-mode=dark] [type=button]:hover, .python-mapper[data-gui-mode=dark] [type=reset]:hover, .python-mapper[data-gui-mode=dark] [type=submit]:hover, .python-mapper[data-gui-mode=dark] [data-role=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] button:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=button]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=reset]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [type=submit]:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] [data-role=button]:hover {
border-color: #c5b874;
box-shadow: 0em 0em 0.4em #c5b874; }
.python-mapper[data-gui-mode=dark] .wmd-dictionary-item, .python-mapper[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-item {
color: #abb2cd; }
.python-mapper[data-gui-mode=dark] .wmd-dictionary-item:hover, .python-mapper[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-item:hover {
color: #dad4b2; }
.python-mapper[data-gui-mode=dark] header, .python-mapper[data-gui-mode=dark] footer, .python-mapper[data-gui-mode=default][data-dark-mode=true] header, .python-mapper[data-gui-mode=default][data-dark-mode=true] footer {
box-shadow: 0em 0em 0.125em #222, 0em 0em 0.25em #222, 0em 0em 0.5em #222, 0em 0em 1em #222, 0em 0em 2em #222; }
.python-mapper[data-gui-mode=dark] .wmd-dictionary-box, .python-mapper[data-gui-mode=dark] .wmd-main-menu, .python-mapper[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-box, .python-mapper[data-gui-mode=default][data-dark-mode=true] .wmd-main-menu {
background-color: #222;
box-shadow: 0.1em 0.1em 0.2em #EFEFEF; }
.python-mapper[data-gui-mode=dark] .wmd-dictionary-box a[href], .python-mapper[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-box a[href] {
background-color: rgba(255, 255, 255, 0.1); }
.python-mapper a[href], .python-mapper [data-role=link] {
text-decoration: none;
word-break: break-word; }
.python-mapper a[href], .python-mapper [onclick], .python-mapper [onmouseover], .python-mapper [onmousedown], .python-mapper button, .python-mapper [type=button], .python-mapper [type=reset], .python-mapper [type=submit], .python-mapper [data-role=link], .python-mapper [data-role=button] {
cursor: pointer;
transition-duration: 1s; }
.python-mapper a[href]:hover, .python-mapper [onclick]:hover, .python-mapper [onmouseover]:hover, .python-mapper [onmousedown]:hover, .python-mapper button:hover, .python-mapper [type=button]:hover, .python-mapper [type=reset]:hover, .python-mapper [type=submit]:hover, .python-mapper [data-role=link]:hover, .python-mapper [data-role=button]:hover {
transition-duration: 0.2s; }
.python-mapper a[href], .python-mapper [onclick], .python-mapper [onmouseover], .python-mapper [onmousedown], .python-mapper button, .python-mapper [type=button], .python-mapper [type=reset], .python-mapper [type=submit], .python-mapper [data-role=link], .python-mapper [data-role=button] {
transition-property: color; }
.python-mapper button, .python-mapper [type=button], .python-mapper [type=reset], .python-mapper [type=submit], .python-mapper [data-role=button] {
transition-property: color,border-color,box-shadow; }
.python-mapper h2 {
font-size: 2.6em; }
.python-mapper h3 {
font-size: 2.2em; }
.python-mapper h4 {
font-size: 1.8em; }
.python-mapper h5 {
font-size: 1.4em; }
.python-mapper h6 {
font-size: 1em; }
.python-mapper ul, .python-mapper ol {
padding: 0em 2em; }
.python-mapper header, .python-mapper main, .python-mapper footer {
position: absolute;
left: 0em;
width: 100%; }
.python-mapper header, .python-mapper footer {
overflow: hidden;
display: flex;
flex-direction: row; }
.python-mapper header > *, .python-mapper footer > * {
flex: auto;
align-self: center; }
.python-mapper header {
top: 0em;
height: 4em;
z-index: 20; }
.python-mapper header h1 {
margin: .2em 1em;
padding: 0em;
font-size: 1em;
text-wrap: nowrap; }
.python-mapper header h1 .image {
height: 3.6em; }
.python-mapper header h1 img {
width: auto;
height: 3.6em; }
.python-mapper header h1 img + span {
display: none; }
.python-mapper header h1 span + span {
font-size: 3.4em;
height: 0.9444444444em; }
.python-mapper header h1 a > span {
display: inline-block;
vertical-align: top; }
.python-mapper main {
top: 4em;
bottom: 2.5em;
padding: 1% 2%;
z-index: 10;
overflow: auto;
box-sizing: border-box; }
.python-mapper footer {
display: flex;
flex-direction: row;
justify-items: center;
bottom: 0em;
height: 2.5em;
z-index: 30; }
.python-mapper .main-menu {
width: 25em;
text-align: center; }
.python-mapper .main-menu ul {
list-style-type: none;
margin: 0em;
padding: 0em; }
.python-mapper .main-menu li {
display: inline-block;
margin: 0em .6em; }
.python-mapper .licenses {
display: flex;
flex-direction: row;
justify-content: center;
flex: auto;
text-align: center;
padding: .1em .2em;
font-weight: 900;
font-size: .65em;
box-sizing: border-box; }
.python-mapper .license {
display: flex;
flex-direction: row;
align-self: center;
margin: 0em .2em;
text-align: center;
box-sizing: border-box; }
.python-mapper .license span {
flex: auto;
align-self: center; }
.python-mapper .license > * {
vertical-align: middle; }
.python-mapper .license img {
width: auto;
height: 3em;
margin: .2em .2em; }
.python-mapper .gui-controls {
display: flex;
flex-direction: row;
justify-items: center;
align-items: stretch;
flex-grow: 0;
order: -1;
border: none;
font-size: .85em; }
.python-mapper .gui-controls button[data-i18n=zoom_less], .python-mapper .gui-controls button[data-i18n=zoom_reset], .python-mapper .gui-controls button[data-i18n=zoom_more], .python-mapper .gui-controls span[data-i18n], .python-mapper .gui-controls legend {
display: none; }
.python-mapper .gui-controls [data-icon]::before {
margin: 0em; }
.python-mapper .gui-controls [type=number] {
display: none;
width: 3em;
font-family: "Roboto Mono"; }
.python-mapper .gui-controls button[data-i18n=zoom_mode] {
border-radius: 0.3em 0em 0em 0.3em; }
.python-mapper .gui-controls > :last-child {
border-radius: 0em 0.3em 0.3em 0em; }
.python-mapper h1 .image + span {
font-size: 3.1em; }
/*# sourceMappingURL=PythonMapper.css.map */