1
1

screen.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866
  1. p {
  2. margin: 0px;
  3. padding: 0px;
  4. }
  5. .error {
  6. padding: 0.5em;
  7. background-color: #d6a3a7;
  8. color: #780100;
  9. }
  10. .error:before {
  11. content: "ERROR: ";
  12. font-weight: bold;
  13. }
  14. .unselectable, .textLink, .lineLink, .columnLink, .ccButton, .roomObject, .roomDirection, .rememberedRoomLink, .inventoryLink, .statusLink, .roundButton, p.choice, .combatChoice {
  15. -moz-user-select: -moz-none;
  16. -khtml-user-select: none;
  17. -webkit-user-select: none;
  18. -o-user-select: none;
  19. user-select: none;
  20. }
  21. .unselectable:hover, .textLink:hover, .lineLink:hover, .columnLink:hover, .ccButton:hover, .roomObject:hover, .roomDirection:hover, .rememberedRoomLink:hover, .inventoryLink:hover, .statusLink:hover, .roundButton:hover, p.choice:hover, .combatChoice:hover {
  22. cursor: default;
  23. }
  24. .scrollbar {
  25. overflow: auto;
  26. }
  27. .scrollbar::-webkit-scrollbar-track {
  28. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  29. background-color: #F5F5F5;
  30. }
  31. .scrollbar::-webkit-scrollbar {
  32. width: 6px;
  33. background-color: #F5F5F5;
  34. }
  35. .scrollbar::-webkit-scrollbar-thumb {
  36. background-color: #000000;
  37. }
  38. .header, .roomName, .roomExitsHeader, .inventoryHeader, .appearanceHeader {
  39. font-weight: bold;
  40. font-variant: small-caps;
  41. font-size: 1.1rem;
  42. }
  43. .alignRight {
  44. text-align: right;
  45. }
  46. .alignCenter {
  47. text-align: center;
  48. }
  49. body {
  50. background-color: #000;
  51. }
  52. #mainPage {
  53. background-color: #fff;
  54. }
  55. #mainPage, .topBottomFlex {
  56. position: absolute;
  57. left: 0px;
  58. top: 0px;
  59. width: 100%;
  60. height: 100%;
  61. display: flex;
  62. flex-direction: column;
  63. flex-wrap: nowrap;
  64. justify-content: flex-start;
  65. align-content: stretch;
  66. align-items: flex-start;
  67. }
  68. .leftRightFlex {
  69. display: flex;
  70. flex-direction: row;
  71. flex-wrap: nowrap;
  72. justify-content: flex-start;
  73. align-content: stretch;
  74. align-items: flex-start;
  75. }
  76. #mainPage {
  77. color: #000;
  78. font-family: "Source Sans Pro";
  79. }
  80. #statusLine, .noshrinkFlex, #roomExitsHolder {
  81. flex: 0 0 auto;
  82. align-self: stretch;
  83. height: auto;
  84. overflow: visible;
  85. position: relative;
  86. }
  87. #statusLine {
  88. background-color: black;
  89. color: #FFF;
  90. font-family: "Cousine";
  91. white-space: nowrap;
  92. padding: 0.4rem;
  93. }
  94. .statusColumnRight {
  95. margin-left: auto;
  96. }
  97. .statusColumnCenter {
  98. margin-left: auto;
  99. margin-right: auto;
  100. }
  101. .statusColumnDivider {
  102. border-right: #fff solid 1px;
  103. margin-left: 0.5rem;
  104. margin-right: 0.5rem;
  105. }
  106. #gameContainer, .growingFlex {
  107. flex: 1 1 auto;
  108. align-self: stretch;
  109. position: relative;
  110. }
  111. #leftWindow, #centerWindow, #rightWindow {
  112. flex: 1 0 auto;
  113. align-self: auto;
  114. flex-grow: 1;
  115. min-width: 10rem;
  116. position: relative;
  117. background-color: #fff;
  118. }
  119. #centerWindow {
  120. max-width: 60%;
  121. flex: 1 1 auto;
  122. flex-grow: 4;
  123. }
  124. #windowContainer {
  125. display: flex;
  126. flex-direction: row;
  127. flex-wrap: nowrap;
  128. justify-content: flex-start;
  129. align-content: stretch;
  130. align-items: stretch;
  131. height: 100%;
  132. width: 100%;
  133. position: absolute;
  134. }
  135. #currentTurn {
  136. overflow-x: hidden;
  137. overflow-y: scroll;
  138. min-height: 100px;
  139. background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.06) 100%);
  140. }
  141. #currentTurn > * {
  142. animation: fadein 1s;
  143. }
  144. @keyframes fadein {
  145. from {
  146. opacity: 0;
  147. }
  148. to {
  149. opacity: 1;
  150. }
  151. }
  152. #leftWindow {
  153. background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.06) 100%);
  154. }
  155. #appearanceTab {
  156. overflow: auto;
  157. padding: 0.8rem;
  158. }
  159. #inventoryTab {
  160. overflow-y: auto;
  161. flex-shrink: 1;
  162. }
  163. #currentRoomTab {
  164. overflow: hidden;
  165. background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 75%, rgba(0, 0, 0, 0.03) 100%);
  166. padding: 0.8rem;
  167. }
  168. #hyperlinksTab {
  169. background: rgba(0, 0, 0, 0.03);
  170. text-indent: 1em;
  171. }
  172. #mainPage.mobile #fakeparserTab {
  173. display: none;
  174. }
  175. #fakeparserTab {
  176. overflow: visible;
  177. background: rgba(0, 0, 0, 0.03);
  178. padding: 0.8rem;
  179. font-family: "Cousine";
  180. }
  181. #fakeparserTab:before {
  182. content: ">";
  183. }
  184. #currentCommand, #fakeParserThingy {
  185. font-weight: bold;
  186. }
  187. #fakeParserThingy {
  188. animation: blinker 0.9s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
  189. }
  190. @keyframes blinker {
  191. to {
  192. opacity: 0;
  193. }
  194. }
  195. #rememberedRoomsTab, #mapTab {
  196. overflow-y: auto;
  197. background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.06) 100%);
  198. padding: 0.8rem;
  199. }
  200. #roomExitsHolder {
  201. background: linear-gradient(to top left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.06) 100%);
  202. padding: 2ex;
  203. padding-top: 0px;
  204. }
  205. #exitsTab {
  206. overflow: hidden;
  207. background-color: rgba(0, 0, 0, 0.03);
  208. padding: 0.8rem;
  209. }
  210. #modalWindow {
  211. opacity: 0;
  212. pointer-events: none;
  213. z-index: 10;
  214. position: absolute;
  215. left: 0px;
  216. right: 0px;
  217. top: 0px;
  218. bottom: 0px;
  219. transition: opacity .3s ease-in-out;
  220. display: flex;
  221. align-items: center;
  222. justify-content: center;
  223. overflow: hidden;
  224. }
  225. *:not(#modalWindow) {
  226. transition: filter .3s ease-in-out;
  227. }
  228. body.modal > *:not(#modalWindow) {
  229. filter: blur(3px);
  230. }
  231. body.modal #modalWindow {
  232. opacity: 1;
  233. pointer-events: auto;
  234. }
  235. #modalContent {
  236. width: auto;
  237. height: auto;
  238. max-height: 85%;
  239. max-width: 85%;
  240. background: rgba(230, 240, 255, 0.4);
  241. border: 2px dashed transparent;
  242. box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
  243. border-radius: 4px;
  244. overflow-x: hidden;
  245. overflow-y: auto;
  246. padding: 1.6rem;
  247. padding-top: 0px;
  248. }
  249. #leftWindow, #rightWindow, #currentRoomTab, #hyperlinksTab, #fakeparserTab, #statusLine {
  250. transition: filter .3s ease-in-out;
  251. }
  252. #sceneAnimation {
  253. transition: opacity .3s ease-in-out;
  254. }
  255. #mainPage.turn #sceneAnimation {
  256. opacity: 1;
  257. }
  258. #mainPage.turn #leftWindow, #mainPage.turn #rightWindow, #mainPage.turn #currentRoomTab, #mainPage.turn #hyperlinksTab, #mainPage.turn #fakeparserTab, #mainPage.turn #statusLine {
  259. pointer-events: none;
  260. filter: blur(2px);
  261. }
  262. #mainPage.intro #leftWindow, #mainPage.intro #rightWindow, #mainPage.intro #statusLine {
  263. display: none;
  264. }
  265. #mainPage.intro #centerWindow {
  266. max-width: 100%;
  267. }
  268. #loadingScreen {
  269. position: absolute;
  270. left: 0px;
  271. top: 0px;
  272. bottom: 0px;
  273. right: 0px;
  274. background: linear-gradient(1deg, #FFF, #EEE);
  275. background-size: 400% 400%;
  276. z-index: 99999;
  277. }
  278. .lineLink {
  279. line-height: 2em;
  280. padding-left: 0.35em;
  281. padding-right: 0.35em;
  282. }
  283. .columnLink {
  284. line-height: 2em;
  285. padding-left: 0.35em;
  286. padding-right: 0.35em;
  287. }
  288. #linkTarget {
  289. font-weight: bold;
  290. display: inline;
  291. line-height: 2em;
  292. margin-left: 2ex;
  293. }
  294. #linkActions {
  295. display: inline;
  296. white-space: nowrap;
  297. }
  298. .mapRow {
  299. padding: 0;
  300. margin: 0;
  301. list-style: none;
  302. display: flex;
  303. flex-flow: row;
  304. justify-content: center;
  305. margin-top: 1ex;
  306. z-index: 1;
  307. }
  308. .mapRoom {
  309. z-index: 2;
  310. opacity: 0.5;
  311. max-width: 4.5ex;
  312. color: white;
  313. flex: 1 0 auto;
  314. margin-left: 1ex;
  315. height: auto;
  316. position: relative;
  317. }
  318. .mapRoom:last-child {
  319. margin-right: 1ex;
  320. }
  321. .mapRoom.linked:hover {
  322. opacity: 1;
  323. cursor: pointer;
  324. }
  325. .mapRoom.current {
  326. opacity: 1;
  327. }
  328. .mapRoom.current:hover {
  329. cursor: auto;
  330. }
  331. .mapRoom.current::after {
  332. display: block;
  333. position: absolute;
  334. content: '';
  335. border: solid 2px #000;
  336. box-sizing: border-box;
  337. height: 100%;
  338. width: 100%;
  339. }
  340. .mapRoom.unknown {
  341. opacity: 0;
  342. pointer-events: none;
  343. }
  344. .mapRoom::before {
  345. content: '';
  346. float: left;
  347. padding-top: 100%;
  348. }
  349. .mapRoomConnection, .mapRoomConnectionEast, .mapRoomConnectionWest, .mapRoomConnectionNorth, .mapRoomConnectionSouth {
  350. pointer-events: none;
  351. display: block;
  352. background-color: black;
  353. position: absolute;
  354. z-index: 3;
  355. }
  356. .mapRoomConnectionEast {
  357. width: 1ex;
  358. height: 0.6ex;
  359. right: -1ex;
  360. top: 50%;
  361. margin-top: -0.3ex;
  362. }
  363. .mapRoomConnectionWest {
  364. width: 1ex;
  365. height: 0.6ex;
  366. left: -1ex;
  367. top: 50%;
  368. margin-top: -0.3ex;
  369. }
  370. .mapRoomConnectionNorth {
  371. width: 0.6ex;
  372. height: 1ex;
  373. left: 50%;
  374. top: -1ex;
  375. margin-left: -0.3ex;
  376. }
  377. .mapRoomConnectionSouth {
  378. width: 0.6ex;
  379. height: 1ex;
  380. left: 50%;
  381. bottom: -1ex;
  382. margin-left: -0.3ex;
  383. }
  384. .mapRoomName {
  385. display: none;
  386. position: absolute;
  387. text-align: center;
  388. bottom: 105%;
  389. right: 5%;
  390. padding: 5%;
  391. white-space: nowrap;
  392. margin: auto;
  393. background-color: white;
  394. color: #000;
  395. font-weight: bold;
  396. border: solid 2px #000;
  397. z-index: 4;
  398. pointer-events: none;
  399. }
  400. .mapRoom.linked:hover > .mapRoomName {
  401. display: block;
  402. }
  403. .tomato {
  404. background: tomato;
  405. }
  406. .bloo {
  407. background: blue;
  408. }
  409. .blocked {
  410. background-color: black;
  411. }
  412. .blocked.unknown {
  413. opacity: 1;
  414. }
  415. #hoverInfo {
  416. z-index: 100;
  417. position: fixed;
  418. top: 10px;
  419. left: 10px;
  420. background-color: #fff;
  421. border: solid 2px #000;
  422. padding: 4px;
  423. font-weight: bold;
  424. pointer-events: none;
  425. max-width: 100%;
  426. display: none;
  427. box-sizing: border-box;
  428. }
  429. #forceTurnToTop {
  430. display: none;
  431. }
  432. #mainPage.mainmenu #statusLine, #mainPage.mainmenu #statusLine, #mainPage.mainmenu #rightWindow, #mainPage.mainmenu #currentRoomTab, #mainPage.mainmenu #fakeparserTab, #mainPage.mainmenu #hyperlinksTab, #mainPage.mainmenu #leftWindow {
  433. display: none;
  434. }
  435. #mainPage.mainmenu #forceTurnToTop {
  436. display: block;
  437. }
  438. #mainPage.mainmenu #centerWindow {
  439. max-width: 100%;
  440. }
  441. #mainPage.mainmenu #currentTurnTab {
  442. padding-left: 15%;
  443. padding-right: 15%;
  444. padding-bottom: 2%;
  445. }
  446. #mainPage.mainmenu.mobile #currentTurnTab {
  447. padding-left: 0%;
  448. padding-right: 0%;
  449. }
  450. #mainPage.mainmenu p.choice {
  451. border: none;
  452. background: none;
  453. color: #000;
  454. font-weight: bold;
  455. text-align: center;
  456. padding: 0rem;
  457. margin: 0rem;
  458. margin-bottom: 0.1rem;
  459. margin-top: 0.1rem;
  460. }
  461. #mainPage.mainmenu p.choice::before {
  462. color: #000;
  463. }
  464. #mainPage.mainmenu p.choice::after {
  465. content: " ";
  466. color: #000;
  467. }
  468. #mainPage.mainmenu p.choice:hover::before {
  469. content: "< ";
  470. color: #000;
  471. }
  472. #mainPage.mainmenu p.choice:hover::after {
  473. content: " >";
  474. color: #000;
  475. }
  476. #mainPage.mainmenu p.choice[data-shortcut]:hover::before {
  477. content: "< " attr(data-shortcut) ") ";
  478. color: #000;
  479. }
  480. #mainPage.mainmenu p.choice[data-shortcut]:hover::after {
  481. content: " >";
  482. color: #000;
  483. }
  484. #characterCreation {
  485. display: flex;
  486. flex-direction: row;
  487. flex-wrap: nowrap;
  488. justify-content: space-around;
  489. align-content: stretch;
  490. align-items: center;
  491. }
  492. #ccLeft {
  493. flex: 0 1 auto;
  494. width: 50%;
  495. align-self: auto;
  496. }
  497. #ccRight {
  498. flex: 0 1 auto;
  499. width: 50%;
  500. align-self: center;
  501. }
  502. .ccOption {
  503. margin: auto;
  504. margin-bottom: 2.25ex;
  505. text-align: center;
  506. }
  507. .ccRange {
  508. vertical-align: top;
  509. margin-left: 1.5ex;
  510. margin-right: 1.5ex;
  511. }
  512. .ccButton[data-shortcut]:before {
  513. content: " (" attr(data-shortcut) ") " !important;
  514. }
  515. .ccOptionTopLabel {
  516. text-align: center;
  517. font-weight: bold;
  518. margin-bottom: -0.25ex;
  519. }
  520. .ccHeader {
  521. text-align: center;
  522. font-weight: bold;
  523. margin-top: 2ex;
  524. margin-bottom: 0.5ex;
  525. font-size: 1.1rem;
  526. }
  527. .rangeValue {
  528. margin-top: -0.25ex;
  529. }
  530. .textLink, .lineLink, .columnLink, .ccButton, .roomObject, .roomDirection, .rememberedRoomLink, .inventoryLink {
  531. font-weight: bold;
  532. color: #0000aa;
  533. }
  534. .textLink:hover, .lineLink:hover, .columnLink:hover, .ccButton:hover, .roomObject:hover, .roomDirection:hover, .rememberedRoomLink:hover, .inventoryLink:hover {
  535. color: #0000ff;
  536. cursor: pointer;
  537. }
  538. .textLink:hover:active, .lineLink:hover:active, .columnLink:hover:active, .ccButton:hover:active, .roomObject:hover:active, .roomDirection:hover:active, .rememberedRoomLink:hover:active, .inventoryLink:hover:active {
  539. color: #000099;
  540. }
  541. .textLink[data-shortcut]:before, [data-shortcut].lineLink:before, [data-shortcut].columnLink:before, [data-shortcut].ccButton:before, [data-shortcut].roomObject:before, [data-shortcut].roomDirection:before, [data-shortcut].rememberedRoomLink:before, [data-shortcut].inventoryLink:before {
  542. content: attr(data-shortcut) ") ";
  543. }
  544. .statusLink {
  545. font-weight: bold;
  546. color: #99f;
  547. }
  548. .statusLink:hover {
  549. color: #ddf;
  550. cursor: pointer;
  551. }
  552. .statusLink:hover:active {
  553. color: #66d;
  554. }
  555. .roomName {
  556. font-size: 1.2rem;
  557. margin-bottom: 1ex;
  558. }
  559. .roomDescription {
  560. text-indent: 1rem;
  561. text-align: justify;
  562. margin-top: 1ex;
  563. }
  564. .roomExitsHeader {
  565. margin-top: 2ex;
  566. }
  567. .roomExit {
  568. text-indent: 1.5rem;
  569. margin-top: 1ex;
  570. }
  571. .rememberedRoomRow {
  572. display: flex;
  573. flex-direction: row;
  574. flex-wrap: nowrap;
  575. justify-content: space-between;
  576. align-content: stretch;
  577. align-items: stretch;
  578. }
  579. .rememberedRoomRow:hover {
  580. background-color: rgba(0, 0, 0, 0.12);
  581. }
  582. .rememberedRoomRow.currentRoom > .rememberedRoomLink {
  583. color: #000;
  584. display: none;
  585. }
  586. .rememberedRoomRow.currentRoom > .rememberedRoomLink:hover {
  587. cursor: auto;
  588. }
  589. .rememberedRoomRow.currentRoom > .rememberedRoomLink.name {
  590. display: initial;
  591. }
  592. .rememberedRoomLink {
  593. white-space: nowrap;
  594. overflow: hidden;
  595. order: 2;
  596. flex: 0 0 auto;
  597. align-self: auto;
  598. padding: 0.6ex;
  599. padding-left: 1ex;
  600. padding-right: 1ex;
  601. }
  602. .rememberedRoomLink.name {
  603. text-overflow: ellipsis;
  604. padding-left: 1.5ex;
  605. order: 1;
  606. flex: 1 1 auto;
  607. }
  608. .rememberedRoomLink.name:hover {
  609. overflow: visible;
  610. white-space: initial;
  611. }
  612. p.contentOld {
  613. color: #888;
  614. }
  615. p.contentOld:hover {
  616. color: #000;
  617. }
  618. p.contentOld, p.content {
  619. text-indent: 1rem;
  620. text-align: justify;
  621. padding: 0.5rem;
  622. padding-left: 1.6rem;
  623. padding-right: 1.6rem;
  624. }
  625. p.contentOld.centered, p.content.centered {
  626. text-indent: 0px;
  627. text-align: center;
  628. }
  629. .textIndenter {
  630. margin-right: 1rem;
  631. }
  632. div.choiceContainer {
  633. padding-bottom: 0.8rem;
  634. }
  635. div.choiceContainer:hover {
  636. background-color: rgba(10, 10, 80, 0.05);
  637. }
  638. .roundButton, p.choice, .combatChoice {
  639. padding: 0.3rem;
  640. margin: 0.8rem;
  641. margin-bottom: 0.3rem;
  642. margin-top: 0.3rem;
  643. border: solid 1px #0000aa;
  644. border-radius: 1rem;
  645. background-color: #fff;
  646. }
  647. .roundButton[data-shortcut]:before, p[data-shortcut].choice:before, [data-shortcut].combatChoice:before {
  648. content: attr(data-shortcut) ") ";
  649. font-weight: bold;
  650. color: #0000aa;
  651. }
  652. .roundButton:hover, p.choice:hover, .combatChoice:hover {
  653. cursor: pointer;
  654. background-color: #eeeeff;
  655. border-color: #0000ff;
  656. }
  657. .roundButton:hover[data-shortcut]:before, p.choice:hover[data-shortcut]:before, .combatChoice:hover[data-shortcut]:before {
  658. color: #0000ff;
  659. }
  660. .roundButton:active, p.choice:active, .combatChoice:active {
  661. background-color: #c8c8ff;
  662. border-color: #000099;
  663. }
  664. .roundButton:active[data-shortcut]:before, p.choice:active[data-shortcut]:before, .combatChoice:active[data-shortcut]:before {
  665. color: #000099;
  666. }
  667. p.choice {
  668. text-indent: 0.5rem;
  669. text-align: justify;
  670. }
  671. p.choice.picked {
  672. color: #888;
  673. }
  674. .combatChoicesContainer {
  675. display: flex;
  676. flex-direction: row;
  677. flex-wrap: wrap;
  678. justify-content: center;
  679. align-content: stretch;
  680. align-items: stretch;
  681. }
  682. .combatChoice {
  683. flex: 0 0 auto;
  684. align-self: auto;
  685. overflow: hidden;
  686. padding: 0.6em;
  687. margin: 0.3em;
  688. }
  689. p.turnStart {
  690. display: flex;
  691. flex-basis: 100%;
  692. align-items: center;
  693. font-size: 0.8rem;
  694. font-weight: bold;
  695. line-height: 1em;
  696. }
  697. p.turnStart::before {
  698. margin-right: 10px;
  699. }
  700. p.turnStart::after {
  701. margin-left: 10px;
  702. }
  703. p.turnStart::before, p.turnStart::after {
  704. content: "";
  705. flex-grow: 1;
  706. border-bottom: solid 1px rgba(180, 0, 0, 0.6);
  707. }
  708. .horFlex {
  709. display: flex;
  710. flex-direction: row;
  711. flex-wrap: nowrap;
  712. justify-content: space-around;
  713. align-content: stretch;
  714. align-items: center;
  715. }
  716. .horFlexColumn {
  717. flex: 0 1 auto;
  718. width: 50%;
  719. align-self: auto;
  720. }
  721. .inventoryHeader {
  722. margin-top: 1em;
  723. margin-left: 1ex;
  724. }
  725. .inventoryRow {
  726. display: flex;
  727. flex-direction: row;
  728. flex-wrap: nowrap;
  729. justify-content: space-between;
  730. align-content: stretch;
  731. align-items: stretch;
  732. }
  733. .inventoryRow:hover {
  734. background-color: rgba(0, 0, 0, 0.12);
  735. }
  736. .inventoryLink {
  737. white-space: nowrap;
  738. overflow: hidden;
  739. order: 2;
  740. flex: 0 0 auto;
  741. align-self: auto;
  742. padding: 0.6ex;
  743. padding-left: 1ex;
  744. padding-right: 1ex;
  745. }
  746. .inventoryLink.name {
  747. text-overflow: ellipsis;
  748. padding-left: 1.5ex;
  749. order: 1;
  750. flex: 1 1 auto;
  751. }
  752. .inventoryLink.name:hover {
  753. overflow: visible;
  754. white-space: initial;
  755. }
  756. .inventoryGold {
  757. text-align: center;
  758. font-size: 1rem;
  759. font-weight: normal;
  760. padding-top: 1ex;
  761. }
  762. #inventoryTarget {
  763. padding-bottom: 1ex;
  764. }
  765. .appearanceDescription {
  766. padding: 0.5ex;
  767. text-align: justify;
  768. text-indent: 1em;
  769. line-height: 1.5em;
  770. }