レポジトリ作成

Author: GenbuHase

Css/Main.css

@@ -0,0 +1,215 @@
+/*アニメーション定義Start*/
+/*アニメーション定義End*/
+
+
+
+/*ベース定義Start*/
+* {
+	Box-Sizing: Border-Box;
+}
+
+HTML, Body {
+	Height: 100%;
+}
+
+Body {
+	Display: Flex;
+	Flex-Direction: Column;
+	
+	Margin: 0 1em 0 1em;
+	
+	Color: #EEE;
+	Font: 14px / 2 "メイリオ", Meiryo, Osaka;
+	
+	BackGround: URL("https://genbuproject.github.io/Image/Back.jpg");
+}
+
+A {
+	Color: Chartreuse;
+}
+/*ベース定義End*/
+
+
+
+/*基本パーツ定義Start*/
+Body > H1 {
+	Margin-Bottom: 0;
+}
+
+Body > Div {
+	Display: Flex;
+	Flex-Direction: Row;
+	Height: 100%;
+	
+	Flex: 1;
+}
+
+#Content {
+	Width: 80%;
+	Height: calc(100% - 1em);
+	
+	Flex: 1;
+	
+	Margin-Top: 1em;
+}
+/*基本パーツ定義End*/
+
+
+
+/*メニュー定義Start*/
+#Menu {
+	Display: Flex;
+	Flex-Direction: Column;
+	Width: 20%;
+	Height: 100%;
+	
+	Padding-Left: 1em;
+	
+	Border-Left: Thin Solid White;
+}
+
+#Menu > H3 {
+	Margin: 0;
+	Font-Size: 1.5em;
+}
+
+#Menu > Div.SignIn {
+	Display: Flex;
+	Flex-Direction: Column;
+}
+
+#Menu > Div.SignOut {
+	Display: None;
+}
+
+#Menu > Div > Span {
+	Transition: BackGround 0.5s Ease 0s;
+	
+	Padding-Left: 1em;
+	
+	BackGround: RGBA(255, 255, 255, 0.25);
+	Border: Thin Solid LightSeaGreen;
+}
+
+#Menu > Div > Span:Hover {
+	Transition: BackGround 0.5s Ease 0s;
+	
+	BackGround: RGBA(128, 0, 128, 0.75);
+}
+
+#Menu > Div.SignIn + Div {
+	Display: None;
+}
+
+#Menu > Div.SignOut + Div {
+	Display: Block;
+}
+/*メニュー定義End*/
+
+
+
+/*フッター定義Start*/
+Footer.SignIn {
+	Display: None;
+}
+
+Footer.SignOut {
+	Position: Fixed;
+	Bottom: 0;
+	Right: 0;
+}
+
+Footer > Button {
+	Position: Relative;
+	Bottom: 1em;
+	Right: 1em;
+	
+	Padding: 1em;
+	
+	Color: #333333;
+	Cursor: Pointer;
+	
+	BackGround: Linear-Gradient(White, WhiteSmoke);
+	Border: 2px Solid LightGray;
+	Border-Radius: 100%;
+}
+
+Footer > Button:Hover {
+	BackGround: Linear-Gradient(WhiteSmoke, White);
+}
+
+Footer > Button:Active {
+	Border: 2px Solid Gray;
+}
+
+Footer > Button:Before {
+	Content: "";
+}
+
+#GPlus:Before {
+	Display: Inline-Block;
+	
+	Width: 2.5em;
+	Height: 2.5em;
+	
+	Vertical-Align: Middle;
+	
+	BackGround: URL("https://www.google.co.jp/images/branding/product/ico/googleg_lodp.ico");
+	BackGround-Size: Cover;
+}
+/*フッター定義End*/
+
+
+
+/*ダイアログ定義Start*/
+#Dialog {
+	Position: Fixed;
+	Top: 0;
+	Left: 0;
+	Z-index: 1;
+	
+	Width: 50%;
+	Height: 80%;
+	
+	Border-Radius: 10% 10% 0 0;
+}
+
+#Dialog.Show {
+	Display: Flex;
+	Flex-Direction: Column;
+	
+	BackGround: Linear-Gradient(White, WhiteSmoke);
+}
+
+#Dialog.Hide {
+	Display: None;
+}
+
+#Dialog + Div {
+	Width: 100%;
+	Height: 100%;
+	
+	Position: Fixed;
+	Top: 0;
+	Left: 0;
+	Z-Index: 0;
+	
+	BackGround: Black;
+	Opacity: 0.5;
+}
+
+#Dialog.Show + Div {
+	Display: Block;
+}
+
+#Dialog.Hide + Div {
+	Display: None;
+}
+
+#Dialog > IFrame {
+	Width: 100%;
+	Height: 100%;
+	
+	Border: None;
+	Border-Radius: 10% 10% 0 0;
+}