プロジェクト

全般

プロフィール

サイコーにおしゃるためのcssたち(view_customize_plugin用)

振返り
2024-01-31

View_Customize_Pluginでサイコーのおしゃ

html,css,jsをオーバーライド?するプラグインで色味の統一＆見出しの装飾などを実現
おしゃな環境はモチベがアガる
※間違えて消しそうなので保管しておく

ただし、h1~h4まではシステム用の見出しと考えておいたほうが良いかもしれない．．．

SprintBordをコンパクトに

パスのパターン /sprints/[0-9]+
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

table.sprint-board tr.sprint-board th.sprint-board, table.sprint-board tr.sprint-board td.sprint-board {
    min-width: 12em;
    padding-left: 0.2em;
}
table.sprint-pbi, table.sprint-task {
    margin-right: 0.3em;
}

table.sprint-task-small {
    width: 15em;
    height: 7em;
    font-size: 75%;}

table.sprint-pbi-small {
    width: 15em;
    height: 9em;
    font-size: 75%;
}
diyPJでチケット一覧を非表示

パスのパターン /
プロジェクトのパターン diy
挿入位置 全ページのヘッダ
種別 CSS

コード	
div#main-menu a.issues{
    display:none;
}
サイドバーボタンを紫に

パスのパターン /
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

.sidebar-toggler {
    border: 2px solid #9370DB;
    background-color: #fff;
SprintBordをPurple

パスのパターン /sprints/[0-9]+
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

table.sprint-board tr.sprint-board td.sprint-board {
    border: 0.3em dotted #9370DB;
    border-bottom: 0.5em double #9370DB;
}
table.sprint-board tr.sprint-board th.sprint-board {
    border-bottom: 0.7em solid #9370DB;
}

.box {
    margin-bottom: 20px;
    padding: 15px 15px;
    border: 1px solid #CCC3F7;
    border-radius: 3px;
    background-color: #fff;
    color: #3e4359;
    word-wrap: break-word;
}
awesomeフォントのタグ作成

パスのパターン /
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 HTML

 <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
h4の装飾(>><<)

パスのパターン /
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

h4 {
  position: relative;
  display: inline-block;
  padding: 0 2em;
}

h4:before ,
h4:after {
  font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #9370DB;
}
h4:before {
  left: 0;
  content: '\f101';
}
h4:after {
  right: 0;
  content: '\f100';
}
h3の装飾(縦棒)

パスのパターン /
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #CCC3F7;/*左線*/
}
プロジェクト一覧でプロジェクト名を見やすく

パスのパターン /projects$
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

#projects-index ul.projects a.project {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	text-align: center;
    border-bottom: double 5px #614ba6;
}
h2の装飾(アンダーバー&頭強調)

パスのパターン /
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

h2 {
  font-weight: bold;
  border-bottom: 2px solid #6A5ACD;
  padding: 0.3em;
  margin-bottom: 0.3em;
}
h2:first-letter {
  font-size: 1.5em;
  color: #9370DB;
}
h1の装飾(グラデーションバー)

パスのパターン /
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

  h1{
  font-weight: Bold;
  position: relative;
  padding: 1rem .5rem;

  }

h1:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: -webkit-linear-gradient(to right, rgb(255, 127, 80), rgb(127,255,212));
  background: linear-gradient(to right, rgb(255, 127, 80), rgb(127,255,212));
  }
}
プロジェクトでヘッダーカラー変更

パスのパターン /
プロジェクトのパターン memo
挿入位置 全ページのヘッダ
種別 CSS

#header {
  background: #6ea146;
}
/* +ボタンとホバーしているタブの背景色 */
#main-menu li a.new-object, #main-menu li a:hover {
  background: #c4d04f;
}
#top-menu {
  background: #475412;
}
チケットパネルの色を変更(紫)

パスのパターン /issues_panel
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 CSS

div.issue-card div.priority-2 {
  box-shadow: 4px 0px 0px 0px #a754cb inset;
}
ガントチャートでトラッカー名/チケットNoを表示しない

パスのパターン /issues/gantt
プロジェクトのパターン
挿入位置 全ページのヘッダ
種別 JavaScript

$(function() {
  $('div.issue-subject span a.issue').text('');
  $('div.issue-subject span').each(function(){
    var issue_subject = $(this).text();
    var old_html = $(this).html();
    $(this).html(old_html.replace(issue_subject, ''));
    $(this).find('a.issue').text(issue_subject.slice(2));
  });
});

ファイル