Add code for data-ck attributes which can occur on any tag
Add code for data-ck attributes which can occur on any tag
/**
* FRISE (FRee Interactive Story Engine)
* A light-weight engine for writing interactive fiction and games.
*
* Copyright 2022-2023 Christopher Pollett chris@pollett.org
*
* @license
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*
* @file The CSS code used to style the elements used by a game
* @author Chris Pollett
* @link https://www.frise.org/
* @copyright 2022 - 2023
*/
/* make sure game tags we don't want to display, we don't display
*/
x-game,
x-action
{
display: none;
}
/*
* General useful classes
*/
.float-right
{
float: right;
}
.float-left
{
float: left;
}
.float-opposite
{
float: right;
}
.rtl .float-opposite
{
float: left;
}
.left
{
text-align: left;
}
.right
{
text-align: right;
}
.opposite
{
text-align: left;
}
.rtl .opposite
{
text-align: right;
}
.center
{
text-align: center;
}
.fit-content
{
width: fit-content;
}
.rounded
{
border-radius: 20px;
}
.rounded-top
{
border-radius: 20px 20px 0 0;
}
.medium-width
{
width: 150px;
}
.mobile .medium-width
{
width: 100px;
}
.medium-border
{
border: solid 2px black;
}
.outline
{
color: white;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
/*
* Styles specific to the game content and nav areas
*/
#game-content
{
font-family: "Oswald", serif;
font-size: 18pt;
height: 100%;
left: 300px;
line-height: 1.6;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
transition: left .25s ease-in;
top: 0px;
padding-top: 23px;
width: calc(100% - 300px);
}
.rtl
{
direction: rtl;
}
.rtl #game-content
{
left: unset;
right: 300px;
transition: right .25s ease-in;
}
.no-nav #game-content
{
left: 20px;
right: 20px;
transition: unset;
width: calc(100% - 40px);
}
#main-nav,
#main-bar
{
background: linear-gradient(to right, white, 97%, lightgray);
height: 100%;
left: 0;
overflow-y: scroll;
position: fixed;
text-align: center;
transition: left .25s ease-in;
top: 0px;
width: 240px;
z-index: 0;
}
.rtl #main-nav,
.rtl #main-bar
{
background: linear-gradient(to left, white, 97%, lightgray);
left: unset;
right: 0;
transition: right .25s ease-in;
}
#main-bar
{
background: white;
height: 50px;
text-align: left;
top: 0;
width: 50px;
z-index: 2;
}
.rtl #main-bar
{
background: white;
}
.mobile #main-bar
{
background: white;
height: 50px;
top: 0;
width: 50px;
z-index: 2;
}
.rtl #main-bar
{
text-align: right;
}
#main-nav button,
#main-bar button
{
border-radius: 10px;
font-size: 21pt;
padding: 2px 5px 5px 5px;
width: 40px;
}
.mobile #main-nav button,
.mobile #main-bar button
{
font-size: 18pt;
height: 50px;
margin: 2px;
padding: 8px 10px 10px 10px;
width: 40px;
}
#main-nav h1
{
margin: 8px;
}
#main-nav x-button,
#main-nav input[type="range"]
{
width: 170px;
}
#main-nav .nav-label
{
font-size: 18pt;
margin: auto;
text-align: left;
width: 170px;
}
.rtl #main-nav .nav-label
{
text-align: right;
}
#main-nav .nav-info
{
font-size: 18pt;
margin: 0px auto 15px auto;
text-align: left;
width: 170px;
}
.rtl #main-nav .nav-info
{
text-align: right;
}
.footer-space {
height: 1in;
}
/*
* Styles related to a Save/Load Game Location
*/
.filled
{
background-color: blue;
color: white;
}
table.save-table
{
width: 7in;
}
.mobile table.save-table
{
width: 320px;
}
table.save-table,
table.save-table tr,
table.save-table th,
table.save-table td
{
border-collapse: collapse;
border: 1px solid black;
padding:10px;
text-align: center;
}
.mobile table.save-table,
.mobile table.save-table tr,
.mobile table.save-table th,
.mobile table.save-table td
{
padding:3px;
}
table.save-table td.save-name
{
width: 3in;
}
.mobile table.save-table td.save-name
{
width: 100px;
}
.mobile #save-disk,
.mobile #load-disk
{
visibility: hidden;
}
/*
* Styles specific to how we want HTML to appear in the game
* as well as the new x- tags that we use for presentation
*/
h1
{
margin: 0px;
padding: 0px;
}
img
{
max-width: 90%;
}
figure
{
max-width: 90%;
}
figure > img
{
max-width: 100%;
}
input
{
border: 2px solid lightblue;
border-radius: 5px;
font-size: 18pt;
padding: 2px;
}
x-button
{
background-color: #F0F0F6;
border: 1px solid gray;
border-radius: 5px;
color: black;
display: inline-block;
font-size: 18pt;
font-weight: bold;
padding: 8px;
margin: 3px;
}
x-button.disabled
{
border: 1px solid lightgray;
background-color: #F6F6FA;
color: #666;
cursor: not-allowed;
}
x-button:hover
{
background-color: lightgray;
}
x-button.disabled:hover
{
color: #666;
background-color: #F6F6FA;
}
x-speaker
{
border: 3px solid black;
border-radius: 10px;
display: block;
font-size:18pt;
margin: 10px;
min-height: 110px;
padding: 10px;
width: 90%;
}
.mobile x-speaker
{
margin: 2px;
padding: 4px;
width: 82%;
}
x-speaker figure:first-of-type
{
border-radius: 5px;
display: block;
float: left;
margin: 0;
width: 120px;
}
.rtl x-speaker figure:first-of-type
{
float: right;
}
.mobile x-speaker figure:first-of-type
{
width: 80px;
}
x-speaker figure:first-of-type > img
{
border-radius: 10px;
display: block;
height: 100px;
margin: auto;
width: 100px;
}
.mobile x-speaker figure:first-of-type > img
{
width: 70px;
height: 70px;
}