Change scrollbar design
This commit is contained in:
kPherox
parent
a7c09009a7
commit
8286602d62
|
|
@ -1,16 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user