add share and download #6

tiansh · Jul 15, 2023 · 5d80d1b · 5d80d1b
1 parent d0346ab
commit 5d80d1b
Show file tree

Hide file tree

Showing 13 changed files with 339 additions and 260 deletions.
diff --git a/src/css/common/input.css b/src/css/common/input.css
@@ -204,3 +204,91 @@ button.submit-button .icon-go {
 ::-ms-clear {
   display: none;
 }
+
+.screen-menu {
+  display: none;
+}
+
+.screen-menu.screen-menu-active {
+  display: block;
+}
+
+.screen-option {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--window-width);
+  height: var(--window-height);
+  z-index: 9;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.backdrop {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: var(--default-background);
+  color: var(--default-color);
+  opacity: 0.6;
+  z-index: 9;
+}
+
+.screen-option-group {
+  overflow: hidden;
+  border-radius: 16px;
+  margin: 8px 0;
+  max-width: 600px;
+  display: block;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 16px);
+}
+
+button.screen-option-item {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  outline-offset: -2px;
+  display: block;
+  width: 100%;
+  border: 0 none;
+  padding: 0 12px;
+  height: 53px;
+  line-height: 53px;
+  font-size: 25px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--menu-background);
+  color: var(--menu-color);
+  text-align: left;
+}
+
+.screen-option .button-wrap {
+  margin: 0 -12px;
+  padding: 0 20px;
+}
+
+.screen-option-item:first-child {
+  border-radius: 16px 16px 0 0;
+} 
+
+.screen-option-item:last-child {
+  border-bottom: 0 none;
+  border-radius: 0 0 16px 16px;
+}
+
+.screen-option-item:only-child {
+  border-radius: 16px;
+}
+
+.screen-option-group:last-child {
+  margin-bottom: 10px;
+}
+
+.screen-option-group:last-child .screen-option-item {
+  text-align: center;
+}
diff --git a/src/css/icons/icons.css b/src/css/icons/icons.css
@@ -107,3 +107,8 @@
   content: "\e90d";
 }
 
+.icon-more::before {
+  content: "\e90e";
+}
+
+
diff --git a/src/css/icons/icons.svg b/src/css/icons/icons.svg
diff --git a/src/css/icons/icons.woff b/src/css/icons/icons.woff
diff --git a/src/css/page/listpage.css b/src/css/page/listpage.css
@@ -66,81 +66,6 @@ button.list-sort {
   display: inline;
 }
 
-.list-sort-menu {
-  display: none;
-}
-
-.screen-option {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: var(--window-width);
-  height: var(--window-height);
-  z-index: 9;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.backdrop {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: var(--default-background);
-  color: var(--default-color);
-  opacity: 0.6;
-  z-index: 1;
-}
-
-.screen-option-group {
-  overflow: hidden;
-  border-radius: 16px;
-  margin: 8px 0;
-  max-width: 600px;
-  display: block;
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(100% - 16px);
-}
-
-button.screen-option-item {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  outline-offset: -2px;
-  display: block;
-  width: 100%;
-  border: 0 none;
-  padding: 0 12px;
-  height: 53px;
-  line-height: 53px;
-  font-size: 25px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--menu-background);
-  color: var(--menu-color);
-  text-align: left;
-}
-
-.screen-option .button-wrap {
-  margin: 0 -12px;
-  padding: 0 20px;
-}
-
-.screen-option-item:last-child {
-  border-bottom: 0 none;
-}
-
-.screen-option-group:last-child {
-  margin-bottom: 10px;
-}
-
-.screen-option-group:last-child .screen-option-item {
-  text-align: center;
-}
-
 .file-item {
   position: relative;
 }