mt-site
RSS
add wiki link
add wiki link
darkmorford - - Load All Authors

File last commit:

4e0d93c1f71c
c6c360fba14f
Show More
vn.css
379 lines | 6.4 KiB | text/css | LassoCssLexer
/ endgames-vn / vn.css
History | Source | Raw |Copy content
darkmorford
Add stuff for the Endgames mini-VN.
 r8 /*
* Pure CSS linear visual novel tool.
*
* Copyright 2015 Kevin Lange
*
* <!- Insert BSD license here -->
*
*/
@font-face {
font-family: 'VTC Letterer pro';
font-style: normal;
font-weight: 400;
src: url(assets/ui/fonts/VTC_letterer_pro.ttf);
}
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
font-family: 'VTC Letterer pro';
}
/*
* The viewport holds all the frames.
* It should fill screen.
*/
div.viewport {
padding: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: hidden;
}
/*
* The stage contains all of the elements that should
* apppear on screen together. Usually, a frame
* will have two stages - a previous viewpoint to
* transition from, and the actual contents of the
* current frame. Timed transitions might use three
* stages - previous content, the content to automatically
* transition away from, and the content for the "next"
* frame after the transition.
*/
div.stage {
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
/*
* Character positioning.
*/
img.pirogoeth {
height: 100%;
}
.center-character {
text-align: center;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.right-character {
text-align: right;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.left-character {
text-align: left;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
/*
* Scene overlays.
*/
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-color-10 { background-color: rgba(0,0,0,0.1); }
.screen-color-20 { background-color: rgba(0,0,0,0.2); }
.screen-color-30 { background-color: rgba(0,0,0,0.3); }
.screen-color-40 { background-color: rgba(0,0,0,0.4); }
.screen-color-50 { background-color: rgba(0,0,0,0.5); }
.screen-color-60 { background-color: rgba(0,0,0,0.6); }
.screen-color-70 { background-color: rgba(0,0,0,0.7); }
.screen-color-80 { background-color: rgba(0,0,0,0.8); }
.screen-color-90 { background-color: rgba(0,0,0,0.9); }
/*
* Animations
*/
.slide-from-right {
animation: slide-from-right 1s 1;
-webkit-animation: slide-from-right 1s 1;
}
.fade-in {
animation: fade-in 0.5s 1;
-webkit-animation: fade-in 0.5s 1;
}
.fade-in-slow {
animation: fade-in 5s 1;
-webkit-animation: fade-in 5s 1;
}
.shake {
animation: shake-it 0.1s 3 linear alternate;
-webkit-animation: shake-it 0.1s 3 linear alternate;
}
/*
* Traditional VN dialogue boxes.
*/
.sayscreen-border {
/*
* This should be customized to the theme of
* the VN, and also probably to the individual
* character that the dialogue is for.
*
* This default is black, semi-transparent, with
* orange borders. This is what dialogue in the
* Megatokyo Visual Novel is supposed to look like.
*/
background-color: rgba(0,0,0,0.75);
border-radius: 2vh;
border: solid;
border-color: #ffc137;
border-width: 0.5vh;
}
div.sayscreen-holder {
position: absolute;
bottom: 1%;
left: 11.5%;
width: 75%;
height: 25%;
padding: 0%;
}
div.sayscreen-character {
/* This is whre the character name appears. */
padding-left: 0.7vh;
padding-top: 0.3vh;
color: #ff8400;
font-size: 5vh;
}
div.sayscreen {
height: 70%;
}
div.sayscreen-title {
height: 20%;
width: 25vh;
margin-bottom: 0.4vh;
}
div.sayscreen-text {
/* This is where the text shows up */
padding: 2vh;
color: #FFFFFF;
font-size: 5vh;
}
/*
* Wordbubbles.
* These are primarily for speech for the protagonist.
*/
div.wordbubble {
color: #000;
font-size: 5vh;
width: 30%;
text-align: center;
bottom: 1%;
left: 35%;
position: absolute;
background-color: #fff;
border: 1vh solid #000;
border-radius: 100%;
}
div.wordbubble-character {
color: #000;
font-size: 5vh;
width: 30%;
text-align: center;
position: absolute;
top: 30vh;
left: 10vh;
background-color: #fff;
border: 1vh solid #000;
border-radius: 100%;
}
div.wordbubble-text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div.wordbubble-content {
padding: 6vh;
}
/*
* Wordboxes are the same as bubbles,
* but formatted as boxes instead.
*/
div.wordbox {
color: #000;
font-size: 5vh;
width: 30%;
border: 1vh solid #000;
background-color: #fff;
text-align: center;
bottom: 1%;
left: 35%;
position: absolute;
border-radius: 1vh;
}
.wordbox-content {
padding: 2vh;
}
/*
* Animation keyframe definitions.
*/
@keyframes slide-from-right {
0% { left: 60%; opacity: 0.0; }
100% { left: 40%; opacity: 1.0; }
}
@-webkit-keyframes slide-from-right {
0% { left: 60%; opacity: 0.0; }
100% { left: 40%; opacity: 1.0; }
}
@keyframes fade-in {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes fade-in {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes shake-it {
0% { top: -10vh; }
100% { top: 10vh; }
}
@-webkit-keyframes shake-it {
0% { top: -5vh; }
100% { top: 5vh; }
}
/*
* Centered white text.
* This can be used for title screens,
* or for internal dialogue of the protagonist
* to describe the scene. Use with a black or
* otherwise dark background.
*/
.centered-white-text {
position: absolute;
font-size: 5vh;
color: #fff;
left: 0px;
right: 0px;
bottom: 2vh;
text-align: center;
padding: 10vh;
padding-left: 30vh;
padding-right: 30vh;
line-height: 5vh;
}
.centered-white-text > a {
color: #fff;
}
.centered-white-text.vertical-one-line {
bottom: 47.55vh;
padding: 0;
}
.centered-white-text.vertical-two-line {
bottom: 45vh;
padding: 0;
}
.centered-white-text.vertical-three-line {
bottom: 42.5vh;
padding: 0;
}
.centered-white-text.vertical-four-line {
bottom: 40.0vh;
padding: 0;
}
.centered-white-text.vertical-five-line {
bottom: 37.5vh;
padding: 0;
}
/*
* These are the critical controls
* for the VN and control how transition
* elements are formatted and frames get
* displayed. Don't mess with them unless you
* know what you are doing.
*/
.frame > form {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.frame > form > button {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.0;
}
.frame > a.framelink {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.0;
}
audio {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
}
#preload {
position: absolute;
left: 0;
top: 0;
width: 1;
height 1;
opacity: 0.0;
}
.frame {
display: none;
}
:target {
display: block;
}