DEV: Упорядочивание css (1 часть)
This commit is contained in:
Evg
parent
9ec0d1d446
commit
aa49b0cf12
|
|
@ -43,11 +43,9 @@
|
|||
<div class="box bg-lightgray">.box .bg-lightgray</div>
|
||||
<div class="box bg-beige">.box .bg-beige</div>
|
||||
<div class="box bg-lightyellow">.box .bg-lightyellow</div>
|
||||
<div class="box bg-purple">.box .bg-purple</div>
|
||||
<div class="box bg-red-200">.box .bg-red-200</div>
|
||||
<div class="box bg-green white">.box .bg-green</div>
|
||||
<div class="box bg-black white">.box .bg-black</div>
|
||||
<div class="box bg-teal white">.box .bg-teal</div>
|
||||
<div class="box bg-blue white">.box .bg-blue</div>
|
||||
<div class="box bg-blue-100">.box .bg-blue-100</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
AddDefaultCharset UTF-8
|
||||
|
||||
php_value session.cookie_httponly 1
|
||||
php_value session.cookie_secure 1
|
||||
# Remove the comment if you know what it is.
|
||||
# php_value session.cookie_httponly 1
|
||||
# php_value session.cookie_secure 1
|
||||
|
||||
RewriteCond %{HTTP_HOST} ^www\.(.*)$
|
||||
RewriteRule ^(.*)$ http://%1/$1 [L,R=301]
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +1,11 @@
|
|||
let scrolled;let dHeader=document.querySelector(".d-header");if(dHeader){window.onscroll=function(){scrolled=window.pageYOffset||document.documentElement.scrollTop;if(scrolled>70){document.querySelector(".d-header").classList.add('show')}
|
||||
if(70>scrolled){document.querySelector(".d-header").classList.remove('show')}}}
|
||||
let token=document.querySelector("meta[name='csrf-token']").getAttribute("content");queryAll(".add-comment").forEach(el=>el.addEventListener("click",function(e){let answer_id=insert_id=el.dataset.answer_id;let comment_id=el.dataset.comment_id;if(comment_id){insert_id=el.dataset.comment_id}
|
||||
let comment=document.querySelector('#insert_id_'+insert_id);comment.classList.add("block");fetch("/comments/addform",{method:"POST",body:"answer_id="+answer_id+"&comment_id="+comment_id+"&_token="+token,headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(response=>{return response.text()}).then(text=>{comment.innerHTML=text;queryAll("#cancel_comment").forEach(el=>el.addEventListener("click",function(e){comment.classList.remove("block")}))})}));isIdEmpty('toggledark').onclick=function(){let mode=getCookie("dayNight");let expires=defTime();if(mode=="dark"){document.cookie="dayNight"+"="+"light"+"; "+expires+";path=/";document.getElementsByTagName('body')[0].classList.remove('dark')}else{document.cookie="dayNight"+"="+"dark"+"; "+expires+";path=/";document.getElementsByTagName('body')[0].classList.add('dark')}}
|
||||
let comment=document.querySelector('#insert_id_'+insert_id);comment.classList.add("block");fetch("/comments/addform",{method:"POST",body:"answer_id="+answer_id+"&comment_id="+comment_id+"&_token="+token,headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(response=>{return response.text()}).then(text=>{comment.innerHTML=text;queryAll("#cancel_comment").forEach(el=>el.addEventListener("click",function(e){comment.classList.remove("block")}))})}));isIdEmpty('toggledark').onclick=function(){let mode=getCookie("dayNight");let expires=defTime();if(mode=="dark"){document.cookie="dayNight"+"="+"light"+"; "+expires+";path=/";document.getElementsByTagName('body')[0].classList.remove('dark')}else{document.cookie="dayNight"+"="+"dark"+"; "+expires+";path=/";document.getElementsByTagName('body')[0].classList.add('dark')}
|
||||
location.reload()}
|
||||
isIdEmpty('togglemenu').onclick=function(){let mode=getCookie("menuYesNo");let expires=defTime();if(mode=="menuno"){document.cookie="menuYesNo"+"="+"menuyes"+"; "+expires+";path=/";document.getElementsByTagName('body')[0].classList.remove('menuno')}else{document.cookie="menuYesNo"+"="+"menuno"+"; "+expires+";path=/";document.getElementsByTagName('body')[0].classList.add('menuno')}}
|
||||
isIdEmpty('postmenu').onclick=function(){let mode=getCookie("postAppearance");let expires=defTime();if(mode=="classic"){document.cookie="postAppearance"+"="+"card"+"; "+expires+";path=/";location.reload()}else{document.cookie="postAppearance"+"="+"classic"+"; "+expires+";path=/";location.reload()}}
|
||||
isIdEmpty('postmenu').onclick=function(){let mode=getCookie("postAppearance");let expires=defTime();if(mode=="classic"){document.cookie="postAppearance"+"="+"card"+"; "+expires+";path=/";location.reload()}else{document.cookie="postAppearance"+"="+"classic"+"; "+expires+";path=/"}
|
||||
location.reload()}
|
||||
isIdEmpty('find').onclick=function(){getById('find').addEventListener('keydown',function(){fetchSearch()})}
|
||||
function fetchSearch(){let query=getById("find").value;let type=getById("find").dataset.id;if(query.length<2)return;let url=type=='category'?'/web/dir/all/':'/topic/';fetch("/search/api",{method:"POST",headers:{'Content-Type':'application/x-www-form-urlencoded'},body:"query="+query+"&type="+type+"&_token="+token,}).then(response=>{return response.text()}).then(text=>{let obj=JSON.parse(text);let html='<div class="flex">';for(let key in obj){if(type=='category'){if(obj[key].facet_slug){html+='<a class="sky block text-sm mb15 mr10" href="/web/dir/all/'+obj[key].facet_slug+'">'+obj[key].facet_title+'</a>'}
|
||||
if(obj[key].item_id){html+='<a class="block black text-sm mb10" href="/web/website/'+obj[key].item_id+'">'+obj[key].title+'</a>'}}else{if(obj[key].facet_slug){html+='<a class="sky block text-sm mb15 mr10" href="/topic/'+obj[key].facet_slug+'">'+obj[key].facet_title+'</a>'}
|
||||
|
|
@ -11,7 +13,7 @@ if(obj[key].post_id){html+='<a class="block black text-sm mb10" href="/post/'+ob
|
|||
html+='</div>'}
|
||||
if(!Object.keys(obj).length==0){let items=getById("search_items");items.classList.add("block");items.innerHTML=html}
|
||||
let menu=document.querySelector('.none.block');if(menu){document.onclick=function(e){if(event.target.className!='.none.block'){let items=getById("search_items");items.classList.remove("block")}}}})}
|
||||
let showPassword=queryAll('.showPassword');showPassword.forEach(item=>item.addEventListener('click',toggleType));function toggleType(){let input=getById('password');let icon=this.querySelector('svg');if(icon.classList.contains('red-200')){icon.classList.remove('red-200');input.type='password'}else{icon.classList.add('red-200');input.type='text'}}
|
||||
let showPassword=queryAll('.showPassword');showPassword.forEach(item=>item.addEventListener('click',toggleType));function toggleType(){let input=getById('password');let icon=this.querySelector('svg');if(icon.classList.contains('sky')){icon.classList.remove('sky');input.type='password'}else{icon.classList.add('sky');input.type='text'}}
|
||||
queryAll(".item_cleek").forEach(el=>el.addEventListener("click",function(e){let id=el.dataset.id;fetch("/cleek",{method:"POST",body:"id="+id,headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{return}).then((text)=>{})}));let elm=queryAll(".trigger");elm.forEach(function(elm){elm.addEventListener("click",function(e){e.stopPropagation();let sibling=elm.nextElementSibling,firstVisible=elm.querySelector('.block'),dropDown;if(firstVisible){firstVisible.classList.remove("block")}
|
||||
if(!sibling.classList.contains("block")){sibling.classList.add("block")}else{sibling.classList.remove("block")}});document.addEventListener("click",function(){let block=document.querySelector(".dropdown.block");if(block){block.classList.remove("block")}})});const button=document.querySelector('.menu__button')
|
||||
const nav=document.querySelector('.menu__left')
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<ul class="menu">
|
||||
<?php foreach ($dialogs as $msg) : ?>
|
||||
<li class="mb5 p5 br-top-zebra
|
||||
<?php if (!$msg['unread'] > 0) : ?> bg-purple<?php endif; ?>
|
||||
<?php if (!$msg['unread'] > 0) : ?> bg-yellow<?php endif; ?>
|
||||
<?php if (Request::getMainUrl() == url('dialogues', ['id' => $msg['dialog_id']])) : ?> bg-beige<?php endif; ?>">
|
||||
<a class="justify-between" href="<?= url('dialogues', ['id' => $msg['dialog_id']]); ?>">
|
||||
<div class="gray-600 text-sm">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,55 @@
|
|||
* Базовые стили
|
||||
*/
|
||||
|
||||
:root {
|
||||
--font-family: -apple-system,BlinkMacSystemFont,Arial,sans-serif;
|
||||
--line-height: 1.5;
|
||||
--font-size: 1rem;
|
||||
|
||||
/* Default (light) theme */
|
||||
--bg-color: #fff;
|
||||
--bg-color-secondary: #f3f4f6;
|
||||
|
||||
--link-color: #118bee;
|
||||
--link-color-hover: #ef4444;
|
||||
|
||||
--nav-bg-active: #fcebd9;
|
||||
--nav-color-active: #332f2f;
|
||||
|
||||
--dropdown-bg: #fff;
|
||||
--dropdown-box-shadow: 0 6px 18px 0 rgba(14,21,47,.13),0 -2px 6px rgba(14,21,47,.03);
|
||||
|
||||
--header-bg: #fff;
|
||||
--header-color: #9ca3af;
|
||||
|
||||
/* TODO
|
||||
--primary: #;
|
||||
--secondary: #;
|
||||
--tertiary: #;
|
||||
--quaternary: #;
|
||||
--highlight: #;
|
||||
--success: #;
|
||||
*/
|
||||
|
||||
/* Colors used */
|
||||
--black: #030303;
|
||||
--white: #fff;
|
||||
--yellow: #f7f7eb;
|
||||
--brown: #bb6619;
|
||||
--green: #16a34a;
|
||||
--sky: #0ea5e9;
|
||||
--violet: #f3f1ed;
|
||||
--red: #ef4444;
|
||||
--red-200: #fecaca;
|
||||
--gray: #4b5563;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-600: #9ca3af;
|
||||
--blue: #3b82f6;
|
||||
--blue-100: #dbeafe;
|
||||
--slate: #cbd5e1;
|
||||
--slate-100: #f1f5f9;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -22,37 +71,17 @@ html {
|
|||
outline-offset: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black: #030303;
|
||||
--white: #fff;
|
||||
--yellow: #f7f7eb;
|
||||
--purple: #f3e8ff;
|
||||
--brown: #bb6619;
|
||||
--green: #16a34a;
|
||||
--pink: #9d174d;
|
||||
--sky: #0ea5e9;
|
||||
--teal: #68beba;
|
||||
--violet: #f3f1ed;
|
||||
--red: #ef4444;
|
||||
--red-200: #fecaca;
|
||||
--gray: #4b5563;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-600: #9ca3af;
|
||||
--blue: #3b82f6;
|
||||
--blue-100: #dbeafe;
|
||||
--slate: #cbd5e1;
|
||||
--slate-100: #f1f5f9;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-family: -apple-system,BlinkMacSystemFont,Arial,sans-serif;
|
||||
line-height: var(--line-height);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
background-color: var(--bg-color);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1c59d1;
|
||||
color: var(--link-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -60,7 +89,7 @@ a {
|
|||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: var(--red);
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -112,22 +141,17 @@ img {
|
|||
.white { color: var(--white); }
|
||||
.yellow { color: var(--yellow); }
|
||||
.green { color: var(--green); }
|
||||
|
||||
.gray { color: var(--gray); }
|
||||
.gray-600 { color: var(--gray-600); }
|
||||
|
||||
.sky { color: var(--sky); }
|
||||
.red { color: var(--red); }
|
||||
.red-200 { color: var(--red-200); }
|
||||
|
||||
.brown { color: var(--brown ); }
|
||||
|
||||
.bg-black { background-color: var(--black); }
|
||||
.bg-white { background-color: var(--white); }
|
||||
.bg-green { background-color: var(--green); }
|
||||
.bg-purple { background-color: var(--purple); }
|
||||
.bg-yellow { background-color: var(--yellow); }
|
||||
.bg-teal { background-color: var(--teal); }
|
||||
|
||||
.bg-lightyellow { background-color: lightyellow; }
|
||||
.bg-lightgray { background-color: var(--gray-100); }
|
||||
.bg-violet { background-color: var(--violet); }
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px 0 rgba(14,21,47,.13),0 -2px 6px rgba(14,21,47,.03);
|
||||
background-color: var(--dropdown-bg);
|
||||
box-shadow: var(--dropdown-box-shadow);
|
||||
padding: 0.5rem;
|
||||
z-index: 15;
|
||||
min-width: 215px;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.right-close {
|
||||
color: #666;
|
||||
color: var(--gray-600);
|
||||
padding: 3px 8px 0 0;
|
||||
margin-top: -20px;
|
||||
float: right;
|
||||
|
|
@ -57,7 +57,6 @@
|
|||
}
|
||||
|
||||
.user-nav li a { margin-left: 10px; }
|
||||
.user-box-nav li:hover > a { color: #222; }
|
||||
/* end */
|
||||
|
||||
|
||||
|
|
@ -80,18 +79,17 @@
|
|||
|
||||
.dropdown li:hover > a,
|
||||
.dropdown li > a.active,
|
||||
.dropdown li > div.active { color: var(--red); }
|
||||
.dropdown li > div.active { color: var(--link-color-hover); }
|
||||
|
||||
.menu__left:not(.menu__active) li { margin-bottom: 3px; }
|
||||
|
||||
.user-nav li:hover,
|
||||
.menu li.active,
|
||||
.menu li:hover {
|
||||
background-color: var(--gray-100);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.menu li:hover { transition-duration: .5s; }
|
||||
.menu li:hover { transition-duration: .3s; }
|
||||
.menu li:hover > a { color: var(--gray); }
|
||||
|
||||
.breadcrumbs li {
|
||||
|
|
@ -102,7 +100,6 @@
|
|||
.breadcrumbs li:not(:last-child):after { content: " / "; }
|
||||
|
||||
/* Navigation */
|
||||
|
||||
ul.nav {
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
|
|
@ -117,19 +114,19 @@ ul.nav.small > li { padding: 3px 6px; }
|
|||
ul.nav > li > a { color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
ul.nav > li.active {
|
||||
background-color: #fcebd9;
|
||||
background-color: var(--nav-bg-active);
|
||||
border-radius: 3px;
|
||||
color: #332f2f;
|
||||
color: var(--nav-color-active);
|
||||
}
|
||||
|
||||
ul.nav > li.active > a { color: #432f2f; }
|
||||
ul.nav > li a:hover { color: var(--red); }
|
||||
ul.nav > li.active a:hover { color: #432f2f; }
|
||||
ul.nav > li.active > a { color: var(--nav-color-active); }
|
||||
ul.nav > li a:hover { color: var(--link-color-hover); }
|
||||
ul.nav > li.active a:hover { color: var(--nav-color-active); }
|
||||
|
||||
/* If it's tabs */
|
||||
.content-tabs { display: none; }
|
||||
|
||||
.content-tabs.active {
|
||||
display: block;
|
||||
color: #432f2f;
|
||||
color: var(--nav-color-active);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ isIdEmpty('toggledark').onclick = function () {
|
|||
document.cookie = "dayNight" + "=" + "dark" + "; " + expires + ";path=/";
|
||||
document.getElementsByTagName('body')[0].classList.add('dark');
|
||||
}
|
||||
location.reload();
|
||||
}
|
||||
|
||||
// Navigation menu on/off
|
||||
|
|
@ -83,8 +84,9 @@ isIdEmpty('postmenu').onclick = function () {
|
|||
location.reload();
|
||||
} else {
|
||||
document.cookie = "postAppearance" + "=" + "classic" + "; " + expires + ";path=/";
|
||||
location.reload();
|
||||
|
||||
}
|
||||
location.reload();
|
||||
}
|
||||
|
||||
// search
|
||||
|
|
@ -160,11 +162,11 @@ showPassword.forEach(item =>
|
|||
function toggleType() {
|
||||
let input = getById('password');
|
||||
let icon = this.querySelector('svg');
|
||||
if (icon.classList.contains('red-200')) {
|
||||
icon.classList.remove('red-200');
|
||||
if (icon.classList.contains('sky')) {
|
||||
icon.classList.remove('sky');
|
||||
input.type = 'password';
|
||||
} else {
|
||||
icon.classList.add('red-200');
|
||||
icon.classList.add('sky');
|
||||
input.type = 'text';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ use Hleb\Constructor\Handlers\Request; ?>
|
|||
<?= $post['post_votes']; ?>
|
||||
<div class="text-xs"> <?= Html::numWord($post['post_votes'], __('app.num_up'), false); ?></div>
|
||||
</div>
|
||||
<?php $bg = $post['post_feature'] == 0 ? ' bg-green' : ' bg-teal'; ?>
|
||||
<?php $bg = $post['post_feature'] == 0 ? ' bg-green' : ' bg-blue'; ?>
|
||||
<?php $bg_url = $post['post_url_domain'] == NULL ? '' : ' bg-blue'; ?>
|
||||
<div class="box-answer mt5 br-rd3 lowercase <?= $bg; ?> <?= $bg_url; ?>">
|
||||
<div class="box-answer 11 mt5 br-rd3 lowercase <?= $bg; ?> <?= $bg_url; ?>">
|
||||
<a class="block white" href="<?= $post_url; ?>#comment">
|
||||
<?php $anw = $post['post_answers_count'] + $post['post_comments_count'];
|
||||
echo $anw; ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue