gianmarco
/
gmgsite
1
0
Fork 0
Code Issues Pull Requests Activity

Improved styling of the Isso comments, the download button and the ytr.html buttons

next
Gianmarco Gargiulo 2023-11-09 15:55:02 +01:00
parent 3568fac4e6
commit d6c4677a1f
2 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/ytr.html
View File

@ -52,12 +52,16 @@
#pipedbtn {background-color: rgba(139,0,0,.2); border-color: darkred} /* Piped */ #pipedbtn {background-color: rgba(139,0,0,.2); border-color: darkred} /* Piped */
#pipedbtn:hover {background-color: darkred} #pipedbtn:hover {background-color: darkred}
#pipedbtn:active {background-color: #5a0000; border-color: #5a0000}
#ytbtn {background-color: rgba(255,0,0,.2); border-color: red} /* YouTube */ #ytbtn {background-color: rgba(255,0,0,.2); border-color: red} /* YouTube */
#ytbtn:hover {background-color: red} #ytbtn:hover {background-color: red}
#ytbtn:active {background-color: #b90000; border-color: #b90000}
#odybtn {background-color: rgba(128,0,128,.2); border-color: purple} /* Odysee */ #odybtn {background-color: rgba(128,0,128,.2); border-color: purple} /* Odysee */
#odybtn:hover {background-color: purple} #odybtn:hover {background-color: purple}
#odybtn:active {background-color: #5a005a; border-color: #5a005a}
#ptbtn {background-color: rgba(194,84,10,.2); border-color: #C2540A} /* PeerTube */ #ptbtn {background-color: rgba(194,84,10,.2); border-color: #C2540A} /* PeerTube */
#ptbtn:hover {background-color: #C2540A} #ptbtn:hover {background-color: #C2540A}
#ptbtn:active {background-color: #984108; border-color: #984108}
@font-face { @font-face {
font-family: "Mustica Pro"; font-family: "Mustica Pro";

67
themes/hugo-casper3/assets/scss/custom.scss
View File

@ -126,6 +126,12 @@
color: white; color: white;
} }
#download-banner:active {
background-color: #014faf;
border: 1px solid #014faf;
color: white;
}
/* COMMENTS TITLE */ /* COMMENTS TITLE */
.comments-title { .comments-title {
font-family: "Mustica Pro"; font-family: "Mustica Pro";
@ -161,13 +167,13 @@
min-height: 58px; min-height: 58px;
outline: 0; outline: 0;
&.placeholder { &.placeholder {
color: #e5e5e5; color: #6a6a6a;
} }
} }
.textarea:focus, // .textarea:focus,
input:focus { // input:focus {
border-color: rgba(0, 0, 0, 0.8); // border-color: rgba(0, 0, 0, 0.8);
} // }
} }
.isso-comment{ .isso-comment{
#isso-root & { #isso-root & {
@ -191,7 +197,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px; border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
} }
@ -205,8 +211,9 @@
font-size: 0.85em; font-size: 0.85em;
.spacer { .spacer {
padding: 0 6px; padding: 0 6px;
color: #1e1e1e;
} }
.spacer, //.spacer,
a.permalink, a.permalink,
.note, .note,
a.parent { a.parent {
@ -230,7 +237,7 @@
margin-top: 0.2em; margin-top: 0.2em;
width: 100%; width: 100%;
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
border-radius: 2px; border-radius: 4px;
box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888;
} }
> .text{ > .text{
@ -259,7 +266,8 @@
.votes { .votes {
color: gray; color: gray;
position: relative; position: relative;
top: 2px; top: 1px;
padding-right: 5px;
} }
.upvote svg, .upvote svg,
.downvote svg { .downvote svg {
@ -267,6 +275,12 @@
top: -.2em; top: -.2em;
left: .1em; left: .1em;
} }
.spacer {
color: #1e1e1e;
}
.reply {
top: -.1px;
}
} }
} }
.isso-follow-up { .isso-follow-up {
@ -300,8 +314,9 @@
.preview { .preview {
margin: 0 0 .3em; margin: 0 0 .3em;
padding: .4em .8em; padding: .4em .8em;
border-radius: 3px; border-radius: 4px;
background-color: #000; background-color: #e5e5e5;
color: black;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
@ -324,11 +339,13 @@
position: relative; position: relative;
max-width: 25%; max-width: 25%;
margin: 0; margin: 0;
margin-right: 5px;
input { input {
padding: .3em 10px; padding: .3em 10px;
max-width: 100%; max-width: 100%;
border-radius: 3px; border-radius: 4px;
background-color: #000; background-color: #e5e5e5;
color: black;
line-height: 1.4em; line-height: 1.4em;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@ -340,18 +357,22 @@
margin: 0 0 0 5px; margin: 0 0 0 5px;
> input { > input {
padding: calc(.3em - 1px); padding: calc(.3em - 1px);
border-radius: 2px; padding-left: 10px;
border: 1px solid #c4c4c4; padding-right: 10px;
background-color: #000; border-radius: 4px;
border: 1px solid #bdbdbd;
background-color: #2a2a2a;
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
line-height: 1.4em; line-height: 1.4em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
&:hover { &:hover {
background-color: #eb6c6c; background-color: #0171ff;
border: 1px solid #0171ff;
color: white;
} }
&:active { &:active {
background-color: #781f1a; background-color: #014faf;
border: 1px solid #014faf;
} }
} }
} }
@ -360,10 +381,10 @@
background-color: #303030; background-color: #303030;
background: repeating-linear-gradient( background: repeating-linear-gradient(
-45deg, -45deg,
#303030, #ffffff,
#303030 10px, #ffffff 10px,
#232323 10px, #e5e5e5 10px,
#232323 20px #e5e5e5 20px
); );
} }
> .notification-section { > .notification-section {