aboutsummaryrefslogtreecommitdiff
path: root/src/mobile/MobileInterface.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile/MobileInterface.scss')
-rw-r--r--src/mobile/MobileInterface.scss445
1 files changed, 0 insertions, 445 deletions
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
deleted file mode 100644
index 4b32c3da0..000000000
--- a/src/mobile/MobileInterface.scss
+++ /dev/null
@@ -1,445 +0,0 @@
-$navbar-height: 120px;
-$pathbar-height: 50px;
-
-@media only screen and (max-device-width: 480px) {
- * {
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- font-family: sans-serif;
- }
-}
-
-body {
- overflow: hidden;
-}
-
-.mobileInterface-container {
- height: 100%;
- position: relative;
- touch-action: none;
- width: 100%;
-
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-// Topbar of Dash Mobile
-.navbar {
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100vw;
- height: $navbar-height;
- background-color: whitesmoke;
- z-index: 150;
-
- .cover {
- position: absolute;
- right: 0px;
- top: 0px;
- height: 120px;
- width: 120px;
- background-color: whitesmoke;
- z-index: 200;
- }
-
- .toggle-btn {
- position: absolute;
- right: 20px;
- top: 30px;
- height: 70px;
- width: 70px;
- transition: all 400ms ease-in-out 200ms;
- z-index: 180;
- }
-
- .background {
- position: absolute;
- right: 0px;
- top: 0px;
- height: 120px;
- width: 120px;
- //border: 1px solid black;
- }
-
- .background.active {
- background-color: lightgrey;
- }
-
- .toggle-btn-home {
- right: -200px;
- }
-
- .header {
- position: absolute;
- top: 50%;
- top: calc(9px + 50%);
- right: 50%;
- transform: translate(50%, -50%);
- font-size: 40;
- font-weight: 700;
- text-align: center;
- user-select: none;
- text-transform: uppercase;
- font-family: Arial, Helvetica, sans-serif;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- direction: ltr;
- width: 600px;
- }
-
- .toggle-btn span {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 70%;
- height: 4px;
- background: black;
- transition: all 200ms ease;
- z-index: 180;
- }
-
- .toggle-btn span:nth-child(1) {
- transition: top 200ms ease-in-out;
- top: 30%;
- }
-
- .toggle-btn span:nth-child(3) {
- transition: top 200ms ease-in-out;
- top: 70%;
- }
-
- .toggle-btn.active {
- transition: transform 200ms ease-in-out 200ms;
- transform: rotate(135deg);
- }
-
- .toggle-btn.active span:nth-child(1) {
- top: 50%;
- }
-
- .toggle-btn.active span:nth-child(2) {
- transform: translate(-50%, -50%) rotate(90deg);
- }
-
- .toggle-btn.active span:nth-child(3) {
- top: 50%;
- }
-}
-
-.sidebar {
- position: fixed;
- top: 120px;
- opacity: 0;
- right: -100%;
- width: 80%;
- height: calc(80% - (120px));
- z-index: 101;
- background-color: whitesmoke;
- transition: all 400ms ease 50ms;
- padding: 20px;
- box-shadow: 0 0 5px 5px grey;
-
- .item {
- width: 100%;
- padding: 13px 12px;
- border-bottom: 1px solid rgba(200, 200, 200, 0.7);
- font-family: Arial, Helvetica, sans-serif;
- font-style: normal;
- font-weight: normal;
- user-select: none;
- display: inline-flex;
- font-size: 35px;
- text-transform: uppercase;
- color: black;
- }
-
- .ink:focus {
- outline: 1px solid blue;
- }
-
- .sidebarButtons {
- top: 80px;
- position: relative;
- }
-}
-
-
-
-
-
-
-.blanket {
- position: fixed;
- top: 120px;
- opacity: 0.5;
- right: -100%;
- width: 100%;
- height: calc(100% - (120px));
- z-index: 101;
- background-color: grey;
- padding: 20px;
-}
-
-.blanket.active {
- position: absolute;
- right: 0%;
- z-index: 100;
-}
-
-.home {
- position: absolute;
- top: 30px;
- left: 30px;
- font-size: 60;
- user-select: none;
- text-transform: uppercase;
- font-family: Arial, Helvetica, sans-serif;
- z-index: 200;
-}
-
-.item-type {
- display: inline;
- text-transform: lowercase;
- margin-left: 20px;
- font-size: 35px;
- font-style: italic;
- color: rgb(28, 28, 28);
-}
-
-.item-title {
- max-width: 70%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.right {
- margin-left: 20px;
- z-index: 200;
-}
-
-.open {
- right: 20px;
- font-size: 35;
- position: absolute;
-}
-
-.left {
- width: 100%;
- height: 100%;
-}
-
-
-
-.sidebar.active {
- position: absolute;
- right: 0%;
- opacity: 1;
- z-index: 101;
-}
-
-.back {
- position: absolute;
- left: 42px;
- top: 0;
- background: #1a1a1a;
- width: 50px;
- height: 100%;
- display: flex;
- justify-content: center;
- text-align: center;
- flex-direction: column;
- align-items: center;
- border-radius: 10px;
- font-size: 25px;
- user-select: none;
- z-index: 100;
-}
-
-.pathbar {
- position: fixed;
- top: 118px;
- left: 0px;
- background: #1a1a1a;
- z-index: 120;
- border-radius: 0px;
- width: 100%;
- height: 80px;
- overflow: hidden;
-
- .pathname {
- position: relative;
- font-size: 25;
- top: 50%;
- width: 86%;
- left: 12%;
- color: whitesmoke;
- transform: translate(0%, -50%);
- z-index: 20;
- font-family: sans-serif;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- direction: rtl;
- text-align: left;
- text-transform: uppercase;
- }
-
- .scrollmenu {
- overflow: auto;
- width: 100%;
- height: 100%;
- white-space: nowrap;
- display: inline-flex;
- }
-
- .hidePath {
- position: absolute;
- height: 100%;
- width: 200px;
- left: 0px;
- top: 0px;
- background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0));
- text-align: center;
- user-select: none;
- z-index: 99;
- pointer-events: none;
- }
-
- .pathbarItem {
- position: relative;
- display: flex;
- align-items: center;
- color: whitesmoke;
- text-align: center;
- justify-content: center;
- user-select: none;
- transform: translate(100px, 0px);
- font-size: 30px;
- padding: 10px;
- text-transform: uppercase;
-
- .pathbarText {
- font-family: sans-serif;
- text-align: center;
- height: 50px;
- padding: 10px;
- font-size: 30px;
- border-radius: 10px;
- text-transform: uppercase;
- margin-left: 20px;
- position: relative;
- }
-
- .pathIcon {
- transform: translate(0px, 0px);
- position: relative;
- }
- }
-}
-
-
-/**
-* docButton appears at the bottom of mobile document
-* Buttons include: pin to presentation, download, upload, reload
-*/
-.docButton {
- position: relative;
- width: 100px;
- display: flex;
- height: 100px;
- font-size: 70px;
- text-align: center;
- border: 3px solid black;
- margin: 20px;
- z-index: 100;
- border-radius: 100%;
- justify-content: center;
- flex-direction: column;
- align-items: center;
-}
-
-.docButtonContainer {
- top: 80%;
- position: absolute;
- display: flex;
- transform: translate(-50%, 0);
- left: 50%;
- z-index: 100;
-}
-
-.toolbar {
- left: 50%;
- transform: translate(-50%);
- position: absolute;
- height: max-content;
- top: 0px;
- border-radius: 20px;
- background-color: lightgrey;
- opacity: 0;
- transition: all 400ms ease 50ms;
-}
-
-.toolbar.active {
- display: inline-block;
- width: 300px;
- padding: 5px;
- opacity: 1;
- height: max-content;
- top: -450px;
-}
-
-.colorSelector {
- position: absolute;
- top: 550px;
- left: 280px;
- transform: translate(-50%, 0);
- z-index: 100;
- display: inline-flex;
- width: max-content;
- height: max-content;
- pointer-events: all;
- font-size: 80px;
- user-select: none;
-}
-
-// Menu buttons for toggling between list and icon view
-.homeSwitch {
- position: fixed;
- top: 212;
- right: 36px;
- display: inline-flex;
- width: max-content;
- z-index: 99;
- height: 70px;
-
- .list {
- width: 70px;
- height: 70px;
- margin: 5;
- padding: 10;
- align-items: center;
- text-align: center;
- font-size: 50;
- border-style: solid;
- border-width: 3;
- border-color: black;
- background: whitesmoke;
- align-self: center;
- border-radius: 10px;
- }
-
- .list.active {
- color: darkred;
- border-color: darkred;
- }
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 20:17:03 +0000