styles.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730
  1. /* Constants */
  2. :root {
  3. --icon-size: 24px;
  4. --primary-color: #4285f4;
  5. --peer-width: 120px;
  6. color-scheme: light dark; /* both supported */
  7. }
  8. /* Layout */
  9. html {
  10. height: 100%;
  11. }
  12. html,
  13. body {
  14. margin: 0;
  15. display: flex;
  16. flex-direction: column;
  17. width: 100%;
  18. overflow-x: hidden;
  19. }
  20. body {
  21. flex-grow: 1;
  22. align-items: center;
  23. justify-content: center;
  24. overflow-y: hidden;
  25. }
  26. .row-reverse {
  27. display: flex;
  28. flex-direction: row-reverse;
  29. }
  30. .row {
  31. display: flex;
  32. flex-direction: row;
  33. }
  34. .column {
  35. display: flex;
  36. flex-direction: column;
  37. }
  38. .center {
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. }
  43. .grow {
  44. flex-grow: 1;
  45. }
  46. .full {
  47. position: absolute;
  48. top: 0;
  49. left: 0;
  50. right: 0;
  51. bottom: 0;
  52. }
  53. header {
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. right: 0;
  58. height: 56px;
  59. align-items: center;
  60. padding: 16px;
  61. box-sizing: border-box;
  62. }
  63. [hidden] {
  64. display: none !important;
  65. }
  66. /* Typography */
  67. body {
  68. font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  69. -webkit-font-smoothing: antialiased;
  70. -moz-osx-font-smoothing: grayscale;
  71. }
  72. h1 {
  73. font-size: 34px;
  74. font-weight: 400;
  75. letter-spacing: -.01em;
  76. line-height: 40px;
  77. margin: 8px 0 0;
  78. }
  79. h2 {
  80. font-size: 24px;
  81. font-weight: 400;
  82. letter-spacing: -.012em;
  83. line-height: 32px;
  84. }
  85. h3 {
  86. font-size: 20px;
  87. font-weight: 500;
  88. margin: 16px 0;
  89. }
  90. .font-subheading {
  91. font-size: 16px;
  92. font-weight: 400;
  93. line-height: 24px;
  94. }
  95. .font-body1,
  96. body {
  97. font-size: 14px;
  98. font-weight: 400;
  99. line-height: 20px;
  100. }
  101. .font-body2 {
  102. font-size: 12px;
  103. line-height: 18px;
  104. }
  105. a {
  106. text-decoration: none;
  107. color: currentColor;
  108. cursor: pointer;
  109. }
  110. /* Icons */
  111. .icon {
  112. width: var(--icon-size);
  113. height: var(--icon-size);
  114. fill: currentColor;
  115. }
  116. /* Shadows */
  117. [shadow="1"] {
  118. box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
  119. 0 1px 8px 0 rgba(0, 0, 0, 0.12),
  120. 0 3px 3px -2px rgba(0, 0, 0, 0.4);
  121. }
  122. [shadow="2"] {
  123. box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
  124. 0 1px 10px 0 rgba(0, 0, 0, 0.12),
  125. 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  126. }
  127. /* Animations */
  128. @keyframes fade-in {
  129. 0% {
  130. opacity: 0;
  131. }
  132. }
  133. /* Main Header */
  134. body>header a {
  135. margin-left: 8px;
  136. }
  137. /* Peers List */
  138. x-peers {
  139. width: 100%;
  140. overflow: hidden;
  141. flex-flow: row wrap;
  142. z-index: 2;
  143. }
  144. /* Empty Peers List */
  145. x-no-peers {
  146. padding: 8px;
  147. text-align: center;
  148. /* prevent flickering on load */
  149. animation: fade-in 300ms;
  150. animation-delay: 500ms;
  151. animation-fill-mode: backwards;
  152. }
  153. x-no-peers h2,
  154. x-no-peers a {
  155. color: var(--primary-color);
  156. }
  157. x-peers:not(:empty)+x-no-peers {
  158. display: none;
  159. }
  160. /* Peer */
  161. x-peer {
  162. -webkit-user-select: none;
  163. user-select: none;
  164. }
  165. x-peer label {
  166. width: var(--peer-width);
  167. padding: 8px;
  168. cursor: pointer;
  169. touch-action: manipulation;
  170. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  171. position: relative;
  172. }
  173. x-peer .name {
  174. width: var(--peer-width);
  175. white-space: nowrap;
  176. overflow: hidden;
  177. text-overflow: ellipsis;
  178. text-align: center;
  179. }
  180. input[type="file"] {
  181. visibility: hidden;
  182. position: absolute;
  183. }
  184. x-peer x-icon {
  185. --icon-size: 40px;
  186. width: var(--icon-size);
  187. padding: 12px;
  188. border-radius: 50%;
  189. background: var(--primary-color);
  190. color: white;
  191. display: flex;
  192. margin-bottom: 8px;
  193. transition: transform 150ms;
  194. will-change: transform;
  195. }
  196. x-peer:not([transfer]):hover x-icon,
  197. x-peer:not([transfer]):focus x-icon {
  198. transform: scale(1.05);
  199. }
  200. x-peer[transfer] x-icon {
  201. box-shadow: none;
  202. opacity: 0.8;
  203. transform: scale(1);
  204. }
  205. .status, .device-name {
  206. height: 18px;
  207. opacity: 0.7;
  208. }
  209. x-peer[transfer] .status:before {
  210. content: 'Transferring...';
  211. }
  212. x-peer:not([transfer]) .status,
  213. x-peer[transfer] .device-name{
  214. display: none;
  215. }
  216. x-peer x-icon {
  217. animation: pop 600ms ease-out 1;
  218. }
  219. @keyframes pop {
  220. 0% {
  221. transform: scale(0.7);
  222. }
  223. 40% {
  224. transform: scale(1.2);
  225. }
  226. }
  227. x-peer[drop] x-icon {
  228. transform: scale(1.1);
  229. }
  230. /* Footer */
  231. footer {
  232. position: absolute;
  233. bottom: 0;
  234. left: 0;
  235. right: 0;
  236. align-items: center;
  237. padding: 0 0 16px 0;
  238. text-align: center;
  239. }
  240. footer .logo {
  241. --icon-size: 80px;
  242. margin-bottom: 8px;
  243. color: var(--primary-color);
  244. }
  245. footer .font-body2 {
  246. color: var(--primary-color);
  247. }
  248. @media (min-height: 800px) {
  249. footer {
  250. margin-bottom: 16px;
  251. }
  252. }
  253. /* Dialog */
  254. x-dialog x-background {
  255. background: rgba(0, 0, 0, 0.61);
  256. z-index: 10;
  257. transition: opacity 300ms;
  258. will-change: opacity;
  259. padding: 16px;
  260. }
  261. x-dialog x-paper {
  262. z-index: 3;
  263. background: white;
  264. border-radius: 8px;
  265. padding: 16px 24px;
  266. width: 100%;
  267. max-width: 400px;
  268. box-sizing: border-box;
  269. transition: transform 300ms;
  270. will-change: transform;
  271. }
  272. x-dialog:not([show]) {
  273. pointer-events: none;
  274. }
  275. x-dialog:not([show]) x-paper {
  276. transform: scale(0.1);
  277. }
  278. x-dialog:not([show]) x-background {
  279. opacity: 0;
  280. }
  281. x-dialog .row-reverse>.button {
  282. margin-top: 16px;
  283. margin-left: 8px;
  284. }
  285. x-dialog a {
  286. color: var(--primary-color);
  287. }
  288. /* Receive Dialog */
  289. #receiveDialog .row{
  290. margin-top: 24px;
  291. margin-bottom: 8px;
  292. }
  293. /* Receive Text Dialog */
  294. #receiveTextDialog #text {
  295. width: 100%;
  296. word-break: break-all;
  297. max-height: 300px;
  298. overflow-x: hidden;
  299. overflow-y: auto;
  300. -webkit-user-select: all;
  301. -moz-user-select: all;
  302. user-select: all;
  303. white-space: pre;
  304. }
  305. #receiveTextDialog #text a {
  306. cursor: pointer;
  307. }
  308. #receiveTextDialog #text a:hover {
  309. text-decoration: underline;
  310. }
  311. #receiveTextDialog h3{
  312. /* Select the received text when double-clicking the dialog */
  313. user-select: none;
  314. pointer-events: none;
  315. }
  316. /* Button */
  317. .button {
  318. padding: 0 16px;
  319. box-sizing: border-box;
  320. min-height: 36px;
  321. min-width: 100px;
  322. font-size: 14px;
  323. line-height: 24px;
  324. font-weight: 700;
  325. letter-spacing: 0.12em;
  326. text-transform: uppercase;
  327. white-space: nowrap;
  328. cursor: pointer;
  329. user-select: none;
  330. background: inherit;
  331. color: var(--primary-color);
  332. }
  333. .button,
  334. .icon-button {
  335. position: relative;
  336. display: flex;
  337. align-items: center;
  338. justify-content: center;
  339. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  340. touch-action: manipulation;
  341. border: none;
  342. outline: none;
  343. }
  344. .button:before,
  345. .icon-button:before {
  346. content: '';
  347. position: absolute;
  348. top: 0;
  349. left: 0;
  350. right: 0;
  351. bottom: 0;
  352. background: currentColor;
  353. opacity: 0;
  354. transition: opacity 300ms;
  355. }
  356. .button:hover:before,
  357. .icon-button:hover:before {
  358. opacity: 0.1;
  359. }
  360. .button:before {
  361. border-radius: 8px;
  362. }
  363. .button:focus:before,
  364. .icon-button:focus:before {
  365. opacity: 0.2;
  366. }
  367. button::-moz-focus-inner {
  368. border: 0;
  369. }
  370. /* Icon Button */
  371. .icon-button {
  372. width: 40px;
  373. height: 40px;
  374. }
  375. .icon-button:before {
  376. border-radius: 50%;
  377. }
  378. /* Text Input */
  379. textarea {
  380. width: 100%;
  381. box-sizing: border-box;
  382. border: none;
  383. outline: none;
  384. padding: 16px 24px;
  385. border-radius: 16px;
  386. margin: 8px 0;
  387. line-height: 16px;
  388. font-size: 14px;
  389. font-family: inherit;
  390. resize: none;
  391. }
  392. /* Info Animation */
  393. #about {
  394. color: white;
  395. z-index: 11;
  396. overflow: hidden;
  397. pointer-events: none;
  398. text-align: center;
  399. }
  400. #about .fade-in {
  401. transition: opacity 300ms;
  402. will-change: opacity;
  403. transition-delay: 300ms;
  404. z-index: 11;
  405. pointer-events: all;
  406. }
  407. #about:not(:target) .fade-in {
  408. opacity: 0;
  409. pointer-events: none;
  410. transition-delay: 0;
  411. }
  412. #about .logo {
  413. --icon-size: 96px;
  414. }
  415. #about x-background {
  416. position: absolute;
  417. top: calc(32px - 200px);
  418. right: calc(32px - 200px);
  419. width: 400px;
  420. height: 400px;
  421. border-radius: 50%;
  422. background: var(--primary-color);
  423. transform: scale(0);
  424. z-index: -1;
  425. }
  426. /* Hack such that initial scale(0) isn't animated */
  427. #about x-background{
  428. will-change: transform;
  429. transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
  430. }
  431. #about:target x-background {
  432. transform: scale(10);
  433. }
  434. #about .row a {
  435. margin: 8px 8px -16px;
  436. }
  437. /* Loading Indicator */
  438. .progress {
  439. width: 80px;
  440. height: 80px;
  441. position: absolute;
  442. top: 0px;
  443. clip: rect(0px, 80px, 80px, 40px);
  444. --progress: rotate(0deg);
  445. transition: transform 200ms;
  446. }
  447. .circle {
  448. width: 72px;
  449. height: 72px;
  450. border: 4px solid var(--primary-color);
  451. border-radius: 40px;
  452. position: absolute;
  453. clip: rect(0px, 40px, 80px, 0px);
  454. will-change: transform;
  455. transform: var(--progress);
  456. }
  457. .over50 {
  458. clip: rect(auto, auto, auto, auto);
  459. }
  460. .over50 .circle.right {
  461. transform: rotate(180deg);
  462. }
  463. /* Generic placeholder */
  464. [placeholder]:empty:before {
  465. content: attr(placeholder);
  466. }
  467. /* Toast */
  468. .toast-container {
  469. padding: 0 8px 24px;
  470. overflow: hidden;
  471. pointer-events: none;
  472. }
  473. x-toast {
  474. position: absolute;
  475. min-height: 48px;
  476. bottom: 24px;
  477. width: 100%;
  478. max-width: 344px;
  479. background-color: #323232;
  480. color: rgba(255, 255, 255, 0.95);
  481. align-items: center;
  482. box-sizing: border-box;
  483. padding: 8px 24px;
  484. z-index: 20;
  485. transition: opacity 200ms, transform 300ms ease-out;
  486. cursor: default;
  487. line-height: 24px;
  488. border-radius: 8px;
  489. pointer-events: all;
  490. }
  491. x-toast:not([show]):not(:hover) {
  492. opacity: 0;
  493. transform: translateY(100px);
  494. }
  495. /* Instructions */
  496. x-instructions {
  497. position: absolute;
  498. top: 120px;
  499. opacity: 0.5;
  500. transition: opacity 300ms;
  501. z-index: -1;
  502. text-align: center;
  503. }
  504. x-instructions:before {
  505. content: attr(mobile);
  506. }
  507. x-peers:empty~x-instructions {
  508. opacity: 0;
  509. }
  510. /* Responsive Styles */
  511. @media (min-height: 800px) {
  512. footer {
  513. margin-bottom: 16px;
  514. }
  515. }
  516. @media screen and (min-height: 800px),
  517. screen and (min-width: 1100px) {
  518. x-instructions:before {
  519. content: attr(desktop);
  520. }
  521. }
  522. @media (max-height: 420px) {
  523. x-instructions {
  524. top: 24px;
  525. }
  526. footer .logo {
  527. --icon-size: 40px;
  528. }
  529. }
  530. @supports (-webkit-overflow-scrolling: touch) {
  531. /* CSS specific to iOS devices */
  532. html {
  533. position: fixed;
  534. }
  535. x-instructions:before {
  536. content: attr(mobile);
  537. }
  538. }
  539. /* Default colors */
  540. body {
  541. --text-color: #333;
  542. color: #333;
  543. --bkg-color: #fafafa;
  544. background-color: #fafafa;
  545. }
  546. /* Dark theme colors */
  547. body.dark-theme {
  548. --text-color: #eee;
  549. color: #eee;
  550. --bkg-color: #121212;
  551. background-color: #121212;
  552. }
  553. /* Styles for users who prefer dark mode at the OS level */
  554. @media (prefers-color-scheme: dark) {
  555. /* defaults to dark theme */
  556. body {
  557. --text-color: #eee;
  558. color: #eee;
  559. --bkg-color: #121212;
  560. background-color: #121212;
  561. }
  562. x-dialog x-paper {
  563. --bkg-color: #333;
  564. background-color: #333;
  565. }
  566. input {
  567. --text-color: #eee;
  568. color: #eee;
  569. --bkg-color: #121212;
  570. background-color: #121212;
  571. }
  572. /* Override dark mode with light mode styles if the user decides to swap */
  573. body.light-theme {
  574. --text-color: #333;
  575. color: #333;
  576. --bkg-color: #fafafa;
  577. background-color: #fafafa;
  578. }
  579. body.light-theme x-dialog x-paper {
  580. --bkg-color: #fff;
  581. background-color: #fff;
  582. }
  583. body.light-theme input {
  584. --text-color: #333;
  585. color: #333;
  586. --bkg-color: #f1f3f4;
  587. background: #f1f3f4;
  588. }
  589. }