LINUX.ORG.RU
Галерея — Скриншоты  

Фиксированный заголовок для ЛОРа - 2

 , ,

Фиксированный заголовок для ЛОРа - 2

2

0

Доработанный стиль для LOR (кроме Firefox, нигде больше не проверял) с заполнением по ширине окна, плавающим боковым блоком на главной, нормализованным размером шрифтов, убранными тегами из трекера.
Ничего не перекрывается, как в прошлый раз (ответы, навигация в шапках тем).

На скриншоте вариация стиля для оформления Numix, браузер с расширением Classic Theme Restorer.

>>> CSS со скриншота

>>> LOR-Fixed_Tango для Stylish на userstyles.org

>>> Просмотр (1920x1080, 422 Kb)

★★★★★

Проверено: Falcon-peregrinus ()
Последнее исправление: DeadEye (всего исправлений: 4)

 ← 1 2 →
Ответ на: комментарий от Deleted

вот это вот:

.messages .msg:target {
	padding-top: 0.5rem !important;
}

ломает нормальное отображение ответного сообщения при переходе на него из уведомлений
а кнопка да, хорошо, ещё бы синеву эту заблочить при наведении курсора на кнопки и вообще все синие элементы (www.linux.org.ru/img/solved.png) подменить на другие (серые или оранжевые в стиле нумикса)

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

вот это вот:

.messages .msg:target {
padding-top: 0.5rem !important;
}

тем более оно там уже есть:

:target {
padding-top: 3.5em !important;
}

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

?
http://storage8.static.itmages.ru/i/16/0810/h_1470805804_4144738_8f2266c73d.png

При этом 

:target {
    padding-top: 3.5em !important;
}
у меня выглядит так
http://storage1.static.itmages.ru/i/16/0810/h_1470805816_3538989_448dfbd39d.png

Deleted
()
Последнее исправление: Its_me (всего исправлений: 1)
Ответ на: комментарий от amorpher

Он на три четверти твой :) 

hr {
	background-color: #3B4041;
	color: #354041;
	border: none;
	height: 1px;
}

div#hd {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	padding-bottom: 0.6rem !important;
	background: #2e3436;
	box-shadow: 0px 5px 8px black;
}
	
div#hd .menu {
	margin: 0px !important;
	padding-right: 2rem !important;
	padding-left: 2rem !important;
}
#loginGreating {
	margin-right: 0px !important;
}
#sitetitle {
	padding-left: 2rem !important;
}

/*
:target {
	padding-top: 3.5em !important;
}
*/
	
tr td img {
	display: inline-block;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	background: url("add.svg") no-repeat !important;
	width: 15px !important;
	height: 15px !important;
	padding-left: 15px !important;
}
	
.messages .msg:target {
	padding-top: 0.5em !important;
	border-color: #f0544c !important;
}
 
header {
	padding-top: 1em;
}
 
body {
	padding-top: 4.5em;
}
 
html, body, .code, code {
	font-size: 1em;
	max-width: none !important;
}
 
.menu a {
	text-decoration: none;
}
 
.menu, .infoblock, .boxlet,.messages .msg, .message-table .tag {
	border-radius: 0 !important;
}
 
#bd .forum table th, .btn-default, .message-table tr:hover {
	border-radius: 0 !important;
}
 
#bd .btn-selected,
#bd .btn-primary,
#bd .btn-danger {
	border-radius: 0 !important;
}

/*	
#bd .btn-selected:hover,
#bd .btn-primary:hover,
#bd .btn-danger:hover,
#bd .btn-default:hover {
	box-shadow: 0px 0px 3px 2px #f0544c !important;
}
 */
 
span.tag {
	display: none !important;
}
 
#bd .sign a, .stars {
	color: #f0544c !important;
}

#whois_userpic, .boxlet {
	border-radius: 0 !important;
}
И да, вот
http://storage3.static.itmages.ru/i/16/0810/h_1470809916_8110638_526dbe8774.png 
tr td img {
	display: inline-block;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	background: url("add.svg") no-repeat !important;
	width: 15px !important;
	height: 15px !important;
	padding-left: 15px !important;
}
https://css-tricks.com/replace-the-image-in-an-img-with-css/

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

где у меня 3.5em и у тебя 0.5em это тоже самое

padding-top лишние остальные, у меня только 2:

:target { padding-top: 3.5em !important; border: 1px solid #f0544c !important; }

body { padding-top: 4.8em; }

amorpher ★★★★★
() автор топика
Последнее исправление: amorpher (всего исправлений: 1)
Ответ на: комментарий от Deleted 
@namespace url(http://www.w3.org/1999/xhtml);

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

div#hd {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	background: #333;
	box-shadow: 0px 0px 5px black;
        padding-bottom: .5em !important;
	font-size: .8em;
}

:target {
	padding-top: 3.5em !important;
	border: 1px solid #f0544c !important;
}

body {
	padding-top: 4.8em;
}

html, body, .code {
	background: #3a3a3a !important;
	font-size: 1em;
	max-width: none !important;
	color: #ccc !important;
}

#sitetitle {
	background: #333 !important;
}

#loginGreating a {
	margin-right: 1.2em;
}

.menu, .infoblock, .boxlet,.messages .msg, .message-table .tag {
	background: #333 !important;
	border-radius: 0 !important;
}

#bd .forum table th, .btn-default, .message-table tr:hover {
	background: #333 !important;
	border-radius: 0 !important;
}

#bd .btn-selected {
	background: #f0544c !important;
	border-radius: 0 !important;
}

#bd .btn-primary {
	background: #3da640 !important;
	border-radius: 0 !important;
}

