/* ---------------------------------------------------------- 背景パターンの色ターゲット：背景画像があります。タグのパターンです。 SVGを編集すると、パターンが更新されます Author: Robert Bagares Affiliation: CCREST UI/UX Design + Code ----------------------------------------------------------*/ body.top { /* デフォルトの背景パターン */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/bg_pattern-01.svg"); } /* ---------------------------------------------------------- コースページのテーマ各コースページの設定を変更します。 1.背景のラインパターン 2.バナー画像 3.バナー画像の色 4.モバイルの水平改行パターン（カラー） 5.見出しの色を変更します ------------------------------------------------------------ */ /*---------------------------------- mechanical_systems.html CG-ME -----------------------------------*/ body.course-guide-me { /* 背景パターンを変更する */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/bg_pattern.svg"); } .course-guide-me .banner { /* バナー画像を変更する */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-me/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-me hr.mob { /* 時間線の色を変更する - モバイルのみ */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-me/bg_pattern_hr.svg") #fff left center repeat-x; } /* バナーでは、左側にグラデーションがあります。CSSで色を変更できます。 RGBA形式を使用する */ .course-page .banner.course-me::after { /* バナーのグラデーションの色を変更する */ background-image: linear-gradient( to right, rgba(3, 110, 183, 1), rgba(3, 110, 183, 0) ); } .course-page.course-guide-me .mob-intro { /* バナーのグラデーションの色を変更する-モバイルのみ */ background-color: rgba(3, 110, 183, 0.5); } /*---------------------------------- fine_mechanics.html CG-FI -----------------------------------*/ body.course-guide-fi { /* 背景パターンを変更する */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-fi/bg_pattern.svg"); } .course-guide-fi .banner { /* バナー画像を変更する */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-fi/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-fi hr.mob { /* 時間線の色を変更する - モバイルのみ */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-fi/bg_pattern_hr.svg") #fff left center repeat-x; } /* バナーでは、左側にグラデーションがあります。CSSで色を変更できます。 RGBA形式を使用する */ .course-page .banner.course-fi::after { /* バナーのグラデーションの色を変更する */ background-image: linear-gradient( to right, rgba(242, 150, 0, 1), rgba(242, 150, 0, 0) ); } .course-page.course-guide-fi .mob-intro { /* バナーのグラデーションの色を変更する-モバイルのみ */ background-color: rgba(242, 150, 0, 0.5); } /*---------------------------------- robotics.html CG-RO -----------------------------------*/ body.course-guide-ro { /* change background pattern */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-ro/bg_pattern.svg"); } .course-guide-ro .banner { /* change banner image */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-ro/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-ro hr.mob { /* change hr line color - mobile only */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-ro/bg_pattern_hr.svg") #fff left center repeat-x; } /* CSS → Colors */ .course-page .banner.course-ro::after { /* change banner gradient color */ background-image: linear-gradient( to right, rgba(0, 161, 153, 1), rgba(0, 161, 153, 0) ); } .course-page.course-guide-ro .mob-intro { /* change banner gradient color - mobile only */ background-color: rgba(0, 161, 153, 0.5); } /*---------------------------------- aerospace.html CG-AE -----------------------------------*/ body.course-guide-ae { /* change background pattern */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-ae/bg_pattern.svg"); } .course-guide-ae .banner { /* change banner image */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-ae/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-ae hr.mob { /* change hr line color - mobile only */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-ae/bg_pattern_hr.svg") #fff left center repeat-x; } /* CSS → Colors */ .course-page .banner.course-ae::after { /* change banner gradient color */ background-image: linear-gradient( to right, rgba(144, 92, 162, 1), rgba(144, 92, 162, 0) ); } .course-page.course-guide-ae .mob-intro { /* change banner gradient color - mobile only */ background-color: rgba(144, 92, 162, 0.5); } /*---------------------------------- quantum_science.html CG-QU -----------------------------------*/ body.course-guide-qu { /* change background pattern */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-qu/bg_pattern.svg"); } .course-guide-qu .banner { /* change banner image */ background: url("https://www.qse.tohoku.ac.jp/course/assets/img/cg-qu/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-qu hr.mob { /* change hr line color - mobile only */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-qu/bg_pattern_hr.svg") #fff left center repeat-x; } /* CSS → Colors */ .course-page .banner.course-qu::after { /* change banner gradient color */ background-image: linear-gradient( to right, rgba(229, 0, 18, 1), rgba(229, 0, 18, 0) ); } .course-page.course-guide-qu .mob-intro { /* change banner gradient color - mobile only */ background-color: rgba(229, 0, 18, 0.5); } /*---------------------------------- energy_environment.html CG-EN -----------------------------------*/ body.course-guide-en { /* change background pattern */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-en/bg_pattern.svg"); } .course-guide-en .banner { /* change banner image */ background: url("http://www2.kankyo.tohoku.ac.jp/eee-course/assets/img/cg-en/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-en hr.mob { /* change hr line color - mobile only */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-en/bg_pattern_hr.svg") #fff left center repeat-x; } /* CSS → Colors */ .course-page .banner.course-en::after { /* change banner gradient color */ background-image: linear-gradient( to right, rgba(141, 194, 31, 1), rgba(141, 194, 31, 0) ); } .course-page.course-guide-en .mob-intro { /* change banner gradient color - mobile only */ background-color: rgba(141, 194, 31, 0.5); } /*---------------------------------- mechanical_medical.html CG-MED -----------------------------------*/ body.course-guide-med { /* change background pattern */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-med/bg_pattern.svg"); } .course-guide-med .banner { /* change banner image */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-med/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-med hr.mob { /* change hr line color - mobile only */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-med/bg_pattern_hr.svg") #fff left center repeat-x; } /* CSS → Colors */ .course-page .banner.course-med::after { /* change banner gradient color */ background-image: linear-gradient( to right, rgba(232, 83, 130, 1), rgba(232, 83, 130, 0) ); } .course-page.course-guide-med .mob-intro { /* change banner gradient color - mobile only */ background-color: rgba(232, 83, 130, 0.5); } /*---------------------------------- intl_mechanical.html CG-IN -----------------------------------*/ body.course-guide-in { /* change background pattern */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-in/bg_pattern.svg"); } .course-guide-in .banner { /* change banner image */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-in/hero-bg.jpg") center center no-repeat; background-size: cover; } .course-guide-in hr.mob { /* change hr line color - mobile only */ background: url("https://www.dream.mech.tohoku.ac.jp/assets/img/cg-in/bg_pattern_hr.svg") #fff left center repeat-x; } /* CSS → Colors */ .course-page .banner.course-in::after { /* change banner gradient color */ background-image: linear-gradient( to right, rgba(0, 159, 232, 1), rgba(0, 159, 232, 0) ); } .course-page.course-guide-in .mob-intro { /* change banner gradient color - mobile only */ background-color: rgba(0, 159, 232, 0.5); } /* ---------------------------------------------------------- COURSES LINK 'CG' BUTTON COMPONENT THEME COLORS Change the settings of for each course page. 1. Line pattern in the background 2. Banner image 3. Color on the banner image 4. Horizontal line break patter in mobile (color) 5. Change heading color ------------------------------------------------------------ */ /* CG-ME */ .course-guide.cg-me span, .course-guide.cg-me:hover, .course-guide.cg-me:active { background-color: #036eb7; } .course-guide.cg-me:hover span, .course-guide.cg-me:active span { color: #036eb7; } /* CG-FI */ .course-guide.cg-fi span, .course-guide.cg-fi:hover, .course-guide.cg-fi:active { background-color: #f29600; } .course-guide.cg-fi:hover span, .course-guide.cg-fi:active span { color: #f29600; } /* CG-RO */ .course-guide.cg-ro span, .course-guide.cg-ro:hover, .course-guide.cg-ro:active { background-color: #00a199; } .course-guide.cg-ro:hover span, .course-guide.cg-ro:active span { color: #00a199; } /* CG-AE */ .course-guide.cg-ae span, .course-guide.cg-ae:hover, .course-guide.cg-ae:active { background-color: #905ca2; } .course-guide.cg-ae:hover span, .course-guide.cg-ae:active span { color: #905ca2; } /* CG-QU */ .course-guide.cg-qu span, .course-guide.cg-qu:hover, .course-guide.cg-qu:active { background-color: #e50012; } .course-guide.cg-qu:hover span, .course-guide.cg-qu:active span { color: #e50012; } /* CG-EN */ .course-guide.cg-en span, .course-guide.cg-en:hover, .course-guide.cg-en:active { background-color: #8dc21f; } .course-guide.cg-en:hover span, .course-guide.cg-en:active span { color: #8dc21f; } /* CG-ME2 */ .course-guide.cg-me2 span, .course-guide.cg-me2:hover, .course-guide.cg-me2:active { background-color: #e85382; } .course-guide.cg-me2:hover span, .course-guide.cg-me2:active span { color: #e85382; } /* CG-IN */ .course-guide.cg-in span, .course-guide.cg-in:hover, .course-guide.cg-in:active { background-color: #009fe8; } .course-guide.cg-in:hover span, .course-guide.cg-in:active span { color: #009fe8; } .text-transform-none { text-transform: none !important; }