Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change scrollbar design

Browse Source
This commit is contained in:
kPherox 2019-05-22 13:29:28 +09:00
parent a7c09009a7
commit 8286602d62
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
6 changed files with 69 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/index.html
View File

@ -1,16 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #607d8b;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but thedesk doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but thedesk doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

9
src/components/Main.vue
View File

@ -46,15 +46,18 @@ export default class Main extends Vue {
<style lang="postcss">
#main {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow: hidden;
}
#timelines {
display: flex;
width: 100%;
height: calc(100vh - 40px);
overflow-x: scroll;
flex: 1;
overflow-x: auto;
overflow-y: hidden;
}
#toolbar {
width: 100vw;

14
src/components/Timeline/Column.vue
View File

@ -3,8 +3,10 @@
<div class="header">
<div class="tl-name">{{name}}</div>
</div>
<div class="toot-box">
<Toot v-for="[id,status] in statuses" :key="id" :status="status" :pref-static="pref.static"/>
</div>
</div>
</template>
<script lang="ts">
@ -116,10 +118,11 @@ export default class Column extends Vue {
<style scoped lang="postcss">
.timeline {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
overflow-y: scroll;
overflow-x: hidden;
overflow: hidden;
& + .timeline {
border-left: solid 1px;
@ -127,7 +130,6 @@ export default class Column extends Vue {
}
.header {
position: sticky;
top: 0;
background-color: var(--header);
filter: brightness(110%);
@ -136,5 +138,11 @@ export default class Column extends Vue {
height: 60px;
}
}
.toot-box {
flex: 1;
overflow-x: hidden;
overflow-y: scroll;
}
}
</style>

7
src/components/globals/BaseOverlay.vue
View File

@ -38,6 +38,8 @@ export default class BaseOverlay extends Vue {
opacity: 0;
}
.overlay {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
transform: translateY(-50%);
@ -49,9 +51,8 @@ export default class BaseOverlay extends Vue {
}
.overlay-inner {
margin: 0.5em;
height: calc(100% - 50px - 1em);
overflow: scroll;
flex: 1;
overflow: auto;
}
.close-button {
position: fixed;

19
src/views/About.vue
View File

@ -122,23 +122,14 @@ export default class About extends Vue {
</script>
<style lang="postcss">
body {
margin: 0;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-app-region: drag;
user-select: none;
}
a {
color: #36c;
text-decoration: none;
}
#about {
padding: 0.5em;
text-align: center;
height: 100vh;
height: calc(100vh - 1em);
color: var(--color);
background-color: var(--bg-color);
-webkit-app-region: drag;
user-select: none;
}
#brand {
margin-top: 0.5em;
@ -158,6 +149,10 @@ a {
margin: 0;
}
}
a {
color: #36c;
text-decoration: none;
}
dl.version {
margin: 0;
display: grid;

10
src/views/App.vue
View File

@ -67,16 +67,6 @@ export default class App extends Vue {
</script>
<style>
html {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
#app {
color: var(--color);
background-color: var(--bg-color);