mirror of
https://codeberg.org/ashley/poke.git
synced 2024-12-27 23:29:41 +01:00
1802 lines
32 KiB
CSS
1802 lines
32 KiB
CSS
body {
|
|
max-width:100%;
|
|
overflow-x:hidden;
|
|
color:#111
|
|
}
|
|
body,
|
|
html {
|
|
overflow-x:hidden;
|
|
font-family:ubuntu,sans-serif
|
|
}
|
|
body {
|
|
position:relative
|
|
}
|
|
* {
|
|
font-family:ubuntu,sans-serif
|
|
}
|
|
.animated {
|
|
-webkit-animation-duration:10s;
|
|
animation-duration:10s;
|
|
-webkit-animation-fill-mode:both;
|
|
animation-fill-mode:both;
|
|
animation-iteration-count:infinite;
|
|
-moz-animation-iteration-count:infinite;
|
|
-webkit-animation-iteration-count:infinite;
|
|
-o-animation-iteration-count:infinite
|
|
}
|
|
.v-chip:not(.v-chip--outlined).accent,
|
|
.v-chip:not(.v-chip--outlined).error,
|
|
.v-chip:not(.v-chip--outlined).info,
|
|
.v-chip:not(.v-chip--outlined).primary,
|
|
.v-chip:not(.v-chip--outlined).secondary,
|
|
.v-chip:not(.v-chip--outlined).success,
|
|
.v-chip:not(.v-chip--outlined).warning {
|
|
color:#fff
|
|
}
|
|
.theme--light.v-chip {
|
|
border-color:rgba(0,0,0,.12);
|
|
color:rgba(0,0,0,.87)
|
|
}
|
|
.theme--light.v-chip:not(.v-chip--active) {
|
|
background:#e0e0e0
|
|
}
|
|
.theme--light.v-chip:hover:before {
|
|
opacity:.04
|
|
}
|
|
.theme--light.v-chip--active:before,
|
|
.theme--light.v-chip--active:hover:before,
|
|
.theme--light.v-chip:focus:before {
|
|
opacity:.12
|
|
}
|
|
.theme--light.v-chip--active:focus:before {
|
|
opacity:.16
|
|
}
|
|
.theme--dark.v-chip {
|
|
border-color:hsla(0,0%,100%,.12);
|
|
color:#fff
|
|
}
|
|
.theme--dark.v-chip:not(.v-chip--active) {
|
|
background:#555
|
|
}
|
|
.theme--dark.v-chip:hover:before {
|
|
opacity:.08
|
|
}
|
|
.theme--dark.v-chip--active:before,
|
|
.theme--dark.v-chip--active:hover:before,
|
|
.theme--dark.v-chip:focus:before {
|
|
opacity:.24
|
|
}
|
|
.theme--dark.v-chip--active:focus:before {
|
|
opacity:.32
|
|
}
|
|
.v-chip {
|
|
align-items:center;
|
|
cursor:default;
|
|
display:inline-flex;
|
|
line-height:20px;
|
|
max-width:100%;
|
|
outline:0;
|
|
overflow:hidden;
|
|
padding:0 12px;
|
|
position:relative;
|
|
text-decoration:none;
|
|
transition-duration:.28s;
|
|
transition-property:box-shadow,opacity;
|
|
transition-timing-function:cubic-bezier(0.4,0,0.2,1);
|
|
vertical-align:middle;
|
|
white-space:nowrap
|
|
}
|
|
.v-chip:before {
|
|
background-color:currentColor;
|
|
bottom:0;
|
|
border-radius:inherit;
|
|
content:"";
|
|
left:0;
|
|
opacity:0;
|
|
position:absolute;
|
|
pointer-events:none;
|
|
right:0;
|
|
top:0
|
|
}
|
|
.v-chip .v-avatar {
|
|
height:24px!important;
|
|
min-width:24px!important;
|
|
width:24px!important
|
|
}
|
|
.v-chip .v-icon {
|
|
font-size:24px
|
|
}
|
|
.v-application--is-ltr .v-chip .v-avatar--left,
|
|
.v-application--is-ltr .v-chip .v-icon--left {
|
|
margin-left:-6px;
|
|
margin-right:6px
|
|
}
|
|
.v-application--is-ltr .v-chip .v-avatar--right,
|
|
.v-application--is-ltr .v-chip .v-icon--right,
|
|
.v-application--is-rtl .v-chip .v-avatar--left,
|
|
.v-application--is-rtl .v-chip .v-icon--left {
|
|
margin-left:6px;
|
|
margin-right:-6px
|
|
}
|
|
.v-application--is-rtl .v-chip .v-avatar--right,
|
|
.v-application--is-rtl .v-chip .v-icon--right {
|
|
margin-left:-6px;
|
|
margin-right:6px
|
|
}
|
|
.v-chip:not(.v-chip--no-color) .v-icon {
|
|
color:inherit
|
|
}
|
|
.v-chip .v-chip__close.v-icon {
|
|
font-size:18px;
|
|
max-height:18px;
|
|
max-width:18px;
|
|
-webkit-user-select:none;
|
|
-moz-user-select:none;
|
|
-ms-user-select:none;
|
|
user-select:none
|
|
}
|
|
.v-application--is-ltr .v-chip .v-chip__close.v-icon.v-icon--right {
|
|
margin-right:-4px
|
|
}
|
|
.v-application--is-rtl .v-chip .v-chip__close.v-icon.v-icon--right {
|
|
margin-left:-4px
|
|
}
|
|
.v-chip .v-chip__close.v-icon:active,
|
|
.v-chip .v-chip__close.v-icon:focus,
|
|
.v-chip .v-chip__close.v-icon:hover {
|
|
opacity:.72
|
|
}
|
|
.v-chip .v-chip__content {
|
|
align-items:center;
|
|
display:inline-flex;
|
|
height:100%;
|
|
max-width:100%
|
|
}
|
|
.v-chip--active .v-icon {
|
|
color:inherit
|
|
}
|
|
.v-chip--link:before {
|
|
transition:opacity .3s cubic-bezier(.25, .8, .5, 1)
|
|
}
|
|
.v-chip--link:focus:before {
|
|
opacity:.32
|
|
}
|
|
.v-chip--clickable {
|
|
cursor:pointer;
|
|
-webkit-user-select:none;
|
|
-moz-user-select:none;
|
|
-ms-user-select:none;
|
|
user-select:none
|
|
}
|
|
.v-chip--clickable:active {
|
|
box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
|
|
}
|
|
.v-chip--disabled {
|
|
opacity:.4;
|
|
pointer-events:none;
|
|
-webkit-user-select:none;
|
|
-moz-user-select:none;
|
|
-ms-user-select:none;
|
|
user-select:none
|
|
}
|
|
.v-chip__filter {
|
|
max-width:24px
|
|
}
|
|
.v-chip__filter.v-icon {
|
|
color:inherit
|
|
}
|
|
.v-chip__filter.expand-x-transition-enter,
|
|
.v-chip__filter.expand-x-transition-leave-active {
|
|
margin:0
|
|
}
|
|
.v-chip--pill .v-chip__filter {
|
|
margin-right:0 16px 0 0
|
|
}
|
|
.v-chip--pill .v-avatar {
|
|
height:32px!important;
|
|
width:32px!important
|
|
}
|
|
.v-application--is-ltr .v-chip--pill .v-avatar--left {
|
|
margin-left:-12px
|
|
}
|
|
.v-application--is-ltr .v-chip--pill .v-avatar--right,
|
|
.v-application--is-rtl .v-chip--pill .v-avatar--left {
|
|
margin-right:-12px
|
|
}
|
|
.v-application--is-rtl .v-chip--pill .v-avatar--right {
|
|
margin-left:-12px
|
|
}
|
|
.v-chip--label {
|
|
border-radius:4px!important
|
|
}
|
|
.v-chip.v-chip--outlined {
|
|
border-width:thin;
|
|
border-style:solid
|
|
}
|
|
.v-chip.v-chip--outlined.v-chip--active:before {
|
|
opacity:.08
|
|
}
|
|
.v-chip.v-chip--outlined .v-icon {
|
|
color:inherit
|
|
}
|
|
.v-chip.v-chip--outlined.v-chip.v-chip {
|
|
background-color:transparent!important
|
|
}
|
|
.v-chip.v-chip--selected {
|
|
background:0 0
|
|
}
|
|
.v-chip.v-chip--selected:after {
|
|
opacity:.28
|
|
}
|
|
.v-chip.v-size--x-small {
|
|
border-radius:8px;
|
|
font-size:10px;
|
|
height:16px
|
|
}
|
|
.v-chip.v-size--small {
|
|
border-radius:12px;
|
|
font-size:12px;
|
|
height:24px
|
|
}
|
|
.v-chip.v-size--default {
|
|
border-radius:16px;
|
|
font-size:14px;
|
|
height:32px
|
|
}
|
|
.v-chip.v-size--large {
|
|
border-radius:27px;
|
|
font-size:16px;
|
|
height:54px
|
|
}
|
|
.v-chip.v-size--x-large {
|
|
border-radius:33px;
|
|
font-size:18px;
|
|
height:66px
|
|
}
|
|
.new-button {
|
|
background: #0009;
|
|
border-radius: 1.5em;
|
|
padding-right: 1em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
width: max-content;
|
|
margin-top: 4px;
|
|
margin-left: 3px;
|
|
margin-right: 0;
|
|
border: solid 0.5px #333;
|
|
}
|
|
.pill-button {
|
|
margin-left: 1em;
|
|
font-family: 'PokeTube Flex';
|
|
font-stretch: ultra-expanded;
|
|
font-weight: 800;
|
|
}
|
|
.vertical {
|
|
border-left:1px solid gray;
|
|
height:15px
|
|
}
|
|
@-webkit-keyframes wiggle {
|
|
0% {
|
|
-webkit-transform:skewX(9deg)
|
|
}
|
|
10% {
|
|
-webkit-transform:skewX(-8deg)
|
|
}
|
|
20% {
|
|
-webkit-transform:skewX(7deg)
|
|
}
|
|
30% {
|
|
-webkit-transform:skewX(-6deg)
|
|
}
|
|
40% {
|
|
-webkit-transform:skewX(5deg)
|
|
}
|
|
50% {
|
|
-webkit-transform:skewX(-4deg)
|
|
}
|
|
60% {
|
|
-webkit-transform:skewX(3deg)
|
|
}
|
|
70% {
|
|
-webkit-transform:skewX(-2deg)
|
|
}
|
|
80% {
|
|
-webkit-transform:skewX(1deg)
|
|
}
|
|
90% {
|
|
-webkit-transform:skewX(0)
|
|
}
|
|
100% {
|
|
-webkit-transform:skewX(0)
|
|
}
|
|
}
|
|
@keyframes wiggle {
|
|
0% {
|
|
transform:skewX(9deg)
|
|
}
|
|
10% {
|
|
transform:skewX(-8deg)
|
|
}
|
|
20% {
|
|
transform:skewX(7deg)
|
|
}
|
|
30% {
|
|
transform:skewX(-6deg)
|
|
}
|
|
40% {
|
|
transform:skewX(5deg)
|
|
}
|
|
50% {
|
|
transform:skewX(-4deg)
|
|
}
|
|
60% {
|
|
transform:skewX(3deg)
|
|
}
|
|
70% {
|
|
transform:skewX(-2deg)
|
|
}
|
|
80% {
|
|
transform:skewX(1deg)
|
|
}
|
|
90% {
|
|
transform:skewX(0)
|
|
}
|
|
100% {
|
|
transform:skewX(0)
|
|
}
|
|
}
|
|
.wiggle {
|
|
-webkit-animation-name:wiggle;
|
|
animation-name:wiggle;
|
|
-webkit-animation-timing-function:ease-in;
|
|
animation-timing-function:ease-in
|
|
}
|
|
.animated.wiggle {
|
|
-webkit-animation-duration:.75s;
|
|
animation-duration:.75s
|
|
}
|
|
:root {
|
|
--text-primary:#fff;
|
|
--text-secondary:#fff;
|
|
--text-link:#0ab7f0;
|
|
--app-background:#0a0101;
|
|
--context-menu-background:#333;
|
|
--border-color:#444;
|
|
--item-hover-background:#373737;
|
|
--item-active-background:#383838;
|
|
--top-bar-background:#202020;
|
|
--guide-background:#212121;
|
|
--thumbnail-background:#252525;
|
|
--channel-info-background:#181818;
|
|
--channel-contents-background:#0f0f0f;
|
|
--text-link:#0ab7f0!important;
|
|
--text-link-visited:#00c0ff;
|
|
--text-color:#ffffff;
|
|
--text-font-primary:"PokeTube Flex";
|
|
--text-header-weight:1000;
|
|
--div-gradient:linear-gradient(
|
|
135deg,
|
|
#f97794 10%,
|
|
#623aa2 100%,
|
|
#8e6f7e 100%
|
|
);
|
|
--div-border-color:#7c44a0;
|
|
--div-prim-bg:#1c1c1c;
|
|
--div-second-bg:#1a1a1a;
|
|
--div-transparent-bg:#0009
|
|
}
|
|
@font-face {
|
|
font-family:"Ginto Nord";
|
|
font-weight:800;
|
|
src:url("https://p.poketube.fun/https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff") format("woff")
|
|
}
|
|
.alert {
|
|
padding:20px;
|
|
background-color:#f44336;
|
|
color:#fff;
|
|
opacity:1;
|
|
transition:opacity .6s;
|
|
margin-bottom:15px
|
|
}
|
|
.alert.success {
|
|
background-color:#04aa6d
|
|
}
|
|
.alert.info {
|
|
background-color:#2196f3
|
|
}
|
|
.alert.warning {
|
|
background-color:#ff9800
|
|
}
|
|
.closebtn {
|
|
margin-left:15px;
|
|
color:#fff;
|
|
font-weight:700;
|
|
float:right;
|
|
font-size:22px;
|
|
line-height:20px;
|
|
cursor:pointer;
|
|
transition:.3s
|
|
}
|
|
.closebtn:hover {
|
|
color:#000
|
|
}
|
|
:visited {
|
|
color:#00c0ff
|
|
}
|
|
a {
|
|
color:#0ab7f0
|
|
}
|
|
.fromtheweb-outer {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:space-between;
|
|
-moz-box-pack:justify;
|
|
padding:10px;
|
|
margin-bottom:12px;
|
|
border-bottom-right-radius:10px;
|
|
border-bottom-left-radius:10px
|
|
}
|
|
.fromtheweb-inner {
|
|
-moz-box-align:center;
|
|
text-align:left;
|
|
font-size:14px;
|
|
-moz-box-pack:center;
|
|
justify-content:center;
|
|
padding:0 0;
|
|
line-height:18px
|
|
}
|
|
#desc-container .backtotop {
|
|
margin:0;
|
|
display:none
|
|
}
|
|
#desc-container .backtotop a {
|
|
margin-top:.5em
|
|
}
|
|
#desc .close {
|
|
display:none
|
|
}
|
|
#desc {
|
|
font-size:.94em;
|
|
line-height:1.2em;
|
|
text-align:left;
|
|
padding:.6em 3%;
|
|
margin:0;
|
|
background:#000;
|
|
border-top:none;
|
|
border-radius:4px;
|
|
height:100%
|
|
}
|
|
#set-language {
|
|
margin-bottom:.2em
|
|
}
|
|
#set-language+p {
|
|
display:inline-block;
|
|
font-size:1em;
|
|
margin:.45em 0 0
|
|
}
|
|
#descs {
|
|
padding:.4em 0
|
|
}
|
|
#descs p {
|
|
margin:0;
|
|
font-weight:900;
|
|
font-stretch:ultra-expanded;
|
|
padding:3px
|
|
}
|
|
#descs span {
|
|
display:inline-block;
|
|
width:10.5em;
|
|
line-height:2em
|
|
}
|
|
#descs span a {
|
|
line-height:1.9em
|
|
}
|
|
#descs span.original {
|
|
font-weight:700
|
|
}
|
|
#desc-container {
|
|
display:none
|
|
}
|
|
#desc-container:target {
|
|
display:block
|
|
}
|
|
.backtotop b {
|
|
display:none
|
|
}
|
|
body {
|
|
position:relative
|
|
}
|
|
#desc-container {
|
|
position:absolute;
|
|
margin-top:-18.9em;
|
|
left:0;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
#language-container .backtotop a {
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
background:0 0;
|
|
border:none;
|
|
margin-top:0
|
|
}
|
|
#desc .close {
|
|
float:right;
|
|
display:block
|
|
}
|
|
#desc .close span {
|
|
display:none
|
|
}
|
|
#desc .close:after {
|
|
content:"\2A09";
|
|
float:right;
|
|
position:relative;
|
|
bottom:.1em;
|
|
cursor:pointer
|
|
}
|
|
#descs {
|
|
column-width:10em;
|
|
column-count:3;
|
|
column-gap:0
|
|
}
|
|
#descs span {
|
|
display:block
|
|
}
|
|
#descs span a {
|
|
display:inline-block
|
|
}
|
|
#comments-container .backtotop {
|
|
margin:0;
|
|
display:none
|
|
}
|
|
#comments-container .backtotop a {
|
|
margin-top:.5em
|
|
}
|
|
#comments .close {
|
|
display:none
|
|
}
|
|
#comments {
|
|
font-size:.94em;
|
|
line-height:1.2em;
|
|
text-align:left;
|
|
padding:.6em 3%;
|
|
margin:0;
|
|
background:#000;
|
|
border-top:none;
|
|
border-radius:4px;
|
|
height:100%
|
|
}
|
|
#set-language {
|
|
margin-bottom:.2em
|
|
}
|
|
#set-language+p {
|
|
display:inline-block;
|
|
font-size:1em;
|
|
margin:.45em 0 0
|
|
}
|
|
#commentss {
|
|
padding:.4em 0
|
|
}
|
|
#commentss p {
|
|
margin:0;
|
|
font-weight:900;
|
|
font-stretch:ultra-expanded;
|
|
padding:3px
|
|
}
|
|
#commentss span {
|
|
display:inline-block;
|
|
width:10.5em;
|
|
line-height:2em
|
|
}
|
|
#commentss span a {
|
|
line-height:1.9em
|
|
}
|
|
#commentss span.original {
|
|
font-weight:700
|
|
}
|
|
#comments-container {
|
|
display:none
|
|
}
|
|
#comments-container:target {
|
|
display:block
|
|
}
|
|
#rec-cont:target {
|
|
display:none
|
|
}
|
|
#rec-cont {
|
|
display:block
|
|
}
|
|
.backtotop b {
|
|
display:none
|
|
}
|
|
body {
|
|
position:relative
|
|
}
|
|
#comments-container {
|
|
position:absolute;
|
|
margin-top:-18.9em;
|
|
left:0;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
#language-container .backtotop a {
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
background:0 0;
|
|
border:none;
|
|
margin-top:0
|
|
}
|
|
#comments .close {
|
|
float:right;
|
|
display:block
|
|
}
|
|
#comments .close span {
|
|
display:none
|
|
}
|
|
#comments .close:after {
|
|
content:"\2A09";
|
|
float:right;
|
|
position:relative;
|
|
bottom:.1em;
|
|
cursor:pointer
|
|
}
|
|
#commentss {
|
|
column-width:10em;
|
|
column-count:3;
|
|
column-gap:0
|
|
}
|
|
#commentss span {
|
|
display:block
|
|
}
|
|
#commentss span a {
|
|
display:inline-block
|
|
}
|
|
.description {
|
|
white-space:-moz-pre-wrap!important;
|
|
white-space:-pre-wrap;
|
|
white-space:-o-pre-wrap;
|
|
white-space:pre-wrap;
|
|
word-wrap:break-word;
|
|
white-space:-webkit-pre-wrap;
|
|
word-break:break-all;
|
|
white-space:normal
|
|
}
|
|
.desc {
|
|
white-space:-moz-pre-wrap!important;
|
|
white-space:-pre-wrap;
|
|
white-space:-o-pre-wrap;
|
|
white-space:pre-wrap;
|
|
word-wrap:break-word;
|
|
white-space:-webkit-pre-wrap;
|
|
word-break:break-all;
|
|
white-space:normal
|
|
}
|
|
#more-button-container .backtotop {
|
|
margin:0;
|
|
display:none
|
|
}
|
|
#more-button-container .backtotop a {
|
|
margin-top:.5em
|
|
}
|
|
#more-button .close {
|
|
display:none
|
|
}
|
|
#more-button {
|
|
font-size:.94em;
|
|
line-height:1.2em;
|
|
text-align:left;
|
|
padding:.6em 3%;
|
|
margin:0;
|
|
background:#000;
|
|
border-top:none;
|
|
border-radius:4px;
|
|
height:100%
|
|
}
|
|
#set-language {
|
|
margin-bottom:.2em
|
|
}
|
|
#set-language+p {
|
|
display:inline-block;
|
|
font-size:1em;
|
|
margin:.45em 0 0
|
|
}
|
|
#more-buttons {
|
|
padding:.4em 0
|
|
}
|
|
#more-buttons p {
|
|
margin:0;
|
|
font-weight:900;
|
|
font-stretch:ultra-expanded;
|
|
padding:3px
|
|
}
|
|
#more-buttons span {
|
|
display:inline-block;
|
|
width:10.5em;
|
|
line-height:2em
|
|
}
|
|
#more-buttons span a {
|
|
line-height:1.9em
|
|
}
|
|
#more-buttons span.original {
|
|
font-weight:700
|
|
}
|
|
#more-button-container {
|
|
display:none
|
|
}
|
|
#more-button-container:target {
|
|
display:block
|
|
}
|
|
#rec-cont:target {
|
|
display:none
|
|
}
|
|
#rec-cont {
|
|
display:block
|
|
}
|
|
.backtotop b {
|
|
display:none
|
|
}
|
|
body {
|
|
position:relative
|
|
}
|
|
#more-button-container {
|
|
position:absolute;
|
|
margin-top:-18.9em;
|
|
left:0;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
#language-container .backtotop a {
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
background:0 0;
|
|
border:none;
|
|
margin-top:0
|
|
}
|
|
#more-button .close {
|
|
float:right;
|
|
display:block
|
|
}
|
|
#more-button.close span {
|
|
display:none
|
|
}
|
|
#more-button .close:after {
|
|
content:"\2A09";
|
|
float:right;
|
|
position:relative;
|
|
bottom:.1em;
|
|
cursor:pointer
|
|
}
|
|
#more-buttons {
|
|
column-width:10em;
|
|
column-count:3;
|
|
column-gap:0
|
|
}
|
|
#more-buttons span {
|
|
display:block
|
|
}
|
|
#more-buttons span a {
|
|
display:inline-block
|
|
}
|
|
.max-lines-1 {
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:1;
|
|
line-clamp:1;
|
|
-webkit-box-orient:vertical
|
|
}
|
|
.max-lines-2 {
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:2;
|
|
line-clamp:2;
|
|
-webkit-box-orient:vertical
|
|
}
|
|
body {
|
|
margin:48px 0;
|
|
padding:0;
|
|
font-family:sans-serif
|
|
}
|
|
html {
|
|
background-color:var(--app-background)
|
|
}
|
|
body.noguide {
|
|
grid-template-areas:"top-bar top-bar" "app app"
|
|
}
|
|
* {
|
|
box-sizing:border-box;
|
|
color:var(--text-secondary)
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color:var(--text-primary)
|
|
}
|
|
.top-bar {
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
height:48px;
|
|
display:flex;
|
|
align-items:center;
|
|
padding:0 16px;
|
|
box-shadow:#0004 0 2px 5px;
|
|
background-color:var(--top-bar-background);
|
|
z-index:9999
|
|
}
|
|
.top-bar>form {
|
|
display:none
|
|
}
|
|
.top-bar>.divider {
|
|
flex-grow:1
|
|
}
|
|
.guide {
|
|
position:fixed;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
height:48px;
|
|
border-top:1px solid var(--border-color);
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content:space-around;
|
|
background-color:var(--guide-background)
|
|
}
|
|
.top-bar.full-size-search>.account,
|
|
.top-bar.full-size-search>.divider,
|
|
.top-bar.full-size-search>.logo,
|
|
.top-bar.full-size-search>.search-button {
|
|
display:none
|
|
}
|
|
.top-bar.full-size-search>form {
|
|
height:40px;
|
|
flex-grow:1;
|
|
display:flex!important
|
|
}
|
|
.top-bar.full-size-search>form>input {
|
|
box-sizing:border-box;
|
|
height:40px;
|
|
border:1px solid var(--border-color);
|
|
border-radius:0;
|
|
color:var(--text-primary);
|
|
background-color:var(--item-active-background)
|
|
}
|
|
.top-bar.full-size-search>form>input[type=text] {
|
|
flex-grow:1
|
|
}
|
|
.top-bar.full-size-search>form>input[type=submit] {
|
|
width:64px;
|
|
flex-basis:64px
|
|
}
|
|
.app {
|
|
background-color:var(--app-background);
|
|
margin-top:48px
|
|
}
|
|
a.icon-link,
|
|
a.icon-link>i {
|
|
width:32px;
|
|
height:32px;
|
|
line-height:32px;
|
|
text-align:center
|
|
}
|
|
.noguide>.guide {
|
|
display:none
|
|
}
|
|
.guide-item>a {
|
|
height:100%;
|
|
padding:0 24px;
|
|
display:flex;
|
|
text-align:center;
|
|
flex-direction:column;
|
|
font-size:x-small;
|
|
align-items:center;
|
|
text-decoration:none;
|
|
justify-content:center;
|
|
color:var(--text-primary)
|
|
}
|
|
.guide-item>a>.icon {
|
|
width:24px;
|
|
height:24px;
|
|
line-height:24px;
|
|
font-size:initial;
|
|
margin-right:0
|
|
}
|
|
.guide-item:hover {
|
|
background-color:var(--item-hover-background)
|
|
}
|
|
.guide-item.active {
|
|
background-color:var(--item-active-background)
|
|
}
|
|
.hide-on-minmode {
|
|
display:none
|
|
}
|
|
.show-on-minmode {
|
|
display:none
|
|
}
|
|
.logo {
|
|
color:var(--text-primary)!important;
|
|
text-decoration:none;
|
|
font-size:larger
|
|
}
|
|
.account {
|
|
width:48px;
|
|
height:48px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center
|
|
}
|
|
.account>img {
|
|
width:32px;
|
|
height:32px
|
|
}
|
|
.account-menu {
|
|
display:none
|
|
}
|
|
.search-button {
|
|
width:48px;
|
|
height:48px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center
|
|
}
|
|
@media screen and (min-width:850px) {
|
|
.rich-video-grid {
|
|
width:100%;
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:16px 16px;
|
|
padding-top:16px;
|
|
justify-content:space-evenly
|
|
}
|
|
.rich-video-grid>.video {
|
|
display:grid;
|
|
grid-template-columns:52px 1fr;
|
|
grid-template-rows:min-content min-content;
|
|
grid-auto-flow:row;
|
|
grid-gap:10px 0;
|
|
grid-template-areas:"thumbnail thumbnail" "avatar info";
|
|
margin-bottom:16px;
|
|
width:400px
|
|
}
|
|
}
|
|
@media screen and (max-width:850px) {
|
|
.rich-video-grid {
|
|
width:100%
|
|
}
|
|
.rich-video-grid>.video {
|
|
display:grid;
|
|
grid-template-columns:52px 1fr;
|
|
grid-template-rows:min-content min-content;
|
|
grid-auto-flow:row;
|
|
grid-gap:10px 0;
|
|
grid-template-areas:"thumbnail thumbnail" "avatar info";
|
|
margin-bottom:16px
|
|
}
|
|
}
|
|
.video a {
|
|
text-decoration:none;
|
|
color:#606060
|
|
}
|
|
.video>.thumbnail {
|
|
grid-area:thumbnail;
|
|
background-color:#ccc;
|
|
width:100%;
|
|
height:fit-content;
|
|
aspect-ratio:16/9;
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
align-items:flex-end;
|
|
padding:4px;
|
|
background-position-y:center;
|
|
background-size:cover
|
|
}
|
|
.video>.thumbnail.img-thumbnail {
|
|
padding:0!important
|
|
}
|
|
.video>.thumbnail>img {
|
|
object-fit:cover;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
.video>.thumbnail>span {
|
|
font-size:smaller;
|
|
background-color:#0008;
|
|
color:#fff;
|
|
padding:2px;
|
|
border-radius:2px
|
|
}
|
|
.video>.avatar {
|
|
grid-area:avatar;
|
|
width:36px;
|
|
height:36px;
|
|
border-radius:18px;
|
|
background-color:#e3e3e3;
|
|
margin-left:12px
|
|
}
|
|
.video>.avatar>img {
|
|
width:36px;
|
|
height:36px;
|
|
border-radius:18px
|
|
}
|
|
.video>.info {
|
|
grid-area:info
|
|
}
|
|
.video>.info>div {
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-wrap:wrap;
|
|
color:#606060;
|
|
column-gap:8px;
|
|
overflow-y:hidden;
|
|
font-family:ubuntu
|
|
}
|
|
.video>.info>.title {
|
|
color:var(--text-primary)!important
|
|
}
|
|
.playlist-video a {
|
|
text-decoration:none;
|
|
color:#606060
|
|
}
|
|
.playlist-video>.thumbnail {
|
|
grid-area:thumbnail;
|
|
background-color:#ccc;
|
|
width:100%;
|
|
height:fit-content;
|
|
aspect-ratio:16/9;
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
align-items:flex-end;
|
|
padding:4px;
|
|
background-position-y:center;
|
|
background-size:cover
|
|
}
|
|
.playlist-video>.thumbnail>span {
|
|
font-size:smaller;
|
|
background-color:#0008;
|
|
color:#fff;
|
|
padding:2px;
|
|
border-radius:2px
|
|
}
|
|
.playlist-video>.avatar {
|
|
grid-area:avatar;
|
|
width:36px;
|
|
height:36px;
|
|
border-radius:18px;
|
|
background-color:#e3e3e3;
|
|
margin-left:12px
|
|
}
|
|
.playlist-video>.avatar>img {
|
|
width:36px;
|
|
height:36px;
|
|
border-radius:18px
|
|
}
|
|
.playlist-video>.info {
|
|
grid-area:info
|
|
}
|
|
.playlist-video>.info>div {
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-wrap:wrap;
|
|
color:#606060;
|
|
column-gap:8px;
|
|
overflow-y:hidden
|
|
}
|
|
.playlist-video>.info>.title {
|
|
color:var(--text-primary)!important
|
|
}
|
|
.playlist-video>.index {
|
|
grid-area:index;
|
|
display:none
|
|
}
|
|
.playlist-video>.edit {
|
|
grid-area:edit;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center
|
|
}
|
|
.playlist a {
|
|
text-decoration:none;
|
|
color:var(--text-secondary)
|
|
}
|
|
.playlist>.thumbnail {
|
|
grid-area:thumbnail;
|
|
background-color:#ccc;
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
align-items:center;
|
|
background-position-y:center;
|
|
background-size:cover
|
|
}
|
|
.playlist>.thumbnail>div {
|
|
font-size:smaller;
|
|
background-color:#0008;
|
|
color:#fff;
|
|
padding:2px;
|
|
width:50%;
|
|
height:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
align-items:center;
|
|
row-gap:8px
|
|
}
|
|
.playlist>.thumbnail>div>* {
|
|
color:#fff
|
|
}
|
|
.playlist>.thumbnail>div>:first-child {
|
|
font-size:x-large
|
|
}
|
|
.playlist>.info {
|
|
grid-area:info;
|
|
font-size:small
|
|
}
|
|
.playlist>.info>div>ul {
|
|
display:none
|
|
}
|
|
.playlist>.info>.title {
|
|
color:var(--text-primary)!important;
|
|
font-weight:700;
|
|
font-size:initial;
|
|
margin-bottom:8px
|
|
}
|
|
.channel a {
|
|
text-decoration:none;
|
|
color:var(--text-secondary)
|
|
}
|
|
.channel>.avatar {
|
|
grid-area:thumbnail;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center
|
|
}
|
|
.channel>.avatar>img {
|
|
background-color:#ccc;
|
|
height:90px;
|
|
width:90px
|
|
}
|
|
.channel>.info {
|
|
grid-area:info;
|
|
font-size:small
|
|
}
|
|
.channel>.info>.name {
|
|
color:var(--text-primary)!important;
|
|
font-weight:700;
|
|
font-size:initial;
|
|
margin-bottom:8px
|
|
}
|
|
.channel>.info p {
|
|
display:none
|
|
}
|
|
.watch-page {
|
|
display:grid;
|
|
grid-template-columns:1fr 256px;
|
|
grid-template-rows:1fr;
|
|
grid-template-areas:"primary secondary"
|
|
}
|
|
@media screen and (max-width:900px) {
|
|
.watch-page {
|
|
grid-template-areas:"primary" "secondary";
|
|
grid-template-columns:1fr;
|
|
grid-template-rows:max-content 1fr
|
|
}
|
|
}
|
|
.primary {
|
|
grid-area:primary
|
|
}
|
|
.video-player-container {
|
|
max-width:100%;
|
|
margin:auto;
|
|
max-height:75vh;
|
|
aspect-ratio:16/9;
|
|
background-color:#000
|
|
}
|
|
.player {
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
.player.error {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
background-color:#ccc;
|
|
background-image:url("/img/player-error.png")!important;
|
|
background-size:contain
|
|
}
|
|
.player.error>* {
|
|
background-color:#000;
|
|
color:#fff
|
|
}
|
|
.video-info {
|
|
padding:12px
|
|
}
|
|
.video-title {
|
|
font-size:large;
|
|
color:var(--text-primary)
|
|
}
|
|
.video-info-bar {
|
|
font-size:small;
|
|
display:grid;
|
|
grid-auto-columns:1fr;
|
|
grid-template-columns:max-content max-content max-content 1fr max-content;
|
|
grid-template-rows:max-content max-content;
|
|
gap:0 8px;
|
|
grid-template-areas:"views . uploaddate divider" "buttons buttons buttons buttons"
|
|
}
|
|
.video-info-bar>span:first-child {
|
|
grid-area:views
|
|
}
|
|
.video-info-bar>.divider {
|
|
grid-area:divider
|
|
}
|
|
.video-info-bar>span:nth-child(3) {
|
|
grid-area:uploaddate
|
|
}
|
|
.video-info-bar>.video-info-buttons {
|
|
grid-area:buttons
|
|
}
|
|
.video-info-buttons {
|
|
display:flex;
|
|
justify-content:space-evenly;
|
|
flex-direction:row;
|
|
column-gap:8px;
|
|
padding:8px 0
|
|
}
|
|
.video-info-buttons>* {
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
align-items:center;
|
|
column-gap:4px;
|
|
text-decoration:none
|
|
}
|
|
.video-info-buttons>*>i.bi {
|
|
font-size:x-large
|
|
}
|
|
.channel-info,
|
|
.channel-info__bordered {
|
|
display:grid;
|
|
grid-template-columns:34px max-content 1fr min-content;
|
|
grid-template-rows:34px;
|
|
grid-auto-columns:1fr;
|
|
gap:8px;
|
|
grid-auto-flow:row;
|
|
grid-template-areas:"avatar name . subscribe-button";
|
|
padding:8px 0;
|
|
border-top:1px solid var(--border-color);
|
|
border-bottom:1px solid var(--border-color)
|
|
}
|
|
.avatar {
|
|
grid-area:avatar
|
|
}
|
|
.avatar>img {
|
|
width:100%;
|
|
height:100%;
|
|
border-radius:50%
|
|
}
|
|
.name {
|
|
grid-area:name;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center
|
|
}
|
|
.name>a {
|
|
color:var(--text-primary);
|
|
text-decoration:none
|
|
}
|
|
.name>span {
|
|
font-size:small;
|
|
color:var(--text-secondary)
|
|
}
|
|
.subscribe-button {
|
|
grid-area:subscribe-button;
|
|
background-color:#0000;
|
|
color:#c00;
|
|
text-transform:uppercase;
|
|
border:none;
|
|
height:100%
|
|
}
|
|
.subscribe-button.subscribed {
|
|
color:var(--text-secondary)
|
|
}
|
|
.secondary {
|
|
grid-area:secondary;
|
|
padding:16px 8px
|
|
}
|
|
.resolutions-list {
|
|
width:100%;
|
|
padding:4px;
|
|
border:1px solid var(--border-color);
|
|
margin-bottom:16px
|
|
}
|
|
.resolutions-list>div {
|
|
display:flex;
|
|
flex-direction:column;
|
|
column-gap:16px
|
|
}
|
|
.resolutions-list>div>* {
|
|
line-height:32px
|
|
}
|
|
.recommended-list {
|
|
display:flex;
|
|
flex-direction:column;
|
|
row-gap:16px
|
|
}
|
|
.recommended-list>.video {
|
|
display:grid;
|
|
grid-template-columns:1fr;
|
|
grid-template-rows:1fr max-content;
|
|
grid-auto-flow:row;
|
|
grid-gap:0 8px;
|
|
grid-template-areas:"thumbnail" "info";
|
|
color:var(--text-secondary)
|
|
}
|
|
.recommended-list>.video>.info {
|
|
font-size:small;
|
|
font-family:ubuntu,sans-serif
|
|
}
|
|
.recommended-list>.video>.info>a {
|
|
font-size:initial
|
|
}
|
|
.recommended-list>.video>.info>div {
|
|
flex-wrap:wrap;
|
|
max-height:unset
|
|
}
|
|
.channel-banner {
|
|
display:block;
|
|
width:100%;
|
|
height:auto;
|
|
aspect-ratio:6.2;
|
|
background-color:#000a;
|
|
background-size:contain
|
|
}
|
|
.channel-info-container {
|
|
background-color:var(--channel-info-background)
|
|
}
|
|
.channel-info-container>.channel-info {
|
|
grid-template-columns:50px 1fr;
|
|
grid-template-rows:50px min-content;
|
|
grid-template-areas:"avatar name" ". subscribe-button";
|
|
column-gap:16px;
|
|
padding:16px
|
|
}
|
|
.channel-info-container>.channel-info>.subscribe-button {
|
|
width:max-content
|
|
}
|
|
.channel-info-container>.channel-info>.name>:first-child {
|
|
font-size:larger;
|
|
color:var(--text-primary)
|
|
}
|
|
.channel-info-container>.channel-info>.name>* {
|
|
color:var(--text-secondary)
|
|
}
|
|
.channel-page>p {
|
|
color:var(--text-secondary)
|
|
}
|
|
.channel-page .video-grid {
|
|
background-color:var(--channel-contents-background)
|
|
}
|
|
.card-list {
|
|
display:flex;
|
|
flex-direction:row;
|
|
overflow-x:scroll;
|
|
column-gap:16px
|
|
}
|
|
.card {
|
|
width:150px;
|
|
background:var(--context-menu-background);
|
|
border:1px solid var(--border-color);
|
|
border-radius:8px;
|
|
text-decoration:none
|
|
}
|
|
.card>img {
|
|
aspect-ratio:16/9;
|
|
width:150px;
|
|
height:fit-content
|
|
}
|
|
.card>span {
|
|
text-decoration:none;
|
|
color:var(--text-primary);
|
|
margin:0 8px
|
|
}
|
|
.video-grid {
|
|
display:flex;
|
|
flex-direction:column;
|
|
flex-wrap:nowrap;
|
|
column-gap:16px;
|
|
row-gap:12px;
|
|
padding:0 12px
|
|
}
|
|
.video-grid>.video {
|
|
display:grid;
|
|
grid-template-columns:160px 1fr;
|
|
grid-template-rows:90px;
|
|
grid-auto-flow:row;
|
|
grid-gap:10px 10px;
|
|
grid-template-areas:"thumbnail info";
|
|
color:var(--text-secondary);
|
|
text-decoration:none
|
|
}
|
|
.video-grid>.avatar {
|
|
display:none
|
|
}
|
|
.video-grid>.video>.info>span {
|
|
font-weight:700;
|
|
font-size:initial
|
|
}
|
|
.video-grid>.video>.info>div>div {
|
|
display:flex;
|
|
flex-direction:column;
|
|
flex-wrap:wrap
|
|
}
|
|
.pagination-buttons {
|
|
border-top:1px solid var(--border-color);
|
|
width:100%;
|
|
display:flex
|
|
}
|
|
.pagination-buttons>* {
|
|
height:3rem;
|
|
line-height:3rem;
|
|
color:var(--text-secondary);
|
|
text-decoration:none
|
|
}
|
|
.pagination-buttons>.divider {
|
|
flex-grow:1
|
|
}
|
|
.video-list {
|
|
margin:auto;
|
|
display:flex;
|
|
flex-direction:column;
|
|
row-gap:16px;
|
|
padding:16px
|
|
}
|
|
.video-list>.video {
|
|
text-decoration:none;
|
|
display:grid;
|
|
grid-template-columns:160px;
|
|
grid-template-rows:90px;
|
|
grid-auto-flow:row;
|
|
grid-gap:0 16px;
|
|
grid-template-areas:"thumbnail info";
|
|
color:var(--text-secondary);
|
|
font-size:small
|
|
}
|
|
.video-list>.playlist-video {
|
|
text-decoration:none;
|
|
display:grid;
|
|
grid-template-columns:160px 1fr 50px;
|
|
grid-template-rows:90px;
|
|
grid-auto-flow:row;
|
|
grid-gap:0 16px;
|
|
grid-template-areas:"thumbnail info edit";
|
|
color:var(--text-secondary);
|
|
font-size:small
|
|
}
|
|
.video-list>.playlist-video>.info>.title,
|
|
.video-list>.video>.info>.title {
|
|
font-weight:700
|
|
}
|
|
.video-list>.video>.info>div>a>img {
|
|
display:none
|
|
}
|
|
.video-list>.playlist {
|
|
text-decoration:none;
|
|
display:grid;
|
|
grid-template-columns:160px;
|
|
grid-template-rows:90px;
|
|
grid-auto-flow:row;
|
|
grid-gap:0 16px;
|
|
grid-template-areas:"thumbnail info";
|
|
color:var(--text-secondary)
|
|
}
|
|
.video-list>.channel {
|
|
text-decoration:none;
|
|
display:grid;
|
|
grid-template-columns:160px 1fr max-content;
|
|
grid-template-rows:90px;
|
|
grid-auto-flow:row;
|
|
grid-gap:0 16px;
|
|
grid-template-areas:"thumbnail info subscribe-button";
|
|
color:var(--text-secondary)
|
|
}
|
|
.video-list>.channel>.subscribe-button {
|
|
display:none
|
|
}
|
|
.playlist-info>.thumbnail {
|
|
width:100%;
|
|
height:auto;
|
|
aspect-ratio:16/9;
|
|
background-color:var(--thumbnail-background);
|
|
background-size:contain
|
|
}
|
|
.playlist-info>.thumbnail>a {
|
|
display:none
|
|
}
|
|
.playlist-info>.title {
|
|
font-size:x-large;
|
|
color:var(--text-primary)
|
|
}
|
|
.playlist-info {
|
|
background-color:var(--channel-contents-background);
|
|
padding-bottom:16px
|
|
}
|
|
.playlist-info>.description,
|
|
.playlist-info>.info,
|
|
.playlist-info>.title {
|
|
display:block;
|
|
padding:0 16px
|
|
}
|
|
.playlist-info>.channel-info {
|
|
display:none
|
|
}
|
|
.horizontal-channel-list {
|
|
display:flex;
|
|
column-gap:16px;
|
|
padding:16px;
|
|
overflow-x:scroll;
|
|
background-color:var(--item-hover-background)
|
|
}
|
|
.horizontal-channel-list>.channel {
|
|
text-decoration:none;
|
|
display:flex;
|
|
flex-direction:column;
|
|
row-gap:4px;
|
|
color:var(--text-secondary)
|
|
}
|
|
.horizontal-channel-list>.channel>div {
|
|
font-size:small;
|
|
text-align:center;
|
|
width:48px;
|
|
color:var(--text-secondary)
|
|
}
|
|
.horizontal-channel-list>.channel>img {
|
|
width:48px;
|
|
height:48px;
|
|
border-radius:50%;
|
|
background-color:var(--thumbnail-background)
|
|
}
|
|
.horizontal-channel-list>.channel>i {
|
|
font-size:24px;
|
|
line-height:48px;
|
|
text-align:center;
|
|
width:48px;
|
|
height:48px;
|
|
border-radius:50%;
|
|
background-color:var(--thumbnail-background)
|
|
}
|
|
.login-container {
|
|
display:flex;
|
|
flex-direction:row;
|
|
padding:24px
|
|
}
|
|
@media screen and (max-width:1300px) {
|
|
.login-container {
|
|
flex-direction:column
|
|
}
|
|
}
|
|
.login-container>* {
|
|
flex:1 1 0
|
|
}
|
|
.login-container>*>div {
|
|
max-width:600px;
|
|
margin:auto
|
|
}
|
|
.login-form {
|
|
display:flex;
|
|
flex-direction:column;
|
|
max-width:400px;
|
|
row-gap:10px;
|
|
margin:auto
|
|
}
|
|
.login-button,
|
|
.login-form>input {
|
|
background-color:var(--item-active-background);
|
|
color:var(--text-primary);
|
|
border:1px solid var(--border-color);
|
|
padding:10px;
|
|
max-width:400px;
|
|
row-gap:10px;
|
|
margin:auto
|
|
}
|
|
.playlist-form {
|
|
display:flex;
|
|
flex-direction:column;
|
|
max-width:400px;
|
|
row-gap:10px;
|
|
margin:auto
|
|
}
|
|
.login-button,
|
|
.playlist-form>input,
|
|
.playlist-form>select {
|
|
background-color:var(--item-active-background);
|
|
color:var(--text-primary);
|
|
border:1px solid var(--border-color);
|
|
padding:10px;
|
|
width:80%;
|
|
row-gap:10px;
|
|
margin:auto
|
|
}
|
|
.login-button {
|
|
background-color:var(--item-active-background);
|
|
color:var(--text-primary);
|
|
display:block;
|
|
text-align:center;
|
|
text-decoration:none;
|
|
width:fit-content
|
|
}
|
|
.login-button.danger {
|
|
color:red;
|
|
font-weight:700
|
|
}
|
|
.login-form>h1 {
|
|
text-align:center
|
|
}
|
|
.login-message {
|
|
width:calc(100% - 96px);
|
|
margin:48px;
|
|
padding:16px;
|
|
border:1px solid var(--border-color);
|
|
background-color:var(--item-active-background);
|
|
border-radius:5px
|
|
}
|
|
.fullscreen-account-menu>.guide-item:hover {
|
|
background-color:var(--item-hover-background)
|
|
}
|
|
.fullscreen-account-menu>.guide-item>a {
|
|
height:40px;
|
|
display:flex;
|
|
align-items:start;
|
|
color:var(--text-primary);
|
|
text-decoration:none;
|
|
font-size:initial;
|
|
padding:0
|
|
}
|
|
.fullscreen-account-menu>.guide-item>a>.icon {
|
|
height:24px;
|
|
width:24px;
|
|
margin-right:24px
|
|
}
|
|
.fullscreen-account-menu>.guide-item.active {
|
|
background-color:var(--item-active-background)
|
|
}
|
|
.download-list {
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-wrap:wrap;
|
|
column-gap:32px
|
|
}
|
|
.download-format {
|
|
max-width:400px;
|
|
padding:8px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
row-gap:8px
|
|
}
|
|
.download-format>div {
|
|
color:var(--text-primary)
|
|
}
|
|
.download-format>a {
|
|
padding:8px;
|
|
background-color:var(--channel-contents-background);
|
|
border:1px solid var(--border-color);
|
|
text-decoration:none
|
|
}
|
|
.settings-categories {
|
|
background-color:var(--context-menu-background);
|
|
display:flex;
|
|
column-gap:16px;
|
|
padding:0 16px
|
|
}
|
|
.settings-categories>a {
|
|
height:3rem;
|
|
line-height:3rem;
|
|
padding:0 8px;
|
|
text-decoration:none
|
|
}
|
|
.settings-content {
|
|
max-width:400px;
|
|
margin:auto
|
|
}
|
|
.settings-content>div {
|
|
width:100%;
|
|
padding:8px
|
|
}
|
|
.settings-content>div>label {
|
|
width:45%;
|
|
display:inline-block;
|
|
font-weight:700;
|
|
color:var(--text-primary)
|
|
}
|
|
.settings-content>div>select {
|
|
width:50%;
|
|
display:inline-block;
|
|
border:1px solid var(--border-color);
|
|
padding:8px;
|
|
background-color:var(--context-menu-background);
|
|
color:var(--text-primary)
|
|
}
|
|
.logins-container {
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-wrap:wrap;
|
|
justify-content:space-evenly;
|
|
gap:16px;
|
|
padding:16px
|
|
}
|
|
.login {
|
|
border:1px solid var(--border-color);
|
|
border-radius:4px;
|
|
width:500px;
|
|
padding:8px
|
|
}
|
|
.subscribe-button>a {
|
|
color:#000!important;
|
|
margin:auto;
|
|
margin-right:auto;
|
|
background:#fff;
|
|
border-radius:2em;
|
|
text-transform:initial;
|
|
font-weight:1000;
|
|
padding:10px 16px;
|
|
border:none;
|
|
margin-left:.5em;
|
|
font-family:"PokeTube Flex";
|
|
font-stretch:ultra-expanded
|
|
}
|
|
h3 {
|
|
font-stretch:ultra-expanded!important
|
|
}
|
|
.tags {
|
|
display:flex;
|
|
flex-direction:row;
|
|
overflow-x:auto;
|
|
column-gap:3px
|
|
}
|
|
.tag {
|
|
background:#333;
|
|
padding:5px;
|
|
border-radius:4px;
|
|
word-break:break-all;
|
|
white-space:nowrap
|
|
}
|
|
ptd-custom-more {
|
|
color:#fff
|
|
}
|
|
|
|
@media screen and (orientation:landscape) {
|
|
.ptnewbuttons {
|
|
margin-left:auto;
|
|
width:auto;
|
|
max-width:150em!important;
|
|
margin-right:auto !important;
|
|
}
|
|
}
|
|
|
|
.new-button.engagement:hover {
|
|
background-color:#0009
|
|
}
|
|
div.new-button:hover {
|
|
background-color:#0008
|
|
}
|
|
a.new-button:hover {
|
|
background-color:#0008
|
|
}
|
|
.video-chnl-info-pill>a:first-child {
|
|
margin-right:-8px
|
|
}
|
|
.video-info-buttons.pill>.engagement {
|
|
margin-right:2px
|
|
}
|
|
.button-encryption,
|
|
.video-info-buttons.pill>div:nth-child(2)>.new-button {
|
|
margin-right:2px
|
|
}
|