openmw.org

Posted: **09 Apr 2016, 05:31**

Not sure how many people will be interested in this, but i thought i'd share it.

I made a custom theme for the bug tracker, i've only tested it in chrome so far but let me know if there are any bugs. You likely need a more modern browser for everything to work.

You can preview the theme by copying and pasting the CSS code into a browser plugin like Stylish. I have also attached some screenshots.

Changes:
* Update to make most clickable links stand out more and also fix some minor bugs.
* Fixed a few more minor bugs.
* Fixed visual style for Versions controller.
* Made some headings more readable and made context menu's in the top right of the page more visible while also 'hiding' them on pages where they are there but empty, misc visual changes
* More minor changes and fixes
* Tweaked the logo position
* Updated the style of 'closed' issues so their row(s) in the issue table are grey.
* Improved readability of the revision details page

Spoiler: Show

Code: Select all

body {
	background: url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
	overflow-x:hidden;
}

#wrapper,
#main,
#content {
	background:none;
}

#content {
	position:relative;
	z-index:8;
}

#content::before {
	content:"";
	position:absolute;
	top:0;
	left:100%;
	bottom:0;
	width:50%;
	z-index:8;
	background:rgba(255, 255, 255, 0.298);
	/* Dark Sidebar */
	/* background:rgba(0, 0, 0, 0.298); */
}

#content > h2 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    margin-bottom: 15px;
}

a, a:link, a:visited {
	/* Make Links Stand Out More */
	color: #CD3700;
	/* Old Link Color */
	/* color: #48361d; */
}

/* Maintain Old Link Color For Some Elements */
table.list thead a, 
table.list thead a:link, 
table.list thead a:visited,
span.pagination a, 
span.pagination a:link, 
span.pagination a:visited,
article.version-article .version a, 
article.version-article .version a:link, 
article.version-article .version a:visited,
.contextual a, 
.contextual a:link, 
.contextual a:visited,
table.list.entries tbody tr.entry td.filename a, 
table.list.entries tbody tr.entry td.filename a:link, 
table.list.entries tbody tr.entry td.filename a:visited,
table.list.issues tbody tr.issue td.subject a, 
table.list.issues tbody tr.issue td.subject a:link, 
table.list.issues tbody tr.issue td.subject a:visited,
.changeset-changes li.change a, 
.changeset-changes li.change a:link, 
.changeset-changes li.change a:visited {
	color: #48361d;
}

a:hover, a:active {
	color: #CD3700;
}

div.issue,
#history,
.contextual,
.box,
article.version-article header,
article.version-article .version-overview,
div#activity > dl,
#query_form_with_buttons,
span.pagination,
dl#search-results,
#projects-index ul.projects li.root,
body.controller-versions #roadmap .version-overview,
body.controller-repositories.action-revision #content .details,
body.controller-repositories.action-revision #content > p {
	box-shadow:0px 4px 9px -4px rgba(0,0,0,0.65);
}

input[type=text], 
textarea {
    border:1px solid #bbb;
    outline:none;
    padding:5px;
}

input[type=text]:focus, 
textarea:focus {
    border:1px solid #CD3700;
}

.tabular label {
  margin-top: 4px;
}

.box {
	border-radius: 0;
}

/* Header */

#header > h1 {
	position:relative;
	color:rgba(0,0,0,0);
}

#header > h1:before {
	content: '';
	background: url(https://forum.openmw.org/styles/openmw/theme/images/logo.png) no-repeat top left;
	position: absolute;
	top: -2px;
	left: 0;
	bottom: 0;
	height: 46px;
	width: 211px;
	background-size:211px 46px;
}

#header {
	background: url(https://forum.openmw.org/styles/openmw/theme/images/header.jpg) no-repeat;
	background-size:cover;
}

#top-menu{
	background:rgba(0, 0, 0, 0.7);
}

#quick-search {
	background: rgba(0, 0, 0, 0.298);
	padding: 5px;
	z-index:8;
	position:relative;
}

/* Header : Main Menu */

#main-menu li a {
	text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}

#main-menu li a:hover {
	background: rgba(0, 0, 0, 0.298);
	color: #fff;
}

#main-menu li a.selected, #main-menu li a.selected:hover {
	background: url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
	color:#48361d;
	text-shadow:none;
}

/* Footer */

#footer {
	background:rgba(0, 0, 0, 0.7);
}

#footer a, 
#footer a:link, 
#footer a:visited {
	color:#FFF;
}

/* Sidebar */

#sidebar h3,
#content h1, h2, h3, h4,
a#toggle-completed-versions {
	color: #48361d;
}

a#toggle-completed-versions {
	font-weight: bold;
}

/* Table : Lists */

table.list tbody tr:nth-child(odd) {
	background-color: #dfd3c4;
}

