feat: create Tildes Baukula
This commit is contained in:
parent
729a6c69d7
commit
bcd549407e
|
@ -0,0 +1,15 @@
|
|||
&.static-site {
|
||||
.article-summary {
|
||||
border: 1px solid $comment;
|
||||
background-color: $background;
|
||||
padding: 0.8rem;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.4rem 0;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $comment;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
.btn {
|
||||
@include colorHover($cyan, $background);
|
||||
|
||||
&:hover,
|
||||
&.btn-primary:hover {
|
||||
border-color: $pink;
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
@include colorHover($cyan, $background);
|
||||
|
||||
border: 1px solid $cyan;
|
||||
|
||||
&:hover {
|
||||
border-color: $pink;
|
||||
background-color: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-used {
|
||||
color: $background;
|
||||
border-color: $pink;
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
&-post button {
|
||||
@include colorHover($cyan, $pink);
|
||||
|
||||
&.btn-post-action-used {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,73 @@
|
|||
// This can be removed once issue 370 is fixed
|
||||
// https://gitlab.com/tildes/tildes/issues/370
|
||||
|
||||
.highlight {
|
||||
.syntax-c { color: $cyan; }
|
||||
.syntax-err { color: $foreground; }
|
||||
.syntax-g { color: $foreground; }
|
||||
.syntax-k { color: $green; }
|
||||
.syntax-l { color: $foreground; }
|
||||
.syntax-n { color: $foreground; }
|
||||
.syntax-o { color: $green; }
|
||||
.syntax-x { color: $orange; }
|
||||
.syntax-p { color: $foreground; }
|
||||
.syntax-cm { color: $cyan; }
|
||||
.syntax-cp { color: $green; }
|
||||
.syntax-c1 { color: $cyan; }
|
||||
.syntax-cs { color: $green; }
|
||||
.syntax-gd { color: $purple; }
|
||||
.syntax-ge { color: $foreground; }
|
||||
.syntax-gr { color: $red; }
|
||||
.syntax-gh { color: $orange; }
|
||||
.syntax-gi { color: $green; }
|
||||
.syntax-go { color: $foreground; }
|
||||
.syntax-gp { color: $foreground; }
|
||||
.syntax-gs { color: $foreground; }
|
||||
.syntax-gu { color: $orange; }
|
||||
.syntax-gt { color: $foreground; }
|
||||
.syntax-kc { color: $orange; }
|
||||
.syntax-kd { color: $pink; }
|
||||
.syntax-kn { color: $green; }
|
||||
.syntax-kp { color: $green; }
|
||||
.syntax-kr { color: $pink; }
|
||||
.syntax-kt { color: $red; }
|
||||
.syntax-ld { color: $foreground; }
|
||||
.syntax-m { color: $purple; }
|
||||
.syntax-s { color: $purple; }
|
||||
.syntax-na { color: $foreground; }
|
||||
.syntax-nb { color: $orange; }
|
||||
.syntax-nc { color: $pink; }
|
||||
.syntax-no { color: $orange; }
|
||||
.syntax-nd { color: $pink; }
|
||||
.syntax-ni { color: $orange; }
|
||||
.syntax-ne { color: $orange; }
|
||||
.syntax-nf { color: $pink; }
|
||||
.syntax-nl { color: $foreground; }
|
||||
.syntax-nn { color: $foreground; }
|
||||
.syntax-nx { color: $foreground; }
|
||||
.syntax-py { color: $foreground; }
|
||||
.syntax-nt { color: $pink; }
|
||||
.syntax-nv { color: $pink; }
|
||||
.syntax-ow { color: $green; }
|
||||
.syntax-w { color: $foreground; }
|
||||
.syntax-mf { color: $purple; }
|
||||
.syntax-mh { color: $purple; }
|
||||
.syntax-mi { color: $purple; }
|
||||
.syntax-mo { color: $purple; }
|
||||
.syntax-sb { color: $cyan; }
|
||||
.syntax-sc { color: $purple; }
|
||||
.syntax-sd { color: $foreground; }
|
||||
.syntax-s2 { color: $purple; }
|
||||
.syntax-se { color: $orange; }
|
||||
.syntax-sh { color: $foreground; }
|
||||
.syntax-si { color: $purple; }
|
||||
.syntax-sx { color: $purple; }
|
||||
.syntax-sr { color: $red; }
|
||||
.syntax-s1 { color: $purple; }
|
||||
.syntax-ss { color: $purple; }
|
||||
.syntax-bp { color: $pink; }
|
||||
.syntax-vc { color: $pink; }
|
||||
.syntax-vg { color: $pink; }
|
||||
.syntax-vi { color: $pink; }
|
||||
.syntax-il { color: $purple; }
|
||||
}
|
|
@ -0,0 +1,11 @@
|
|||
$foreground: #f8f8f2;
|
||||
$background: #282a36;
|
||||
$selection: #44475a;
|
||||
$comment: #6272a4;
|
||||
$red: #ff5555;
|
||||
$orange: #ffb86c;
|
||||
$yellow: #f1fa8c;
|
||||
$green: #50fa7b;
|
||||
$cyan: #8be9fd;
|
||||
$purple: #bd93f9;
|
||||
$pink: #ff79c6;
|
|
@ -0,0 +1,20 @@
|
|||
.comment {
|
||||
border-color: $background;
|
||||
|
||||
&[data-comment-depth='0'] {
|
||||
border-color: $background;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.comment-nav-link,
|
||||
.comment-nav-link:visited {
|
||||
@include colorHover($cyan, $pink);
|
||||
}
|
||||
|
||||
.comment-votes {
|
||||
color: $foreground;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
// Hopefully this combination is only ever used in the docs
|
||||
.date-info.text-secondary.text-small {
|
||||
color: $foreground;
|
||||
}
|
||||
|
||||
.toc {
|
||||
border: 1px solid $comment;
|
||||
background-color: $background;
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
// TODO: Styles for Tildes Extended stuff like user labels
|
|
@ -0,0 +1,48 @@
|
|||
a,
|
||||
a:visited {
|
||||
@include colorHover($cyan, $pink)
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
color: $foreground;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
figure,
|
||||
section {
|
||||
border-color: $foreground;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.form-input,
|
||||
.form-input:not(:focus) {
|
||||
color: $foreground;
|
||||
border-color: $comment;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
main,
|
||||
#sidebar {
|
||||
background-color: $selection;
|
||||
}
|
||||
|
||||
th {
|
||||
border-color: $comment;
|
||||
}
|
||||
td {
|
||||
border-color: $selection;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
tbody tr:nth-of-type(n) {
|
||||
background-color: $background;
|
||||
}
|
|
@ -0,0 +1,76 @@
|
|||
// Anywhere a link will go to a user, color it $green
|
||||
a.link-user,
|
||||
a.site-header-context[href^='/user'] {
|
||||
color: $green;
|
||||
|
||||
&:visited {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
// Anywhere a link will go to a group, color it $orange
|
||||
a.link-group,
|
||||
a.site-header-context[href^='/~'],
|
||||
.nav .nav-item a[href^='/~'] {
|
||||
color: $orange;
|
||||
|
||||
&:visited {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure the logo hover keeps the $foreground color, otherwise it would be pink from _anchors.scss
|
||||
a.site-header-logo:hover {
|
||||
color: $foreground;
|
||||
}
|
||||
|
||||
a.logged-in-user-alert,
|
||||
a.logged-in-user-alert:visited {
|
||||
color: $background;
|
||||
@include backgroundHover($orange, $yellow);
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
|
||||
// The logout button is actually a <button/> instead of an <a/> so we gotta reset the style
|
||||
#sidebar {
|
||||
form[action='/logout'] > button,
|
||||
form[action='/logout'] > button:hover {
|
||||
color: $cyan;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// "Edit filtered tags" button in the sidebar
|
||||
#sidebar .btn.btn-link[href='/settings/filters'] {
|
||||
width: 100%;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
// Target all label-topic-tags expect spoiler and nsfw ones
|
||||
.label.label-topic-tag:not([class*='label-topic-tag-spoiler']):not([class*='label-topic-tag-nsfw']) {
|
||||
color: $comment;
|
||||
|
||||
a {
|
||||
@include colorHover($comment, $pink);
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-color: $foreground;
|
||||
}
|
||||
|
||||
// Very specific target for the Tildes brand logo at the top
|
||||
&>header>a:nth-child(1):not(.no-header-logo) {
|
||||
color: $foreground;
|
||||
background-size: 32px 32px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAHlBMVEUoKjZQ+nticqSL6f29k/nx+oz/VVX/ecb/uGz///+3yBn7AAAAaklEQVR42u3Oxw2AQAADsNDZf2IGyO8kioQ9gQMAAAAAcLelCAkJCQkJCQkJ/Tk0lZS5ZMhZhISEhISEhISEvhbaSoasJWUvKUJCQkJCQkJCQu+GnnSUFCEhISEhISEhoXdDAAAAAAA3uwDrCC2R1NNC7QAAAABJRU5ErkJggg==');
|
||||
}
|
||||
|
||||
.form-status-success {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.form-status-error {
|
||||
color: $red;
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
// Mixin to easily color standard and hover states
|
||||
@mixin colorHover($standard, $hover) {
|
||||
color: $standard;
|
||||
|
||||
&:hover {
|
||||
color: $hover;
|
||||
}
|
||||
}
|
||||
|
||||
// The same as colorHover but for the background-color
|
||||
@mixin backgroundHover($standard, $hover) {
|
||||
background-color: $standard;
|
||||
|
||||
&:hover {
|
||||
background-color: $hover;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
.settings-list {
|
||||
li {
|
||||
border: 1px solid $comment;
|
||||
background-color: $background;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,35 @@
|
|||
.tab.tab-listing-order {
|
||||
border-color: $background;
|
||||
|
||||
.tab-item {
|
||||
background-color: $background;
|
||||
margin: 4px 2px;
|
||||
padding: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
color: $pink;
|
||||
border-color: $pink;
|
||||
}
|
||||
|
||||
a {
|
||||
@include colorHover($foreground, $cyan);
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-select:not([multiple]):not([size]) {
|
||||
border: 1px solid $comment;
|
||||
background-color: $background;
|
||||
// Changes the "from last X period" icon to be the same color as the foreground, it's hardcoded though
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23f8f8f2'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E");
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
.topic-listing {
|
||||
// Make all the topics in the listing have the same background color
|
||||
> li:nth-of-type(n) {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
// "Post" listing is the list on user profiles
|
||||
.post-listing {
|
||||
.topic {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,38 @@
|
|||
.topic {
|
||||
&.is-topic-official {
|
||||
border-left-color: $red;
|
||||
|
||||
h1 a,
|
||||
h1 a:visited {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-title a {
|
||||
&:hover {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-info-comments a {
|
||||
&:visited {
|
||||
color: $cyan;
|
||||
}
|
||||
}
|
||||
|
||||
// Make the domain colored as $foreground, it has no other selectors so aria-label is the workaround
|
||||
div[aria-label='Link domain'],
|
||||
.time-responsive {
|
||||
color: $foreground;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-full {
|
||||
.topic-full-byline {
|
||||
color: $foreground;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "tildes-baukula",
|
||||
"version": "1.0.0",
|
||||
"usercss": {
|
||||
"name": "Tildes Baukula",
|
||||
"namespace": "tildes.net",
|
||||
"version": "1.0.0",
|
||||
"author": "Bauke",
|
||||
"description": "Adaptations to make the official Dracula theme look like my old one.",
|
||||
"homepageURL": "https://gitlab.com/Bauke/styles",
|
||||
"supportURL": "https://gitlab.com/Bauke/styles/issues",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
@import 'colors';
|
||||
@import 'mixins';
|
||||
|
||||
// Tell the user that Baukula only works with the official Dracula theme
|
||||
body:not(.theme-dracula) {
|
||||
.site-header-logo:after {
|
||||
content: ' Baukula won\'t activate unless you use the official Dracula theme!';
|
||||
}
|
||||
}
|
||||
|
||||
// Apply only when using the official Dracula theme
|
||||
body.theme-dracula {
|
||||
background-color: $background;
|
||||
@import 'blog';
|
||||
@import 'buttons';
|
||||
@import 'code-syntax';
|
||||
@import 'comments';
|
||||
@import 'docs';
|
||||
@import 'extended';
|
||||
@import 'html';
|
||||
@import 'misc';
|
||||
@import 'settings';
|
||||
@import 'tabs';
|
||||
@import 'topic-listing';
|
||||
@import 'topics';
|
||||
}
|
Loading…
Reference in New Issue