mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2024-12-13 04:59:33 +01:00
Layout tweaks
This commit is contained in:
Cadence Ember
parent
eb97868465
commit
8a73c02344
12
package-lock.json
generated
12
package-lock.json
generated
@ -10119,7 +10119,7 @@
|
||||
},
|
||||
"finalhandler": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||
"resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||
"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -11167,7 +11167,7 @@
|
||||
},
|
||||
"got": {
|
||||
"version": "9.6.0",
|
||||
"resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
|
||||
"resolved": "http://registry.npmjs.org/got/-/got-9.6.0.tgz",
|
||||
"integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -11511,7 +11511,7 @@
|
||||
},
|
||||
"http-errors": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
|
||||
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
|
||||
"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -14687,7 +14687,7 @@
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
"resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
|
||||
"dev": true
|
||||
},
|
||||
@ -17926,7 +17926,7 @@
|
||||
"dependencies": {
|
||||
"http-errors": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
|
||||
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
|
||||
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -19051,7 +19051,7 @@
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
"resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
|
||||
"dev": true
|
||||
},
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
.ftIconButton {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
-moz-transition: background 0.2s ease-out;
|
||||
-o-transition: background 0.2s ease-out;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.iconButton:hover {
|
||||
-moz-transition: background 0.2s ease-in;
|
||||
-o-transition: background 0.2s ease-in;
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.base {
|
||||
background-color: var(--card-bg-color);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.base:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
}
|
||||
|
||||
.base:active {
|
||||
background-color: var(--side-nav-active-color);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--text-with-main-color);
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
.primary:active {
|
||||
background-color: var(--primary-color-active);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--text-with-accent-color);
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
background-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
.secondary:active {
|
||||
background-color: var(--accent-color-active);
|
||||
}
|
||||
|
||||
.iconDropdown {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
z-index: 100;
|
||||
margin-top: 45px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.5);
|
||||
background-color: var(--card-bg-color);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.iconDropdown p {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
-moz-transition: background 0.2s ease-out;
|
||||
-o-transition: background 0.2s ease-out;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
|
||||
.iconDropdown p:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
-moz-transition: background 0.2s ease-in;
|
||||
-o-transition: background 0.2s ease-in;
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.iconDropdown p:active {
|
||||
background-color: var(--side-nav-active-color);
|
||||
-moz-transition: background 0.1s ease-in;
|
||||
-o-transition: background 0.1s ease-in;
|
||||
transition: background 0.1s ease-in;
|
||||
}
|
||||
|
||||
.iconDropdown p a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.left {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
left: 50%;
|
||||
}
|
||||
85
src/renderer/components/ft-icon-button/ft-icon-button.sass
Normal file
85
src/renderer/components/ft-icon-button/ft-icon-button.sass
Normal file
@ -0,0 +1,85 @@
|
||||
.ftIconButton
|
||||
display: flex
|
||||
flex-flow: row wrap
|
||||
justify-content: space-evenly
|
||||
position: relative
|
||||
|
||||
.iconButton
|
||||
width: 1em
|
||||
height: 1em
|
||||
padding: 10px
|
||||
font-size: 20px
|
||||
border-radius: 50%
|
||||
cursor: pointer
|
||||
transition: background 0.15s ease-out
|
||||
|
||||
&.shadow
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.5)
|
||||
|
||||
&.base
|
||||
background-color: var(--card-bg-color)
|
||||
color: var(--primary-text-color)
|
||||
|
||||
&:hover
|
||||
background-color: var(--side-nav-hover-color)
|
||||
|
||||
&:active
|
||||
background-color: var(--side-nav-active-color)
|
||||
|
||||
&.primary
|
||||
background-color: var(--primary-color)
|
||||
color: var(--text-with-main-color)
|
||||
|
||||
&:hover
|
||||
background-color: var(--primary-color-hover)
|
||||
|
||||
&:active
|
||||
background-color: var(--primary-color-active)
|
||||
|
||||
&.secondary
|
||||
background-color: var(--accent-color)
|
||||
color: var(--text-with-accent-color)
|
||||
|
||||
&:hover
|
||||
background-color: var(--accent-color-hover)
|
||||
|
||||
&:active
|
||||
background-color: var(--accent-color-active)
|
||||
|
||||
.iconDropdown
|
||||
position: absolute
|
||||
text-align: center
|
||||
list-style-type: none
|
||||
z-index: 100
|
||||
margin-top: 45px
|
||||
font-size: 12px
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.5)
|
||||
background-color: var(--side-nav-color)
|
||||
color: var(--secondary-text-color)
|
||||
user-select: none
|
||||
|
||||
&.left
|
||||
right: 50%
|
||||
|
||||
&.right
|
||||
left: 50%
|
||||
|
||||
.list
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
|
||||
.listItem
|
||||
padding: 10px
|
||||
margin: 0
|
||||
white-space: nowrap
|
||||
cursor: pointer
|
||||
transition: background 0.2s ease-out
|
||||
|
||||
&:hover
|
||||
background-color: var(--side-nav-hover-color)
|
||||
transition: background 0.2s ease-in
|
||||
|
||||
&:active
|
||||
background-color: var(--side-nav-active-color)
|
||||
transition: background 0.1s ease-in
|
||||
@ -21,16 +21,19 @@
|
||||
center: dropdownPosition === 'center'
|
||||
}"
|
||||
>
|
||||
<p
|
||||
v-for="(label, index) in dropdownNames"
|
||||
:key="index"
|
||||
@click="handleDropdownClick(index)"
|
||||
>
|
||||
{{ label }}
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-for="(label, index) in dropdownNames"
|
||||
class="listItem"
|
||||
:key="index"
|
||||
@click="handleDropdownClick(index)"
|
||||
>
|
||||
{{ label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./ft-icon-button.js" />
|
||||
<style scoped src="./ft-icon-button.css" />
|
||||
<style scoped lang="sass" src="./ft-icon-button.sass" />
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
grid-template-columns: auto
|
||||
|
||||
.videoTitle
|
||||
font-size: 20px
|
||||
font-size: 22px
|
||||
margin: 0 0 20px
|
||||
|
||||
.channelInformation
|
||||
@ -20,12 +20,14 @@
|
||||
|
||||
.channelName
|
||||
margin-left: 6px
|
||||
margin-bottom: 4px
|
||||
|
||||
.subscribeButton
|
||||
padding: 6px
|
||||
padding: 5px
|
||||
font-size: 14px
|
||||
|
||||
.datePublished
|
||||
margin-bottom: 24px
|
||||
|
||||
.viewCount
|
||||
margin: 4px 0px 0px
|
||||
text-align: right
|
||||
|
||||
Loading…
Reference in New Issue
Block a user