aboutsummaryrefslogtreecommitdiff
path: root/xp/vco/styles
diff options
context:
space:
mode:
Diffstat (limited to 'xp/vco/styles')
-rw-r--r--xp/vco/styles/app.css205
-rw-r--r--xp/vco/styles/install-button.css20
-rw-r--r--xp/vco/styles/normalize.css406
3 files changed, 631 insertions, 0 deletions
diff --git a/xp/vco/styles/app.css b/xp/vco/styles/app.css
new file mode 100644
index 0000000..5020353
--- /dev/null
+++ b/xp/vco/styles/app.css
@@ -0,0 +1,205 @@
+/* || General layout rules for narrow screens */
+
+html {
+ font-family: 'Righteous', cursive;
+ font-size: 10px;
+ background-color: black;
+}
+
+body {
+ width: 100%;
+ background-color: #999;
+ /*background-image: url(../images/pattern.png);*/
+}
+
+h1, h2, label {
+ font-size: 3rem;
+ font-family: 'Nova Square', cursive;
+ text-align: center;
+ color: black;
+ text-shadow: -1px -1px 1px #aaa,
+ 0px 1px 1px rgba(255,255,255,0.5),
+ 1px 1px 2px rgba(255,255,255,0.7),
+ 0px 0px 2px rgba(255,255,255,0.4);
+ margin: 0;
+}
+
+h1 {
+ font-size: 3.5rem;
+ padding-top: 1.2rem;
+}
+
+.wrapper {
+ height: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+/* || main UI sections */
+
+header {
+ height: 120px;
+}
+
+canvas {
+ /*border-top: 1px solid black;
+ border-bottom: 1px solid black;
+ margin-bottom: -3px;
+ box-shadow: 0 -2px 4px rgba(0,0,0,0.7),
+ 0 3px 4px rgba(0,0,0,0.7);*/
+}
+
+.controls {
+ background-color: rgba(0,0,0,0.1);
+ height: calc(100% - 225px);
+}
+
+/* || select element styling */
+
+.controls div {
+ width: 100%;
+ padding-top: 1rem;
+}
+
+.controls label, .controls select {
+ display: block;
+ margin: 0 auto;
+}
+
+.controls label {
+ width: 100%;
+ text-align: center;
+ line-height: 3rem;
+ padding: 1rem 0;
+}
+
+.controls select {
+ width: 80%;
+ font-size: 2rem;
+}
+
+/* || button styling */
+
+button, form a {
+ background-color: #0088cc;
+ background-image: linear-gradient(to bottom, #0088cc 0%,#0055cc 100%);
+ text-shadow: 1px 1px 1px black;
+ text-align: center;
+ color: white;
+ border: none;
+ width: 90%;
+ margin: 1rem auto 0.5rem;
+ max-width: 80%;
+ font-size: 1.6rem;
+ line-height: 3rem;
+ padding: .5rem;
+ display: block;
+}
+
+button:hover, button:focus, form a:hover, form a:focus {
+ box-shadow: inset 1px 1px 2px rgba(0,0,0,0.7);
+}
+
+button:active, form a:active {
+ box-shadow: inset 2px 2px 3px rgba(0,0,0,0.7);
+}
+
+a#activated {
+ background-color: #fff;
+ background-image: linear-gradient(to bottom, #f00 0%,#a06 100%);
+}
+
+/* || Checkbox hack to control information box display */
+
+label[for="toggle"] {
+ font-family: 'NotoColorEmoji';
+ font-size: 3rem;
+ position: absolute;
+ top: 4px;
+ right: 5px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+input[type=checkbox] {
+ position: absolute;
+ top: -100px;
+}
+
+aside {
+ position: fixed;
+ top: 0;
+ left: 0;
+ padding-top: 1.5rem;
+ text-shadow: 1px 1px 1px black;
+ width: 100%;
+ height: 100%;
+ transform: translateX(100%);
+ transition: 0.6s all;
+ background-color: #999;
+ background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5));
+}
+
+aside p, aside li {
+ font-size: 1.6rem;
+ line-height: 1.3;
+ padding: 0rem 2rem 1rem;
+ color: white;
+}
+
+aside li {
+ padding-left: 10px;
+}
+
+
+/* Toggled State of information box */
+
+input[type=checkbox]:checked ~ aside {
+ transform: translateX(0);
+}
+
+/* || Link styles */
+
+a {
+ color: #aaa;
+}
+
+a:hover, a:focus {
+ text-decoration: none;
+}
+
+@media (min-width: 481px) {
+ /*CSS for medium width screens*/
+
+ /* || Basic layout changes for the main control buttons */
+
+}
+
+@media all and (min-width: 800px) {
+ /*CSS for wide screens*/
+
+ h1 {
+ font-size: 5rem;
+ padding-top: 2.5rem;
+ }
+
+ aside {
+ top: 0;
+ left: 100%;
+ text-shadow: 1px 1px 1px black;
+ width: 480px;
+ transform: translateX(0);
+ border-left: 2px solid black;
+ }
+
+ /* Toggled State of information box */
+
+ input[type=checkbox]:checked ~ aside {
+ transform: translateX(-480px);
+ }
+
+}
+
+@media (min-width: 1100px) {
+ /*CSS for really wide screens*/
+}
diff --git a/xp/vco/styles/install-button.css b/xp/vco/styles/install-button.css
new file mode 100644
index 0000000..ed0d408
--- /dev/null
+++ b/xp/vco/styles/install-button.css
@@ -0,0 +1,20 @@
+#install-btn {
+ background: #0088cc; /* Old browsers */
+ background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #0088cc 0%,#0055cc 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */
+
+ text-align: center;
+ font-size: 200%;
+ margin: 1em auto;
+ display: block;
+ padding: .5em;
+ color: white;
+ width: 10em;
+ max-width: 80%;
+ line-height: 1.2em;
+} \ No newline at end of file
diff --git a/xp/vco/styles/normalize.css b/xp/vco/styles/normalize.css
new file mode 100644
index 0000000..c2de8df
--- /dev/null
+++ b/xp/vco/styles/normalize.css
@@ -0,0 +1,406 @@
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+ HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* ==========================================================================
+ Base
+ ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background: transparent;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+ outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* ==========================================================================
+ Typography
+ ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, serif;
+ font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+ white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* ==========================================================================
+ Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* ==========================================================================
+ Figures
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+ line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+ overflow: auto; /* 1 */
+ vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-02 14:22:09 +0000