Skip to content

Instantly share code, notes, and snippets.

@mast-range

mast-range/watercolour-0426.css

Last active April 26, 2021 19:08
Show Gist options
  • Save mast-range/c0fabb9ce5221c3cc373298235c5c7ac to your computer and use it in GitHub Desktop.
Save mast-range/c0fabb9ce5221c3cc373298235c5c7ac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
watercolour-0426.css
:root {
--highlight: rgb(201, 233, 233);
--text: black;
--dropshadow: #00fefe63;
--bg: rgb(236, 241, 241);
/* inputs for background-image: linear-gradient() */
--grad1: #fff0;
--grad2: rgba(203, 232, 232, .57);
--grad3: #ae04ae12;
--grad4: transparent;
}
body {
color: var(--text);
background-color: var(--bg);
border-radius: 0 !important;
transition: none !important;
}
/* selected text color */
html ::selection, body ::selection {
background: var(--highlight);
}
/* cursor */
/*
div {
cursor:crosshair;
}
*/
/* style scrollbars */
body::-webkit-scrollbar-track {
background: none !important; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: white !important; /* color of the scroll thumb */
border: 1px solid black;
}
.scroller {
scrollbar-color: white transparent !important;
}
main h1 {
font-size: 1.2em;
font-weight: 500;
color: #000;
padding-bottom: .5em;
padding-left: 0;
margin-left: 115px;
}
main h2 {
color: #000;
font-size: 1em;
border-left: 1px solid #000;
border-width: 0.5px;
border-radius: 0%;
padding-left: 17px;
margin-top:2em !important;
/* opacity: .5; */
}
/* blog cover */
main .cover {
background-size: cover;
/* border-top: 1px solid black;
border-bottom: 1px solid black;*/
}
h2 > a {
font-size: 1em;
}
main h2 > a:hover{
background: none !important;
border-right: 1px solid black;
padding-right:15px;
}
small {
color: #000;
}
p {
color: #000;
}
/* fonts */
main article {
max-width: 100ch;
font-family: "Vazir","Lora",serif;
font-size: 1.2em;
line-height: 1.7;
}
/*
section {
border-style: solid;
border-color: rgb(122, 122, 122);
border-width: 0.5px;
border-radius: 35%;
border-bottom: none;
border-left: none;
border-right: none;
}
*/
div.cards {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 1em;
margin-bottom:2em
}
.card {
/* border-style: solid;
border-color: #000;
border-width: 1px;
border-radius: 0%;
border-top: none;
border-bottom: none;
border-right: none; */
background: #fff;
color: #000;
min-height: 5.5em;
min-width:18.5em;
max-height:27em;
margin:10px;
}
.card > * {
margin-bottom: 0px;
margin-right:10px;
margin-top:0px
}
.card h3 a {
font-size: .85em;
padding-right: 11px;
line-height:1.2em;
}
/*
.card h3 a:hover {
border-right: 1px solid #000;
background: none;
padding-right: 10px;
}
*/
.card main {
line-height: 1.4em
}
.card footer.authors span.likes, .card footer.authors .reshares {
display: none;
}
footer.authors {
/*
font-size: .85em;
filter: opacity(50%);
font-weight: 350; */
display:none;
}
/* page header */
body > header,
body > header nav:nth-child(2) {
background: none;
box-shadow: none;
}
body > header nav a.title img {
filter: brightness(0) grayscale(100%);
}
body > header nav a.title {
width: 50px;
height: 50px;
font-size: 1em;
padding: 15px;
}
body > header nav a.title p {
display: none
}
body > header nav hr {
display: none;
height: 50px;
width: .1em;
transform: skewX(-50deg);
}
/* header icons */
body > header nav a i {
font-size: 1em;
}
header nav a {
font-weight:300;
font-size: .9em !important;
}
header nav a:hover,
header nav a:visited:hover,
header nav a:hover i {
margin-bottom: 0;
text-decoration: none !important;
background: none !important;
}
header nav a .mobile-label {
transition: none !important;
padding-top: 3px;
}
/* server info, server stats */
div.presentation.card {
background: none;
margin-top: 2em;
margin-bottom:0;
}
.presentation > h2 {
padding-bottom: 20px;
margin-bottom: 1em;
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 0;
margin-bottom: 0.1em;
}
.presentation > a {
font-size: 1.2em;
margin: 1em;
background-image: linear-gradient(to right, #fff0,rgba(203, 232, 232, .57) , #ae04ae12, rgba(255, 255, 255, 0)) !important;
}
.presentation > a:hover {
background-image: linear-gradient(to right, #fff0,rgb(203, 232, 232) , #8000801c, rgba(255, 255, 255, 0)) !important;
}
/* page footer */
.banner, body > footer {
background: none ;
color: #000;
font-size: .9em;
border-style: solid;
border-color: #000;
border-width: 0.4px;
border-radius: 0%;
border-bottom: none;
border-left: none;
border-right: none;
}
body > footer hr {
background: #000;
width: .75px;
transform: scaleY(.7);
}
/*
body > footer h3 {
font-weight:550;
} */
body > footer a, body > footer a:visited{
color: black;
font-weight:300;
}
/*
body > footer div > h3 {
border-style: solid;
border-color: rgb(57, 57, 57);
border-width: 1px;
border-radius: 0%;
border-bottom: none;
border-top: none;
border-right: none;
padding-left: 40px;
}
**/
.center {
font-weight: 300;
}
/* links */
p a, p a:visited{
color: #000;
/* text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: #16c3c3;*/
/* border-bottom: 1px solid #00000063;
padding-bottom: 0px; */
transition: none;
filter: drop-shadow(1px 0 2px #00fefe63);
}
form.inline input[type="submit"]:not(.button) {
/* border-left: 1px solid #000;
padding-left: 15px;
margin-left: 10px;*/
color:#000;
transition: none;
}
a, a:visited, a::selection {
color:#000 !important;
text-decoration: none;
}
a:hover, a:visited:hover,
form.inline input[type="submit"]:not(.button):hover{
color: #000;
text-decoration: none!important;
background-image: linear-gradient(to right, #fff0,rgb(203, 232, 232) , #8000801c, #fff0) !important;
filter: none;
transition: none;
}
body > header nav a {
text-decoration: none;
}
p a.button.inline-block{
text-decoration: none !important;
}
/* title on card */
.card h3 {
font-size: 1.5em;
}
.card h3 a {
display: block;
transition: none;
color: #000;
border-left: 1px solid #000;
padding-left: 10px;
margin-left: 40px;
}
main .card h3 a{
border:none;
padding-left: 0;
margin-left: 0;
}
.card h3 a:hover {
color: #000;
}
/* buttons */
.button, .button:visited, input[type="submit"], input[type="submit"].button {
background: none;
color: #000;
font-weight: 350;
border-left: 1px solid #000;
padding-left: 10px;
transition: none;
}
/*
a.button,
a.inline-block {
font-weight: normal;
filter: drop-shadow(5px 0px 4px rgb(250, 228, 29));
padding:10px;
}
*/
.button:hover, .button:visited:hover, input[type="submit"]:hover, input[type="submit"].button:hover {
background-color: transparent;
background-image: linear-gradient(to right, #fff0,rgb(203, 232, 232) , #8000801c, rgba(255, 255, 255, 0)) !important;
}
.button.destructive, .button:visited.destructive, input[type="submit"].destructive, input[type="submit"].button.destructive {
background: #d515422e;
}
.button.destructive:hover, .button:visited.destructive:hover, input[type="submit"].destructive:hover, input[type="submit"].button.destructive:hover {
background: rgb(255, 91, 98);
background-image: none !important;
}
/* header tabs */
body > main > *, .h-feed > * {
margin: 1em 5%;
}
.tabs {
border: none;
margin: auto 5% ;
overflow: clip;
/* opacity:.5; */
}
.tabs a {
color: #000;
font-weight:300;
padding-left: 20px;
}
.tabs a:hover {
background:none !important;
border-left: 1px solid #000;
border-width: 0.5px;
border-radius: 0%;
padding-left: 19px;
}
.tabs a.selected {
color: #000;
border-left: 1px solid #000;
border-width: 0.5px;
border-radius: 0%;
text-decoration: none;
border-bottom: none;
padding-left: 19px;
}
/* mobile menu */
body > header nav#menu,
body > header nav#content::before
{
background: none;
}
/* pagination */
.pagination a {
padding-top:5px;
padding-left:20px;
padding-bottom:10px;
}
.pagination a:hover{
background: none !important;
border-left: 1px solid #000;
border-width: 0.5px;
border-radius: 0%;
padding-top:5px;
padding-left: 19px;
}
/* avatars */
.avatar.small {
width: 50px;
height: 50px;
border-radius: 0;
/* border: 1px solid #000; */
border:none;
filter: grayscale(90%) ;
}
.avatar.small:hover {
filter: none;
}
.avatar.medium {
width: 100px;
height: 100px;
margin: 0;
margin-bottom: 10px;
border-radius: 0;
/* border: 1px solid #000; */
/* filter: grayscale(100%) opacity(90%); */
border: none;
}
.avatar.medium:hover {
filter: none;
}
/* article header */
main header.article > div:not(.shadow) h1, main header.article > div:not(.shadow) .article-info {
text-align: left;
}
main h1.article {
font-size: 1.5em;
margin-left: 0em;
margin-bottom: 0;
}
main h2.article {
font-size: 1em;
line-height: 1.5em;
}
main header.article {
background: white;
color: #000;
/* border-left: 1px solid #000; */
}
main .article-info .author{
font-weight: 300;
font-size: .9em;
color: black;
margin-left: 4em
}
main .article-info .author a,
main header.article.illustrated a {
color: black;
font-weight: 300;
filter: drop-shadow( 1px 0 3px #16c3c375)
}
main .article-info .author a:hover,
main header.article.illustrated a:hover {
filter: none;
}
main .article-info .autho r {
color: black;
}
main header.article.illustrated {
min-height: 50vh;
border: 1px solid #000;
display: contents;
background: none;
color: #000;
}
main .article-info {
margin: 0 auto 2em;
margin-left: 0;
font-size: .95em;
font-weight: 400;
}
main article.e-content {
padding-top:30px;
}
/* author information */
h2.p-name {
margin-left:0;
}
/* article meta */
main .article-meta, main .article-meta button {
font-size: 1em;
}
/* hashtags */
main .article-meta .tags li,
main .article-meta .tags li a {
font-size: 1em;
text-decoration: none !important;
border-color: #000;
border-radius: 0;
border-top: none;
border-bottom: none;
border-right: none;
transition: none;
font-weight:300;
}
main .article-meta .tags li:hover {
background: #ffffff80 !important;
transition: none;
}
/* licence */
.right {
font-weight: 300;
}
/* like and reshare */
main .article-meta .likes .action svg.feather,
main .article-meta .reshares .action svg.feather{
padding: .7em;
box-sizing: border-box;
color: #000;
fill: none;
border: solid #000 thin;
transition: none;
}
main .article-meta .reshares p, main .article-meta .reshares .action:hover,
main .article-meta .likes p, main .article-meta .likes .action:hover,
main .article-meta .likes .action, main .article-meta .reshares .action {
filter: grayscale(50%);
color: #000;
font-size: .7em;
}
main .article-meta .reshares .action:hover svg.feather,
main .article-meta .reshares .action:active svg.feather{
background-color: #16c3c375;
transition: none;
}
main .article-meta .likes .action:hover svg.feather,
main .article-meta .likes .action:active svg.feather{
background-color: #d515bb4a;
transition: none;
}
main .article-meta .likes .action.liked svg.feather {
background: #d515bb78 !important;
}
main .article-meta .reshares .action.reshared svg.feather {
background: #16babab3;
}
/* card */
div .card .cover {
/* border: 1px solid #000;*/
border: none;
min-height: 5em;
filter: grayscale(0%);
opacity:.8;
margin-right: 0em;
margin-bottom: .75em;
}
.card .cover:hover {
filter: none;
/* opacity:1 !important; */
}
div.cover.media-preview.image,
div.cover.media-preview.image:hover{
filter: none !important;
}
/* list card */
.list > .card:hover {
background: none;
}
/* article dividers */
main article pre {
background: none;
}
/* success message */
.messages p.success {
border-bottom: 1px solid #16c3c3;
color: #16c3c3;
background: none;
font-weight:400;
padding-bottom: 3px;
}
/* input boxes*/
label {
color:#000;
font-size: 1em;
}
input, textarea, select {
padding: .4em;
border-radius: 0;
box-shadow: none;
}
input:focus, textarea:focus, select:focus {
border-color: #000;
}
/* profile badge */
.badge {
color: #000;
border-color: #000;
background: none;
}
/* comment buttons */
main .article-meta .comments a.button {
border: none;
}
/* comment boxes */
main .article-meta .comments h2 {
color: #000 !important;
font-size: 1em;
}
main .article-meta .comments .comment .content {
background: none;
margin-top: 2.5em;
padding: 1em;
border: 1px solid #000;
}
main .article-meta .comments .comment .content::before {
display: block;
content: ' ';
border: .7em solid #000;
border-top-color: transparent;
border-right-color: transparent;
position: relative;
top: -2.4em;
left: -1em;
width: 0;
height: 0;
}
input, textarea, select {
background-color: #ffffff80;
color: #000;
font-size: 1em;
}
main .article-meta .comments .comment .author .display-name,
main .article-meta .comments .comment .author:hover .display-name,
main .article-meta .comments a.button::before, main .article-meta .comments form.inline::before, main .article-meta .comments form.inline input::before {
color: #000;
}
/* article edit bottom bar */
.bottom-bar {
background: white;
border-top: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment