mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-09-16 01:56:55 +00:00
4.0.0 Beta 1
This commit is contained in:
SirStendec
parent
c2688646af
commit
262757a20d
187 changed files with 22878 additions and 38882 deletions
58
styles/chat.scss
Normal file
58
styles/chat.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.ffz-cheer {
|
||||
display: inline-block;
|
||||
height: 2.8rem;
|
||||
line-height: 2.8rem;
|
||||
padding-left: 3rem;
|
||||
margin: -.5rem .5rem;
|
||||
background-position: 0;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:after {
|
||||
font-weight: bold;
|
||||
content: attr(data-amount)
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-cheer-preview {
|
||||
height: 11.2rem;
|
||||
width: 11.2rem;
|
||||
}
|
||||
|
||||
|
||||
.ffz-badge {
|
||||
display: inline-block;
|
||||
min-width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin: 0 .3rem .2rem 0;
|
||||
background-position: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.modified-emote {
|
||||
~ .chat-line__message--emote {
|
||||
position: relative;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
> img {
|
||||
margin: 0 !important
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: -20px; bottom: -20px; left: -20px; right: -20px;
|
||||
margin: auto;
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
91
styles/icons.scss
Normal file
91
styles/icons.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
@font-face {
|
||||
font-family: 'ffz-fontello';
|
||||
src: url('~res/font/ffz-fontello.woff2') format('woff2'),
|
||||
url('~res/font/ffz-fontello.woff') format('woff'),
|
||||
url('~res/font/ffz-fontello.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="ffz-i-"]:before, [class*=" ffz-i-"]:before {
|
||||
font-family: "ffz-fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
|
||||
.tw-button-icon__icon {
|
||||
[class^="ffz-i-"], [class*=" ffz-i-"] {
|
||||
font-size: 1.6rem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz-i-zreknarf:before {
|
||||
content: '\e801'; /* '' */
|
||||
width: 1.3em;
|
||||
margin: .5rem .05rem 0;
|
||||
}
|
||||
|
||||
|
||||
.ffz-i-cancel:before { content: '\e800'; } /* '' */
|
||||
.ffz-i-search:before { content: '\e802'; } /* '' */
|
||||
.ffz-i-clock:before { content: '\e803'; } /* '' */
|
||||
.ffz-i-star:before { content: '\e804'; } /* '' */
|
||||
.ffz-i-star-empty:before { content: '\e805'; } /* '' */
|
||||
.ffz-i-down-dir:before { content: '\e806'; } /* '' */
|
||||
.ffz-i-right-dir:before { content: '\e807'; } /* '' */
|
||||
.ffz-i-attention:before { content: '\e808'; } /* '' */
|
||||
.ffz-i-ok:before { content: '\e809'; } /* '' */
|
||||
.ffz-i-cog:before { content: '\e80a'; } /* '' */
|
||||
.ffz-i-plus:before { content: '\e80b'; } /* '' */
|
||||
.ffz-i-folder-open:before { content: '\e80c'; } /* '' */
|
||||
.ffz-i-download:before { content: '\e80d'; } /* '' */
|
||||
.ffz-i-upload:before { content: '\e80e'; } /* '' */
|
||||
.ffz-i-floppy:before { content: '\e80f'; } /* '' */
|
||||
.ffz-i-twitter:before { content: '\f099'; } /* '' */
|
||||
.ffz-i-gauge:before { content: '\f0e4'; } /* '' */
|
||||
.ffz-i-download-cloud:before { content: '\f0ed'; } /* '' */
|
||||
.ffz-i-upload-cloud:before { content: '\f0ee'; } /* '' */
|
||||
.ffz-i-keyboard:before { content: '\f11c'; } /* '' */
|
||||
.ffz-i-ellipsis-vert:before { content: '\f142'; } /* '' */
|
||||
.ffz-i-twitch:before { content: '\f1e8'; } /* '' */
|
||||
.ffz-i-trash:before { content: '\f1f8'; } /* '' */
|
||||
.ffz-i-window-maximize:before { content: '\f2d0'; } /* '' */
|
||||
.ffz-i-window-minimize:before { content: '\f2d1'; } /* '' */
|
||||
.ffz-i-window-restore:before { content: '\f2d2'; } /* '' */
|
||||
.ffz-i-window-close:before { content: '\f2d3'; } /* '' */
|
||||
|
||||
|
||||
.ffz-i-pd-1:before { margin-right: 1rem }
|
||||
.ffz-i-pd-2:before { margin-right: 2rem }
|
||||
.ffz-i-pd-3:before { margin-right: 3rem }
|
||||
12
styles/main.scss
Normal file
12
styles/main.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@import 'icons';
|
||||
@import 'tooltips';
|
||||
@import 'widgets';
|
||||
|
||||
@import 'chat';
|
||||
|
||||
@keyframes ffz-rotateplane {
|
||||
0% { transform: rotateY(90deg) rotateX(180deg) }
|
||||
25% { transform: rotateY(0deg) rotateX(180deg) }
|
||||
75% { transform: rotateY(0deg) rotateX(0deg) }
|
||||
100% { transform: rotateY(90deg) rotateX(0deg) }
|
||||
}
|
||||
2520
styles/theme.scss
Normal file
2520
styles/theme.scss
Normal file
File diff suppressed because it is too large
Load diff
401
styles/tooltips.scss
Normal file
401
styles/tooltips.scss
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
body {
|
||||
overflow-x: hidden
|
||||
}
|
||||
|
||||
.ffz__tooltip {
|
||||
z-index: 999999999;
|
||||
margin: 6px;
|
||||
border-radius: 2px;
|
||||
background: #0e0c13;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.html { white-space: normal }
|
||||
&.interactive { pointer-events: all }
|
||||
|
||||
|
||||
.loader {
|
||||
opacity: .5;
|
||||
margin: 1rem;
|
||||
font-size: 3rem;
|
||||
animation: ffz-rotateplane 1.2s infinite linear;
|
||||
}
|
||||
|
||||
|
||||
.ffz__tooltip--arrow {
|
||||
position: absolute;
|
||||
width: 6px; height: 6px;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
|
||||
background: #0e0c13;
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
.ffz__tooltip--arrow {
|
||||
top: -3px;
|
||||
border-radius: 2px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
.ffz__tooltip--arrow {
|
||||
bottom: -3px;
|
||||
border-radius: 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
.ffz__tooltip--arrow {
|
||||
right: -3px;
|
||||
border-radius: 0 2px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
.ffz__tooltip--arrow {
|
||||
left: -3px;
|
||||
border-radius: 0 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.theme--dark & {
|
||||
background: #fff;
|
||||
color: #0e0c13;
|
||||
|
||||
.ffz__tooltip--arrow {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz__tooltip--inner {
|
||||
display: block;
|
||||
max-width: 30rem;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
|
||||
.preview-image {
|
||||
display: block;
|
||||
margin: 3px auto 6px;
|
||||
}
|
||||
|
||||
br {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ffz-cheer {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz-rich-tip {
|
||||
max-width: 340px;
|
||||
width: 340px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
|
||||
/*.stats:after, .heading:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tweet-heading {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png") -38px -15px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
.title {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
padding-top: 3px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
|
||||
&.big-name {
|
||||
font-size: 20px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.quoted {
|
||||
.display-name {
|
||||
padding: 0 5px 0 0;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
max-height: 48px;
|
||||
max-width: 100px;
|
||||
}*/
|
||||
}
|
||||
|
||||
.ffz-rich-tip .body { line-height: 1.5em }
|
||||
|
||||
.ffz-rich-tip .tweet-heading:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png") -38px -15px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .stats:after,
|
||||
.ffz-rich-tip .heading:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .avatar {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
max-height: 48px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .tweet-heading .avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .heading .title {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .display-name {
|
||||
padding-top: 3px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .display-name.big-name {
|
||||
font-size: 20px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .quoted .display-name {
|
||||
padding: 0 5px 0 0;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .twitch-heading .tip-badge.verified {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin: 2px 0 -1px 5px;
|
||||
background: url("https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/1");
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .twitch-heading .big-name .tip-badge.verified {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin: 1px 0 0 10px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .tweet-heading .tip-badge {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin: 2px 0 -1px 5px;
|
||||
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png");
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .tip-badge.verified {
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .tip-badge.translator {
|
||||
background-position: -12px -15px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .tip-badge.protected {
|
||||
background-position: -24px -15px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .emoji {
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .quoted > div:not(:first-child),
|
||||
.ffz-rich-tip > div:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .quote-heading + .body,
|
||||
.ffz-rich-tip .replying + .body {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .replying {
|
||||
opacity: 0.6;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .subtitle,
|
||||
.ffz-rich-tip .quoted .body,
|
||||
.ffz-rich-tip .stats,
|
||||
.ffz-rich-tip .username { opacity: 0.6 }
|
||||
|
||||
.ffz-rich-tip .stats { display: flex }
|
||||
.ffz-rich-tip .stats .wide-stat,
|
||||
.ffz-rich-tip time { flex-grow: 1 }
|
||||
|
||||
.ffz-rich-tip .tweet-stats .stat:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png");
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .stat.likes:before {
|
||||
width: 17px; height: 14px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .stat.retweets:before {
|
||||
width: 20px; height: 12px;
|
||||
background-position: -34px 0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media { position: relative; text-align: center }
|
||||
|
||||
.ffz-rich-tip .media[data-count]:not([data-count="1"]) {
|
||||
display: flex;
|
||||
margin: 8px -5px -5px 0;
|
||||
flex-flow: column wrap;
|
||||
height: 329px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media .duration {
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
margin: 4px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
opacity: .8;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
z-index: 10;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .sixteen-nine {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding-top: 56.25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .sixteen-nine img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media video {
|
||||
width: 100%;
|
||||
max-height: 324px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media[data-count="4"] { flex-flow: row wrap }
|
||||
|
||||
.ffz-rich-tip .media[data-count="2"] { height: 164.5px }
|
||||
.ffz-rich-tip .media img { max-height: 324px }
|
||||
|
||||
.ffz-rich-tip .quoted .media[data-count]:not([data-count="1"]) { height: 150px }
|
||||
.ffz-rich-tip .quoted .media[data-count="2"] { height: 150px }
|
||||
.ffz-rich-tip .quoted .media video,
|
||||
.ffz-rich-tip .quoted .media img { max-height: 150px }
|
||||
|
||||
.ffz-rich-tip .media span {
|
||||
background: no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media[data-count="2"] span,
|
||||
.ffz-rich-tip .media[data-count="3"] span,
|
||||
.ffz-rich-tip .media[data-count="4"] span {
|
||||
width: calc(50% - 5px);
|
||||
height: calc(50% - 5px);
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media[data-count="2"] span,
|
||||
.ffz-rich-tip .media[data-count="3"] span:first-of-type {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .profile-stats {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .profile-stats div {
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .profile-stats span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .quoted {
|
||||
border: 1px solid #474747;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ffz-rich-tip .media[data-type="video"]:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 64px; height: 64px;
|
||||
top: calc(50% - 32px);
|
||||
left: calc(50% - 32px);
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M15 10.001c0 .299-.305.514-.305.514l-8.561 5.303C5.51 16.227 5 15.924 5 15.149V4.852c0-.777.51-1.078 1.135-.67l8.561 5.305c-.001 0 .304.215.304.514z'/%3E%3C/svg%3E");
|
||||
}
|
||||
162
styles/widgets.scss
Normal file
162
styles/widgets.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
@import "./widgets/container.scss";
|
||||
|
||||
@import "./widgets/menu-container.scss";
|
||||
@import "./widgets/tab-container.scss";
|
||||
|
||||
@import "./widgets/menu-tree.scss";
|
||||
@import "./widgets/profile-selector.scss";
|
||||
|
||||
|
||||
.display-inline { display: inline !important }
|
||||
.width-auto { width: auto !important }
|
||||
|
||||
.ffz--widget {
|
||||
|
||||
input, select {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
label {
|
||||
min-width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--menu-page {
|
||||
padding: 1rem;
|
||||
|
||||
header {
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--profile-editor {
|
||||
.tw-button:disabled:not(:hover):not(:focus) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--profile-manager {
|
||||
.ffz--profile {
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe !important;
|
||||
}
|
||||
|
||||
.handle {
|
||||
opacity: 0.3;
|
||||
margin: -0.5rem 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ffz--profile__icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ffz-i-ok { color: green }
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
opacity: 0.25
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--filter-editor {
|
||||
.ffz--rule {
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe !important;
|
||||
}
|
||||
|
||||
.handle {
|
||||
opacity: 0.3;
|
||||
margin: -0.5rem 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ffz--filter__icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ffz-i-ok { color: green }
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
opacity: 0.25
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--home {
|
||||
h2, p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.tweet-column {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--changelog {
|
||||
h2, p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
margin: 10px 20px 5px;
|
||||
padding: 15px 0 5px;
|
||||
border-top: 1px solid #dad8de;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.theme--dark & {
|
||||
border-top-color: #2c2541;
|
||||
}
|
||||
|
||||
time {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
|
||||
.theme--dark & {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-menu-content {
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
|
||||
#ffz-old-news-button {
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
73
styles/widgets/container.scss
Normal file
73
styles/widgets/container.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
$spacing: 1rem;
|
||||
$border-light: #dad8de;
|
||||
$border-dark: #2c2541;
|
||||
|
||||
$bg-light: #faf9fa;
|
||||
$bg-dark: #17141f;
|
||||
|
||||
.ffz--outer-container {
|
||||
margin-bottom: $spacing * 2;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--inner-container {
|
||||
padding: $spacing;
|
||||
}
|
||||
|
||||
.ffz--widget {
|
||||
margin-bottom: $spacing;
|
||||
|
||||
label {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
&.default, &.inherits {
|
||||
label:before, label:after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input:focus + label {
|
||||
&:before, &:after {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
opacity: 0.5;
|
||||
|
||||
&:focus {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inherits {
|
||||
label:before, label:after {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
label:hover,
|
||||
input:focus + label {
|
||||
&:before, &:after {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
filter: grayscale(100%);
|
||||
|
||||
&:hover, &:focus {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
}
|
||||
27
styles/widgets/menu-container.scss
Normal file
27
styles/widgets/menu-container.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.ffz--menu-container {
|
||||
@extend .ffz--outer-container;
|
||||
@extend .ffz--inner-container;
|
||||
|
||||
position: relative;
|
||||
|
||||
&:not(.border):not(.border-b) {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
|
||||
& > header {
|
||||
position: absolute;
|
||||
top: 0; left: $spacing - 0.5rem;
|
||||
transform: translateY(-50%);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
background-color: $bg-light;
|
||||
|
||||
.theme--dark & {
|
||||
background-color: $bg-dark;
|
||||
}
|
||||
|
||||
& + * {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
69
styles/widgets/menu-tree.scss
Normal file
69
styles/widgets/menu-tree.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.ffz--menu-tree {
|
||||
position: relative;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
|
||||
box-shadow: inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
}
|
||||
}
|
||||
|
||||
.active > div,
|
||||
.active > div:hover,
|
||||
.theme--dark & .active > div:hover {
|
||||
background-color: #6441a4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.theme--dark & {
|
||||
background-color: #201c2b;
|
||||
}
|
||||
}
|
||||
|
||||
li div {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 0.5rem
|
||||
}
|
||||
|
||||
li:first-child div,
|
||||
li ul div {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
li ul div {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
li li div { padding-left: 1rem }
|
||||
li li li div { padding-left: 1.5rem }
|
||||
li li li li div { padding-left: 2rem }
|
||||
|
||||
.pill {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
opacity: 0.3;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ffz--invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
64
styles/widgets/profile-selector.scss
Normal file
64
styles/widgets/profile-selector.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.ffz--profile-selector {
|
||||
position: relative;
|
||||
|
||||
.tw-balloon {
|
||||
margin-top: 0 !important
|
||||
}
|
||||
|
||||
.scrollable-area {
|
||||
max-height: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ffz--profile-row {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.live .ffz--profile-row__icon {
|
||||
color: green;
|
||||
}
|
||||
|
||||
&:not(.live):not(:hover):not(:focus) {
|
||||
opacity: .5;
|
||||
font-variant: italic;
|
||||
|
||||
.theme--dark & {
|
||||
opacity: .25;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&, .theme--dark & {
|
||||
border-bottom: none !important
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: rgba(100, 65, 164, .05);
|
||||
|
||||
.theme-dark & {
|
||||
background: rgba(100, 65, 164, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ffz--profile-row__icon {
|
||||
position: absolute;
|
||||
top: 0.5rem; right: 0.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
40
styles/widgets/tab-container.scss
Normal file
40
styles/widgets/tab-container.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.ffz--tab-container {
|
||||
@extend .ffz--outer-container;
|
||||
|
||||
header:focus {
|
||||
outline: none;
|
||||
|
||||
.tab.active {
|
||||
box-shadow: inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
border-top: 1px solid;
|
||||
border-right: 1px solid;
|
||||
&:first-child { border-left-width: 1px; border-left-style: solid }
|
||||
|
||||
border-color: $border-light;
|
||||
|
||||
.theme--dark & {
|
||||
border-color: $border-dark;
|
||||
}
|
||||
|
||||
&.active:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
border-bottom: 4px solid #6441a4;
|
||||
}
|
||||
}
|
||||
|
||||
& > section {
|
||||
@extend .ffz--inner-container;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue