kizu

html,body {height: 100%}
 body {
background: red url(//yastatic.net/mail/_/lnMNyh5OIOkSQhUkvdiGzJCrx60.png) center left no-repeat
}

kizu

Faeria UI issues

General

• You should be able to view decks while queueing.
• You should be able to edit decks you're not queueing with right now.
• Add tooltips at right click on different elements and teach that you can do it somewhere in prologue.

Battle

kizu

.loader {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 32px;
	height: 32px;
	background: url("data:image/svg+xml;utf8,<svg width='32px' height='32px' viewBox='0 0 32 32' xmlns='http%3A//www.w3.org/2000/svg'><style>@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}circle{-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;will-change:transform}</style><circle fill='none' stroke-width='2' stroke-dasharray='47.12' stroke='%23fc0' cx='16' cy='16' r='15'></circle></svg>");
}

kizu

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(rgb(9, 133, 206), rgb(41, 134, 206));
min-height: 100%;

kizu

.HeartAnimation {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC1QAAABkCAYAAAA7MJAoAABVUklEQVR42uzBAQEAAACAkP6v7ggCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDZu4OWqKIwDMBn0aJdm1pFIbQIatmmTdsgoj/QIqFdi7ZKtGlZ0dasrEZlzFLHcZgZIa5BQpbgmCJUVpNRkQWtWkcaJxiY/kDnUM8D3y94uedeuO/9LgAAAAAAAAAAAAAAAAAA0HHh/IU9PT09OwNZWBxbOzI6Oro/kIXnk89OxEwCWWiXV3pjJoFs8ogTyCaP9fLKxUA293N5AAAAAAAAwH9gZmBg3/p06ezCzasHAsnV6/XjzWbztoJJHqamZk8VRdGoVBb6AslNji2dqU62FmsPno6EEHYEkudRG1/ejpko8eZxXs1Ozv+oVRc+yCOP8tXc2JPvc7W5r/JILxbbl6ur2xult18CWdiceP0uTiALsSyqMJqPibvlQz4AAQAAAAAAgH/cvWuXdr+vD0+/rpZevJwdv6wQl9bqrcuHNx7XtjqzXB46Gkj64nxpaWm7M0rVafX39++an5//2ZlYVgwkFYuixaP1rTjySC8WqWOhOs5QaeZYIKmHM0+udvKIm6oD2RSqPe9mYUf7fvuGwmheJXcb3AEAAAAAAAD+ojcT4yc/Npqf4rycHvYCPbGN2vBId4E3bkYOJBOvie48fpfcSaZarZ7rLlQ3m80rgWRiIbG7UB238QaSF3g7heo7dyYOBmyo5o+PQGKp2lmV133EtQEAAAAAAADAf6tdXun9PNcqxYnbeAPJxALD1+LhVve0h6/7bWpCr2ojhQJvPtYqo6e782hXSucDSTe4t1qtzU6hutFoOK8Sq1QW+ur1+reiKBpKcekNDo7sjZnYhswv9u7etakoDuP4b

kizu

.wrapper {
	margin: 100px;
}

.bubble {
	background: #AAA;
	display: inline-block;
	overflow: hidden;
	margin: 10px;
	padding: 10px;

kizu

/* Oh hai, Selectors level 4! */
/* https://drafts.csswg.org/selectors-4/  */
/* Try this at http://nightly.webkit.org/ */

div:before {
	content: attr(class);
}

.a.b:not(.c) {
	background: red;

kizu

asd

kizu

/* Foo */
.hello
  width: 10px

  /*
Bar
  */
  &:after
    height: 30px /* Baz */

kizu

p {
	background: red;
	margin-left: -15800px;
}