added everything

custom-css.css

@@ -0,0 +1,649 @@
+@font-face {
+    font-family: 'System';
+    src: url('/media/custom/fonts/system-ms/SystemBold.woff2') format('woff2'),
+        url('/media/custom/fonts/system-ms/SystemBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'MS Serif';
+    src: url('/media/custom/fonts/ms-serif/MSSerif.woff2') format('woff2'),
+        url('/media/custom/fonts/ms-serif/MSSerif.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'MS Sans Serif';
+    src: url('/media/custom/fonts/ms-sans-serif/MS Sans Serif.woff2') format('woff2'),
+        url('/media/custom/fonts/ms-sans-serif/MS Sans Serif.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+ak-form-element[label="Please read and agree to our code of conduct before you continue."] {
+    font-size: 16px;
+    font-weight: 100;
+    padding-bottom: 10px;
+}
+.pf-c-form__label-text {
+	cursor: url('/media/custom/cursors/arrow.cur'), auto !important;
+}
+
+div:has(#adultcheckbox:not(:checked)) button {
+    pointer-events: none;
+    color: gray !important;
+    border-bottom: 2px solid black !important;
+    border-right: 2px solid black !important;
+}
+textarea[name="eula"] {
+    font-family: "System", sans-serif;
+    resize: none;
+    margin-bottom: -10px;
+    height: 600px;
+    line-height: 1em;
+    color: black;
+    background-color: white !important;
+    user-select: none;
+    cursor: url('/media/custom/cursors/arrow.cur'), auto !important;
+}
+textarea[name="eula"]::placeholder {
+	color: black;
+}
+
+.pf-c-background-image {
+	background-color: #161657;
+}
+p:has(.marginkill) {
+	margin-bottom: -20px;
+	margin-top: -10px;
+	user-select: none;
+}
+:root {
+    --ak-flow-background: url("/media/flow-backgrounds/ms.jpeg") !important;
+     --surface: #c0c0c0;
+  --button-highlight: #ffffff;
+  --button-face: #dfdfdf;
+  --button-shadow: #808080;
+  --window-frame: #0a0a0a;
+  --dialog-blue: #000080;
+  --dialog-blue-light: #1084d0;
+  --dialog-gray: #808080;
+  --dialog-gray-light: #b5b5b5;
+  --link-blue: #0000ff;
+
+  /* Spacing */
+  --element-spacing: 8px;
+  --grouped-button-spacing: 4px;
+  --grouped-element-spacing: 6px;
+  --radio-width: 12px;
+  --checkbox-width: 13px;
+  --radio-label-spacing: 6px;
+  --range-track-height: 4px;
+  --range-spacing: 10px;
+
+  /* Some detailed computations for radio buttons and checkboxes */
+  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
+  --radio-total-width: calc(var(--radio-total-width-precalc));
+  --radio-left: calc(-1 * var(--radio-total-width-precalc));
+  --radio-dot-width: 4px;
+  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
+  --radio-dot-left: calc(
+    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
+        --radio-dot-width
+      ) / 2
+  );
+
+  --checkbox-total-width-precalc: var(--checkbox-width) +
+    var(--radio-label-spacing);
+  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
+  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
+  --checkmark-width: 7px;
+  --checkmark-top: 3px;
+  --checkmark-left: 3px;
+
+  /* Borders */
+  --border-width: 1px;
+  --border-raised-outer: inset -1px -1px var(--window-frame),
+    inset 1px 1px var(--button-highlight);
+  --border-raised-inner: inset -2px -2px var(--button-shadow),
+    inset 2px 2px var(--button-face);
+  --border-sunken-outer: inset -1px -1px var(--button-highlight),
+    inset 1px 1px var(--window-frame);
+  --border-sunken-inner: inset -2px -2px var(--button-face),
+    inset 2px 2px var(--button-shadow);
+
+  /* Window borders flip button-face and button-highlight */
+  --border-window-outer: inset -1px -1px var(--window-frame),
+    inset 1px 1px var(--button-face);
+  --border-window-inner: inset -2px -2px var(--button-shadow),
+    inset 2px 2px var(--button-highlight);
+
+  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
+  --border-field: inset -1px -1px var(--button-highlight),
+    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
+    inset 2px 2px var(--window-frame);
+}
+
+label.pf-c-check__label {
+	cursor: url('/media/custom/cursors/arrow.cur'), auto !important;
+}
+body{
+	cursor: url('/media/custom/cursors/arrow.cur'), auto;
+}
+a[href^="https://goauthentik.io"] {display:none !important}
+
+h1, h3 {
+	/*font-family: "Sixtyfour", "RedHatDisplay", "Overpass", helvetica, sans-serif !important;*/
+	user-select: none;
+	color: black !important;
+}
+h3 {
+	font-family: "MS Sans Serif" !important;
+}
+label {
+	cursor: default !important;
+	user-select: none;
+	color: black !important;
+}
+
+.pf-c-brand {
+	height: auto;
+}
+
+.pf-c-form {
+	font-family: "MS Sans Serif" !important;
+	color: black !important;
+}
+.pf-c-login__main-header h1 {
+	font-family: "MS Serif" !important;
+    	color: black !important;
+	margin-left: -6%;
+	font-weight: bold !important;
+}
+.pf-c-login__main-body .pf-c-form__group {
+	font-family: "MS Sans Serif" !important;
+    	color: black !important;
+}
+.pf-c-login__main-body {
+	margin-left: -4%;
+	margin-right: -4%;
+	margin-bottom: -3%;
+}
+.pf-c-empty-state {
+	padding: 0px;
+}
+.pf-c-empty-state__content {
+	margin-top: 55px;
+}
+.pf-c-empty-state__content  h1 {
+	font-family: "MS Sans Serif" !important;
+}
+.pf-c-empty-state__content  h1::after {
+	content: "...";
+}
+.pf-c-empty-state {
+	cursor: url('/media/custom/cursors/hourglass.cur'), auto;
+}
+.pf-c-empty-state__icon {
+	background-image: url('/media/custom/img/drumroll.gif');
+	background-size: 90%;
+	background-repeat: no-repeat;
+
+}
+.pf-c-spinner {
+	background-image: url('/media/custom/img/hourglass.gif');
+	background-size: 90%;
+	background-repeat: no-repeat;
+	animation: none !important;
+}
+
+.pf-c-avatar {
+	box-shadow: rgb(129, 129, 129) -2px -2px, rgb(129, 129, 129) -2px 0px, rgb(129, 129, 128) 0px -2px, rgb(224, 222, 222) 2px 2px, rgb(224, 222, 222) 0px 2px, rgb(224, 222, 222) 2px 0px, rgb(129, 129, 129) 2px -2px, rgb(224, 222, 221) -2px 2px;
+	width: 50px;
+	height: 50px;
+	border: 0px;
+	border-radius: 0px;
+	margin-right: 12px !important;
+}
+.avatar {
+	/*background-image: url('https://auth.32bit.cafe/media/custom/msn.png');
+	background-size: contain;
+	background-repeat: no-repeat;
+	*/user-select: none;
+	background-color: #dadada;
+	padding-right: 10px;
+	box-shadow: rgb(129, 129, 129) -2px -2px, rgb(129, 129, 129) -2px 0px, rgb(129, 129, 128) 0px -2px, rgb(224, 222, 222) 2px 2px, rgb(224, 222, 222) 0px 2px, rgb(224, 222, 222) 2px 0px, rgb(129, 129, 129) 2px -2px, rgb(224, 222, 221) -2px 2px;
+}
+ak-loading-overlay {
+	cursor: url('/media/custom/cursors/hourglass.cur'), auto;
+	background-image:
+      linear-gradient(45deg, #000 25%, transparent 25%),
+      linear-gradient(135deg, #000 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(135deg, transparent 75%, #000 75%);
+    background-size: 2px 2px; /* Must be a square */
+    background-position:0 0, 1px 0, 1px -1px, 0px 1px; /* Must be half of one side of the square */
+    background-color: transparent;
+    }
+* .fa-exclamation-circle:before {
+    content: "abc";
+    width: 18px;
+    display: block;
+    background-image: url("/media/custom/img/error.png");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    color: transparent;
+}
+.pf-c-alert__title {
+	font-family: 'System';
+}
+::-moz-selection { /* Code for Firefox */
+  color: white;
+  background: blue;
+}
+
+::selection {
+  color: white;
+  background: blue;
+}
+.reason {
+	margin-top: -20px;
+}
+ak-stage-access-denied-icon::before {
+    content: " ";
+    display: block;
+    height: 1px;
+    background-color: rgb(143, 149, 153);
+    box-shadow: white 1px 1px, white 1px 0px;
+    margin-bottom: 20px;
+}
+.pf-icon-error-circle-o::before {
+    background-image: url("/media/custom/img/error.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    color: transparent;
+}
+
+
+/* preload that gif */
+body::after {
+	position: absolute; width:0; height:0; overflow: hidden; z-index:-1;
+	content: url("/media/custom/img/error.png") url('/media/custom/img/hourglass.gif') url('/media/custom/img/drumroll.gif')  url("/media/custom/fonts/ms-sans-serif/MS Sans Serif.woff2") url('/media/custom/fonts/ms-sans-serif/MS Sans Serif.woff') url('/media/custom/fonts/ms-serif/MSSerif.woff') url("/media/custom/fonts/ms-serif/MSSerif.woff2") url('/media/custom/fonts/system-ms/SystemBold.woff2');
+}
+.pf-c-empty-state__icon *, .pf-c-spinner * {
+	visibility: hidden;
+}
+.pf-c-login__main::before {
+font-family: 'System', 'sans-serif';
+font-weight: bold !important;
+    content: "32-Bit Cafe SSO";
+    display: block;
+    position: absolute;
+    width: calc(100% - 14px);
+    background-color: #191eb6;
+    color: white;
+    text-align: center;
+    margin-top: 5px;
+    margin-left: 7px;
+    box-shadow: -2px -2px #818181, -2px 0 #818181, 0 -2px #818180, 2px 2px #e0dede, 0 2px #e0dede, 2px 0 #e0dede, 2px -2px #818181, -2px 2px #E0DEDD;
+}
+.pf-c-button::after {
+    border: 0px;
+}
+button, .pf-c-button {
+    text-decoration: none;
+    cursor: url('/media/custom/cursors/hand.cur'), auto;
+    background-color: #c8ced1 !important;
+    color: black !important;
+    font-family: 'System';
+    border: 2px solid !important;
+    border-color: black;
+    box-shadow: inset -3px -3px grey, inset 3px 3px white;
+
+}
+button:hover, .pf-c-button:hover {
+	filter: brightness(107%);
+}
+button:active, .pf-c-button:active {
+    box-shadow: inset 3px 3px grey;
+}
+
+button.pf-m-link {
+	background-color:#6f85d3 !important;
+	color: white !important;
+	border-color: black !important;
+}
+
+.pf-c-button__icon {
+	height: 0px;
+	filter: invert(1);
+}
+.pf-c-button__icon img {
+	height: 26px;
+	margin-top: 1px;
+}
+a {
+	color: blue;
+	text-decoration: underline;
+	cursor: url('/media/custom/cursors/hand.cur'), auto;
+}
+a:hover {
+	font-weight: bold;
+}
+
+.pf-c-login__main {
+	background-color: #c8ced1;
+	box-shadow: 2px 2px #818181, 2px 0 #818181, 0 2px #818180, -2px -2px #e0dede, 0 -2px #e0dede, -2px 0 #e0dede, -2px 2px #818181, 2px -2px #E0DEDD;
+}
+.pf-m-action {
+	margin: 0 !important;
+}
+.pf-c-login__main-footer-links {
+	padding-bottom: 0px;
+}
+
+.pf-c-login__main-footer-band::before {
+	content: " ";
+	display: block;
+	height: 1px;
+	background-color: #8f9599;
+	box-shadow: 1px 1px white, 1px 0px white;
+	margin-bottom: 20px;
+}
+.pf-c-login__main-footer-band {
+	user-select: none;
+	font-family: "MS Sans Serif" !important;
+    	color: black !important;
+	background-color: #c8ced1;
+	text-align: left;
+	/* border-top: 1px solid;*/
+	margin-top: 0px;
+	padding-bottom: 15px;
+}
+.pf-c-login__main-footer-band-item {
+	padding: 0px;
+}
+
+.ak-brand {
+	margin:5px !important;
+	margin-top: -20px !important;;
+}
+/* BEGIN 98.CSS EXCERPT */
+input[type="text"]:focus::placeholder,
+input[type="password"]:focus::placeholder,
+input[type="email"]:focus::placeholder,
+input[type="number"]:focus::placeholder 
+{
+	color: white;
+}
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"] {
+	height: 30px;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+select,
+textarea {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: var(--border-field);
+  background-color: var(--button-highlight);
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0;
+}
+input[type="number"] {
+  /* need this 1 pixel to fit the spinner controls in box */
+  height: 22px;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"] {
+  /* For some reason descenders are getting cut off without this */
+  line-height: 2;
+}
+
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="text"]:disabled,
+input[type="number"]:disabled,
+input[type="email"]:read-only,
+input[type="password"]:read-only,
+input[type="text"]:read-only,
+input[type="number"]:read-only,
+textarea:disabled {
+  background-color: var(--surface);
+}
+
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  padding-right: 32px;
+  background-image: svg-load("/media/custom/icons/button-down.svg");
+  background-position: top 2px right 2px;
+  background-repeat: no-repeat;
+  border-radius: 0;
+}
+
+select:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+  outline: none;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 21px;
+  width: 11px;
+  background: svg-load("/media/custom/icons/indicator-horizontal.svg");
+  transform: translateY(-8px);
+}
+
+input[type="range"].has-box-indicator::-webkit-slider-thumb {
+  background: svg-load("/media/custom/icons/indicator-rectangle-horizontal.svg");
+  transform: translateY(-10px);
+}
+
+input[type="range"]::-moz-range-thumb {
+  height: 21px;
+  width: 11px;
+  border: 0;
+  border-radius: 0;
+  background: svg-load("/media/custom/icons/indicator-horizontal.svg");
+  transform: translateY(2px);
+}
+
+input[type="range"].has-box-indicator::-moz-range-thumb {
+  background: svg-load("/media/custom/icons/indicator-rectangle-horizontal.svg");
+  transform: translateY(0px);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background: black;
+  border-right: 1px solid grey;
+  border-bottom: 1px solid grey;
+  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
+    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+}
+
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background: black;
+  border-right: 1px solid grey;
+  border-bottom: 1px solid grey;
+  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
+    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+}
+
+.pf-c-check input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  margin: 0;
+  background: 0;
+  position: fixed;
+  opacity: 0;
+  border: none;
+}
+
+.pf-c-check input[type="checkbox"] + label {
+  line-height: 13px;
+}
+
+.pf-c-check input[type="checkbox"]:focus + label {
+  outline: 1px dotted #000000;
+}
+
+.pf-c-check input[type="checkbox"] + label {
+  cursor: url('/media/custom/cursors/hand.cur'), auto !important;
+  position: relative;
+  margin-left: var(--checkbox-total-width);
+}
+
+.pf-c-check input[type="checkbox"] + label::before {
+  cursor: url('/media/custom/cursors/hand.cur'), auto !important;
+  content: "";
+  position: absolute;
+  left: calc(-1 * (var(--checkbox-total-width-precalc)));
+  display: inline-block;
+  width: var(--checkbox-width);
+  height: var(--checkbox-width);
+  background: var(--button-highlight);
+  box-shadow: var(--border-field);
+  margin-right: var(--radio-label-spacing);
+}
+.pf-c-check input[type="checkbox"]:active + label::before {
+  background: var(--surface);
+}
+
+.pf-c-check input[type="checkbox"]:checked + label::before {
+  background-image: url("/media/custom/icons/checkmark.svg");
+  background-size: 60%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.pf-c-check input[type="checkbox"][disabled] + label::before {
+  background: var(--surface);
+}
+
+.pf-c-check input[type="checkbox"][disabled]:checked + label::after {
+  background: svg-load("/media/custom/icons/checkmark-disabled.svg");
+}
+/* END 98.css */
+
+/* BEGIN SCROLLBAR */
+textarea::-webkit-scrollbar {
+	 width: 16px;
+	 height: 16px;
+}
+ textarea::-webkit-scrollbar-track {
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=');
+	 image-rendering: pixelated;
+}
+ textarea::-webkit-scrollbar-track:active {
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==');
+}
+ textarea::-webkit-scrollbar-thumb {
+	 border-top: 1px solid #c3c7cb;
+	 border-left: 1px solid #c3c7cb;
+	 border-right: 1px solid black;
+	 border-bottom: 1px solid black;
+	 box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
+	 width: 16px;
+	 height: 16px;
+	 background-color: #c3c7cb;
+	 z-index: 1;
+}
+ textarea::-webkit-scrollbar-corner {
+	 background-color: #c3c7cb;
+}
+ textarea::-webkit-resizer {
+	 width: 16px;
+	 height: 16px;
+	 background-color: #c3c7cb;
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==');
+	 background-position: bottom right;
+	 background-repeat: no-repeat;
+	 image-rendering: pixelated;
+}
+ textarea::-webkit-scrollbar-button, textarea::-webkit-scrollbar-button {
+	 border-top: 1px solid #c3c7cb;
+	 border-left: 1px solid #c3c7cb;
+	 border-right: 1px solid black;
+	 border-bottom: 1px solid black;
+	 box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
+	 display: block;
+	 width: 16px;
+	 height: 16px;
+	 background-color: #c3c7cb;
+	 image-rendering: pixelated;
+	 background-repeat: no-repeat;
+	 background-position: center center;
+}
+ textarea::-webkit-scrollbar-button:active, textarea::-webkit-scrollbar-button:active {
+	 background-position: 2px 2px;
+}
+ textarea::-webkit-scrollbar-button:horizontal:decrement, textarea::-webkit-scrollbar-button:horizontal:decrement {
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC');
+}
+ textarea::-webkit-scrollbar-button:horizontal:increment, textarea::-webkit-scrollbar-button:horizontal:increment {
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=');
+}
+ textarea::-webkit-scrollbar-button:vertical:decrement, textarea::-webkit-scrollbar-button:vertical:decrement {
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=');
+}
+ textarea::-webkit-scrollbar-button:vertical:increment, textarea::-webkit-scrollbar-button:vertical:increment {
+	 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=');
+}
+ textarea::-webkit-scrollbar-button:horizontal:increment:start, textarea::-webkit-scrollbar-button:horizontal:increment:start {
+	 display: none;
+}
+ textarea::-webkit-scrollbar-button:horizontal:decrement:end, textarea::-webkit-scrollbar-button:horizontal:decrement:end {
+	 display: none;
+}
+ textarea::-webkit-scrollbar-button:vertical:increment:start, textarea::-webkit-scrollbar-button:vertical:increment:start {
+	 display: none;
+}
+ textarea::-webkit-scrollbar-button:vertical:decrement:end, textarea::-webkit-scrollbar-button:vertical:decrement:end {
+	 display: none;
+}
+ textarea::-webkit-scrollbar-button:active, textarea::-webkit-scrollbar-button:active {
+	 border-top: 1px solid #868a8e;
+	 border-left: 1px solid #868a8e;
+	 border-bottom: 1px solid #868a8e;
+	 border-right: 1px solid #868a8e;
+	 box-shadow: none;
+}
+/* dakedres was here ;3 */

fonts/ms-sans-serif/demo.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'MS Serif'; font-weight: normal; font-style: normal;">MS Serif</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'MS Serif';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;MSSerif.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'MS Serif'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'MS Sans Serif'; font-weight: normal; font-style: normal;">MS Sans Serif</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'MS Sans Serif';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;MSSansSerif.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'MS Sans Serif'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>

fonts/ms-sans-serif/fonteditor/icon.css

@@ -0,0 +1,906 @@
+/**
+ * @file icon.css
+ */
+
+@font-face {
+    font-family: "MS Sans Serif";
+    src: url("MS Sans Serif.eot"); /* IE9 */
+    src: url("MS Sans Serif.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+    url("MS Sans Serif.woff2") format("woff2"), /* chrome、firefox、opera、Safari, Android, iOS */
+    url("MS Sans Serif.woff") format("woff"), /* chrome、firefox */
+    url("MS Sans Serif.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
+    url("MS Sans Serif.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
+}
+
+
+.icon {
+    font-family: "MS Sans Serif" !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+
+.icon-space:before {
+  content: "\20";
+}
+
+.icon-exclam:before {
+  content: "\21";
+}
+
+.icon-quotedbl:before {
+  content: "\22";
+}
+
+.icon-numbersign:before {
+  content: "\23";
+}
+
+.icon-dollar:before {
+  content: "\24";
+}
+
+.icon-percent:before {
+  content: "\25";
+}
+
+.icon-ampersand:before {
+  content: "\26";
+}
+
+.icon-quotesingle:before {
+  content: "\27";
+}
+
+.icon-parenleft:before {
+  content: "\28";
+}
+
+.icon-parenright:before {
+  content: "\29";
+}
+
+.icon-password_bullet:before {
+  content: "\2022,\25cf";
+}
+
+.icon-asterisk:before {
+  content: "\2a";
+}
+
+.icon-plus:before {
+  content: "\2b";
+}
+
+.icon-comma:before {
+  content: "\2c";
+}
+
+.icon-hyphen:before {
+  content: "\2d";
+}
+
+.icon-period:before {
+  content: "\2e";
+}
+
+.icon-slash:before {
+  content: "\2f";
+}
+
+.icon-zero:before {
+  content: "\30";
+}
+
+.icon-one:before {
+  content: "\31";
+}
+
+.icon-two:before {
+  content: "\32";
+}
+
+.icon-three:before {
+  content: "\33";
+}
+
+.icon-four:before {
+  content: "\34";
+}
+
+.icon-five:before {
+  content: "\35";
+}
+
+.icon-six:before {
+  content: "\36";
+}
+
+.icon-seven:before {
+  content: "\37";
+}
+
+.icon-eight:before {
+  content: "\38";
+}
+
+.icon-nine:before {
+  content: "\39";
+}
+
+.icon-colon:before {
+  content: "\3a";
+}
+
+.icon-semicolon:before {
+  content: "\3b";
+}
+
+.icon-less:before {
+  content: "\3c";
+}
+
+.icon-equal:before {
+  content: "\3d";
+}
+
+.icon-greater:before {
+  content: "\3e";
+}
+
+.icon-question:before {
+  content: "\3f";
+}
+
+.icon-at:before {
+  content: "\40";
+}
+
+.icon-A:before {
+  content: "\41";
+}
+
+.icon-B:before {
+  content: "\42";
+}
+
+.icon-C:before {
+  content: "\43";
+}
+
+.icon-D:before {
+  content: "\44";
+}
+
+.icon-E:before {
+  content: "\45";
+}
+
+.icon-F:before {
+  content: "\46";
+}
+
+.icon-G:before {
+  content: "\47";
+}
+
+.icon-H:before {
+  content: "\48";
+}
+
+.icon-I:before {
+  content: "\49";
+}
+
+.icon-J:before {
+  content: "\4a";
+}
+
+.icon-K:before {
+  content: "\4b";
+}
+
+.icon-L:before {
+  content: "\4c";
+}
+
+.icon-M:before {
+  content: "\4d";
+}
+
+.icon-N:before {
+  content: "\4e";
+}
+
+.icon-O:before {
+  content: "\4f";
+}
+
+.icon-P:before {
+  content: "\50";
+}
+
+.icon-Q:before {
+  content: "\51";
+}
+
+.icon-R:before {
+  content: "\52";
+}
+
+.icon-S:before {
+  content: "\53";
+}
+
+.icon-T:before {
+  content: "\54";
+}
+
+.icon-U:before {
+  content: "\55";
+}
+
+.icon-V:before {
+  content: "\56";
+}
+
+.icon-W:before {
+  content: "\57";
+}
+
+.icon-X:before {
+  content: "\58";
+}
+
+.icon-Y:before {
+  content: "\59";
+}
+
+.icon-Z:before {
+  content: "\5a";
+}
+
+.icon-bracketleft:before {
+  content: "\5b";
+}
+
+.icon-backslash:before {
+  content: "\5c";
+}
+
+.icon-bracketright:before {
+  content: "\5d";
+}
+
+.icon-asciicircum:before {
+  content: "\5e";
+}
+
+.icon-underscore:before {
+  content: "\5f";
+}
+
+.icon-grave:before {
+  content: "\60";
+}
+
+.icon-a:before {
+  content: "\61";
+}
+
+.icon-b:before {
+  content: "\62";
+}
+
+.icon-c:before {
+  content: "\63";
+}
+
+.icon-d:before {
+  content: "\64";
+}
+
+.icon-e:before {
+  content: "\65";
+}
+
+.icon-f:before {
+  content: "\66";
+}
+
+.icon-g:before {
+  content: "\67";
+}
+
+.icon-h:before {
+  content: "\68";
+}
+
+.icon-i:before {
+  content: "\69";
+}
+
+.icon-j:before {
+  content: "\6a";
+}
+
+.icon-k:before {
+  content: "\6b";
+}
+
+.icon-l:before {
+  content: "\6c";
+}
+
+.icon-m:before {
+  content: "\6d";
+}
+
+.icon-n:before {
+  content: "\6e";
+}
+
+.icon-o:before {
+  content: "\6f";
+}
+
+.icon-p:before {
+  content: "\70";
+}
+
+.icon-q:before {
+  content: "\71";
+}
+
+.icon-r:before {
+  content: "\72";
+}
+
+.icon-s:before {
+  content: "\73";
+}
+
+.icon-t:before {
+  content: "\74";
+}
+
+.icon-u:before {
+  content: "\75";
+}
+
+.icon-v:before {
+  content: "\76";
+}
+
+.icon-w:before {
+  content: "\77";
+}
+
+.icon-x:before {
+  content: "\78";
+}
+
+.icon-y:before {
+  content: "\79";
+}
+
+.icon-z:before {
+  content: "\7a";
+}
+
+.icon-braceleft:before {
+  content: "\7b";
+}
+
+.icon-bar:before {
+  content: "\7c";
+}
+
+.icon-braceright:before {
+  content: "\7d";
+}
+
+.icon-asciitilde:before {
+  content: "\7e";
+}
+
+.icon-uni007F:before {
+  content: "\7f";
+}
+
+.icon-uni00A0:before {
+  content: "\a0";
+}
+
+.icon-exclamdown:before {
+  content: "\a1";
+}
+
+.icon-cent:before {
+  content: "\a2";
+}
+
+.icon-sterling:before {
+  content: "\a3";
+}
+
+.icon-currency:before {
+  content: "\a4";
+}
+
+.icon-yen:before {
+  content: "\a5";
+}
+
+.icon-brokenbar:before {
+  content: "\a6";
+}
+
+.icon-section:before {
+  content: "\a7";
+}
+
+.icon-dieresis:before {
+  content: "\a8";
+}
+
+.icon-copyright:before {
+  content: "\a9";
+}
+
+.icon-ordfeminine:before {
+  content: "\aa";
+}
+
+.icon-guillemotleft:before {
+  content: "\ab";
+}
+
+.icon-logicalnot:before {
+  content: "\ac";
+}
+
+.icon-uni00AD:before {
+  content: "\ad";
+}
+
+.icon-registered:before {
+  content: "\ae";
+}
+
+.icon-macron:before {
+  content: "\af";
+}
+
+.icon-degree:before {
+  content: "\b0";
+}
+
+.icon-plusminus:before {
+  content: "\b1";
+}
+
+.icon-uni00B2:before {
+  content: "\b2";
+}
+
+.icon-uni00B3:before {
+  content: "\b3";
+}
+
+.icon-acute:before {
+  content: "\b4";
+}
+
+.icon-mu:before {
+  content: "\b5";
+}
+
+.icon-paragraph:before {
+  content: "\b6";
+}
+
+.icon-periodcentered:before {
+  content: "\b7";
+}
+
+.icon-cedilla:before {
+  content: "\b8";
+}
+
+.icon-uni00B9:before {
+  content: "\b9";
+}
+
+.icon-ordmasculine:before {
+  content: "\ba";
+}
+
+.icon-guillemotright:before {
+  content: "\bb";
+}
+
+.icon-onequarter:before {
+  content: "\bc";
+}
+
+.icon-onehalf:before {
+  content: "\bd";
+}
+
+.icon-threequarters:before {
+  content: "\be";
+}
+
+.icon-questiondown:before {
+  content: "\bf";
+}
+
+.icon-Agrave:before {
+  content: "\c0";
+}
+
+.icon-Aacute:before {
+  content: "\c1";
+}
+
+.icon-Acircumflex:before {
+  content: "\c2";
+}
+
+.icon-Atilde:before {
+  content: "\c3";
+}
+
+.icon-Adieresis:before {
+  content: "\80,\c4";
+}
+
+.icon-Aring:before {
+  content: "\81,\c5";
+}
+
+.icon-AE:before {
+  content: "\c6";
+}
+
+.icon-Ccedilla:before {
+  content: "\82,\c7";
+}
+
+.icon-Egrave:before {
+  content: "\c8";
+}
+
+.icon-Eacute:before {
+  content: "\83,\c9";
+}
+
+.icon-Ecircumflex:before {
+  content: "\ca";
+}
+
+.icon-Edieresis:before {
+  content: "\cb";
+}
+
+.icon-Igrave:before {
+  content: "\cc";
+}
+
+.icon-Iacute:before {
+  content: "\cd";
+}
+
+.icon-Icircumflex:before {
+  content: "\ce";
+}
+
+.icon-Idieresis:before {
+  content: "\cf";
+}
+
+.icon-Eth:before {
+  content: "\d0";
+}
+
+.icon-Ntilde:before {
+  content: "\84,\d1";
+}
+
+.icon-Ograve:before {
+  content: "\d2";
+}
+
+.icon-Oacute:before {
+  content: "\d3";
+}
+
+.icon-Ocircumflex:before {
+  content: "\d4";
+}
+
+.icon-Otilde:before {
+  content: "\d5";
+}
+
+.icon-Odieresis:before {
+  content: "\85,\d6";
+}
+
+.icon-multiply:before {
+  content: "\d7";
+}
+
+.icon-Oslash:before {
+  content: "\d8";
+}
+
+.icon-Ugrave:before {
+  content: "\d9";
+}
+
+.icon-Uacute:before {
+  content: "\da";
+}
+
+.icon-Ucircumflex:before {
+  content: "\db";
+}
+
+.icon-Udieresis:before {
+  content: "\86,\dc";
+}