API tools faq
paste
Advertisement
Guest User

dark_minimal_custom.css

a guest
Apr 16th, 2021
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 20.96 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * COLORS
  3. */
  4. :root {
  5. /* general */
  6. --bg: #000;
  7. --fg: #fff;
  8.  
  9. --tab-background: #333;
  10. --tab-suspended: #0c9;
  11. --visible-tab: #000;
  12.  
  13. --tab-split: #f90;
  14.  
  15. --tab-audio: #f96;
  16. --tab-muted: #fc9;
  17. --tab-muted-playing: #ff3;
  18. --tab-crashed: #d33;
  19. --tab-scrollbar: #707070;
  20. --container-background: none;
  21.  
  22. --mode-normal-fg: #fff;
  23. --mode-normal-bg: none;
  24. --mode-command-fg: #d33;
  25. --mode-command-bg: none;
  26. --mode-insert-fg: #fc0;
  27. --mode-insert-bg: none;
  28. --mode-follow-fg: #fb9;
  29. --mode-follow-bg: none;
  30. --mode-explore-fg: #fff;
  31. --mode-explore-bg: none;
  32. --mode-search-fg: #f76;
  33. --mode-search-bg: none;
  34. --mode-pointer-fg: #000;
  35. --mode-pointer-bg: #fb9;
  36. --mode-visual-fg: #000;
  37. --mode-visual-bg: #f76;
  38. --url-default: #000;
  39. --url-search: #fc0;
  40. --url-searchwords: #f76;
  41. --url-url: #333;
  42. --url-suggest: #0cf;
  43. --url-file: #0c9;
  44. --url-invalid: #d33;
  45. --follow-text: #fff;
  46. --follow-url-bg: #000;
  47. --follow-url-border: #5cc;
  48. --follow-click-bg: #000;
  49. --follow-click-border: #c55;
  50. --follow-insert-bg: #000;
  51. --follow-insert-border: #5c5;
  52. --follow-onclick-bg: #000;
  53. --follow-onclick-border: #cc5;
  54. --follow-other-bg: #000;
  55. --follow-other-border: #aaa;
  56.  
  57. --suggestions-border: #000;
  58. --suggestions-bg: #000;
  59. --suggestions-selected: #404040;
  60. --suggestions-url: #0cf;
  61. --suggestions-file: #0c9;
  62.  
  63. --notification-border: #111;
  64. --notification-date: #fff;
  65. --notification-permission: #fff;
  66. --notification-error: #f33;
  67. --notification-warning: #fc0;
  68. --notification-info: #0cf;
  69. --notification-success: #0c9;
  70. --url-hover-fg: #fff;
  71. --url-hover-bg: #000;
  72. /* special pages */
  73. --link-color: #0cf;
  74. --scrollbar-bg: #000;
  75. --scrollbar-thumb: #bbb;
  76. --button-disabled: #999;
  77. --code-fg: #fff;
  78. --code-bg: #111;
  79. --code-command: #f88;
  80. --placeholder-text: #ccc;
  81. --special-page-element-bg: #444;
  82. --special-page-element-border: #222;
  83. --input-unfocused: #666;
  84. --input-focused: #aaa;
  85. --download-progress-fg: #ccc;
  86. --download-progress-bg: #666;
  87. --helppage-h1: #d33;
  88. --helppage-h2: #f76;
  89. --helppage-h3: #fb9;
  90. --helppage-countable: #fc0;
  91. --link-underline: var(--link-color);
  92. }
  93.  
  94.  
  95. /*
  96. * GLOBAL
  97. */
  98. html {margin: 0;padding: 0}
  99. body {color: var(--fg);font: 14px "DejaVu Sans Mono", "Courier", monospace;padding: 0;margin: 0;opacity: 0;}
  100. #app {height: 100vh;width: 100vw;overflow: hidden;user-select: none;display: flex;flex-direction: column;background: var(--bg);opacity: 1;line-height: 1.3em;}
  101. body:not(#app) input {background: transparent;color: var(--fg);font: inherit;width: 100%;border: .1em solid var(--input-unfocused);padding: .2em;margin-bottom: 1em;box-sizing: border-box;outline: none;height: 2em;}
  102. body:not(#app) input:focus {border: .1em solid var(--input-focused);}
  103. body:not(#app) kbd {background: var(--code-bg);color: var(--code-fg);padding: .1em;overflow-wrap: anywhere;}
  104. body:not(#app) button {background: transparent;color: var(--fg);border: .1em solid var(--fg);font: inherit;}
  105. body:not(#app) button:not(:disabled):hover {cursor: pointer;font-weight: bold;}
  106. body:not(#app) button:disabled {border-color: var(--button-disabled);color: var(--button-disabled);}
  107. body:not(#app) ::placeholder {color: var(--placeholder-text);}
  108. ::-webkit-scrollbar {width: 5px;background: var(--scrollbar-bg);}
  109. ::-webkit-scrollbar-thumb {background: var(--scrollbar-thumb);}
  110.  
  111.  
  112. /*
  113. * APP
  114. */
  115. /* navbar & tabs */
  116. #navbar {z-index: 30;}
  117. #tabs, #navbar {width: 100vw;display: flex;pointer-events: none;background: var(--bg);}
  118. #logo {display: none;}
  119. #mode-container {display: flex;width: 7em;text-align: center;margin: .1em 0;}
  120. #mode {text-transform: capitalize;font-size: 1.3em;margin: auto;font-weight: bold;display: flex;}
  121. #repeat-counter, #pressed-keys {margin: auto .2em;line-height: 2em;display: none;}
  122. /* modes */
  123. [current-mode=normal] #mode-container, #helpage .normal, .normal {color: var(--mode-normal-fg);background: var(--mode-normal-bg);}
  124. [current-mode=command] #mode-container, #helppage .command, .command {color: var(--mode-command-fg);background: var(--mode-command-bg);}
  125. [current-mode=insert] #mode-container, #helppage .insert, .insert {color: var(--mode-insert-fg);background: var(--mode-insert-bg);}
  126. [current-mode=follow] #mode-container, #helppage .follow, .follow {color: var(--mode-follow-fg);background: var(--mode-follow-bg);}
  127. [current-mode=explore] #mode-container, #helppage .explore, .explore {color: var(--mode-explore-fg);background: var(--mode-explore-bg);}
  128. [current-mode=search] #mode-container, #helppage .search, .search {color: var(--mode-search-fg);background: var(--mode-search-bg);}
  129. [current-mode=pointer] #mode-container, #helppage .pointer, .pointer {color: var(--mode-pointer-fg);background: var(--mode-pointer-bg);}
  130. [current-mode=visual] #mode-container, #helppage .visual, .visual {color: var(--mode-visual-fg);background: var(--mode-visual-bg);}
  131. /* tabs */
  132. #tabs {display: flex;overflow: hidden;max-width: 100vw;width: 100vw;z-index: 2;}
  133. #tabs > span {color: var(--fg);background: var(--tab-background);display: flex;margin: 0 .1em .1em 0;flex: 1;overflow: hidden;white-space: nowrap;height: 1.9em;}
  134. #tabs > span > img {margin: auto 0 auto .25em;padding: 0;height: 1.5em;width: 1.5em;min-height: 1.5em;min-width: 1.5em;pointer-events: none;}
  135. #tabs > span > span {margin: auto 0 auto .25em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  136. #tabs .visible-tab {background: var(--visible-tab);}
  137. #tabs [suspended] {background: var(--tab-suspended);}
  138. #tabs.multiple #current-tab {border-left: solid .3em var(--tab-split);}
  139. #tabs .pinned {min-width: 1.9em !important;max-width: 1.9em;width: 1.9em;padding: 0;}
  140. #tabs .pinned[media-playing], #tabs .pinned[muted] {width: 2.2em;max-width: 2.2em;}
  141. #tabs .pinned > img {padding: 0;margin: .2em;}
  142. #tabs .crashed {background: var(--tab-crashed);}
  143. #tabs [media-playing]::before {border-left: solid .3em var(--tab-audio);content: "";}
  144. #tabs [muted]::before {border-left: solid .3em var(--tab-muted);content: "";}
  145. #tabs [muted][media-playing]::before {border-left: solid .3em var(--tab-muted-playing);content: "";}
  146. #tabs.scroll {overflow-x: auto;}
  147. #tabs.wrap {flex-wrap: wrap;}
  148. /* pages container */
  149. .webview {pointer-events: none;position: fixed;display: none;}
  150. #page-container, #current-page, .visible-page {display: flex;flex: 1;height: 100%;width: 100%;}
  151. #pages.multiple .webview {border: solid .15em transparent;box-sizing: border-box;}
  152. #pages.multiple #current-page {border-color: var(--tab-split);}
  153. #pagelayout {display: flex;height: 100%;width: 100%;}
  154. #pagelayout * {flex: 1;}
  155. #pagelayout.hor, #pagelayout .hor {flex-direction: row;display: flex;}
  156. #pagelayout.ver, #pagelayout .ver {flex-direction: column;display: flex;}
  157. /* fullscreen */
  158. #app.fullscreen #navbar, #app.fullscreen #tabs, #app.fullscreen .webview {display: none;}
  159. #app.fullscreen #current-page {display: flex;border: none;width: 100vw !important;height: 100vh !important;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;}
  160. /* conditionally hide tabs or navbar from the vieb window */
  161. #app.tabshidden #tabs {display: none;}
  162. #app.navigationhidden #navbar {position: absolute;top: -10em;}
  163. #app.navigationhidden #suggest-dropdown {top: .1em;max-height: calc(100vh - .2em);}
  164. /* Nav url/search/command */
  165. #containername {display: flex;margin: auto;height: 1.8em;align-items: center;padding: 0 .5em;background: var(--container-background);color: var(--fg);}
  166. #url {display: inline-block;flex: 1;border: solid .1em var(--url-default);margin: .1em;background: transparent;color: var(--fg);outline: none;font: inherit;min-width: 0;padding: .1em;width: 0;}
  167. #url.search {border-color: var(--url-search);}
  168. #url.searchwords {border-color: var(--url-searchwords);}
  169. #url.url {border-color: var(--url-url);}
  170. #url.suggest {border-color: var(--url-suggest);}
  171. #url.file {border-color: var(--url-file);}
  172. #url.invalid {border-color: var(--url-invalid);}
  173. /* follow */
  174. #follow {position: fixed;display: none;z-index: 1;}
  175. #follow .follow-url, #follow .follow-inputs-click, #follow .follow-inputs-insert, #follow .follow-onclick, #follow .follow-other {position: absolute;color: var(--follow-text);cursor: pointer;padding: 0 .1em;}
  176. .follow-url-border, .follow-inputs-click-border, .follow-inputs-insert-border, .follow-onclick-border, .follow-other-border {position: absolute;box-sizing: border-box;cursor: pointer;}
  177. .follow-url {background: var(--follow-url-bg);border: solid .15em var(--follow-url-border);}
  178. .follow-inputs-click {background: var(--follow-click-bg);border: solid .15em var(--follow-click-border);}
  179. .follow-inputs-insert {background: var(--follow-insert-bg);border: solid .15em var(--follow-insert-border);}
  180. .follow-onclick {background: var(--follow-onclick-bg);border: solid .15em var(--follow-onclick-border);}
  181. .follow-other {background: var(--follow-other-bg);border: solid .15em var(--follow-other-border);}
  182. .follow-url-border {border: solid .07em var(--follow-url-border);}
  183. .follow-inputs-click-border {border: solid .07em var(--follow-click-border);}
  184. .follow-inputs-insert-border {border: solid .07em var(--follow-insert-border);}
  185. .follow-onclick-border {border: solid .07em var(--follow-onclick-border);}
  186. .follow-other-border {border: solid .07em var(--follow-other-border);}
  187. /* suggestions */
  188. #suggest-dropdown {z-index: 15;position: fixed;top: 2.1em;left: .1em;width: calc(100vw - .2em);background: var(--suggestions-border);max-height: calc(100vh - 2.2em);overflow-y: auto;display: flex;flex-direction: column;}
  189. #suggest-dropdown div {flex-grow: 1;flex-shrink: 0;display: flex;padding: .4em;margin: .1em;background: var(--suggestions-bg);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;pointer-events: none;}
  190. #suggest-dropdown div .title, #suggest-dropdown div .file, #suggest-dropdown div .url {margin: auto .5em;min-width: 0;text-overflow: ellipsis;overflow: hidden;}
  191. #suggest-dropdown div .title {flex-shrink: 0;max-width: 50%;}
  192. #suggest-dropdown div .icon {height: 1.5em;width: 1.5em;}
  193. #suggest-dropdown div .url {color: var(--suggestions-url);}
  194. #suggest-dropdown div .file {color: var(--suggestions-file);}
  195. #suggest-dropdown div.selected {background: var(--suggestions-selected);}
  196. /* mouse related */
  197. #invisible-overlay {-webkit-app-region: drag;position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 50;}
  198. #app.mouse .webview {pointer-events: all;}
  199. #app.mouse #invisible-overlay {display: none;}
  200. #app[current-mode=insert] #invisible-overlay {display: none;}
  201. #app.mouse #navbar, #app.mouse #tabs {pointer-events: all;}
  202. #mode-suggestions {background: var(--bg);max-height: 0;position: absolute;left: 2em;top:2em;z-index: 25;transition: .5s all;overflow: hidden;display: inline-block;width: 7em;text-transform: capitalize;display: flex;flex-direction: column;}
  203. #mode-suggestions:hover {max-height: 100vw;}
  204. #app.mouse #mode-container:hover #mode-suggestions {max-height: 100vw;}
  205. #mode-suggestions div {font-size: 1.3em;transition: .1s all;}
  206. #app.mouse #suggest-dropdown div:hover, #mode-suggestions div:hover, #tabs > span:hover {font-weight: bold;cursor: pointer;}
  207. /* notifications */
  208. #notifications {display: flex;position: fixed;flex-direction: column;z-index: 2;}
  209. #notifications > span {background: var(--bg);margin-bottom: .7em;padding: 1em;display: flex;width: 25em;border: .1em solid var(--notification-border);overflow-wrap: anywhere;}
  210. #notifications > span.permission {color: var(--notification-permission);}
  211. #notifications > span.error {color: var(--notification-error);}
  212. #notifications > span.warning {color: var(--notification-warning);}
  213. #notifications > span.info {color: var(--notification-info);}
  214. #notifications > span.success {color: var(--notification-success);}
  215. .bottomright {right: .7em;bottom: 0;}
  216. .bottomleft {left: .7em;bottom: 0;}
  217. .topright {right: .7em;top: 4.7em;}
  218. .topleft {left: .7em;top: 4.7em;}
  219. /* scrollbar for overflowing tabs */
  220. #tabs::-webkit-scrollbar {height: .2em;}
  221. #tabs::-webkit-scrollbar-thumb {background: var(--tab-scrollbar);}
  222. /* context menu */
  223. #context-menu {background: var(--suggestions-bg);position: fixed;z-index: 50;white-space: nowrap;}
  224. #context-menu > div {padding: .3em .5em;cursor: pointer;border: .1em solid var(--suggestions-border);}
  225. #context-menu > div.selected {background: var(--suggestions-selected);}
  226. /* other */
  227. #@keyframes pointer {0% {background: #f007;} 17% {background: #ff07;} 33% {background: #0f07;} 49% {background: #0ff7;} 66% {background: #00f7;} 83% {background: #f0f7;} 100% {background: #f007;}}
  228. #app #pointer {display: none;position: fixed;height: 1em;width: .7em;z-index: 20;backdrop-filter: invert(100%);animation: 1s infinite pointer;}
  229. @keyframes pointer {0% {background: #d33;} 25% {background: #f76;} 50% {background: #fb9;} 75% {background: #f76;} 100% {background: #d33;}}
  230. --helppage-h1: #d33;
  231. --helppage-h2: #f76;
  232. --helppage-h3: #fb9;
  233. #app[current-mode=pointer] #pointer {display: block;}
  234. #app[current-mode=visual] #pointer {display: block;}
  235. #url-hover {display: none;position: absolute;background: var(--url-hover-bg);color:var(--url-hover-fg);bottom: 0;left: 0;right: 0;pointer-events: none;padding: .1em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: fit-content;margin: auto;max-width: 80vw;text-align: center;z-index: 2;}
  236.  
  237.  
  238. /*
  239. * SPECIAL PAGES
  240. */
  241. .specialpage {width: 90vw;margin: auto;}
  242. .specialpage a {color: var(--link-color);white-space: nowrap;overflow: hidden;}
  243. .specialpage h1 {font-size: 2em;margin: 1em 0;padding: 0;}
  244. .specialpage img {height: 1.9em;margin: .5em;float: right;}
  245. .specialpage *[onclick] {cursor: pointer;}
  246. .specialpage #remove-all {height: 2.4em;margin: .2em;cursor: pointer;}
  247. .specialpage #list {display: flex;flex-direction: column-reverse;}
  248. /* cookies */
  249. #cookiespage .cookie {background: var(--special-page-element-bg);margin: .5em 0;padding: .2em;display: flex;border: .1em solid var(--special-page-element-border);}
  250. #cookiespage .cookie * {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 33%;padding: .2em 0;}
  251. #cookiespage .remove {height: 1em;width: 1em;margin: auto 0;cursor: pointer;}
  252. /* downloads */
  253. #downloadspage .download {background: var(--special-page-element-bg);margin-bottom: 1em;border: .1em solid var(--special-page-element-border);}
  254. #downloadspage .title {margin: .4em;font-size: 1.5em;width: calc(100% - 4em);cursor:pointer;}
  255. #downloadspage progress {-webkit-appearance: none;width: calc(100% - 1em);margin: .5em;}
  256. #downloadspage progress::-webkit-progress-value {background: var(--download-progress-fg);}
  257. #downloadspage progress::-webkit-progress-bar {background: var(--download-progress-bg);}
  258. #downloadspage .misc {display: flex;margin: .5em;flex-direction: column;width: calc(100% - 1em);}
  259. #downloadspage .filelocation {cursor: pointer;}
  260. #downloadspage img {cursor: pointer;}
  261. /* extensions */
  262. #extensionspage h1 {font-size: 2em;margin: 1em 0;padding: 0;}
  263. #extensionspage img {height: 4em;width: 4em;margin-right: 1em;}
  264. #extensionspage .extension {display: flex;align-items: center;background: var(--special-page-element-bg);border: .1em solid var(--special-page-element-border);margin: 1em 0;padding: 1em;}
  265. #extensionspage .fullwidth {flex: 1;}
  266. #extensionspage .title {margin: .4em 0;font-size: 1.5em;}
  267. /* help */
  268. #helppage {margin: 3vw;width: auto;line-height: 2;}
  269. #helppage main {max-width: 65em;margin: auto;}
  270. #helppage .header, #helppage .header > div {font-size: 5vw;display: flex;flex: 1;justify-content: center;}
  271. #helppage .header > div > img {height: 10vw;margin: 0 1em 0 0;}
  272. #helppage a {color: var(--link-color);overflow-wrap: anywhere;}
  273. #helppage li {line-height: 1.5em;}
  274. #helppage .section {display: flex;flex-wrap: wrap;align-items: center;}
  275. #helppage .section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {margin: 0;overflow-wrap: anywhere;}
  276. #helppage .section .spacer {flex-grow: 1;}
  277. #helppage .section {margin: 1em 0;}
  278. #helppage .section > a {margin: auto 0;overflow-wrap: anywhere;text-align: right;}
  279. #helppage h1 {font-size: 3em;margin: .7em 0 .5em;color: var(--helppage-h1);}
  280. #helppage h2 {font-size: 2em;margin: .7em 0;color: var(--helppage-h2);}
  281. #helppage h3 {font-size: 1.5em;margin: .7em 0;color: var(--helppage-h3);}
  282. #helppage h4 {font-size: 1.25em;margin: .7em 0;}
  283. #helppage h5, #helppage h6 {font-size: 1;margin: .7em 0;}
  284. #helppage .setting-status {display: flex;flex-wrap: wrap;}
  285. #helppage .setting-status * {margin: 0 .5em;overflow-wrap: anywhere;max-width: calc(100vw - 3em);}
  286. #helppage .map-status * {display: block;}
  287. #helppage .countable {height: 2em;margin: 0 1em;color: var(--helppage-countable);}
  288. #helppage .command-block {color: var(--code-command);white-space: normal;overflow-wrap: anywhere;background: var(--code-bg);padding: .1em;}
  289. #helppage .url-search {color: var(--url-search);}
  290. #helppage .url-url {color: var(--url-url);}
  291. #helppage .url-searchwords {color: var(--url-searchwords);}
  292. #helppage .url-suggest {color: var(--url-suggest);}
  293. #helppage .url-file {color: var(--url-file);}
  294. #helppage .follow-url {background: var(--follow-url-bg);color: var(--follow-text);}
  295. #helppage .follow-inputs-click {background: var(--follow-click-bg);color: var(--follow-text);}
  296. #helppage .follow-inputs-insert {background: var(--follow-insert-bg);color: var(--follow-text);}
  297. #helppage .follow-onclick {background: var(--follow-onclick-bg);color: var(--follow-text);}
  298. #helppage .follow-other {background: var(--follow-other-bg);color: var(--follow-text);}
  299. #helppage .example-buttons {margin: 1em;}
  300. #helppage .example-buttons button {font-size: 1em;margin: .5em 2em;padding: .5em 2em;background: transparent;cursor: pointer;}
  301. #helppage .nowrap, #helppage .nowrap.command-block {white-space: nowrap;}
  302. /* history */
  303. #historypage #list {display: inline;}
  304. #historypage #no-results {margin-bottom: 1em;}
  305. #historypage #breakpoints {display: flex;flex-direction: column;}
  306. #historypage .hist-entry {background: var(--special-page-element-bg);margin: .7em 0;padding: .35em;border: .1em solid var(--special-page-element-border);}
  307. #historypage .hist-entry .hist-date {width: auto;color: var(--notification-date);margin-right: 1em;}
  308. #historypage .hist-entry span {display: inline-block;width: calc(100% - 16em);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  309. #historypage .hist-entry a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
  310. #historypage img {height: 1.5em;float: right;margin: .35em .9em;cursor: pointer;}
  311. #historypage .hist-entry img {height: 1em;margin: .1em;}
  312. #historypage .hist-entry .favicon {float: none;margin: 0 .3em .1em 0;cursor: auto;}
  313. #historypage .hist-entry.marked {background: var(--special-page-element-border);}
  314. /* newtab */
  315. #newtabpage {display: none;flex-direction: column;height: 100vh;}
  316. #newtabpage main {margin: auto;max-width: 80vw;min-width: 450px;}
  317. #newtabpage img {height: 2em;width: 2em;min-height: 2em;min-width: 2em;margin: 0 .5em 0 0;}
  318. #newtabpage a {color: var(--link-color);display: flex;padding: .5em;font-size: 1.4em;text-decoration: none;max-width: 80vw;align-items: center;}
  319. #newtabpage a div {display: flex;flex-direction: column;}
  320. #newtabpage a div, a div * {overflow: hidden;white-space: wrap;text-overflow: ellipsis;}
  321. #newtabpage main > div {display: flex;flex-wrap: wrap;overflow: hidden;}
  322. #newtabpage p {text-align: center;}
  323. #favorites, #topsites {margin: 1em 0;display: none;max-width: 80vw;min-width: 40em;width: auto;flex-grow: 1;flex-basis: 50%;}
  324. #newtabpage small {font-size: .7em;text-decoration: underline;}
  325. /* notifications */
  326. #notificationspage h1 {font-size: 2em;margin: 1em 0;padding: 0;}
  327. #notificationspage .notification {background: var(--special-page-element-bg);border: .1em solid var(--notification-border);margin: 1em 0;padding: 1em;}
  328. #notificationspage .date {color: var(--notification-date);}
  329. #notificationspage .permission {color: var(--notification-permission);}
  330. #notificationspage .error {color: var(--notification-error);}
  331. #notificationspage .warning {color: var(--notification-warning);}
  332. #notificationspage .info {color: var(--notification-info);}
  333. #notificationspage .success {color: var(--notification-success);}
  334. #notificationspage .filelocation {cursor: pointer;}
  335. /* version */
  336. #versionpage {display: flex;width: 80vw;min-width: 450px;height: 100vh;text-align: center;}
  337. #versionpage #title {font-size: 2.5em;}
  338. #versionpage #subtitle {font-size: 1.5em;}
  339. #versionpage .header {display: flex;flex-direction: column;margin: auto;}
  340. #versionpage .header > img {width: 30vmin;height: 30vmin;margin: auto;}
  341. #versionpage .info {width: 40em;min-width: 450px;max-width: 80vw;}
  342. #versionpage a {color: var(--link-color);}
  343. #versionpage #update-check {margin: .7em;}
  344.  
  345.  
  346. /*
  347. * POPUPS
  348. */
  349. .popup {padding: 1em;box-sizing: border-box;height: 100vh;width: 100vw;overflow: hidden;user-select: none;background: var(--bg);color: var(--fg);border: .1em solid var(--notification-border);}
  350. /* login */
  351. #loginpopup * {pointer-events: none;}
  352. #loginpopup p {word-wrap: break-word;overflow: hidden;}
  353. /* notification */
  354. #notificationpopup #notification {padding: 0;height: calc(100% - 2em);overflow-wrap: break-word;overflow-x: hidden;overflow-y: auto;line-height: 1;}
  355. #notificationpopup footer {font-size: 1em;line-height: 2em;height: 2em;position: fixed;left: 0;bottom: 0; width: 100vw;border: .1em solid var(--notification-border);user-select: none;}
  356.  
  357.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!