a
/
gosora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
gosora/themes/tempra-cursive/public/main.css

501 lines
8.8 KiB
CSS
Raw Normal View History

Added a custom auto-link parser rather than using a regex. Added the Tempra Cursive theme. A fork of Tempra Simple which is less boxy and uses the cursive font. Improved the theme manager. Primary themes and variant themes (themes based upon another) are now seperate. plugin_bbcode has been modified to use the URL parsing facilities of the core rather than implementing them itself. git:// and ftp:// links are now supported by plugin_bbcode. Added the simple quote BBCode. Fixed a bug in route_like_topic where the no row error type isn't handled properly. Moved the rowhead class onto the right element in the topic template. Removed a couple of linebreaks in the topic template in favour of pure CSS. Converted some inline CSS in the topic template into new CSS classes. alerts.png contains some alert types for features which haven't been implemented yet, this is mainly to test if the alert system would work under the presence of those alert types. Think of this as my plans for the future.
2017-03-07 07:22:29 +00:00
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body
{
font-family: cursive;
padding-bottom: 8px;
}
/* Patch for Edge */
@supports (-ms-ime-align:auto) {
.user_content { font-family: Segoe UI Emoji, arial; }
}
ul
{
padding-left: 0px;
padding-right: 0px;
height: 28px;
list-style-type: none;
border: 1px solid #ccc;
background-color: white;
}
li
{
height: 26px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
text-transform: uppercase;
}
li:hover { background: rgb(250,250,250); }
li a
{
text-decoration: none;
color: #515151;
}
/*li a:hover { color: #7a7a7a; }*/
.menu_left
{
float: left;
border-right: 1px solid #ccc;
padding-right: 10px;
font-family: cursive;
padding-top: 2px;
}
.menu_right
{
float: right;
border-left: 1px solid #ccc;
padding-right: 10px;
}
.menu_alerts {
padding-left: 7px;
padding-top: 2px;
color: rgb(80,80,80);
}
.menu_alerts .alert_counter {
position:relative;
font-size: 9px;
top: -24px;
background-color: rgb(140,0,0);
color: white;
padding: 3px;
width: 14px;
left: 10px;
line-height: 8px;
border-radius: 20px;
padding-top: 2.5px;
height: 14px;
opacity: 0.8;
text-align: center;
}
.menu_alerts .alert_counter:empty {
display: none;
}
.selectedAlert {
background: white;
color: black;
}
.selectedAlert:hover {
background: white;
color: black;
}
.menu_alerts .alertList {
display: none;
text-transform: none;
}
.selectedAlert .alertList {
position: absolute;
top: 43px;
display: block;
background: white;
font-size: 10px;
line-height: 16px;
width: 135px;
right: calc(5% + 7px);
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.alertItem {
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.alertItem.withAvatar {
background-size: auto 56px;
background-repeat: no-repeat;
text-align: right;
padding-right: 12px;
height: 46px;
}
.alertItem.withAvatar:not(:last-child) {
border-bottom: 1px solid rgb(230,230,230);
}
.alertItem.withAvatar .text {
overflow: hidden;
text-overflow: ellipsis;
float: right;
width: calc(100% - 20px);
height: 30px;
}
.container
{
width: 90%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.rowblock
{
border: 1px solid #ccc;
width: 100%;
padding: 0px;
padding-top: 0px;
}
.rowblock:empty { display: none; }
.colblock_left
{
border: 1px solid #ccc;
padding: 0px;
padding-top: 0px;
width: 30%;
float: left;
margin-right: 8px;
}
.colblock_right
{
border: 1px solid #ccc;
padding: 0px;
padding-top: 0px;
width: 65%;
overflow: hidden;
word-wrap: break-word;
}
.colblock_left:empty { display: none; }
.colblock_right:empty { display: none; }
.rowhead { font-family: cursive; }
.rowitem
{
width: 100%;
padding-left: 8px;
padding-right: 8px;
padding-top: 17px;
padding-bottom: 12px;
font-weight: bold;
text-transform: uppercase;
background-color: white;
}
.rowitem.passive
{
font-weight: normal;
text-transform: none;
}
.rowitem:not(:last-child)
{
border-bottom: 1px dotted #ccc;
}
.rowitem a
{
text-decoration: none;
color: black;
}
.rowitem a:hover { color: silver; }
.opthead { display: none; }
.col_left
{
width: 30%;
float: left;
}
.col_right
{
width: 69%;
overflow: hidden;
}
.colitem
{
padding-left: 8px;
padding-right: 8px;
padding-top: 17px;
padding-bottom: 12px;
font-weight: bold;
text-transform: uppercase;
}
.colitem.passive
{
font-weight: normal;
text-transform: none;
}
.colitem a
{
text-decoration: none;
color: black;
}
.colitem a:hover { color: silver; }
.formrow
{
width: 100%;
background-color: white;
}
/* Clearfix */
.formrow:before, .formrow:after {
content: " ";
display: table;
}
.formrow:after { clear: both; }
.formrow:not(:last-child)
{
border-bottom: 1px dotted #ccc;
}
.formitem
{
float: left;
padding-left: 8px;
padding-right: 8px;
padding-top: 13px;
padding-bottom: 8px;
font-weight: bold;
}
.formitem:first-child { font-weight: bold; }
.formitem:not(:last-child) { border-right: 1px dotted #ccc; }
.formitem.invisible_border { border: none; }
/* Mostly for textareas */
.formitem:only-child { width: 100%; }
.formitem textarea
{
width: 100%;
height: 100px;
outline-color: #8e8e8e;
}
.formitem:has-child()
{
margin: 0 auto;
float: none;
}
button
{
background: white;
border: 1px solid #8e8e8e;
}
/* Topics */
.topic_status
{
text-transform: none;
margin-left: 8px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #E8E8E8; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
color: #505050; /* 80,80,80 */
border-radius: 2px;
}
.topic_status:empty { display: none; }
.username
{
text-transform: none;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 2px;
padding-bottom: 2px;
color: #505050; /* 80,80,80 */
font-size: 15px;
background: none;
}
button.username
{
position: relative;
top: -0.25px;
}
.username.level { color: #303030; }
.username.real_username { color: #404040; font-size: 17px; padding-right: 4px; }
.username.real_username:hover { color: black; }
.tag-text {
padding-top: 23px;
display: inline-block;
}
.post_item > .username {
padding-top: 23px;
display: inline-block;
}
.tag-mini
{
text-transform: none;
margin-left: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 1.5px;
padding-bottom: 0px;
color: #505050; /* 80,80,80 */
background-color: #FFFFFF;
border-style: dotted;
border-color: #505050; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
border-width: 1px;
font-size: 10px;
}
.post_item > .mod_button > button {
font-size: 15px;
color: #202020;
opacity: 0.7;
border: none;
}
.post_item > .mod_button > button:hover {
opacity: 0.9;
}
.postQuote {
border: 1px solid #ccc;
You can now link to a topic with #tid-{topicid} Shrunk the posts in Tempra Simple. Fixed a problem with the buttons for Tempra Simple on mobile. Tweaked the padding on the quotes. Fixed a browser parser bug where the browsers erroneously terminate a </p> upon finding a </div> produced by plugin_bbcode. Fixed a problem with plugin_bbcode where the HTML tags weren't getting closed.
2017-03-12 07:18:12 +00:00
background: white;
padding: 5px;
margin: 0px;
display: inline-block;
width: 100%;
margin-bottom: 8px;
Added a custom auto-link parser rather than using a regex. Added the Tempra Cursive theme. A fork of Tempra Simple which is less boxy and uses the cursive font. Improved the theme manager. Primary themes and variant themes (themes based upon another) are now seperate. plugin_bbcode has been modified to use the URL parsing facilities of the core rather than implementing them itself. git:// and ftp:// links are now supported by plugin_bbcode. Added the simple quote BBCode. Fixed a bug in route_like_topic where the no row error type isn't handled properly. Moved the rowhead class onto the right element in the topic template. Removed a couple of linebreaks in the topic template in favour of pure CSS. Converted some inline CSS in the topic template into new CSS classes. alerts.png contains some alert types for features which haven't been implemented yet, this is mainly to test if the alert system would work under the presence of those alert types. Think of this as my plans for the future.
2017-03-07 07:22:29 +00:00
}
Added numeric mentions. Username mentions will be automatically pre-parsed into numeric mentions in a future commit. Added #rid for linking to a specific post. Added a forum_exists function. Removed the null bytes from the posts The report system now uses #rid, #tid and numeric mentions instead of raw HTML. Improved the custom parser to take control characters into account. It also now parses items at the start of the post. Fixed the padding on the buttons on the profiles. #tid now takes into account whether the topic it links to exists.
2017-03-14 10:57:40 +00:00
.mention {
font-weight: bold;
}
Added a custom auto-link parser rather than using a regex. Added the Tempra Cursive theme. A fork of Tempra Simple which is less boxy and uses the cursive font. Improved the theme manager. Primary themes and variant themes (themes based upon another) are now seperate. plugin_bbcode has been modified to use the URL parsing facilities of the core rather than implementing them itself. git:// and ftp:// links are now supported by plugin_bbcode. Added the simple quote BBCode. Fixed a bug in route_like_topic where the no row error type isn't handled properly. Moved the rowhead class onto the right element in the topic template. Removed a couple of linebreaks in the topic template in favour of pure CSS. Converted some inline CSS in the topic template into new CSS classes. alerts.png contains some alert types for features which haven't been implemented yet, this is mainly to test if the alert system would work under the presence of those alert types. Think of this as my plans for the future.
2017-03-07 07:22:29 +00:00
.level {
float: right;
color: #505050;
border-left: none;
padding-left: 3px;
padding-right: 5px;
font-size: 16px;
}
.show_on_edit { display: none; }
.alert
{
display: block;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
.alert_success
{
display: block;
padding: 5px;
border: 1px solid A2FC00;
margin-bottom: 10px;
background-color: DAF7A6;
}
.alert_error
{
display: block;
padding: 5px;
border: 1px solid #FF004B;
margin-bottom: 8px;
background-color: #FEB7CC;
}
.prev_button, .next_button {
position: fixed;
top: 50%;
font-size: 30px;
border-width: 1px;
background-color: #FFFFFF;
border-style: dotted;
border-color: #505050;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
z-index: 100;
}
.prev_button a, .next_button a {
line-height: 28px;
margin-top: 2px;
margin-bottom: 0px;
display: block;
text-decoration: none;
color: #505050;
}
.prev_button { left: 14px; }
.next_button { right: 14px; }
@media (max-width: 880px) {
li { height: 25px; font-size: 15px; padding-left: 7px; }
ul { height: 26px; margin-top: 8px; }
.menu_left { padding-right: 7px; }
.menu_right { padding-right: 7px; }
body { padding-left: 4px; padding-right: 4px; margin: 0px !important; width: 100% !important; height: 100% !important; overflow-x: hidden; }
.container { width: auto; }
.selectedAlert .alertList { top: 33px; right: 4px; }
}
@media (max-width: 810px) {
li { font-weight: normal; text-transform: none; }
.rowitem { text-transform: none; }
/*.rowhead { font-family: arial; }
.menu_left { font-family: arial; }*/
body { font-family: arial; }
.level { font-size: 17px; }
}
@media (max-width: 620px) {
li
{
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
height: 23px;
}
ul { height: 24px; }
.menu_left { padding-right: 5px; }
.menu_right { padding-right: 5px; }
.menu_create_topic { display: none;}
.menu_alerts { padding-left: 4px; padding-right: 4px; }
.hide_on_mobile { display: none; }
.prev_button, .next_button { top: auto; bottom: 5px; }
}
@media (max-width: 470px) {
.menu_overview { display: none; }
.menu_profile { display: none; }
.hide_on_micro { display: none; }
.post_container {
overflow: visible !important;
}
.post_item {
background-position: 0px 2px !important;
background-size: 64px 64px !important;
padding-left: 2px !important;
min-height: 96px;
position: relative !important;
}
.post_item > .user_content {
margin-left: 75px !important;
width: 100% !important;
}
.post_item > .mod_button {
float: right !important;
margin-left: 2px !important;
position: relative;
top: -14px;
}
.post_item > .mod_button > button {
opacity: 1;
}
.post_item > .real_username {
position: absolute;
top: 70px;
float: left;
margin-top: -2px;
padding-top: 3px !important;
margin-right: 2px;
width: 60px;
font-size: 15px;
text-align: center;
}
.container { width: 100% !important; }
}