User Tools

Site Tools


Command disabled: register
sugarcane_css

Sugarcane default CSS

The following is the CSS code contained in Sugarcane stories, which you, the story author, may accompany with your own stylesheets' CSS.

Base CSS

This is fundamental CSS which provides a base page structure to the story.

/* Sidebar */
#sidebar {
	position: fixed;
	list-style: none;
	width: 12em;
}
#sidebar #title, #sidebar #credits  {
	cursor: auto;
}
#sidebar #storySubtitle, #sidebar #storyMenu {
	display: block;
}
.menu {
	position: absolute;
	display: none;
	z-index: 5;
}
/* Passages container */
#passages {
	margin-left: 18.2em;
	position:relative;
}
/* Links */
.passage a {
	color: #4d6ad8;
}
a.internalLink, a.externalLink, a.back, a.return, [data-passage], .menu div {
	cursor: pointer;
}
a.brokenLink {
	background-color: red;
	color: #000;
}
.marked {
	background-color: #f66;
	color: #000;
}
.marked[title] {
	cursor: help;
}
.passage li[data-bullet] {
	list-style-type: none;
}
.passage li[data-bullet]:before {
	content: attr(data-bullet);
	position: relative;
	left: -1em;
}
#storeArea {
	display: none;
}
#noscript {
	margin-left: 18.2em;
	font-size: 1.2em;
	font-weight: bold;
}
/* HTML4 compatibility */
img {
	vertical-align:bottom;
}
@media screen and (max-width: 640px) {
	#sidebar {
		position: static;
		margin: 0 auto;
		padding: 0;
	}
	body #sidebar li  {
		text-align: center;
	}
	#passages {
		min-height: 100vh;
		margin-left: 0em;
	}
}
#loadingbar {
	position:fixed;
	top:0;
	left:0;
	border-top: solid #4d6ad8 6px;
	transition: width 0.5s;
}

Default CSS

This CSS completes the default Sugarcane look-and-feel. This code is removed if you select “Don't use the Story Format's default CSS” in StorySettings, or if the words “blank stylesheet” appear anywhere within a comment in your story's stylesheets,

body {
	background-color: #000;
	color: #fff;
	font-family: Verdana,sans-serif;
	font-size: 62.5%;
	margin: 4em 15% 5% 5em;
}
#sidebar {
	left: 7.5em;
	margin: 0;
	padding: 0 1em 0 0;
	font: bold 1.1em Verdana,sans-serif;
}
#sidebar ul {
	padding: 0;
}
#sidebar li {
	color: #333;
	text-align: right;
	background-repeat: no-repeat;
	margin-bottom: 1em;
	line-height: 1.4em;
	list-style: none;
}
#sidebar li a {
	color: #333;
	text-decoration: none;
}
#sidebar li a:hover, #sidebar #title a:hover, #snapback:hover, #restart:hover {
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
#sidebar #title {
	font-size: 150%;
}
#sidebar #title, #sidebar #title:hover, #sidebar #title a {
	color: #999;
}
#sidebar #storySubtitle {
	font-size: 75%;
}
#storyAuthor {
	font-size: 50%;
}
#sidebar #storyMenu {
	line-height: 2.5em;
	margin-bottom: .5em;
	color: #999;
	cursor: auto;
}
#sidebar #credits {
	padding-top: 2em;
	font-weight: normal;
	font-size: 80%;
}
#sidebar #credits:hover {
	color: #333;
}
#sidebar #credits a {
	text-decoration: none;
}
#passages {
	border-left: 1px solid #333;
	padding-left: 1.5em;
}
.menu {
	background-color: #343434;
	color: #fff;
	opacity: .9;
	border: 1px solid #fff;
	text-align: left;
	font: 1.1em Verdana;
	line-height: 2em;
}
.menu div {
	padding: 0 .4em;
}
.menu div:hover {
	cursor: pointer;
	background-color: #fff;
	color: #343434;
}
.passage {
	font-size: 1.2em;
	line-height: 175%;
	margin-bottom: 2em;
	text-align: left;
}
.passage a {
	font-weight: bold;
	text-decoration: none;
}
.passage a:hover {
	color: #8ea6ff;
	text-decoration: underline;
}
.content > ul {
	padding-top: 1.3em;
}
.passage ul, .passage ol {
	margin-left: .5em;
	padding-left: 1.5em;
}
.passage li {
	margin-right: 6em;
}
.passage table {
	border-collapse: collapse;
	font-size: 100%;
	margin: .8em 1.0em;
}
.passage th,.passage td,.passage tr,.passage caption {
	padding: 3px;
}
.passage hr {
	height: 1px;
}
.passage center {
	max-width:50%;
	margin:auto;
}
.marked {
	margin-right: 12px;
	padding: 3px;
}
.disabled {
	font-weight: bold;
	color: #333;
}
@media screen and (max-width: 640px) {
	body {
		margin: 5%;
	}
	#sidebar {
		width:100%;
		margin: 0;
		border-bottom: 1px solid #333;
	}
	#passages {
		padding-top: 2em;
		border-left: 0;
	}
}
sugarcane_css.txt · Last modified: 2017/10/10 00:39 (external edit)