--- /dev/null
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ margin: 0;
+ padding-bottom: 20px;
+}
+
+#all-fonts {
+ padding: 0;
+ margin: 0;
+}
+
+#showall {
+ border-radius: 300px;
+ border: none;
+ background-color: #C09070;
+ color: #000000;
+ margin: 3px;
+ cursor: pointer;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+}
+
+#showall:hover,
+#showall:hover:active {
+ background-color: #FFCF00;
+ color: #000000;
+}
+
+.font {
+ padding: 10px 10px;
+}
+
+.theme-dark .font {
+ border-bottom: 1px solid #9C9CFF;
+}
+
+.theme-light .font {
+ border-bottom: 1px solid #9C9CFF;
+}
+
+.font:last-of-type {
+ border-bottom: 0;
+}
+
+.theme-light .font:nth-child(even) {
+ background-color: rgba(255,159,0,.2);
+}
+
+.font-preview {
+ margin-left: -4px;
+ height: 60px;
+ display: block;
+}
+
+.font-info {
+ display: block;
+}
+
+.font-name {
+ display: inline;
+}
+
+.font-css-code {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 5px;
+}
+
+.theme-light .font-css-code,
+.theme-light .font-url {
+ border: 1px solid #A09090;
+ color: #9C9CFF;
+}
+
+.theme-dark .font-css-code,
+.theme-dark .font-url {
+ border: 1px solid #A09090;
+ color: #9C9CFF;
+}