table.list tbody tr:nth-child(even) {
	background-color: #e4dcd1;
}

table.list tbody tr,
table.list thead tr {
	border-top:1px solid #b6aba0;
}

table.list {
	border:1px solid #b6aba0;
	border-top:none;
}

table.list tbody tr:hover {
	background:#F3F3F3;
}

table.list caption {
	font-weight:bold;
	color:#48361d;
}

table.list td.subject {
	position: relative;
	z-index: 1;
}

div.changeset-changes > ul {
	position: relative;
	border:1px solid #b6aba0;
	border-top:none;
}

div.changeset-changes .change {
	background-color: #dfd3c4;
	background-position: 3px 2px;
	padding-left:23px;
}

div.changeset-changes .change > a {
	line-height: 20px;
}

div.changeset-changes .change:before {
	content:'';
	position: absolute;
	width: 100%;
	height:1px;
	left: 0;
	right: 0;
	background:#b6aba0;
}

body.controller-versions table.list td.subject a.issue.closed:after {
	content:'';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
}

body.controller-versions table.list tbody tr:nth-child(odd) td.subject a.issue.closed:after {
	background-color: #c0c0c0;
}

body.controller-versions table.list tbody tr:nth-child(even) td.subject a.issue.closed:after {
	background-color: #ccc;
}


body.controller-versions table.list tbody tr:hover td.subject a.issue.closed:after {
	background-color: #ddd;
}

/* Issues */

div#activity dd span.description, #search-results dd span.description,
div.journal ul.details {
	color: #333;
}

/* Issues : Header */ 

article.version-article {
	position:relative;   
}

article.version-article header,
article.version-article .version-overview {
	z-index:8;   
	position:relative;
}

article.version-article header {
	padding:5px 5px 5px 5px;
}

article.version-article .version-overview,
body.controller-versions #roadmap .version-overview {
	padding:5px 5px 5px 5px;
}


article.version-article header,
article.version-article .version-overview,
body.controller-versions #roadmap .version-overview,
body.controller-repositories.action-revision #content .details,
body.controller-repositories.action-revision #content > p,
body.controller-repositories.action-revision #content #changes-legend {
	background:#f6f6f6;
}

article.version-article header .version,
article.version-article .version-overview > p,
body.controller-versions #roadmap .version-overview .progress-info,
body.controller-repositories.action-revision #content > p {
	margin:0;
}

body.controller-repositories.action-revision #content > p:last-of-type {
	box-shadow:none;
}

body.controller-repositories.action-revision #content > .details > p {
	margin-bottom: 0;
	padding-bottom:10px;
}

article.version-article .version-overview > p.percent,
article.version-article .version-overview > p.progress-info,
body.controller-versions #roadmap .version-overview .progress-info,
body.controller-repositories.action-revision #content > p,
body.controller-repositories.action-revision #content .details,
body.controller-repositories.action-revision #content #changes-legend {
	padding:5px;

}

body.controller-repositories.action-revision #content > h3 {
	margin-top:10px;
}

body.controller-versions #roadmap .version-overview {
    margin-bottom:10px;
}

/* Issues : Progress Bar */

table.progress td.todo {
	background:#ddd none repeat scroll 0%;
    box-shadow: inset 2px 2px 7px -3px rgba(0,0,0,0.5);
}

/* Issues : History */ 

#history {
	padding:5px;
	background:#FFF;
}

div#issue-changesets {
	margin-top: 5px;
	margin-right: 5px;
}

a.issue.closed, a.issue.closed:link, a.issue.closed:visited {
	color: #777;
}

/* Activity */

div#activity > dl {
	background: #fff;
	padding-left: 2em;
	margin-left: 0;
	padding-top: 1em;
	margin-top: 0;
	padding-right: 1em;
	padding-bottom: 1em;
}

/* Forms & Controls */

fieldset legend {
	padding-bottom: 20px;
	background: #f6f6f6;
	margin-left: -6px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
}

.contextual {
	background: #fff;
	padding-top: 5px;
	margin-top: 0;
	padding-bottom: 5px;
	padding-right: 5px;
}

#query_form_with_buttons {
	background:#FFF;
	padding:5px;
	margin:0 3px 1.2em 3px;
}

#query_form_with_buttons .buttons {
	margin-bottom:0;
}

div.issue .contextual,
body.controller-issues.action-index #content > .contextual:first-of-type,
body.controller-versions.action-index #content > .contextual:first-of-type,
body.controller-versions.action-show #content > .contextual:first-of-type,
body.controller-projects.action-show #content > .contextual:first-of-type,
body.controller-users.action-show #content > .contextual:first-of-type,
#history .journal .wiki .contextual {
	box-shadow:none;
	background: none;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}

/* Pagination */

