@strixit/storyscript 0.0.0-stage → 1.0.0

package/src/UI/styles/storyscript.css

@@ -0,0 +1,735 @@
+:root {
+    --purple: rgb(72, 61, 139);
+    --black: #000;
+    --white: #fff;
+    --red: red;
+    --light-gray: lightgray;
+}
+
+body {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    color: var(--purple);
+    height: 100vh;
+}
+
+h2 {
+    font-family: 'Trebuchet MS';
+    color: var(--purple);
+}
+
+button {
+    margin-right: 10px;
+}
+
+
+#error-alert {
+    position: absolute;
+    z-index: 1500;
+    display: flex;
+    justify-content: center;
+}
+
+#error-alert, #error-alert > h2 {
+    font-family: 'Lucida Sans';
+}
+
+.error-alert-body {
+    margin-top: 50px;
+    max-width: 50%;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right, .menu-buttons {
+    float: right;
+}
+
+.menu-buttons {
+    line-height: 38px;
+}
+
+.float-none {
+    float: none;
+}
+
+.modal-dialog {
+    max-width: 50%;
+}
+
+.modal-dialog .modal-content {
+    max-height: 95%;
+    overflow-y: auto;
+}
+
+.modal-header {
+    display: grid;
+}
+
+.close {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--black);
+    text-shadow: 0 1px 0 var(--white);
+    opacity: .5;
+    border: none;
+    background: none;
+    justify-self: flex-end;
+    margin-top: -40px;
+}
+
+.menu-bar {
+    padding: 10px 15px 0 15px;
+}
+
+#mainmenu .btn, #confirmrestart .btn {
+    display: block;
+    margin-bottom: 10px;
+}
+
+.box-container {
+    border: solid 1px var(--purple);;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px 5px 0 0;
+}
+
+.box-title {
+    font-size: 1.3rem;
+    font-family: Andalus;
+    color: var(--white);;
+    background-color: var(--purple);;
+    padding: 0 10px;
+    margin: -10px -10px 10px -10px;
+}
+
+.box-container li .btn {
+    margin: 0 0 5px 5px;
+}
+
+.list-unstyled {
+    margin-bottom: 0;
+}
+
+.modal-body .list-unstyled {
+    margin-bottom: 10px;
+}
+
+.inline {
+    display: inline-block;
+}
+
+#create-character .input-group-prepend {
+    max-width: 70%;
+}
+
+#create-character .input-group-text {
+    white-space: normal;
+}
+
+#exploration-destinations .btn, #combinations .btn, #trade .btn {
+    margin: 0 0 5px 5px;
+}
+
+#exploration-destinations button span {
+    margin-right: 0;
+}
+
+#backpack-panel li {
+    margin-bottom: 5px;
+}
+
+.box-container li span {
+    margin-right: 10px;
+    padding: 0 5px;
+}
+
+#conversation-options ul {
+    padding: 15px 0 10px 1rem;
+    border-top: solid 1px lightgray;
+    border-bottom: solid 1px lightgray;
+}
+
+#conversation-options li {
+    cursor: pointer;
+    margin-bottom: 5px;
+}
+
+#conversation-options li:hover {
+    color: var(--bs-blue);
+}
+
+#conversation-options .unavailable {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+#conversation-history-title {
+    font-weight: bold;
+    margin: 20px 0 0 0;
+}
+
+#conversation-history ul {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+.conversation-lines p {
+    margin: 5px 0 0 0;
+}
+
+.conversation-option {
+    font-style: italic;
+    margin: 5px 0 10px 10px;
+}
+
+#combat option, #combat input {
+    text-align: center;
+}
+
+#combat input {
+    height: 38px;
+}
+
+#combat .btn {
+    margin: 5px 0;
+}
+
+.btn.combination-button img {
+    margin-right: 10px;
+    width: 32px;
+}
+
+#combat-win {
+    text-align: center;
+}
+
+.combat-win-header, .items-taken-header, .enemies-defeated-header {
+    font-weight: bold;
+}
+
+#combat-win ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+.currency-won {
+    margin-bottom: 10px;
+}
+
+#trade ul {
+    margin-top: 10px;
+}
+
+.trade-empty {
+    font-style: italic;
+    margin: 10px 0;
+    padding-left: 10px;
+}
+
+#save-game {
+    margin-bottom: 15px;
+}
+
+#save-game p {
+    font-weight: bold;
+}
+
+#save-game li {
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+#start-adventure {
+    margin: -10px 0 0 10px;
+}
+
+#encounters img, #conversation img {
+    max-width: 100%;
+}
+
+#conversation img {
+    margin-bottom: 10px;
+}
+
+#start-combat {
+    margin-top: 10px;
+}
+
+.save-button {
+    margin-bottom: 15px;
+}
+
+.action-log {
+    max-height: 300px;
+    overflow-y: scroll;
+}
+
+.barrier {
+    margin-bottom: 5px;
+}
+
+.action-select {
+    display: block;
+    margin-top: 5px;
+}
+
+.combatlog {
+    margin-top: 25px;
+    display: grid;
+    justify-content: center;
+}
+
+.combatlog-title {
+    text-align: center;
+}
+
+.combatlog li {
+    padding: 0 10px 0 10px;
+    text-align: center;
+}
+
+.single-item {
+    width: 100%;
+}
+
+#create-character {
+    padding-bottom: 10px;
+}
+
+.character-equipment .box-title {
+    margin-bottom: 0;
+}
+
+.character-equipment .row {
+    margin-top: 5px;
+}
+
+.character-equipment .item-box {
+    border-top: 1px solid var(--black);;
+    min-height: 25px;
+    line-height: 25px;
+}
+
+.equipment-panel div {
+    overflow: hidden;
+}
+
+.body-slot {
+    align-content: center;
+}
+
+.question-row, .attribute-row {
+    margin: 10px 0;
+}
+
+#world-properties li {
+    display: none;
+}
+
+.portraitFrame {
+    float: right;
+}
+
+#attributes-panel {
+    float: left;
+}
+
+button.restart {
+    margin-top: 25px;
+}
+
+.combine-active-hide {
+    display: none;
+}
+
+.combine-active-selected {
+    color: var(--red);;
+}
+
+.combine-selectable {
+    background-color: var(--light-gray);;
+    border-radius: 5px;
+}
+
+.combination-actions {
+    padding: 0 0 0 5px;
+}
+
+.combination-text, .combination-result-text {
+    display: inline-block;
+}
+
+#highscores {
+    margin-top: 20px;
+}
+
+table td {
+    padding: 10px;
+}
+
+#visual-features {
+    position: relative;
+}
+
+.feature-picture {
+    position: absolute;
+    cursor: pointer;
+}
+
+feature {
+    cursor: pointer;
+}
+
+#level-up #create-character {
+    padding-left: 0;
+}
+
+.dialog {
+    z-index: 10;
+    width: 50%;
+    top: 100px;
+}
+
+.custom-select {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    margin-bottom: 0;
+    display: inline-block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    vertical-align: middle;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    appearance: none;
+    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+#location-selector {
+    position: relative;
+    float: right;
+    max-width: 40%;
+}
+
+#location-selector-locations {
+    position: absolute;
+    inset: 0 auto auto 0;
+    margin-top: 40px;
+    cursor: pointer;
+}
+
+.refine-search {
+    font-style: italic;
+    opacity: .5;
+    margin-bottom: -20px;
+}
+
+.not-applicable {
+    line-height: normal;
+    visibility: hidden;
+}
+
+.enemy-list li {
+    display: inline-block;
+    margin-right: 25px;
+}
+
+#encounters img, .enemy-list img {
+    margin-left: 10px;
+}
+
+.enemy-row, .enemy-row > div, .character-row, .fight-row {
+    margin-top: 15px;
+    justify-content: center;
+    text-align: center;
+}
+
+.combat-header, .fight-row {
+    display: flex;
+    justify-content: center;
+}
+
+.unavailable, .empty-slot {
+    opacity: .5;
+}
+
+.unselectable {
+    color: rgba(0, 0, 0, 0.25);
+}
+
+.hitpoint-editor {
+    display: inline;
+}
+
+.combat-actions > li {
+    display: grid;
+    justify-content: center;
+}
+
+.map-dialog {
+    padding: 0;
+    max-height: 95%;
+    overflow: hidden;
+}
+
+.map-container {
+    position: relative;
+    overflow: hidden;
+    padding: 0;
+}
+
+.map-name {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: x-large;
+    font-weight: bold;
+    background-color: white;
+    padding: 0 10px;
+}
+
+.map-image {
+    transition: all 1s ease 0s;
+}
+
+.avatar-image, .map-location-label, .map-location-image {
+    transition: all 1s ease 0s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+}
+
+.map-location-label, .map-location-image, .map-name {
+    z-index: 1;
+}
+
+.show-marker-instructions {
+    display: block;
+    font-size: small;
+}
+
+.map-location-label {
+    background-color: white;
+    border: solid 1px black;
+    padding: 2px 5px;
+    white-space: nowrap;
+}
+
+.map-location-label.reachable, .map-location-image.reachable {
+    cursor: pointer;
+}
+
+.map-location-label span, .map-location-image img {
+    opacity: 0.5;
+}
+
+.map-location-label.reachable span, .map-location-image.reachable img {
+    opacity: 1;
+}
+
+.map-full-screen-toggle {
+    display: inline-block;
+    margin: 10px 0 0 10px;
+    cursor: pointer;
+    content: url(lookinglass.png);
+}
+
+.participant {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Common component styles */
+.collapsible {
+    overflow: hidden;
+    transition: max-height .2s ease-out;
+}
+
+.dropdown-menu-active {
+    position: absolute;
+    inset: 0 auto auto 5px;
+    margin: 0;
+    transform: translate(0px, 40px);
+}
+
+dialog {
+    border: none;
+    outline: none;
+}
+
+#autoplay-overlay, #title-screen, #title-screen-start {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#autoplay-overlay {
+    z-index: 1200;
+    align-content: center;
+    text-align: center;
+}
+
+#autoplay-text {
+    margin-top: 20px;
+    visibility: hidden;
+    font-size: 1.5em;
+    transition: visibility .1s ease-out;
+    display: flex;
+    justify-content: center;
+}
+
+#autoplay-text span {
+    background-color: white;
+    border-radius: 3px;
+    padding: 5px 10px;
+}
+
+#title-screen {
+    z-index: 1300;
+    background: white;
+    align-content: center;
+    text-align: center;
+}
+
+#title-screen-start {
+    z-index: 1310;
+    align-content: center;
+    text-align: center;
+}
+
+#title-screen h1 {
+    font-size: 5em;
+    margin-bottom: 40px;
+    white-space: nowrap;
+}
+
+#start-game {
+    font-size: 2.5em;
+    padding: 5px 40px;
+    margin-top: 200px;
+}
+
+#visual-features > img {
+    max-width: 100%;
+}
+
+.no-play-container {
+    display: flex;
+    justify-content: center;
+    font-size: 1.5em;
+}
+
+.no-play-container p {
+    margin: 0;
+}
+
+#victory {
+    text-align: center;
+    margin-top: 50px;
+}
+
+#victory > div {
+    display: flex;
+    justify-content: center;
+}
+
+@media (max-width: 1199px) {
+    .combination-result-text {
+        margin-top: 10px;
+    }
+
+    .no-play-container {
+        font-size: 1.4em;
+    }
+}
+
+@media (max-width: 991px) {
+    #title-screen h1 {
+        font-size: 4em;
+        margin-bottom: 40px;
+    }
+
+    #start-game {
+        font-size: 2em;
+    }
+
+    .no-play-container {
+        font-size: 1.3em;
+    }
+}
+
+@media (max-width: 767px) {
+    #title-screen h1 {
+        font-size: 3em;
+        margin-bottom: 40px;
+    }
+
+    #start-game {
+        font-size: 1.5em;
+        margin-top: 100px;
+    }
+
+    .no-play-container {
+        font-size: 1.2em;
+    }
+}
+
+@media (max-width: 576px) {
+    .box-title {
+        font-size: 1.1em;
+    }
+
+    #attributes-panel li, .equipment-panel div {
+        white-space: nowrap;
+    }
+
+    .modal-dialog {
+        max-width: 95%;
+    }
+
+    .barrier {
+        margin: 10px 0 0 0;
+    }
+
+    #quest-panel ul {
+        padding: 1em;
+    }
+
+    #title-screen h1 {
+        font-size: 2em;
+        margin-bottom: 40px;
+    }
+
+    #start-game {
+        font-size: 1.3em;
+        margin-top: 100px;
+    }
+
+    .no-play-container {
+        font-size: 1.1em;
+    }
+}
+
+@media (hover: hover) {
+    .combine-selectable:hover {
+        cursor: pointer;
+    }
+}
+
+@media (hover: none) {
+    .combine-selectable:hover {
+        cursor: default;
+    }
+}