LINUX.ORG.RU
Форум — Linux-org-ru  

CSS cтиль форума Solarized(кастомный )

 , , ,


0

2

На основе стиля Solarized создал свой кастомный CSS стиль для сайта linux.org.ru

Найдёте ошибки или есть идей - пишите!

Использован плагин Stylus для браузера Firefox

Использованно расширение lorify-ng для Firefox

описание здесь

превьюшка-главная

превьюшка-трекер

превьюшка-ввод сообшения

/* ==UserStyle==
@name         LOR Solarized (Dark or Light versions)
@namespace    USO Archive
@author       falcon-peregrinus
@description  Solarized theme for Linux.Org.Ru. Has Dark and Light versions. Compitable with Tango.
@version      20150704.08.38
@license      NONE
@preprocessor uso
@advanced dropdown light-dark "Color gamma" {
    light "Light*" <<<EOT @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("linux.org.ru") {
    html, body, .msg {
        background-color: #fdf6e3 !important;
        color: #657b83 !important;
    }
    #bd h1, #bd h2, .icon-tag, .stars, .icon-tag-color, .icon-user-color, .icon-pin-color, .icon-reply-color {
        color: #657b83 !important;
    }
    .boxlet, .infoblock, #whois_userpic, thead, .forum tr:hover, span.tag, .page-number {
        background-color: #eee8d5 !important;
        color: #657b83 !important;
		border-radius: 5px 45px 5px 45px;
		-webkit-box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
		-moz-box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
		box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
    }
    .menu, #hd {
                text-shadow: 2px 2px 5px #888;
        background-color: #93a1a1 !important;
    }
    #hd .menu a:hover, #loginGreating a:hover {
        text-shadow: 2px 2px 5px #888;
        color: #fdf6e3 !important;
    
    }
    #sitetitle {
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18, -28px -29px 0px rgba(206,89,55,0);
        color: #fdf6e3 !important;
    }
    .menu a, #loginGreating a {
        color: #586e75 !important;
        text-decoration: none !important;
    }
}
	
a{
  color: #b58900 !important;
}

a:visited {
  color: #614700 !important;
}

a:hover {
  color: #B52D00 !important;
}

a:active {
  color: #B52D00 !important;
}	
    .stars {
        color: #2aa198 !important;
    }
    .user-remark, .message-table a.secondary {
        color: #839496 !important;
    }
    .msg {
        border-radius: 0px !important;
        border-bottom: 1px solid #657b83 !important;
    }
    .msg:target {
        border-color: #dc322f !important;
    }
    .entry-body .msg {
        border-bottom: none !important;
    }
    .btn, .btn a, #bd .nav li a {
        background-color: #1A4D56 !important;
        color: #586e75 !important;
		border-radius: 45px 5px 45px 5px;
    }
    #bd .nav li a.current {
        background-color: #1A4D56 !important;
        color: #586e75 !important;
		border-radius: 45px 5px 45px 5px;
    }
	#bd .nav li a.visited {
        background-color: #1A4D56 !important;
        color: #58756D !important;
		border-radius: 45px 5px 45px 5px;
    }
    .btn-danger {
        background: #dc322f !important;
        color: #fdf6e3 !important;
    }
    .fav-buttons a {
        color: #93a1a1 !important;
    }
    .fav-buttons .selected [class^="icon-"] {
        color: #b58900 !important;
    }

    pre code, .code {
	background: #eee8d5 !important;
	color: #657b83 !important;
	display: block !important;
	padding: 0.5em !important;
    }
    pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc,pre .pragma {
	color: #93a1a1 !important;
	font-style: italic !important;
    }
    pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {
	color: #859900 !important;
    }
    pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {
	color: #2aa198 !important;
    }
    pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function {
	color: #268bd2 !important;
    }
    pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {
	color: #b58900 !important;
    }
    pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo {
	color: #cb4b16 !important;
    }
    pre .deletion {
	color: #dc322f !important;
    }
    pre .tex .formula {
	background: #eee8d5 !important;
    }

    span.code {
        display: inline !important;
        padding: 0 !important;
    }
} EOT;
    dark "Dark" <<<EOT @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("linux.org.ru") {
    html, body, .msg {
        background-color: #002b36 !important;
        color: #839496 !important;
    }
    #bd h1, #bd h2, .icon-tag, .stars, .icon-tag-color, .icon-user-color, .icon-pin-color, .icon-reply-color {
        color: #839496 !important;
    }
    .boxlet, .infoblock, #whois_userpic, thead, .forum tr:hover, span.tag, .page-number {
        background-color: #073642 !important;
        color: #839496 !important;
		border-radius: 5px 45px 5px 45px;
		-webkit-box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
		-moz-box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
		box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
    }
    .menu, #hd {
				background-color: #1A4D56 !important;
				-webkit-box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
				-moz-box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
				box-shadow: 7px 7px 10px 0px rgba(95, 50, 125, 0.2);
				border: 5px solid #1A4D56;
				border-radius: 45px 5px 45px 5px;
    }
	#topProfile {
				float: right;
				font-size: 1.1em;
				margin-top: 1rem;
				margin-right: 0.8rem;		
				color: #B52D00;
				text-shadow: 0 0 10px #FFFFFF;
}
	.messages .msg  {
				-webkit-border-radius: 45px 5px 45px 5px;
				-moz-border-radius: 45px 5px 45px 5px;
				border-radius: 45px 5px 45px 5px;
}
	.messages .msg:target  {
				-webkit-border-radius: 45px 5px 45px 5px;
				-moz-border-radius: 45px 5px 45px 5px;
				border-radius: 45px 5px 45px 5px;
}
    #hd .menu a, #loginGreating a {
				color: #839496 !important;
    }   
   #hd .menu a:hover, #loginGreating a:hover {
				color: #B52D00 !important;
    }
    #sitetitle {
color: #FFFFFF;
text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
    }
    .menu a, #loginGreating a {
        color: #93a1a1 !important;
        text-decoration: none !important;
    }
	textarea {
						background-color: #1A4D56 !important;
						border-radius: 15px 15px 15px 15px;
						border-color: #657b83 !important;
		}	
		input	{
						background-color: #1A4D56 !important;
						border-radius: 15px 15px 15px 15px;
						border-color: #657b83 !important;
		}			
a {
  color: #b58900 !important;
}

a:visited {
  color: #614700 !important;
}

a:hover {
  color: #B52D00 !important;
}

a:active {
  color: #B52D00 !important;
}
    .stars {
        color: #36AB88 !important;
    }
    .user-remark, .message-table a.secondary {
        color: #657b83 !important;
    }
    .msg {
        border-radius: 0px !important;
        border-bottom: 1px solid #839496 !important;
    }
    .msg:target {
        border-color: #dc322f !important;
    }
    .entry-body .msg {
        border-bottom: none !important;
    }
    .btn, .btn a, #bd .nav li a {
        background-color: #1A4D56 !important;
        color: #586e75 !important;
        border-color: #657b83 !important;
		border-radius: 45px 5px 45px 5px;
    }
    #bd .nav li a.current {
        background-color: #1A4D56 !important;
        color: #586e75 !important;
		border-radius: 45px 5px 45px 5px;
    }
	#bd .nav li a.visited {
        background-color: #1A4D56 !important;
        color: #58756D !important;
		border-radius: 45px 5px 45px 5px;
    }
    .btn-danger {
        background: #dc322f !important;
        color: #002b36 !important;
    }
    .fav-buttons a {
        color: #586e75 !important;
    }
    .fav-buttons .selected [class^="icon-"] {
        color: #b58900 !important;
    }

    pre code, .code {
	background: #073642 !important;
	color: #839496 !important;
	display: block !important;
	padding: 0.5em !important;
    }
    pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc,pre .pragma {
	color: #586e75 !important;
	font-style: italic !important;
    }
    pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {
	color: #859900 !important;
    }
    pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {
	color: #2aa198 !important;
    }
    pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function {
	color: #268bd2 !important;
    }
    pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {
	color: #b58900 !important;
    }
    pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo {
	color: #cb4b16 !important;
    }
    pre .deletion {
	color: #dc322f !important;
    }
    pre .tex .formula {
	background: #073642 !important;
    }

    span.code {
        display: inline !important;
        padding: 0 !important;
    }
}
 EOT;

}
==/UserStyle== */
/*[[light-dark]]*/


