michael@0: * {
michael@0:   box-sizing: border-box;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   margin: 0;
michael@0:   padding-bottom: 20px;
michael@0: }
michael@0: 
michael@0: #all-fonts {
michael@0:   padding: 0;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: #showall {
michael@0:   border-radius: 0;
michael@0:   border: 1px solid black;
michael@0:   margin: 3px;
michael@0:   cursor: pointer;
michael@0:   position: fixed;
michael@0:   bottom: 0;
michael@0:   right: 0;
michael@0: }
michael@0: 
michael@0: .font {
michael@0:   padding: 10px 10px;
michael@0: }
michael@0: 
michael@0: .theme-dark .font {
michael@0:   border-bottom: 1px solid #444;
michael@0: }
michael@0: 
michael@0: .theme-light .font {
michael@0:   border-bottom: 1px solid #DDD;
michael@0: }
michael@0: 
michael@0: .font:last-of-type {
michael@0:   border-bottom: 0;
michael@0: }
michael@0: 
michael@0: .theme-light .font:nth-child(even) {
michael@0:   background: #F4F4F4;
michael@0: }
michael@0: 
michael@0: .font-preview {
michael@0:   height: 60px;
michael@0:   width: 100%;
michael@0:   border: 0;
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: .font-info {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: .font-name {
michael@0:   display: inline;
michael@0: }
michael@0: 
michael@0: .font-css-code {
michael@0:   max-width: 100%;
michael@0:   overflow: hidden;
michael@0:   text-overflow: ellipsis;
michael@0:   padding: 5px;
michael@0: }
michael@0: 
michael@0: .theme-light .font-css-code,
michael@0: .theme-light .font-url {
michael@0:   border: 1px solid #CCC;
michael@0:   background: white;
michael@0: }
michael@0: 
michael@0: .theme-dark .font-css-code,
michael@0: .theme-dark .font-url {
michael@0:   border: 1px solid #333;
michael@0:   background: black;
michael@0:   color: white;
michael@0: }