span.pagination {
	display: block;
	background: #FFF;
	padding: 5px;
	margin-top: 5px;
}

.pagination ul.pages li.current {
	background-color: rgba(0, 0, 0, 0.7);
	border-color: rgba(0, 0, 0, 0.7);
}

.pagination ul.pages li {
	margin-bottom:0;
}

/* Flyout Menu */

.flyout-menu {
	color: #48361d;
	background-color: #e4dcd1;
	z-index: 10;
	border-left:1px solid #b6aba0;
}

.flyout-menu__search {
	border-bottom:1px solid #b6aba0;
	background: #dfd3c4;
}

.flyout-menu__avatar img.gravatar {
	border-right: 1px solid #b6aba0;
}

.flyout-menu h3 {
	border-top: 1px solid rgba(0, 0, 0, 0.7);
	border-bottom: 1px solid rgba(0, 0, 0, 0.7);
	background-color: rgba(0, 0, 0, 0.7);
}

.flyout-menu ul li a {
	border-top:none;
	border-bottom:1px solid #b6aba0;
}

.flyout-menu ul li a:hover,
.flyout-menu__avatar:hover {
	background:rgba(255,255,255,0.5);
}

.flyout-menu > div.flyout-menu__avatar {
	border-top:none;
	margin-top:1px;
	padding-left:0;
}

.flyout-menu .flyout-menu__sidebar span.icon,
.flyout-menu .flyout-menu__sidebar > p {
	color:#48361d;    
}

body.controller-versions .flyout-menu .flyout-menu__sidebar > p:last-of-type {
	display: none;
}

/* Search Results */

dl#search-results {
	background:#FFF;
	padding:0;
	margin-left:0;
	border:1px solid #b6aba0;
	border-top:none;
}

dl#search-results > dt {
	border-top:1px solid #b6aba0;
	background-position:5px 5px;
	padding-top:5px;
	padding-left:25px;
	padding-right:5px;
}

dl#search-results > dd {
	padding-right:5px;
	padding-left:25px;
	padding-bottom:5px;
}

/* Projects Page */

#projects-index ul.projects li.root {
	padding: 6px;
	margin-bottom: 10px;
	background-color: #f6f6f6;
	color: #505050;
	line-height: 1.5em;
	border: 1px solid #e4e4e4;
	word-wrap: break-word;
}

Posted: **09 Apr 2016, 05:33**

More Screenshots

Posted: **09 Apr 2016, 06:28**

Ooooh nice! Great work!

Posted: **09 Apr 2016, 06:58**

It seems to work for me in Firefox as a user style.

Only suggestion would be to put the code in a

Code: Select all

@-moz-document domain(bugs.openmw.org) {
   ...
}

block so it only affects the bug tracker (maybe there's another way to do that?).

Posted: **09 Apr 2016, 07:04**

Chris wrote:It seems to work for me in Firefox as a user style. Only suggestion would be to put the code in a
Code: Select all
@-moz-document domain(bugs.openmw.org) {
   ...
}
block so it only affects the bug tracker (maybe there's another way to do that?).

did you change the domain in your user style to bugs.openmw.org instead of openmw.org?

Posted: **09 Apr 2016, 08:06**

openmwfan27 wrote:did you change the domain in your user style to bugs.openmw.org instead of openmw.org?

I didn't see any option for that, and the code applied to all pages when I made a new user style with it. So I asked around and was told about the @-moz-document domain thing.

Posted: **10 Apr 2016, 02:42**

Chris wrote:
openmwfan27 wrote:did you change the domain in your user style to bugs.openmw.org instead of openmw.org?
I didn't see any option for that, and the code applied to all pages when I made a new user style with it. So I asked around and was told about the @-moz-document domain thing.

Just checked out the user styles manager for firefox, you're right it looks like it's done differently there, i did not know about

Code: Select all

@-moz-document domain

, Thanks for letting me know

I mention the bugs.openmw.org vs openmw.org because i use stylish for this in browsers normally and it has an input for the domain to apply the theme to, when i first made the theme, even though i created the new theme while browsing the bugs.openmw.org site it set the domain to openmw.org on the created theme, perhaps a bug or something, but yeah it caught me out with the main site being effected by the theme too.

Posted: **10 Apr 2016, 08:03**

NIce, I'll try to add it as an additional theme

Posted: **10 Apr 2016, 08:36**

lgromanowski wrote:NIce, I'll try to add it as an additional theme

Sounds awesome

Posted: **15 Apr 2016, 13:09**

Just an update to anyone who used the theme when it was first posted, there have been some fixes and other changes since then and the screenshots are a little out-dated. The initial post gets updated when i make changes to the theme.

openmw.org

OpenMW Bug Tracker Theme

OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme

Re: OpenMW Bug Tracker Theme