theme/html/html.css in asciibook-0.0.2 vs theme/html/html.css in asciibook-0.0.3
- old
+ new
@@ -1,18 +1,99 @@
-.toolbar {
- position: fixed;
+html,
+body {
+ height: 100%;
+}
+
+.preload * {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -ms-transition: none !important;
+ -o-transition: none !important;
+}
+
+.drawer .drawer-content {
+ width: 240px;
+ position: absolute;
top: 0;
+ left: -240px;
+ bottom: 0;
+ overflow-y: auto;
+ transition: left 0.15s;
+ background: #fafafa;
+ border-right: 1px solid #eee;
+ box-sizing: border-box;
+}
+
+.drawer.open .drawer-content {
left: 0;
+}
+
+.drawer-menu ol {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.drawer-menu-item {
+ padding: 10px 16px;
+ display: block;
+ text-decoration: none;
+ color: #555;
+ font-size: 14px;
+ line-height: 20px;
+}
+
+.drawer-menu-item:hover {
+ background: rgba(0, 0, 0, 0.05);
+ color: #333;
+}
+
+.drawer-menu-item.active {
+ background: rgba(0, 0, 0, 0.05);
+ color: #3f51b5;
+}
+
+.drawer-menu ol ol .drawer-menu-item {
+ padding-left: 32px;
+}
+
+.main {
+ position: absolute;
+ top: 0;
right: 0;
- padding: 0.25em 1.25em;
+ left: 0;
+ bottom: 0;
+ transition: left 0.15s;
+}
+
+.drawer.open + .main {
+ left: 240px;
+}
+
+.main-content {
+ position: absolute;
+ top: 56px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: auto;
+ padding: 32px;
+ outline: 0;
+}
+
+.container {
+ max-width: 768px;
+ margin: 0 auto;
+}
+
+.toolbar {
+ padding: 4px;
display: flex;
- background: white;
- z-index: 100;
}
.toolbar-title {
- padding: 0.75em;
+ padding: 12px;
flex-grow: 1;
font-weight: bold;
}
.toolbar-title a {
@@ -23,11 +104,11 @@
.toolbar-title a:hover {
color: #555;
}
.toolbar-action {
- padding: 0.25em;
+ padding: 4px;
}
.button {
display: inline-flex;
align-items: center;
@@ -39,48 +120,69 @@
white-space: nowrap;
background: transparent;
line-height: 1;
border: none;
padding: 0;
+ color: #999;
}
+.button:hover {
+ color: #555;
+}
+
+.button:active,
+.button.active {
+ color: #333;
+}
+
+.button:disabled,
+.button.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+}
+
+.button-text {
+ padding: 8px 16px;
+}
+
.button-icon {
- padding: 0.5em;
+ padding: 8px;
+ border-radius: 50%;
}
.button-icon {
- color: #999;
+ fill: #999;
}
.button-icon:hover {
- color: #555;
+ fill: #555;
}
-.button-icon .fas {
- font-size: 1.25em;
- width: 1.2em;
- line-height: 1.2em;
+.button-icon {
+ width: 40px;
+ height: 40px;
text-align: center;
}
.dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
- min-width: 320px;
+ min-width: 240px;
max-width: 90%;
max-height: 480px;
top: 100%;
right: 0;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 4px;
z-index: 10;
overflow-y: auto;
background: white;
+ font-size: 14px;
}
.dropdown.open .dropdown-menu {
display: block;
}
@@ -91,13 +193,14 @@
margin: 0;
}
.dropdown-menu-item {
display: block;
- padding: 12px;
+ padding: 10px 12px;
text-decoration: none;
color: #555;
+ line-height: 20px;
}
.dropdown-menu-item:hover {
background: rgba(0, 0, 0, 0.05);
color: #333;
@@ -109,71 +212,277 @@
.dropdown-menu ol ol .dropdown-menu-item {
padding-left: 24px;
}
-.content {
- padding: 2em;
- max-width: 768px;
- margin: 0 auto;
+.dropdown-group {
+ margin: 16px;
}
+.dropdown-group label {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: bold;
+ color: #777;
+}
+
+.dropdown-options {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.font-family-options .button {
+ justify-content: center;
+ flex-grow: 1;
+}
+
+.background-options .button {
+ border: 1px solid #ccc;
+}
+
+.background-options .button svg {
+ display: none;
+}
+
+.background-options .button.active svg {
+ display: block;
+}
+
+.background-options .button[data-value="white"] {
+ background: white;
+}
+
+.background-options .button[data-value="warm"] {
+ background: #fff8e1;
+}
+
+.background-options .button[data-value="dim"] {
+ background: #424242;
+}
+
+.background-options .button[data-value="black"] {
+ background: black;
+}
+
.paginator {
}
.paginator a {
padding: 32px;
- color: #999;
+ fill: #999;
text-decoration: none;
}
-.paginator a .fas {
- font-size: 1.25em;
- width: 1.2em;
- line-height: 1.2em;
- text-align: center;
+.paginator a svg {
}
.paginator a:hover {
- color: #555;
+ fill: #555;
}
.paginator a.disabled {
visibility: hidden;
}
.paginator-prev {
display: flex;
flex-direction: column;
justify-content: center;
- position: fixed;
- top: 48px;
+ align-items: center;
+ position: absolute;
+ top: 56px;
bottom: 0;
left: 0;
}
.paginator-next {
display: flex;
flex-direction: column;
justify-content: center;
- position: fixed;
- top: 48px;
+ align-items: center;
+ position: absolute;
+ top: 56px;
bottom: 0;
right: 0;
}
-.main {
- margin-top: 56px;
+/* Theme */
+
+body[data-font-size="50"] .main-content {
+ font-size: 50%;
}
-@media (max-width: 992px) {
+body[data-font-size="67"] .main-content {
+ font-size: 67%;
+}
+
+body[data-font-size="75"] .main-content {
+ font-size: 75%;
+}
+
+body[data-font-size="80"] .main-content {
+ font-size: 80%;
+}
+
+body[data-font-size="90"] .main-content {
+ font-size: 90%;
+}
+
+body[data-font-size="100"] .main-content {
+ font-size: 100%;
+}
+
+body[data-font-size="110"] .main-content {
+ font-size: 110%;
+}
+
+body[data-font-size="125"] .main-content {
+ font-size: 125%;
+}
+
+body[data-font-size="150"] .main-content {
+ font-size: 150%;
+}
+
+body[data-font-size="175"] .main-content {
+ font-size: 175%;
+}
+
+body[data-font-size="200"] .main-content {
+ font-size: 200%;
+}
+
+body[data-font-family="serif"] .main-content {
+ font-family: serif;
+}
+
+body[data-font-family="sans-serif"] .main-content {
+ font-family: sans-serif;
+}
+
+body[data-background="white"] {
+ background: white;
+}
+
+body[data-background="warm"] {
+ background: #fff8e1;
+}
+
+body[data-background="dim"] {
+ background: #424242;
+}
+
+body[data-background="dim"] .main-content,
+body[data-background="dim"] .main-content h1,
+body[data-background="dim"] .main-content h2,
+body[data-background="dim"] .main-content h3,
+body[data-background="dim"] .main-content h4,
+body[data-background="dim"] .main-content h5,
+body[data-background="dim"] .main-content h6 {
+ color: #ddd;
+}
+
+body[data-background="dim"] .main-content pre,
+body[data-background="dim"] .main-content *:not(pre) code,
+body[data-background="dim"] .main-content .example,
+body[data-background="dim"] .main-content .sidebar,
+body[data-background="dim"] .main-content blockquote {
+ background: transparent;
+}
+
+body[data-background="dim"] .main-content pre span {
+ color: #ddd;
+}
+
+body[data-background="dim"] .main-content a {
+ color: #81d4fa;
+}
+
+body[data-background="dim"] .main-content a.callout {
+ color: #ddd;
+}
+
+body[data-background="black"] {
+ background: black;
+}
+
+body[data-background="black"] .main-content,
+body[data-background="black"] .main-content h1,
+body[data-background="black"] .main-content h2,
+body[data-background="black"] .main-content h3,
+body[data-background="black"] .main-content h4,
+body[data-background="black"] .main-content h5,
+body[data-background="black"] .main-content h6 {
+ color: #ddd;
+}
+
+body[data-background="black"] .main-content pre,
+body[data-background="black"] .main-content *:not(pre) code,
+body[data-background="black"] .main-content .example,
+body[data-background="black"] .main-content .sidebar,
+body[data-background="black"] .main-content blockquote {
+ background: transparent;
+}
+
+body[data-background="black"] .main-content pre span {
+ color: #ddd;
+}
+
+body[data-background="black"] .main-content a {
+ color: #81d4fa;
+}
+
+body[data-background="black"] .main-content a.callout {
+ color: #ddd;
+}
+/* responsive */
+
+@media (max-width: 1280px) {
+ .drawer.open .drawer-content {
+ z-index: 20;
+ background: white;
+ }
+
+ .drawer .drawer-backdrop {
+ display: none;
+ }
+
+ .drawer.open .drawer-backdrop {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ background: rgba(0, 0, 0, 0.15);
+ }
+
+ .drawer.open + .main {
+ left: 0;
+ }
+
+ .drawer.open .drawer-content {
+ border: none;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+ }
+
+ .main-content {
+ bottom: 56px;
+ }
+
.paginator {
display: flex;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
.paginator a {
- padding: 1em;
+ padding: 16px;
}
.paginator-prev {
position: static;
flex-grow: 1;
@@ -186,17 +495,9 @@
justify-content: center;
}
}
@media (max-width: 480px) {
- .toolbar {
- padding: 0.25em;
- }
-
- .content {
- padding: 1em;
- }
-
- .paginator a {
- padding: 0.25em;
+ .main-content {
+ padding: 16px;
}
}