/* Welcome to Compass. * In this file you should write your main styles. (or centralize your imports) * Import this file using the following HTML or equivalent: * */ /* line 7, ../sass/screen.scss */ p { margin: 0px; padding: 0px; } /* line 1, ../sass/_page.scss */ .error { padding: 0.5em; background-color: #d6a3a7; color: #780100; } /* line 5, ../sass/_page.scss */ .error:before { content: "ERROR: "; font-weight: bold; } /* line 11, ../sass/_page.scss */ .unselectable, .textLink, .lineLink, .columnLink, .ccButton, .roomObject, .roomDirection, .rememberedRoomLink, .inventoryLink, .statusLink, .roundButton, p.choice, .combatChoice { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } /* line 17, ../sass/_page.scss */ .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 { cursor: default; } /* line 23, ../sass/_page.scss */ .scrollbar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; } /* line 28, ../sass/_page.scss */ .scrollbar::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } /* line 33, ../sass/_page.scss */ .scrollbar::-webkit-scrollbar-thumb { background-color: #000000; } /* line 38, ../sass/_page.scss */ .header, .roomName, .roomExitsHeader, .inventoryHeader, .appearanceHeader { font-weight: bold; font-variant: small-caps; font-size: 1.1rem; } /* line 44, ../sass/_page.scss */ .alignRight { text-align: right; } /* line 48, ../sass/_page.scss */ .alignCenter { text-align: center; } /* line 53, ../sass/_page.scss */ body { background-color: #000; } /* line 57, ../sass/_page.scss */ #mainPage { background-color: #fff; } /* line 61, ../sass/_page.scss */ #mainPage, .topBottomFlex { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } /* line 75, ../sass/_page.scss */ .leftRightFlex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } /* line 84, ../sass/_page.scss */ #mainPage { color: #000; font-family: "Source Sans Pro"; } /* line 89, ../sass/_page.scss */ #statusLine, .noshrinkFlex, #roomExitsHolder { flex: 0 0 auto; align-self: stretch; height: auto; overflow: visible; position: relative; } /* line 97, ../sass/_page.scss */ #statusLine { background-color: black; color: #FFF; font-family: "Cousine"; white-space: nowrap; padding: 0.4rem; } /* line 105, ../sass/_page.scss */ .statusColumnRight { margin-left: auto; } /* line 109, ../sass/_page.scss */ .statusColumnCenter { margin-left: auto; margin-right: auto; } /* line 114, ../sass/_page.scss */ .statusColumnDivider { border-right: #fff solid 1px; margin-left: 0.5rem; margin-right: 0.5rem; } /* line 120, ../sass/_page.scss */ #gameContainer, .growingFlex { flex: 1 1 auto; align-self: stretch; position: relative; } /* line 126, ../sass/_page.scss */ #leftWindow, #centerWindow, #rightWindow { flex: 1 0 auto; align-self: auto; flex-grow: 1; min-width: 10rem; position: relative; background-color: #fff; } /* line 135, ../sass/_page.scss */ #centerWindow { max-width: 60%; flex: 1 1 auto; flex-grow: 4; } /* line 141, ../sass/_page.scss */ #windowContainer { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch; height: 100%; width: 100%; position: absolute; } /* line 153, ../sass/_page.scss */ #currentTurn { overflow-x: hidden; overflow-y: scroll; min-height: 100px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.06) 100%); } /* line 160, ../sass/_page.scss */ #currentTurn > * { animation: fadein 1s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* line 168, ../sass/_page.scss */ #leftWindow { 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%); } /* line 172, ../sass/_page.scss */ #appearanceTab { overflow: auto; padding: 0.8rem; } /* line 178, ../sass/_page.scss */ #inventoryTab { overflow: hidden; } /* line 183, ../sass/_page.scss */ #currentRoomTab { overflow: hidden; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 75%, rgba(0, 0, 0, 0.03) 100%); padding: 0.8rem; } /* line 189, ../sass/_page.scss */ #hyperlinksTab { background: rgba(0, 0, 0, 0.03); text-indent: 1em; } /* line 194, ../sass/_page.scss */ #mainPage.mobile #fakeparserTab { display: none; } /* line 198, ../sass/_page.scss */ #fakeparserTab { overflow: visible; background: rgba(0, 0, 0, 0.03); padding: 0.8rem; font-family: "Cousine"; } /* line 204, ../sass/_page.scss */ #fakeparserTab:before { content: ">"; } /* line 209, ../sass/_page.scss */ #currentCommand, #fakeParserThingy { font-weight: bold; } /* line 213, ../sass/_page.scss */ #fakeParserThingy { animation: blinker 0.9s cubic-bezier(0.5, 0, 1, 1) infinite alternate; } @keyframes blinker { to { opacity: 0; } } /* line 219, ../sass/_page.scss */ #rememberedRoomsTab, #mapTab { overflow-y: auto; 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%); padding: 0.8rem; } /* line 226, ../sass/_page.scss */ #roomExitsHolder { 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%); padding: 2ex; padding-top: 0px; } /* line 233, ../sass/_page.scss */ #exitsTab { overflow: hidden; background-color: rgba(0, 0, 0, 0.03); padding: 0.8rem; } /* line 1, ../sass/_modal.scss */ #modalWindow { opacity: 0; pointer-events: none; z-index: 10; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; transition: opacity .3s ease-in-out; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* line 17, ../sass/_modal.scss */ *:not(#modalWindow) { transition: filter .3s ease-in-out; } /* line 22, ../sass/_modal.scss */ body.modal > *:not(#modalWindow) { filter: blur(3px); } /* line 26, ../sass/_modal.scss */ body.modal #modalWindow { opacity: 1; pointer-events: auto; } /* line 32, ../sass/_modal.scss */ #modalContent { width: auto; height: auto; max-height: 85%; max-width: 85%; background: rgba(230, 240, 255, 0.4); border: 2px dashed transparent; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); border-radius: 4px; overflow-x: hidden; overflow-y: auto; padding: 1.6rem; padding-top: 0px; } /* line 47, ../sass/_modal.scss */ #leftWindow, #rightWindow, #currentRoomTab, #hyperlinksTab, #fakeparserTab, #statusLine { transition: filter .3s ease-in-out; } /* line 52, ../sass/_modal.scss */ #mainPage.turn #leftWindow, #mainPage.turn #rightWindow, #mainPage.turn #currentRoomTab, #mainPage.turn #hyperlinksTab, #mainPage.turn #fakeparserTab, #mainPage.turn #statusLine { pointer-events: none; filter: blur(2px); } /* line 59, ../sass/_modal.scss */ #mainPage.intro #leftWindow, #mainPage.intro #rightWindow, #mainPage.intro #statusLine { display: none; } /* line 63, ../sass/_modal.scss */ #mainPage.intro #centerWindow { max-width: 100%; } /* line 68, ../sass/_modal.scss */ #loadingScreen { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; background: linear-gradient(1deg, #FFF, #EEE); background-size: 400% 400%; z-index: 99999; } /* line 12, ../sass/_linktab.scss */ .lineLink { line-height: 2em; padding-left: 0.35em; padding-right: 0.35em; } /* line 23, ../sass/_linktab.scss */ .columnLink { line-height: 2em; padding-left: 0.35em; padding-right: 0.35em; } /* line 30, ../sass/_linktab.scss */ #linkTarget { font-weight: bold; display: inline; line-height: 2em; margin-left: 2ex; } /* line 37, ../sass/_linktab.scss */ #linkActions { display: inline; white-space: nowrap; } /* line 1, ../sass/_map.scss */ .mapRow { padding: 0; margin: 0; list-style: none; display: flex; flex-flow: row; justify-content: center; margin-top: 1ex; z-index: 1; } /* line 12, ../sass/_map.scss */ .mapRoom { z-index: 2; opacity: 0.5; max-width: 4.5ex; color: white; flex: 1 0 auto; margin-left: 1ex; height: auto; position: relative; } /* line 21, ../sass/_map.scss */ .mapRoom:last-child { margin-right: 1ex; } /* line 26, ../sass/_map.scss */ .mapRoom.linked:hover { opacity: 1; cursor: pointer; } /* line 31, ../sass/_map.scss */ .mapRoom.current { opacity: 1; } /* line 33, ../sass/_map.scss */ .mapRoom.current:hover { cursor: auto; } /* line 37, ../sass/_map.scss */ .mapRoom.current::after { display: block; position: absolute; content: ''; border: solid 2px #000; box-sizing: border-box; height: 100%; width: 100%; } /* line 55, ../sass/_map.scss */ .mapRoom.unknown { opacity: 0; pointer-events: none; } /* line 60, ../sass/_map.scss */ .mapRoom::before { content: ''; float: left; padding-top: 100%; } /* line 67, ../sass/_map.scss */ .mapRoomConnection, .mapRoomConnectionEast, .mapRoomConnectionWest, .mapRoomConnectionNorth, .mapRoomConnectionSouth { pointer-events: none; display: block; background-color: black; position: absolute; z-index: 3; } /* line 75, ../sass/_map.scss */ .mapRoomConnectionEast { width: 1ex; height: 0.6ex; right: -1ex; top: 50%; margin-top: -0.3ex; } /* line 84, ../sass/_map.scss */ .mapRoomConnectionWest { width: 1ex; height: 0.6ex; left: -1ex; top: 50%; margin-top: -0.3ex; } /* line 93, ../sass/_map.scss */ .mapRoomConnectionNorth { width: 0.6ex; height: 1ex; left: 50%; top: -1ex; margin-left: -0.3ex; } /* line 102, ../sass/_map.scss */ .mapRoomConnectionSouth { width: 0.6ex; height: 1ex; left: 50%; bottom: -1ex; margin-left: -0.3ex; } /* line 111, ../sass/_map.scss */ .mapRoomName { display: none; position: absolute; text-align: center; bottom: 105%; right: 5%; padding: 5%; white-space: nowrap; margin: auto; background-color: white; color: #000; font-weight: bold; border: solid 2px #000; z-index: 4; pointer-events: none; } /* line 128, ../sass/_map.scss */ .mapRoom.linked:hover > .mapRoomName { display: block; } /* line 132, ../sass/_map.scss */ .tomato { background: tomato; } /* line 136, ../sass/_map.scss */ .bloo { background: blue; } /* line 140, ../sass/_map.scss */ .blocked { background-color: black; } /* line 143, ../sass/_map.scss */ .blocked.unknown { opacity: 1; } /* line 1, ../sass/_hoverInfo.scss */ #hoverInfo { z-index: 100; position: fixed; top: 10px; left: 10px; background-color: #fff; border: solid 2px #000; padding: 4px; font-weight: bold; pointer-events: none; max-width: 100%; display: none; box-sizing: border-box; } /* line 1, ../sass/_mainMenu.scss */ #forceTurnToTop { display: none; } /* line 6, ../sass/_mainMenu.scss */ #mainPage.mainmenu #statusLine, #mainPage.mainmenu #statusLine, #mainPage.mainmenu #rightWindow, #mainPage.mainmenu #currentRoomTab, #mainPage.mainmenu #fakeparserTab, #mainPage.mainmenu #hyperlinksTab, #mainPage.mainmenu #leftWindow { display: none; } /* line 10, ../sass/_mainMenu.scss */ #mainPage.mainmenu #forceTurnToTop { display: block; } /* line 14, ../sass/_mainMenu.scss */ #mainPage.mainmenu #centerWindow { max-width: 100%; } /* line 18, ../sass/_mainMenu.scss */ #mainPage.mainmenu #currentTurnTab { padding-left: 15%; padding-right: 15%; padding-bottom: 2%; } /* line 24, ../sass/_mainMenu.scss */ #mainPage.mainmenu.mobile #currentTurnTab { padding-left: 0%; padding-right: 0%; } /* line 30, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice { border: none; background: none; color: #000; font-weight: bold; text-align: center; padding: 0rem; margin: 0rem; margin-bottom: 0.1rem; margin-top: 0.1rem; } /* line 44, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice::before { color: #000; } /* line 47, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice::after { content: " "; color: #000; } /* line 53, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice:hover::before { content: "< "; color: #000; } /* line 57, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice:hover::after { content: " >"; color: #000; } /* line 64, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice[data-shortcut]:hover::before { content: "< " attr(data-shortcut) ") "; color: #000; } /* line 68, ../sass/_mainMenu.scss */ #mainPage.mainmenu p.choice[data-shortcut]:hover::after { content: " >"; color: #000; } /* line 1, ../sass/_characterCreation.scss */ #characterCreation { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: stretch; align-items: center; } /* line 10, ../sass/_characterCreation.scss */ #ccLeft { flex: 0 1 auto; width: 50%; align-self: auto; } /* line 16, ../sass/_characterCreation.scss */ #ccRight { flex: 0 1 auto; width: 50%; align-self: center; } /* line 22, ../sass/_characterCreation.scss */ .ccOption { margin: auto; margin-bottom: 2.25ex; text-align: center; } /* line 28, ../sass/_characterCreation.scss */ .ccRange { vertical-align: top; margin-left: 1.5ex; margin-right: 1.5ex; } /* line 36, ../sass/_characterCreation.scss */ .ccButton[data-shortcut]:before { content: " (" attr(data-shortcut) ") " !important; } /* line 41, ../sass/_characterCreation.scss */ .ccOptionTopLabel { text-align: center; font-weight: bold; margin-bottom: -0.25ex; } /* line 47, ../sass/_characterCreation.scss */ .ccHeader { text-align: center; font-weight: bold; margin-top: 2ex; margin-bottom: 0.5ex; font-size: 1.1rem; } /* line 55, ../sass/_characterCreation.scss */ .rangeValue { margin-top: -0.25ex; } /* line 1, ../sass/text/_links.scss */ .textLink, .lineLink, .columnLink, .ccButton, .roomObject, .roomDirection, .rememberedRoomLink, .inventoryLink { font-weight: bold; color: #0000aa; } /* line 6, ../sass/text/_links.scss */ .textLink:hover, .lineLink:hover, .columnLink:hover, .ccButton:hover, .roomObject:hover, .roomDirection:hover, .rememberedRoomLink:hover, .inventoryLink:hover { color: #0000ff; cursor: pointer; } /* line 9, ../sass/text/_links.scss */ .textLink:hover:active, .lineLink:hover:active, .columnLink:hover:active, .ccButton:hover:active, .roomObject:hover:active, .roomDirection:hover:active, .rememberedRoomLink:hover:active, .inventoryLink:hover:active { color: #000099; } /* line 14, ../sass/text/_links.scss */ .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 { content: attr(data-shortcut) ") "; } /* line 19, ../sass/text/_links.scss */ .statusLink { font-weight: bold; color: #99f; } /* line 24, ../sass/text/_links.scss */ .statusLink:hover { color: #ddf; cursor: pointer; } /* line 27, ../sass/text/_links.scss */ .statusLink:hover:active { color: #66d; } /* line 1, ../sass/text/_room.scss */ .roomName { font-size: 1.2rem; margin-bottom: 1ex; } /* line 7, ../sass/text/_room.scss */ .roomDescription { text-indent: 1rem; text-align: justify; margin-top: 1ex; } /* line 13, ../sass/text/_room.scss */ .roomExitsHeader { margin-top: 2ex; } /* line 18, ../sass/text/_room.scss */ .roomExit { text-indent: 1.5rem; margin-top: 1ex; } /* line 27, ../sass/text/_room.scss */ .rememberedRoomRow { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: stretch; } /* line 34, ../sass/text/_room.scss */ .rememberedRoomRow:hover { background-color: rgba(0, 0, 0, 0.12); } /* line 39, ../sass/text/_room.scss */ .rememberedRoomRow.currentRoom > .rememberedRoomLink { color: #000; display: none; } /* line 43, ../sass/text/_room.scss */ .rememberedRoomRow.currentRoom > .rememberedRoomLink:hover { cursor: auto; } /* line 47, ../sass/text/_room.scss */ .rememberedRoomRow.currentRoom > .rememberedRoomLink.name { display: initial; } /* line 54, ../sass/text/_room.scss */ .rememberedRoomLink { white-space: nowrap; overflow: hidden; order: 2; flex: 0 0 auto; align-self: auto; padding: 0.6ex; padding-left: 1ex; padding-right: 1ex; } /* line 65, ../sass/text/_room.scss */ .rememberedRoomLink.name { text-overflow: ellipsis; padding-left: 1.5ex; order: 1; flex: 1 1 auto; } /* line 71, ../sass/text/_room.scss */ .rememberedRoomLink.name:hover { overflow: visible; white-space: initial; } /* line 1, ../sass/text/_say.scss */ p.contentOld { color: #888; } /* line 4, ../sass/text/_say.scss */ p.contentOld:hover { color: #000; } /* line 9, ../sass/text/_say.scss */ p.contentOld, p.content { text-indent: 1rem; text-align: justify; padding: 0.5rem; padding-left: 1.6rem; padding-right: 1.6rem; } /* line 16, ../sass/text/_say.scss */ p.contentOld.centered, p.content.centered { text-indent: 0px; text-align: center; } /* line 22, ../sass/text/_say.scss */ .textIndenter { margin-right: 1rem; } /* line 26, ../sass/text/_say.scss */ div.choiceContainer { padding-bottom: 0.8rem; } /* line 28, ../sass/text/_say.scss */ div.choiceContainer:hover { background-color: rgba(10, 10, 80, 0.05); } /* line 33, ../sass/text/_say.scss */ .roundButton, p.choice, .combatChoice { padding: 0.3rem; margin: 0.8rem; margin-bottom: 0.3rem; margin-top: 0.3rem; border: solid 1px #0000aa; border-radius: 1rem; background-color: #fff; } /* line 43, ../sass/text/_say.scss */ .roundButton[data-shortcut]:before, p[data-shortcut].choice:before, [data-shortcut].combatChoice:before { content: attr(data-shortcut) ") "; font-weight: bold; color: #0000aa; } /* line 49, ../sass/text/_say.scss */ .roundButton:hover, p.choice:hover, .combatChoice:hover { cursor: pointer; background-color: #eeeeff; border-color: #0000ff; } /* line 53, ../sass/text/_say.scss */ .roundButton:hover[data-shortcut]:before, p.choice:hover[data-shortcut]:before, .combatChoice:hover[data-shortcut]:before { color: #0000ff; } /* line 58, ../sass/text/_say.scss */ .roundButton:active, p.choice:active, .combatChoice:active { background-color: #c8c8ff; border-color: #000099; } /* line 61, ../sass/text/_say.scss */ .roundButton:active[data-shortcut]:before, p.choice:active[data-shortcut]:before, .combatChoice:active[data-shortcut]:before { color: #000099; } /* line 67, ../sass/text/_say.scss */ p.choice { text-indent: 0.5rem; text-align: justify; } /* line 71, ../sass/text/_say.scss */ p.choice.picked { color: #888; } /* line 76, ../sass/text/_say.scss */ .combatChoicesContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: stretch; } /* line 85, ../sass/text/_say.scss */ .combatChoice { flex: 0 0 auto; align-self: auto; overflow: hidden; padding: 0.6em; margin: 0.3em; } /* line 94, ../sass/text/_say.scss */ p.turnStart { display: flex; flex-basis: 100%; align-items: center; font-size: 0.8rem; font-weight: bold; line-height: 1em; } /* line 102, ../sass/text/_say.scss */ p.turnStart::before { margin-right: 10px; } /* line 106, ../sass/text/_say.scss */ p.turnStart::after { margin-left: 10px; } /* line 110, ../sass/text/_say.scss */ p.turnStart::before, p.turnStart::after { content: ""; flex-grow: 1; border-bottom: solid 1px rgba(180, 0, 0, 0.6); } /* line 117, ../sass/text/_say.scss */ .horFlex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: stretch; align-items: center; } /* line 126, ../sass/text/_say.scss */ .horFlexColumn { flex: 0 1 auto; width: 50%; align-self: auto; } /* line 1, ../sass/text/_inventory.scss */ .inventoryHeader { margin-top: 1em; margin-left: 1ex; } /* line 7, ../sass/text/_inventory.scss */ .inventoryRow { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: stretch; } /* line 14, ../sass/text/_inventory.scss */ .inventoryRow:hover { background-color: rgba(0, 0, 0, 0.12); } /* line 19, ../sass/text/_inventory.scss */ .inventoryLink { white-space: nowrap; overflow: hidden; order: 2; flex: 0 0 auto; align-self: auto; padding: 0.6ex; padding-left: 1ex; padding-right: 1ex; } /* line 30, ../sass/text/_inventory.scss */ .inventoryLink.name { text-overflow: ellipsis; padding-left: 1.5ex; order: 1; flex: 1 1 auto; } /* line 36, ../sass/text/_inventory.scss */ .inventoryLink.name:hover { overflow: visible; white-space: initial; } /* line 42, ../sass/text/_inventory.scss */ .inventoryGold { text-align: center; font-size: 1rem; font-weight: normal; padding-top: 1ex; } /* line 49, ../sass/text/_inventory.scss */ #inventoryTarget { padding-bottom: 1ex; } /* line 5, ../sass/text/_appearance.scss */ .appearanceDescription { padding: 0.5ex; text-align: justify; text-indent: 1em; line-height: 1.5em; }