diff --git a/src/style.css b/src/style.css index e9fb7e7..5c7efdb 100644 --- a/src/style.css +++ b/src/style.css @@ -4,14 +4,13 @@ div { } /* Theme */ - :root { --bg-color: white; --fg-color: black; --begin-button-hover: #3cb0ff; --code-area-bg-color: #AAA; --select-bg-color: #EEE; - --transition-time: 0s; /* Modified via js */ + --transition-time: 0s; /* Modified via JS */ --displaylatex: none; --displayhtml: none; } @@ -33,23 +32,21 @@ div { } /* Global */ - html { transition: color var(--transition-time); transition: background-color var(--transition-time); color: var(--fg-color); background-color: var(--bg-color); - font-family: Arial; + font-family: 'Arial'; scroll-behavior: smooth; } html, body { - margin:0; - padding:0; + margin: 0; + padding: 0; } /* Layout */ - .displaylatex { display: var(--displaylatex) !important; overflow: auto; @@ -64,12 +61,13 @@ html, body { } .gutter { - min-width:12px; - min-height:4px; + min-width: 12px; + min-height: 4px; } +/* Containers */ .container { - /*overflow: hidden;*/ + /* overflow: hidden; */ min-height: 0 } @@ -85,12 +83,14 @@ html, body { flex-direction: row; } +/* Media queries */ @media all and (orientation:portrait) { .container.device-orientation { display: flex; flex-direction: column; } } + @media all and (orientation:landscape) { .container.device-orientation { display: flex; @@ -99,11 +99,11 @@ html, body { } .flex { - flex-grow:1; + flex-grow: 1; flex-shrink: 1; } -.nonflex{ +.nonflex { flex-grow: 0; flex-shrink: 0; } @@ -113,36 +113,35 @@ html, body { } .fullscreen { - width:100%; - height:100vh; - margin:0; - padding:0; + width: 100%; + height: 100vh; + margin: 0; + padding: 0; } .fill_space { - width:100%; - height:100%; + width: 100%; + height: 100%; overflow: auto; min-height: 0 } -/* landing page */ - +/* Landing page */ #landing_page { - position:relative + position: relative } #landing_page_content { - position:absolute; - top:50%; - left:50%; + position: absolute; + top: 50%; + left: 50%; transform: translate(-50%, -50%); } #landing_page_content h1 { - font-size:20vmin; - margin:0; - padding:0; + font-size: 20vmin; + margin: 0; + padding: 0; transition: text-shadow 1s ease-in-out 1s; } @@ -155,33 +154,32 @@ html, body { } #landing_page_content h2 { - font-weight:normal; - font-size:4vmin; - margin:0; - padding:0; - margin-top:-4vmin; - margin-left:1vmin; + font-weight: normal; + font-size: 4vmin; + margin: 0; + padding: 0; + margin-top: -4vmin; + margin-left: 1vmin; } #landing_page_content p { - font-size:5vmin; + font-size: 5vmin; white-space: nowrap; } #landing_page_content a { - font-size:10vmin; + font-size: 10vmin; } #version { - font-size:4vmin; - margin:1vmin; + font-size: 4vmin; + margin: 1vmin; } -/* begin button */ - +/* Begin button */ #begin_button { border-radius: 2vmin;; - font-family: Arial; + font-family: 'Arial'; font-size: 10vmin; padding: 1.5vmin; text-decoration: none; @@ -192,31 +190,29 @@ html, body { } /* Style button */ - #style_button { position: absolute; right: 0; top: 0; - font-size:4vmin; - font-weight:lighter; - margin:1vmin; - padding:1vmin; + font-size: 4vmin; + font-weight: lighter; + margin: 1vmin; + padding: 1vmin; border-radius: 0.5vmin; - opacity:0.8; + opacity: 0.8; } #style_button:hover { opacity: 1; - cursor:pointer; + cursor: pointer; } #style_button, #links a { - background-color:var(--fg-color); - color:var(--bg-color); + background-color: var(--fg-color); + color: var(--bg-color); } /* Links */ - #links { position: absolute; left: 0; @@ -224,21 +220,21 @@ html, body { } #links a { - display:block; - margin:1vmin; - padding:1vmin; - font-size:3vmin; - text-decoration:none; - - margin-left:0; - background-color:var(--fg-color); - color:var(--bg-color); + display: block; + margin: 1vmin; + padding: 1vmin; + font-size: 3vmin; + text-decoration: none; + + margin-left: 0; + background-color: var(--fg-color); + color: var(--bg-color); border-radius: 0 0.5vmin 0.5vmin 0; - opacity:0.8; + opacity: 0.8; } #links a:hover { - opacity:1.0; + opacity: 1.0; } /* Application area */ @@ -254,31 +250,30 @@ textarea { overflow: auto; } -/* menu bar */ - +/* Menu bar */ #menu_bar { display: flex; } .menu_bar_submenu { margin: 0px; - padding:12px; - display:inline-block; + padding: 12px; + display: inline-block; border-right: 1px solid black; vertical-align: center; white-space: nowrap; } select { - font:inherit; - size:50px; + font: inherit; + size: 50px; } .option { - margin:auto; - padding:auto; - padding-right:3px; - padding-left:3px; + margin: auto; + padding: auto; + padding-right: 3px; + padding-left: 3px; } select { @@ -308,8 +303,9 @@ option { overflow: auto; } +/* Begin Button */ #begin_button { - border:1vmin var(--fg-color) solid; + border: 1vmin var(--fg-color) solid; color: var(--fg-color); padding: 10px; } @@ -320,7 +316,7 @@ option { #code_area { background-color: var(--code-area-bg-color); - tab-size:2; + tab-size: 2; } #menu_bar { @@ -329,23 +325,24 @@ option { select, option { color: var(--fg-color); - background-color:var(--select-bg-color); + background-color: var(--select-bg-color); } +/* Copy */ .copy-wrapper { - position:relative; + position: relative; } .copy { - display:block; - position:absolute; - color:white; - background-color:black; - color:white; + display: block; + position: absolute; + color: white; + background-color: black; + color: white; opacity: 0.7; - right:0; - top :0; - z-index:2; + right: 0; + top: 0; + z-index: 2; margin: 1vh; padding: 1vh; transition: opacity 0.3s, background-color 0.3s; @@ -353,10 +350,10 @@ select, option { } .copy:hover, .copy[data-active=true] { - opacity:1.0; - cursor:pointer; + opacity: 1.0; + cursor: pointer; } .copy[data-active=true] { - background-color:green; + background-color: green; }