#bd .btn-danger {
	border-radius: 0 !important;
}

span.tag {
	display: none !important;
}

blockquote {
	border-left-color: #3a3a3a !important;
}

#whois_userpic, .boxlet {
	background: #333 !important;
	border-radius: 0 !important;
}

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

ОК. Кстати, понял, отчего у тебя 3.5em, но уже лучше пока покручу немножко.

Deleted
()
Последнее исправление: Its_me (всего исправлений: 1)

Кое-какие фиксы

Уголки у кнопок навигации 

.nav .page-number {
	border-radius: 0 !important;
}
Тени при наведении 
.nav a.page-number {
	border-color: #f0544c !important;
	color: #f0544c !important;
}
	
.nav a.page-number:hover {
	box-shadow: 0px 0px 3px 2px #f0544c !important;
}
Тени при наведении на другие кнопки 
#bd .btn-default:hover,
#bd .btn-danger:hover {
	box-shadow: 0px 0px 3px 2px #f0544c !important;
}
	
#bd .btn-primary:hover {
	box-shadow: 0px 0px 3px 2px #285AB1 !important;
}
#bd .btn-selected:hover {
	box-shadow: 0px 0px 3px 2px #D6D7D9 !important;
}
Для большинства кнопок и разлогина numix-овые, остальным под цвета tango

Подмена изображений fixed-чекбоксов 

tr td img,
.msg-top-header img {
	display: inline-block;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMTUiCiAgIGhlaWdodD0iMTUiCiAgIHZpZXdCb3g9IjAgMCAxNSAxNSIKICAgaWQ9InN2ZzIiCiAgIHZlcnNpb249IjEuMSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45MSByMTM3MjUiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImZpeGVkLnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjIyLjQiCiAgICAgaW5rc2NhcGU6Y3g9IjguMzcwNTM1NiIKICAgICBpbmtzY2FwZTpjeT0iNi45MzA3ODYxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJweCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIHVuaXRzPSJweCIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE2MDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iODc0IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNiIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMzcuMzYyMikiPgogICAgPGcKICAgICAgIGlkPSJnNDE3NiIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNzE0Mjg1NzIsMC4yMjMyMTQyOCkiPgogICAgICA8cmVjdAogICAgICAgICBpbmtzY2FwZTp0cmFuc2Zvcm0tY2VudGVyLXk9Ii0xLjM4MzkyODYiCiAgICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteD0iLTEuNDI4NTcxNCIKICAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMC43NDM5ODg0OCwtMC42NjgxOTI0NCwwLjY2ODE5MjQ0LDAuNzQzOTg4NDgsMCwwKSIKICAgICAgICAgeT0iNzc3LjcxMjI4IgogICAgICAgICB4PSItNjk4LjE0MzEzIgogICAgICAgICBoZWlnaHQ9IjYuNTE3ODU3MSIKICAgICAgICAgd2lkdGg9IjIuMjMyMTQyOSIKICAgICAgICAgaWQ9InJlY3Q0MTU5IgogICAgICAgICBzdHlsZT0iZmlsbDojZjA1NDRjO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZjA1NDRjO3N0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIC8+CiAgICAgIDxyZWN0CiAgICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteT0iLTAuMDQyNzk3NzMyIgogICAgICAgICBpbmtzY2FwZTp0cmFuc2Zvcm0tY2VudGVyLXg9IjAuMTM0NTA5MDIiCiAgICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAuNjcyNTM3NzksMC43NDAwNjI3OCwtMC43NDAwNjI3OCwwLjY3MjUzNzc5LDAsMCkiCiAgICAgICAgIHk9IjY5MC43NDE4OCIKICAgICAgICAgeD0iNzc3Ljg5NDc4IgogICAgICAgICBoZWlnaHQ9IjExLjg3NDk5NiIKICAgICAgICAgd2lkdGg9IjIuMjMyMTM5MyIKICAgICAgICAgaWQ9InJlY3Q0MTU5LTciCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmMDU0NGM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNmMDU0NGM7c3Ryb2tlLXdpZHRoOjA7c3Ryb2tlLW1pdGVybGltaXQ6MDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=") no-repeat !important;
	width: 15px !important;
	height: 15px !important;
	padding-left: 15px !important;
}
Сорри за этот смертоносный ужас. Ссылка на ман чуть выше в треде.

Появление тени при скролле 

div#hd {
        padding-bottom: 0.6rem !important;
}

div#hd,
body:before,
body:after {
	position: fixed;
	top: 0;
	width: 100%;
	background: #2e3436;
	z-index: 9999;
}
	
body:before,
body:after {
	height: 3.7em !important;
}
	
body:before {
        content: "";
        display: block;
        z-index: 9997;
        box-shadow: 0 5px 5px black;
}

body:after {
    	content: "";
    	display: block;
    	position: absolute;
    	background-color: #2e3436;
   	top: 10px;
   	height: 3.7em;
 	z-index: 9998;
}
Высота #sitetitle font-size + padding + margin
Стырено отсюда http://advertisingagency.mediao2.com/post/45262430296/fixed-header-with-shado...

Deleted
()
Последнее исправление: Its_me (всего исправлений: 1)
Ответ на: комментарий от Deleted

Тень при скролле

Обнаружилась проблемка, в которой можно убедиться, открыв любое изображение в галерее.
Однако, по видимому, все эти изображения имеют только два класса, таким образом решение может выглядеть так 

img.overflowingVertical,
img.shrinkToFit {
	z-index: 10000;
}
для полноты фикса можно еще какой-нибудь background сюда добавить.

Deleted
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
 ← 1 2 →
Скриншоты