Последнее исправление: antonio-an (всего исправлений: 10)
← Stylus правки в CSS Лора
Возможность удаления собственных комментариев. →

Не мешал бы скриншот-превьюшка.

CrX ★★★★★
()

Добро пожаловать в 90-е? :)

У меня вот такой на основе Waltz: https://i.ibb.co/XkbhCWBD/Screenshot-from-2025-12-30-19-35-51.png

Кривоват, особенно, на главной, но я ей почти не пользуюсь. Трекер выглядит вот так: https://i.ibb.co/jPXPwfS1/Screenshot-from-2025-12-30-19-40-53.png

/* ==UserStyle==
@name         My_LOR
@namespace    USO Archive
@author       blogdron (BLOGDRON) and Me (another)
@description  Форк - доработанная версия этого https://userstyles.org/styles/117750/lor-white-tango    - Исправлено отображение трекера по сравнению с оригиналом  - Может ещё косяки есть не знаю
@version      20200204.07.02
@license      CC0-1.0
@preprocessor uso
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(linux.org.ru) {


    html,
    body,
    .code,
    code {
        background: #e5e9f0 !important;
        color: #000 !important;
    }
    #bd a.tag {
        color: #81a1c1;
    }
       
    .message-table .tag {
        color: #000;
        background: #d4d8df;
    }
    .boxlet {
        background-color: #e5e9f0 !important;
        border: 1px solid #81a1c1;
        border-radius: 1px;
    }
    a {
        color: #000 !important;
        }
    a.visited {
        color: #81a1c1 !important;
    }
    .infoblock {
        background-color: #e5e9f0 !important;
    }
    .messages .msg {
        background: none repeat scroll 0% 0% #e5e9f0;
    }
    .nav-buttons a {
        color: #e5e9f0 !important;
    }
    #bd .btn {
        border: 1px solid #81a1c1;
        color: #81a1c1;
    }
    .page-number {
        border-radius: 5px;
        background-color: #e5e9f0;
        border: 1px solid #81a1c1;            
    }
    #bd .forum table th {
        background: #d4d8df !important;
        border: 1px solid #81a1c1;
    } 
    #bd .forum table th:first-child {
    border-left: 1px solid #81a1c1;
    }
    #bd .forum table th:last-child {
    border-right: 1px solid #81a1c1;
    }
    #bd .forum table tbody td {
        background: #e5e9f0;
        border: 1px solid #81a1c1;        
    }
    .message-table tr:hover {
        background: #e5e9f0 !important;
    }
    .message-table a.secondary {
        color: #000 !important;
    }
    #sitetitle {
        color: #000 !important;
    }
    h2 a {
        color: #000!important;
    }
    #bd h1,
    #bd h2 {
        color: #000;
    }
    .menu a {
        color: #000 !important;
        text-decoration: underline;
    }
    .tracker a {
        background-color: #e5e9f0;
    }

    .tracker a:hover {
        background-color: #e5e9f0;
    }

    .tracker-item .tracker-src {
        color: #000;
    }

    #loginGreating a {
        color: #000 !important;
        text-decoration: none;
    }
    #bd .btn-selected {
        background-color: #d4d8df;
        color: #e5e9f0;
    }
    #bd .btn-default {
        background-color: #e5e9f0;
    }    
    #whois_userpic {
        background: none repeat scroll 0% 0% #e5e9f0
    }

    #bd .btn-primary {
        background-color: #81a1c1;
        color: #e5e9f0;
    }
    #bd .btn-danger {
        background-color: #cc3333;
        color: #e5e9f0;
    }
    img {
        filter: contrast(100%) brightness(100%);
    }
    .stars {
        color: #469432;
    }
    .group-label {
        background-color: #d4d8df;
    }
    .fav-buttons .selected[class^="icon-"] {
        color: #c33;
    }
    .messages .msg:target {
        border: 1px solid #c33;
    }
    .user-remark {
        color: #000;
    }
    .messages .msg {
        border: 1px solid #81a1c1;
    }
    
    
    /* your code goes here */
    
   .news {
        background: #e5e9f0;
        border: 1px solid #81a1c1;
    }
    #commentForm textarea {
        background: #e5e9f0;
    }
    .infoblock {
        border: 1px solid #81a1c1;
    }
    .user-tag {
        background-color: #81a1c1;
        color: #000;
    }
    .input-lg {
        background-color: #e5e9f0;
    }
    input, textarea {
        background-color: #e5e9f0;
    }
        
}
another ★★★★★
()
Последнее исправление: another (всего исправлений: 1)

У меня от Solirized всегда вылезали глаза. Не знаю что конкретно с ним не так.

MoldAndLimeHoney ★★
()
Ответ на: комментарий от PunkPerson

У меня открываются. Сообщаю на всякий, чтоб ТС лишнего не думал и не искал причину у себя. )

krasnh ★★★★★
()

Понравилось, но

превьюшка-ввод сообшения

белый фон ослепляет. Его совсем нельзя поменять?

Evenik ★★
()
Ответ на: комментарий от Evenik

Понравилось, но

превьюшка-ввод сообшения

белый фон ослепляет. Его совсем нельзя поменять?

Да я тоже об этом думал. Скора сделаю.

antonio-an
() автор топика
Ответ на: комментарий от Evenik

Понравилось, но

превьюшка-ввод сообшения

белый фон ослепляет. Его совсем нельзя поменять?

Сделал.

antonio-an
() автор топика
Последнее исправление: antonio-an (всего исправлений: 1)
Для того чтобы оставить комментарий войдите или зарегистрируйтесь.
← Stylus правки в CSS Лора
Linux-org-ru
Возможность удаления собственных комментариев. →