4.0 theme

FossilOrigin-Name: 6c44570c07385cc554b57dd939a8c2e4f9857be69dba0f229feb582e078bedc9
This commit is contained in:
me@ow.nekobit.net 2022-04-12 02:48:45 +00:00
parent 78766ee1e1
commit 84e453e798
6 changed files with 1228 additions and 494 deletions

60
dist/treebird20.css vendored
View file

@ -14,6 +14,10 @@ body
{
background-color: unset;
font-family: Arial, Helvetica, sans-serif;
}
#main-page
{
width: 1000px;
border-top: 0 !important;
margin-left: auto;
@ -60,6 +64,7 @@ table.ui-table td
#content
{
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@ -71,49 +76,57 @@ table.ui-table td
border-top: 2px solid #fff;
background: linear-gradient(#fafafa, #f3f3f3);
width: 1000px;
display: flex;
align-items: center;
border-bottom: 2px solid #cacaca;
z-index: 999;
}
#navbar img
{
vertical-align: middle;
display: inline-block;
margin: 4px 3px 2px 10px;
margin: 4px 3px 5px 14px;
}
#navbar span.info
{
vertical-align: middle;
margin-left: 15px;
color: #202020;
/* font-variant: small-caps; */
font-size: 28px;
}
#navbar-right-container
{
width: 800px;
display: inline-block;
position: relative;
top: 9px;
padding-right: 8px;
align-items: center;
}
#navbar-right form
{
float: right;
}
#navbar-right
{
padding-right: 8px;
flex: 1;
flex-direction: row;
align-items: center;
display: inline-block;
float: right;
}
#login-header
{
vertical-align: middle;
float: left;
position: relative;
top: 4px;
margin-right: 15px;
text-decoration: none;
}
.alignend
{
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
#main
{
width: 608px;
@ -801,27 +814,36 @@ svg.in-reply-to-icon
****************/
.statusbox
{
display: flex;
display: block;
flex-direction: column;
padding: 5px;
}
.statusbox textarea
{
display: block;
width: 592px;
margin-bottom: 5px;
}
.statusbox .statusfooter
{
display: flex;
display: block;
flex-direction: row;
}
.statusbox .statusfooter-left
{
flex: 1;
display: inline-block;
}
.statusbox .statusfooter-right
{
float: right;
}
.status-interact label
{
display: block;

432
dist/treebird30.css vendored
View file

@ -1,432 +0,0 @@
/* Basic elements */
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #fafafa;
}
a
{
color: #aa0000;
}
/* Divs and wrappers */
#display-wrapper
{
display: flex;
justify-content: center;
}
#display
{
overflow: hidden;
background-color: #fdfdfd;
width: 1000px;
border-radius: 5px;
border: 1px solid #dadada;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}
#navbar
{
background-color: #fff;
display: flex;
align-items: center;
padding: 5px 8px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
#navbar img
{
display: inline-block;
margin: 2px 2px 2px 8px;
}
#navbar span.info
{
margin-left: 15px;
color: #202020;
font-variant: small-caps;
font-size: 28px;
}
#navbar-right
{
padding-right: 8px;
}
.alignend
{
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
div#content
{
display: flex;
}
div#content main
{
flex: 1;
min-width: 0;
min-height: 600px;
}
div#content aside
{
width: 180px;
max-width: 180px;
min-width: 180px;
}
#leftbar
{
border-right: 1px solid #cacaca;
}
#leftbar ul
{
margin: 0 3px;
padding: 5px 0;
}
#leftbar ul:not(:last-child)
{
border-bottom: 1px solid #e4e4e4;
}
#leftbar ul li
{
list-style-type: none;
}
/*************************************************
* BUTTONS *
*************************************************/
input[type=button], input[type=submit], .sidebarbtn, .btn
{
background: transparent;
margin: 4px;
border-radius: 3px;
border: 1px solid #fcfcfc00;
color: #000;
text-decoration: none;
}
input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover, .btn:hover,
input[type=button]:active, input[type=submit]:active, .sidebarbtn:active, .btn:active,
input[type=button]:focus, input[type=submit]:focus, .sidebarbtn:focus, .btn:focus
{
background: #ececec;
border: 1px solid #dadada;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
input[type=button], input[type=submit]
{
border: 1px solid #cacaca;
padding: 3px 15px;
}
.sidebarbtn
{
transition: .2s;
display: block;
padding: 8px 8px 8px 16px;
}
.sidebarbtn:hover,
.sidebarbtn:focus,
.sidebarbtn:active
{
transform: translate(0px, -2px);
}
#rightbar
{
border-left: 1px solid #cacaca;
}
/***************************
* Statuses *
**************************/
.status
{
display: flex;
margin: 7px;
}
.status:not(:last-child)
{
border-bottom: 2px dotted #cacaca;
}
.status .profile-picture
{
display: inline-block;
width: 52px;
min-width: 52px;
height: 52px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 4px;
margin-bottom: 5px;
}
.status .status-info
{
flex: 1;
display: flex;
margin: 0 5px 5px;
min-width: 0;
flex-direction: column;
}
.status .instance-info
{
font-style: italic;
text-decoration: none;
margin: 0 3px;
}
.status .poster-stats
{
display: flex;
}
.status .username
{
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.status .status-content
{
margin: 2px 0 0 0;
overflow-wrap: break-word;
}
.status .status-content p
{
margin: 2px 0 0 0;
}
.status-visibility
{
color: #808080;
}
/***************************
* Element Grouping *
**************************/
.group
{
padding: 0;
margin: 0 !important;
height: 28px;
}
/* These are a pain for some reason */
.group-inputbox
{
border: 1px solid #cacaca;
padding-left: 5px;
border-right: 0px;
height: 26px;
}
.group-left
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.group-right
{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/*************************
* Config *
************************/
#config-page
{
padding: 0 12px;
}
#config-page h1
{
padding-left: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #cacaca;
}
#config-page h3
{
margin-left: 15px;
}
#config-page ul
{
list-style-type: none;
padding-left: 15px;
}
/**********************
* Profiles *
**********************/
.header-btn
{
text-decoration: none;
color: #606060;
font-size: 14px;
}
.header-btn .btn-content
{
color: #000;
}
.btn.header-btn:hover span
{
color: #fff;
}
.header-btn span
{
display: block;
text-align: center;
}
.acct-banner
{
width: 100%;
display: flex;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 256px;
align-items: end;
}
.acct-pfp
{
position: relative;
z-index: 1;
border: 3px solid #cacaca;
background-color: #fff;
border-radius: 8px;
width: 100px;
height: 100px;
top: 38px;
left: 150px;
margin-top: -108px;
margin-left: -108px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.acct-header
{
display: flex;
padding-left: 160px;
background: linear-gradient(#fff, #f1f1f1);
border-bottom: 1px solid #cacaca;
background-color: #e8e8e8;
}
.acct-info-data
{
position: relative;
left: 160px;
top: -10px;
font-weight: bold;
text-shadow: 0px 2px 6px #000;
}
.acct-displayname
{
font-size: 26px;
display: block;
color: #fff;
}
.acct-username
{
font-size: 14px;
color: #dadada;
display: block;
font-weight: bold;
text-shadow: 0px 0px 5px #000;
}
.header-btn
{
display: inline-block;
padding: 8px 15px;
margin: 0;
}
.nobutton
{
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 8px 14px !important;
transition: .05s background-color, .05s color;
border-top-right-radius: 8px !important;
}
.status-interact form:not(:last-child) .nobutton
{
border-right: 1px solid #cacaca !important;
border-top-right-radius: 0px !important;
}
.status-interact form:first-child .nobutton
{
border-top-left-radius: 8px !important;
}
.nobutton:hover,
.nobutton:active,
.nobutton:focus
{
background-color: #cc5555 !important;
border: 0 !important;
color: #fff !important;
border-right: 1px solid #cacaca !important;
}
.status:not(:last-child)
{
border-bottom: 1px solid #cacaca;
}
.status .status-info
{
margin-bottom: 0;
}
.status-interact
{
margin-top: 8px;
margin-bottom: 0;
}

1141
dist/treebird40.css vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -8,8 +8,7 @@
<label for="cfgthemevar">Theme variant</label>
<select name="theme" id="cfgthemevar">
<option value="treebird20">treebird 2.0 - Default, simple theme</option>
<option value="treebird30">treebird 3.0 - Flat, modern theme</option>
<option value="treebird10">treebird Minimal - For netsurf, old browsers, minimal styling</option>
<option value="treebird40">treebird 4.0 - Flat, modern theme</option>
</select>
</li>
</ul>

View file

@ -7,44 +7,48 @@
<link rel="stylesheet" type="text/css" href="/%s%s.css">
</head>
<body>
<header id="navbar">
<a href="%s/"><img src="/treebird_logo.png" height="42"></a>
<span class="info">%s</span>
<div id="navbar-right" class="alignend">
%s
<!-- Searchbox -->
<form action="%s/search" method="get">
<input type="textbox" class="group group-left group-inputbox" placeholder="%s" id="searchbox" name="q"><!-- i hate HTML
--><input type="submit" class="btn group group-right" value="%s">
</form>
</div>
</header>
<table id="content" class="ui-table">
<!-- Navigation -->
<tr>
<td id="leftbar" class="sidebar">
<ul>
<li><a class="sidebarbtn %s" href="%s/">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/local/">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/federated/">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/notifications">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/lists">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/direct">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/config">%s</a></li>
</ul>
%s
</td>
<!-- Display for posts -->
<td id="main">
%s
</td>
<div id="main-page">
<header id="navbar">
<a href="%s/"><img src="/treebird_logo.png" height="42"></a>
<span class="info">%s</span>
<div id="navbar-right-container">
<div id="navbar-right">
%s
<!-- Searchbox -->
<form action="%s/search" method="get">
<input type="textbox" class="group group-left group-inputbox" placeholder="%s" id="searchbox" name="q"><!-- i hate HTML
--><input type="submit" class="btn group group-right" value="%s">
</form>
</div>
</div>
</header>
<table id="content" class="ui-table">
<!-- Navigation -->
<tr>
<td id="leftbar" class="sidebar">
<ul>
<li><a class="sidebarbtn %s" href="%s/">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/local/">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/federated/">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/notifications">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/lists">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/direct">%s</a></li>
<li><a class="sidebarbtn %s" href="%s/config">%s</a></li>
</ul>
%s
</td>
<!-- Display for posts -->
<td id="main">
%s
</td>
<!-- Notifications and such -->
<td id="rightbar" class="sidebar">
%s
</td>
</tr>
</table>
<!-- Notifications and such -->
<td id="rightbar" class="sidebar">
%s
</td>
</tr>
</table>
</div>
</body>
</html>

View file

@ -1,14 +1,14 @@
<form action="%s/status/create" method="post" enctype="multipart/form-data">
%s
<div class="statusbox">
<textarea name="content" placeholder="Just landed in N.Y." rows="5">%s</textarea>
<textarea name="content" placeholder="Just landed in N.Y." rows="5" tabindex="1">%s</textarea>
<div class="statusfooter">
<div class="statusfooter-left">
<input type="file" name="file" multiple>
<input type="file" name="file" tabindex="3" multiple>
<!-- Put text here -->
</div>
<div class="statusfooter-right">
<input type="submit" value="Post">
<input type="submit" value="Post" tabindex="2">
</div>
</div>
</div>