Initial commit
This commit is contained in:
Greg Whitworth
Родитель
4e55ef4543
Коммит
9dea25d2c6
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"isHTML": true,
|
||||
"skip": true
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 8.5 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>[Add a descriptive title here]</title>
|
||||
<meta name="og:title" content="[Keep short; used as title in any teasers of this demo on dev.microsoftedge.com]">
|
||||
<meta name="description" content="[Used as description in any teasers of this demo on dev.microsoftedge.com]">
|
||||
<meta name="keywords" content="[First value is category for dev.microsoftedge.com/demos, following comma-separated values are tags]">
|
||||
<meta name="author" content="[your Github handle]">
|
||||
|
||||
<!-- Use/uncomment for more straightforward/simple demos, like @supports or css3filters: <link rel="stylesheet" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css"> -->
|
||||
|
||||
<link rel="stylesheet" href="styles/demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Whatever you want goes here.</p>
|
||||
|
||||
<!-- Adds a universal header to the top of the page -->
|
||||
<script src="https://msedgecdn.azurewebsites.net/scripts/demo-header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,73 @@
|
|||
var nButton = document.getElementById('night');
|
||||
var dButton = document.getElementById('day');
|
||||
var code = document.getElementById('code');
|
||||
var buttons = [nButton, dButton];
|
||||
var rootStyle = document.documentElement.style;
|
||||
vars = [];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
for(var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', function() {
|
||||
window[this.id]();
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
var night = function() {
|
||||
vars = [
|
||||
{name: "--sky-start", value: "rgb(100, 75, 128)"},
|
||||
{name: "--sky-end", value: "rgb(45, 45, 81)"},
|
||||
{name: "--light-r-mod", value: "-17.5"},
|
||||
{name: "--light-g-mod", value: "25"},
|
||||
{name: "--light-b-mod", value: "110"},
|
||||
{name: "--show-stars", value: "block"},
|
||||
{name: "--building-r-mod", value: "-.25"},
|
||||
{name: "--building-g-mod", value: 0},
|
||||
{name: "--building-b-mod", value: ".15"},
|
||||
{name: "--park-r-mod", value: "-.30"},
|
||||
{name: "--park-g-mod", value: "-.20"},
|
||||
{name: "--park-b-mod", value: "-.08"},
|
||||
{name: "--light-source", value: "url(#moon)"}
|
||||
];
|
||||
setVars(vars);
|
||||
getVars(vars);
|
||||
}
|
||||
|
||||
var day = function() {
|
||||
vars = [
|
||||
{name: "--dog-coat-r-mod", value: 0},
|
||||
{name: "--dog-coat-g-mod", value: 0},
|
||||
{name: "--dog-coat-b-mod", value: 0},
|
||||
{name: "--park-r-mod", value: 0},
|
||||
{name: "--park-g-mod", value: 0},
|
||||
{name: "--park-b-mod", value: 0},
|
||||
{name: "--building-r-mod", value: 0},
|
||||
{name: "--building-g-mod", value: 0},
|
||||
{name: "--building-b-mod", value: 0},
|
||||
{name: "--sky-start", value: "rgb(95, 171, 217)"},
|
||||
{name: "--sky-end", value: "rgb(216, 150, 115)"},
|
||||
{name: "--light-r-mod", value: 0},
|
||||
{name: "--light-g-mod", value: 0},
|
||||
{name: "--light-b-mod", value: 0},
|
||||
{name: "--show-stars", value: "none"},
|
||||
{name: "--light-source", value: "rgb(245, 169, 95)"},
|
||||
];
|
||||
setVars(vars);
|
||||
getVars(vars);
|
||||
}
|
||||
|
||||
function setVars(variables) {
|
||||
variables.forEach(function(prop) {
|
||||
rootStyle.setProperty(prop.name, prop.value);
|
||||
}, this);
|
||||
}
|
||||
|
||||
function getVars(variables) {
|
||||
var text = "";
|
||||
variables.forEach(function (prop) {
|
||||
text += prop.name + ": " + rootStyle.getPropertyValue(prop.name);
|
||||
text += "\n";
|
||||
}, this);
|
||||
|
||||
code.textContent = text;
|
||||
}
|
||||
|
|
@ -0,0 +1,563 @@
|
|||
:root {
|
||||
--dog-coat-r-mod: 0;
|
||||
--dog-coat-g-mod: 0;
|
||||
--dog-coat-b-mod: 0;
|
||||
--dog__light: rgb(166, 125, 83);
|
||||
|
||||
--park-r-mod: 0;
|
||||
--park-g-mod: 0;
|
||||
--park-b-mod: 0;
|
||||
|
||||
--building-r-mod: 0;
|
||||
--building-g-mod: 0;
|
||||
--building-b-mod: 0;
|
||||
|
||||
--light-r-mod: 0;
|
||||
--light-g-mod: 0;
|
||||
--light-b-mod: 0;
|
||||
|
||||
--light-source: rgb(245, 169, 95);
|
||||
|
||||
--show-stars: none;
|
||||
|
||||
--sky-start: rgb(95, 171, 217);
|
||||
--sky-end: rgb(216, 150, 115);
|
||||
|
||||
--window-color: rgb(
|
||||
calc(89 + (89 * var(--building-r-mod))),
|
||||
calc(61 + (61 * var(--building-g-mod))),
|
||||
calc(66 + (66 * var(--building-b-mod)))
|
||||
);
|
||||
|
||||
--window-lights-color: rgb(
|
||||
calc(198 + (198 * var(--building-r-mod))),
|
||||
calc(159 + (159 * var(--building-g-mod))),
|
||||
calc(128 + (128 * var(--building-b-mod)))
|
||||
);
|
||||
|
||||
--ui-dark: rgb(51, 32, 25);
|
||||
--ui-med: rgb(123, 109, 97);
|
||||
--ui-header: linear-gradient(rgb(74, 47, 37), var(--ui-dark));
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tail {
|
||||
animation: wagTail 250ms infinite;
|
||||
transform: translateY(10px) rotate(var(--tail-rotate));
|
||||
transform-origin: 60% 84%;
|
||||
}
|
||||
|
||||
#ui {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
background: var(--ui-header);
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background: var(--ui-med);
|
||||
border: 2px solid var(--ui-dark);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-family: "Segoe UI Black", sans-serif;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
padding: .25em .5em;
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.subhead {
|
||||
background: var(--ui-header);
|
||||
color: white;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.subhead h2 {
|
||||
margin: 0;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
#ui section {
|
||||
background: var(--ui-med);
|
||||
border: 5px solid var(--ui-dark);
|
||||
}
|
||||
|
||||
svg#container {
|
||||
background: linear-gradient(to bottom, var(--sky-start), var(--sky-end) 25%);
|
||||
transition: background 1s;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
border: 2px solid green;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thumbnails img {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* Light Source */
|
||||
.light-source {
|
||||
fill: var(--light-source);
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.sunray-container {
|
||||
opacity: 0.43;
|
||||
clip-path: url(#SVGID_2_);
|
||||
}
|
||||
|
||||
.sunrays {
|
||||
fill:rgb(
|
||||
calc(251 + var(--light-r-mod)),
|
||||
calc(197 + var(--light-g-mod)),
|
||||
calc(170 + var(--light-b-mod))
|
||||
);
|
||||
}
|
||||
|
||||
.sunrays__dark {
|
||||
fill:rgb(
|
||||
calc(252 + var(--light-r-mod)),
|
||||
calc(227 + var(--light-g-mod)),
|
||||
calc(217 + var(--light-b-mod))
|
||||
);
|
||||
}
|
||||
|
||||
.clouds {
|
||||
fill:rgb(
|
||||
calc(249 + var(--light-r-mod)),
|
||||
calc(223 + var(--light-g-mod)),
|
||||
calc(185 + var(--light-b-mod))
|
||||
);
|
||||
position: absolute;
|
||||
|
||||
--cloud-left: 0;
|
||||
left: var(--cloud-left);
|
||||
width: 100%;
|
||||
animation: floatClouds 300s infinite;
|
||||
transition-timing-function: linear;
|
||||
transition: all;
|
||||
}
|
||||
|
||||
.stars {
|
||||
--star-opacity: .7;
|
||||
opacity: var(--star-opacity);
|
||||
display: var(--show-stars);
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.stars__twinkle {
|
||||
--star-opacity: .7;
|
||||
animation: twinkle 2s infinite;
|
||||
opacity: var(--star-opacity);
|
||||
}
|
||||
|
||||
.fill-white {
|
||||
fill:rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
|
||||
/* Buildings */
|
||||
.distant-building {
|
||||
fill: var(--window-color);
|
||||
}
|
||||
|
||||
.distant-building__lights {
|
||||
fill: var(--window-lights-color);
|
||||
}
|
||||
|
||||
.distant-building__lights.lights__blink {
|
||||
animation: lightSwitch 60s infinite;
|
||||
}
|
||||
|
||||
.distant-building__window {
|
||||
fill:rgb(
|
||||
calc(111 + (111 * var(--building-r-mod))),
|
||||
calc(79 + (79 * var(--building-g-mod))),
|
||||
calc(85 + (85 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__light-wash {
|
||||
fill:rgb(
|
||||
calc(179 + (179 * var(--building-r-mod))),
|
||||
calc(142 + (142 * var(--building-g-mod))),
|
||||
calc(135 + (135 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__dark-wash {
|
||||
fill:rgb(
|
||||
calc(163 + (163 * var(--building-r-mod))),
|
||||
calc(125 + (125 * var(--building-g-mod))),
|
||||
calc(118 + (118 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.curtains {
|
||||
fill:rgb(
|
||||
calc(87 + (87 * var(--building-r-mod))),
|
||||
calc(51 + (51 * var(--building-g-mod))),
|
||||
calc(70 + (70 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__salmon {
|
||||
fill:rgb(
|
||||
calc(173 + (173 * var(--building-r-mod))),
|
||||
calc(123 + (123 * var(--building-g-mod))),
|
||||
calc(120 + (120 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__maroon {
|
||||
fill:rgb(
|
||||
calc(99 + (99 * var(--building-r-mod))),
|
||||
calc(49 + (49 * var(--building-g-mod))),
|
||||
calc(48 + (48 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__brown {
|
||||
fill:rgb(
|
||||
calc(140 + (140 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(79 + (79 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__fuscha {
|
||||
fill:rgb(
|
||||
calc(120 + (120 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(104 + (104 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.door__drk-purple {
|
||||
fill:rgb(
|
||||
calc(71 + (71 * var(--building-r-mod))),
|
||||
calc(39 + (39 * var(--building-g-mod))),
|
||||
calc(56 + (56 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door_purple {
|
||||
fill:rgb(
|
||||
calc(82 + (82 * var(--building-r-mod))),
|
||||
calc(43 + (43 * var(--building-g-mod))),
|
||||
calc(64 + (64 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__tan {
|
||||
fill:rgb(
|
||||
calc(185 + (185 * var(--building-r-mod))),
|
||||
calc(140 + (140 * var(--building-g-mod))),
|
||||
calc(137 + (137 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__light-blue {
|
||||
fill:rgb(
|
||||
calc(138 + (138 * var(--building-r-mod))),
|
||||
calc(147 + (147 * var(--building-g-mod))),
|
||||
calc(199 + (199 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__blue-purple {
|
||||
fill:rgb(
|
||||
calc(57 + (57 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(158 + (158 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__plum {
|
||||
fill:rgb(
|
||||
calc(50 + (50 * var(--building-r-mod))),
|
||||
calc(23 + (23 * var(--building-g-mod))),
|
||||
calc(37 + (37 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__eggplant {
|
||||
fill:rgb(
|
||||
calc(55 + (55 * var(--building-r-mod))),
|
||||
calc(32 + (32 * var(--building-g-mod))),
|
||||
calc(62 + (62 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__grape {
|
||||
fill:rgb(
|
||||
calc(108 + (108 * var(--building-r-mod))),
|
||||
calc(61 + (61 * var(--building-g-mod))),
|
||||
calc(91 + (91 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__rose {
|
||||
fill:rgb(
|
||||
calc(140 + (140 * var(--building-r-mod))),
|
||||
calc(77 + (77 * var(--building-g-mod))),
|
||||
calc(80 + (80 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__violet {
|
||||
fill:rgb(
|
||||
calc(35 + (35 * var(--building-r-mod))),
|
||||
calc(56 + (56 * var(--building-g-mod))),
|
||||
calc(108 + (108 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill__mauve {
|
||||
fill:rgb(
|
||||
calc(112 + (112 * var(--building-r-mod))),
|
||||
calc(59 + (59 * var(--building-g-mod))),
|
||||
calc(78 + (78 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill__purple {
|
||||
fill:rgb(
|
||||
calc(65 + (65 * var(--building-r-mod))),
|
||||
calc(44 + (44 * var(--building-g-mod))),
|
||||
calc(82 + (82 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill__eggplant {
|
||||
fill:rgb(
|
||||
calc(50 + (50 * var(--building-r-mod))),
|
||||
calc(21 + (21 * var(--building-g-mod))),
|
||||
calc(33 + (33 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill-shade {
|
||||
fill:rgb(
|
||||
calc(62 + (62 * var(--building-r-mod))),
|
||||
calc(28 + (28 * var(--building-g-mod))),
|
||||
calc(23 + (23 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-line {
|
||||
fill:rgb(
|
||||
calc(91 + (91 * var(--building-r-mod))),
|
||||
calc(14 + (14 * var(--building-g-mod))),
|
||||
calc(16 + (16 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window__facade {
|
||||
fill:rgb(
|
||||
calc(121 + (121 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(105 + (105 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.fencing {
|
||||
fill:rgb(
|
||||
calc(24 + (24 * var(--building-r-mod))),
|
||||
calc(24 + (24 * var(--building-g-mod))),
|
||||
calc(24 + (26 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__trim {
|
||||
fill:rgb(
|
||||
calc(94 + (94 * var(--building-r-mod))),
|
||||
calc(42 + (42 * var(--building-g-mod))),
|
||||
calc(43 + (43 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__trim-notched {
|
||||
fill:rgb(
|
||||
calc(128 + (128 * var(--building-r-mod))),
|
||||
calc(87 + (87 * var(--building-g-mod))),
|
||||
calc(113 + (113 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.sidewalk {
|
||||
fill:rgb(
|
||||
calc(148 + (148 * var(--building-r-mod))),
|
||||
calc(167 + (167 * var(--building-g-mod))),
|
||||
calc(144 + (144 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.city__fade {
|
||||
opacity:0.3;
|
||||
fill:rgb(
|
||||
calc(215 + (215 * var(--building-r-mod))),
|
||||
calc(192 + (192 * var(--building-g-mod))),
|
||||
calc(184 + (184 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
/* Nature */
|
||||
|
||||
.tree__trunk {
|
||||
fill:rgb(
|
||||
calc(115 + (115 * var(--park-r-mod))),
|
||||
calc(90 + (90 * var(--park-g-mod))),
|
||||
calc(64 + (64 * var(--park-b-mod)))
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
.hill {
|
||||
fill:rgb(
|
||||
calc(155 + (155 * var(--park-r-mod))),
|
||||
calc(187 + (187 * var(--park-g-mod))),
|
||||
calc(141 + (141 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.tree__leaves {
|
||||
fill:rgb(
|
||||
calc(144 + (144 * var(--park-r-mod))),
|
||||
calc(142 + (142 * var(--park-g-mod))),
|
||||
calc(99 + (99 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.bush-med {
|
||||
fill:rgb(
|
||||
calc(170 + (170 * var(--park-r-mod))),
|
||||
calc(175 + (175 * var(--park-g-mod))),
|
||||
calc(138 + (138 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.bush-light {
|
||||
fill:rgb(
|
||||
calc(189 + (189 * var(--park-r-mod))),
|
||||
calc(187 + (187 * var(--park-g-mod))),
|
||||
calc(145 + (145 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
/* Dog */
|
||||
|
||||
.dog__leg {
|
||||
fill:rgb(139, 100, 57);
|
||||
}
|
||||
|
||||
.dog {
|
||||
fill:rgb(166, 125, 83);
|
||||
}
|
||||
|
||||
.dog__ear {
|
||||
fill:rgb(96, 72, 50);
|
||||
}
|
||||
|
||||
.dog__underbelly {
|
||||
fill:var(--dog__light);
|
||||
}
|
||||
|
||||
.dog__head {
|
||||
fill:var(--dog__light);
|
||||
}
|
||||
|
||||
.dog__paw {
|
||||
fill: var(--dog__light);
|
||||
}
|
||||
|
||||
.jacket__body {
|
||||
fill:rgb(
|
||||
calc(103 + (103 * var(--dog-coat-r-mod))),
|
||||
calc(52 + (52 * var(--dog-coat-g-mod))),
|
||||
calc(42 + (42 * var(--dog-coat-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.jacket__collar {
|
||||
fill:rgb(
|
||||
calc(73 + (73 * var(--dog-coat-r-mod))),
|
||||
calc(26 + (26 * var(--dog-coat-g-mod))),
|
||||
calc(14 + (14 * var(--dog-coat-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes wagTail {
|
||||
from {
|
||||
--tail-rotate: 15deg;
|
||||
}
|
||||
to {
|
||||
--tail-rotate: 25deg;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatClouds {
|
||||
from {
|
||||
left: 85%;
|
||||
}
|
||||
to {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% {
|
||||
--star-opacity: .7;
|
||||
}
|
||||
25% {
|
||||
--star-opacity: .55;
|
||||
}
|
||||
75% {
|
||||
--star-opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightSwitch {
|
||||
0% {
|
||||
fill: var(--window-lights-color);
|
||||
}
|
||||
1% {
|
||||
fill: var(--window-color);
|
||||
}
|
||||
74% {
|
||||
fill: var(--window-color);
|
||||
}
|
||||
75% {
|
||||
fill: var(--window-lights-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,559 @@
|
|||
:root {
|
||||
--dog-coat-r-mod: 0;
|
||||
--dog-coat-g-mod: 0;
|
||||
--dog-coat-b-mod: 0;
|
||||
--dog__light: rgb(166, 125, 83);
|
||||
|
||||
--park-r-mod: 0;
|
||||
--park-g-mod: 0;
|
||||
--park-b-mod: 0;
|
||||
|
||||
--building-r-mod: 0;
|
||||
--building-g-mod: 0;
|
||||
--building-b-mod: 0;
|
||||
|
||||
--light-r-mod: 0;
|
||||
--light-g-mod: 0;
|
||||
--light-b-mod: 0;
|
||||
|
||||
--light-source: rgb(245, 169, 95);
|
||||
|
||||
--show-stars: none;
|
||||
|
||||
--sky-start: rgb(95, 171, 217);
|
||||
--sky-end: rgb(216, 150, 115);
|
||||
|
||||
--window-color: rgb(
|
||||
calc(89 + (89 * var(--building-r-mod))),
|
||||
calc(61 + (61 * var(--building-g-mod))),
|
||||
calc(66 + (66 * var(--building-b-mod)))
|
||||
);
|
||||
|
||||
--window-lights-color: rgb(
|
||||
calc(198 + (198 * var(--building-r-mod))),
|
||||
calc(159 + (159 * var(--building-g-mod))),
|
||||
calc(128 + (128 * var(--building-b-mod)))
|
||||
);
|
||||
|
||||
--ui-dark: rgb(51, 32, 25);
|
||||
--ui-med: rgb(123, 109, 97);
|
||||
--ui-header: linear-gradient(rgb(74, 47, 37), var(--ui-dark));
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #eee;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body > * {
|
||||
outline: 3px solid red;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tail {
|
||||
animation: wagTail 250ms infinite;
|
||||
transform: translateY(10px) rotate(var(--tail-rotate));
|
||||
transform-origin: 60% 84%;
|
||||
}
|
||||
|
||||
#ui {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
background: var(--ui-header);
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.subhead {
|
||||
background: var(--ui-header);
|
||||
color: white;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.subhead h2 {
|
||||
margin: 0;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
#ui section {
|
||||
background: var(--ui-med);
|
||||
border: 5px solid var(--ui-dark);
|
||||
}
|
||||
|
||||
svg#container {
|
||||
background: linear-gradient(to bottom, var(--sky-start), var(--sky-end) 25%);
|
||||
transition: background 1s;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.thumbnails img {
|
||||
flex: 0 1 auto;
|
||||
margin: 2px;
|
||||
border: 2px solid var(--ui-dark);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumbnails img:hover {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/* Light Source */
|
||||
.light-source {
|
||||
fill: var(--light-source);
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.sunray-container {
|
||||
opacity: 0.43;
|
||||
clip-path: url(#SVGID_2_);
|
||||
}
|
||||
|
||||
.sunrays {
|
||||
fill:rgb(
|
||||
calc(251 + var(--light-r-mod)),
|
||||
calc(197 + var(--light-g-mod)),
|
||||
calc(170 + var(--light-b-mod))
|
||||
);
|
||||
}
|
||||
|
||||
.sunrays__dark {
|
||||
fill:rgb(
|
||||
calc(252 + var(--light-r-mod)),
|
||||
calc(227 + var(--light-g-mod)),
|
||||
calc(217 + var(--light-b-mod))
|
||||
);
|
||||
}
|
||||
|
||||
.clouds {
|
||||
fill:rgb(
|
||||
calc(249 + var(--light-r-mod)),
|
||||
calc(223 + var(--light-g-mod)),
|
||||
calc(185 + var(--light-b-mod))
|
||||
);
|
||||
position: absolute;
|
||||
|
||||
--cloud-left: 0;
|
||||
left: var(--cloud-left);
|
||||
width: 100%;
|
||||
animation: floatClouds 300s infinite;
|
||||
transition-timing-function: linear;
|
||||
transition: all;
|
||||
}
|
||||
|
||||
.stars {
|
||||
--star-opacity: .7;
|
||||
opacity: var(--star-opacity);
|
||||
display: var(--show-stars);
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.stars__twinkle {
|
||||
--star-opacity: .7;
|
||||
animation: twinkle 2s infinite;
|
||||
opacity: var(--star-opacity);
|
||||
}
|
||||
|
||||
.fill-white {
|
||||
fill:rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
|
||||
/* Buildings */
|
||||
.distant-building {
|
||||
fill: var(--window-color);
|
||||
}
|
||||
|
||||
.distant-building__lights {
|
||||
fill: var(--window-lights-color);
|
||||
}
|
||||
|
||||
.distant-building__lights.lights__blink {
|
||||
animation: lightSwitch 60s infinite;
|
||||
}
|
||||
|
||||
.distant-building__window {
|
||||
fill:rgb(
|
||||
calc(111 + (111 * var(--building-r-mod))),
|
||||
calc(79 + (79 * var(--building-g-mod))),
|
||||
calc(85 + (85 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__light-wash {
|
||||
fill:rgb(
|
||||
calc(179 + (179 * var(--building-r-mod))),
|
||||
calc(142 + (142 * var(--building-g-mod))),
|
||||
calc(135 + (135 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__dark-wash {
|
||||
fill:rgb(
|
||||
calc(163 + (163 * var(--building-r-mod))),
|
||||
calc(125 + (125 * var(--building-g-mod))),
|
||||
calc(118 + (118 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.curtains {
|
||||
fill:rgb(
|
||||
calc(87 + (87 * var(--building-r-mod))),
|
||||
calc(51 + (51 * var(--building-g-mod))),
|
||||
calc(70 + (70 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__salmon {
|
||||
fill:rgb(
|
||||
calc(173 + (173 * var(--building-r-mod))),
|
||||
calc(123 + (123 * var(--building-g-mod))),
|
||||
calc(120 + (120 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__maroon {
|
||||
fill:rgb(
|
||||
calc(99 + (99 * var(--building-r-mod))),
|
||||
calc(49 + (49 * var(--building-g-mod))),
|
||||
calc(48 + (48 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__brown {
|
||||
fill:rgb(
|
||||
calc(140 + (140 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(79 + (79 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__fuscha {
|
||||
fill:rgb(
|
||||
calc(120 + (120 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(104 + (104 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.door__drk-purple {
|
||||
fill:rgb(
|
||||
calc(71 + (71 * var(--building-r-mod))),
|
||||
calc(39 + (39 * var(--building-g-mod))),
|
||||
calc(56 + (56 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door_purple {
|
||||
fill:rgb(
|
||||
calc(82 + (82 * var(--building-r-mod))),
|
||||
calc(43 + (43 * var(--building-g-mod))),
|
||||
calc(64 + (64 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__tan {
|
||||
fill:rgb(
|
||||
calc(185 + (185 * var(--building-r-mod))),
|
||||
calc(140 + (140 * var(--building-g-mod))),
|
||||
calc(137 + (137 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__light-blue {
|
||||
fill:rgb(
|
||||
calc(138 + (138 * var(--building-r-mod))),
|
||||
calc(147 + (147 * var(--building-g-mod))),
|
||||
calc(199 + (199 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__blue-purple {
|
||||
fill:rgb(
|
||||
calc(57 + (57 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(158 + (158 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__plum {
|
||||
fill:rgb(
|
||||
calc(50 + (50 * var(--building-r-mod))),
|
||||
calc(23 + (23 * var(--building-g-mod))),
|
||||
calc(37 + (37 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__eggplant {
|
||||
fill:rgb(
|
||||
calc(55 + (55 * var(--building-r-mod))),
|
||||
calc(32 + (32 * var(--building-g-mod))),
|
||||
calc(62 + (62 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__grape {
|
||||
fill:rgb(
|
||||
calc(108 + (108 * var(--building-r-mod))),
|
||||
calc(61 + (61 * var(--building-g-mod))),
|
||||
calc(91 + (91 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__rose {
|
||||
fill:rgb(
|
||||
calc(140 + (140 * var(--building-r-mod))),
|
||||
calc(77 + (77 * var(--building-g-mod))),
|
||||
calc(80 + (80 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.door__violet {
|
||||
fill:rgb(
|
||||
calc(35 + (35 * var(--building-r-mod))),
|
||||
calc(56 + (56 * var(--building-g-mod))),
|
||||
calc(108 + (108 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill__mauve {
|
||||
fill:rgb(
|
||||
calc(112 + (112 * var(--building-r-mod))),
|
||||
calc(59 + (59 * var(--building-g-mod))),
|
||||
calc(78 + (78 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill__purple {
|
||||
fill:rgb(
|
||||
calc(65 + (65 * var(--building-r-mod))),
|
||||
calc(44 + (44 * var(--building-g-mod))),
|
||||
calc(82 + (82 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill__eggplant {
|
||||
fill:rgb(
|
||||
calc(50 + (50 * var(--building-r-mod))),
|
||||
calc(21 + (21 * var(--building-g-mod))),
|
||||
calc(33 + (33 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-sill-shade {
|
||||
fill:rgb(
|
||||
calc(62 + (62 * var(--building-r-mod))),
|
||||
calc(28 + (28 * var(--building-g-mod))),
|
||||
calc(23 + (23 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window-line {
|
||||
fill:rgb(
|
||||
calc(91 + (91 * var(--building-r-mod))),
|
||||
calc(14 + (14 * var(--building-g-mod))),
|
||||
calc(16 + (16 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.window__facade {
|
||||
fill:rgb(
|
||||
calc(121 + (121 * var(--building-r-mod))),
|
||||
calc(76 + (76 * var(--building-g-mod))),
|
||||
calc(105 + (105 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.fencing {
|
||||
fill:rgb(
|
||||
calc(24 + (24 * var(--building-r-mod))),
|
||||
calc(24 + (24 * var(--building-g-mod))),
|
||||
calc(24 + (26 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__trim {
|
||||
fill:rgb(
|
||||
calc(94 + (94 * var(--building-r-mod))),
|
||||
calc(42 + (42 * var(--building-g-mod))),
|
||||
calc(43 + (43 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.building__trim-notched {
|
||||
fill:rgb(
|
||||
calc(128 + (128 * var(--building-r-mod))),
|
||||
calc(87 + (87 * var(--building-g-mod))),
|
||||
calc(113 + (113 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.sidewalk {
|
||||
fill:rgb(
|
||||
calc(148 + (148 * var(--building-r-mod))),
|
||||
calc(167 + (167 * var(--building-g-mod))),
|
||||
calc(144 + (144 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.city__fade {
|
||||
opacity:0.3;
|
||||
fill:rgb(
|
||||
calc(215 + (215 * var(--building-r-mod))),
|
||||
calc(192 + (192 * var(--building-g-mod))),
|
||||
calc(184 + (184 * var(--building-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
/* Nature */
|
||||
|
||||
.tree__trunk {
|
||||
fill:rgb(
|
||||
calc(115 + (115 * var(--park-r-mod))),
|
||||
calc(90 + (90 * var(--park-g-mod))),
|
||||
calc(64 + (64 * var(--park-b-mod)))
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
.hill {
|
||||
fill:rgb(
|
||||
calc(155 + (155 * var(--park-r-mod))),
|
||||
calc(187 + (187 * var(--park-g-mod))),
|
||||
calc(141 + (141 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.tree__leaves {
|
||||
fill:rgb(
|
||||
calc(144 + (144 * var(--park-r-mod))),
|
||||
calc(142 + (142 * var(--park-g-mod))),
|
||||
calc(99 + (99 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.bush-med {
|
||||
fill:rgb(
|
||||
calc(170 + (170 * var(--park-r-mod))),
|
||||
calc(175 + (175 * var(--park-g-mod))),
|
||||
calc(138 + (138 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.bush-light {
|
||||
fill:rgb(
|
||||
calc(189 + (189 * var(--park-r-mod))),
|
||||
calc(187 + (187 * var(--park-g-mod))),
|
||||
calc(145 + (145 * var(--park-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
/* Dog */
|
||||
|
||||
.dog__leg {
|
||||
fill:rgb(139, 100, 57);
|
||||
}
|
||||
|
||||
.dog {
|
||||
fill:rgb(166, 125, 83);
|
||||
}
|
||||
|
||||
.dog__ear {
|
||||
fill:rgb(96, 72, 50);
|
||||
}
|
||||
|
||||
.dog__underbelly {
|
||||
fill:var(--dog__light);
|
||||
}
|
||||
|
||||
.dog__head {
|
||||
fill:var(--dog__light);
|
||||
}
|
||||
|
||||
.dog__paw {
|
||||
fill: var(--dog__light);
|
||||
}
|
||||
|
||||
.jacket__body {
|
||||
fill:rgb(
|
||||
calc(103 + (103 * var(--dog-coat-r-mod))),
|
||||
calc(52 + (52 * var(--dog-coat-g-mod))),
|
||||
calc(42 + (42 * var(--dog-coat-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
.jacket__collar {
|
||||
fill:rgb(
|
||||
calc(73 + (73 * var(--dog-coat-r-mod))),
|
||||
calc(26 + (26 * var(--dog-coat-g-mod))),
|
||||
calc(14 + (14 * var(--dog-coat-b-mod)))
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes wagTail {
|
||||
from {
|
||||
--tail-rotate: 15deg;
|
||||
}
|
||||
to {
|
||||
--tail-rotate: 25deg;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatClouds {
|
||||
from {
|
||||
left: 85%;
|
||||
}
|
||||
to {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% {
|
||||
--star-opacity: .7;
|
||||
}
|
||||
25% {
|
||||
--star-opacity: .55;
|
||||
}
|
||||
75% {
|
||||
--star-opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightSwitch {
|
||||
0% {
|
||||
fill: var(--window-lights-color);
|
||||
}
|
||||
1% {
|
||||
fill: var(--window-color);
|
||||
}
|
||||
74% {
|
||||
fill: var(--window-color);
|
||||
}
|
||||
75% {
|
||||
fill: var(--window-lights-color);
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче