はじめに
以前投稿したpythonで生徒を当てるアプリをつくるをGUIソフトにしたってだけの記事.
プログラム
main.py
data/
history.txt
list.txt
list_raw.txt
web/
main.html
css/
style.css
js/
eel.js
main.py
main.py
import locale
import eel
import random
import pickle
import os
import sys
import datetime
from tkinter import filedialog, Tk
import platform
import copy
def main():
eel.init("web")
eel.start("main.html")
Student_names = []
Student_FILENAME = "./data/list.txt"
Student_FILENAME_raw = "./data/list_raw.txt"
# Student
@eel.expose
def Student_load():
with open(select_file(), "r") as f:
global Student_names
Student_names = f.read().splitlines()
Student_save(Student_FILENAME)
Student_save(Student_FILENAME_raw)
@eel.expose
def Student_reset():
Student_names_load(Student_FILENAME_raw)
@eel.expose
def Student_show():
Student_names_load(Student_FILENAME)
name_ls = ""
a = 1
for name in Student_names:
if a % 5 == 0:
name_ls = name_ls + name + "<br>"
else:
name_ls = name_ls + name + " "
a += 1
return name_ls
@eel.expose
def Student_choice():
Student_names_load(Student_FILENAME)
global Student_names_raw
Student_names_raw = copy.deepcopy(Student_names)
if not Student_names:
return
global name
name = random.choice(Student_names)
Student_names.remove(name)
if Student_names == []:
Student_names_load(Student_FILENAME_raw)
History_add(name)
Student_save(Student_FILENAME)
return name
@eel.expose
def Student_save(FILENAME):
f = open(FILENAME, 'wb')
pickle.dump(Student_names, f)
@eel.expose
def Student_names_load(FILENAME):
f = open(FILENAME, "rb")
global Student_names
Student_names = pickle.load(f)
# History
History_FILENAME = "./data/history.txt"
History_data = []
@eel.expose
def History_load():
with open(History_FILENAME, "r") as f:
global History_data
History_data = f.read().splitlines()
@eel.expose
def History_save():
with open(History_FILENAME, "w") as f:
for history in History_data:
print(history, file=f)
@eel.expose
def History_show():
history_ls = ""
History_load()
for history in History_data:
history_ls = history + "<br>" + history_ls
return history_ls
locale.setlocale(locale.LC_ALL, '')
@eel.expose
def History_add(name):
now = datetime.datetime.now()
History_data.append(f"{now:%m月%d日}:{name}")
History_save()
@eel.expose
def History_cancel():
History_data.pop()
History_save()
global Student_names
Student_names = copy.deepcopy(Student_names_raw)
Student_save(Student_FILENAME)
@eel.expose
def History_clear():
global History_data
History_data = []
History_save()
# 名簿読み込み
# ダイアログ用のルートウィンドウの作成
# (root自体はeelのウィンドウとは関係ないので非表示にしておくのが望ましい)
root = Tk()
# ウィンドウサイズを0にする
root.geometry("0x0")
# ウィンドウのタイトルバーを消す
root.overrideredirect(1)
# ウィンドウを非表示に
root.withdraw()
system = platform.system()
@eel.expose
def select_file():
# Windowsの場合withdrawの状態だとダイアログも
# 非表示になるため、rootウィンドウを表示する
if system == "Windows":
root.deiconify()
# macOS用にダイアログ作成前後でupdate()を呼ぶ
root.update()
# ダイアログを前面に
# topmost指定(最前面)
root.attributes('-topmost', True)
root.withdraw()
root.lift()
root.focus_force()
path_str = filedialog.askopenfilename()
root.update()
if system == "Windows":
# 再度非表示化(Windowsのみ)
root.withdraw()
#path = Path(path_str)
return path_str
if __name__ == '__main__':
main()
main.html
main.html
<html>
<head>
<meta charset="UTF-8">
<title>生徒当てるヤツ</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript">
async function Student_choice() {
var demo2 = document.getElementById("div0");
demo2.innerHTML = "";
div0.insertAdjacentHTML('afterbegin', '<div id="name"></div>');
let val = await eel.Student_choice()();
var doc0 = document.getElementById("name");
doc0.innerHTML = val;
}
async function Student_load() {
eel.Student_load();
}
async function Student_show() {
let val = await eel.Student_show()();
var doc0 = document.getElementById("div0");
doc0.innerHTML = val;
}
async function History_show() {
let val = await eel.History_show()();
var doc0 = document.getElementById("div0");
doc0.innerHTML = val;
}
async function History_clear() {
let val = await eel.History_clear()();
var doc0 = document.getElementById("div0");
doc0.innerHTML = val;
}
async function History_cancel() {
let val = await eel.History_cancel()();
var doc0 = document.getElementById("div0");
doc0.innerHTML = val;
}
</script>
</head>
<body>
<center>
<div id="div0">
</div>
<div class="bottom">
<a href="#" onclick="Student_choice()" class="btn-square">生徒を当てる</a>
<a href="#" onclick="History_cancel()" class="btn-square">欠席者を飛ばす</a>
<a href="#" onclick="Student_show()" class="btn-square">残りの生徒を表示</a>
<a href="#" onclick="History_show()" class="btn-square">履歴の表示</a>
<a href="#" onclick="History_clear()" class="btn-square">履歴の消去</a>
<a href="#" onclick="Student_load()" class="btn-square">名簿を更新</a>
</div>
</center>
<div class='markdown-preview' data-use-github-style>
<details>
<summary>名簿の更新方法</summary>
<div>
<h1 id="名簿の更新方法">名簿の更新方法</h1>
<h3 id="1">1</h3>
<p>任意のファイル名のテキストファイル(*.txt)を作成します.</p>
<h3 id="2">2</h3>
<p>その中に<br>
1.名前<br>
2.名前<br>
・<br>
・<br>
・<br>
と入力します.</p>
<h3 id="3">3</h3>
<p>名簿を更新をクリックし,テキストファイルを選択する.</p>
</div>
</details>
</div>
</html>
style.css
style.css
.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;
/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);
/*下に動く*/
border-bottom: none;
/*線を消す*/
}
#div0 {
height: 300px;
overflow: scroll;
}
#name {
margin-top: 50px;
font-size: 100px;
}
.bottom {}
.markdown-preview:not([data-use-github-style]) {
padding: 2em;
font-size: 1.2em;
color: rgb(197, 200, 198);
background-color: rgb(29, 31, 33);
overflow: auto;
}
.markdown-preview:not([data-use-github-style])> :first-child {
margin-top: 0px;
}
.markdown-preview:not([data-use-github-style]) h1,
.markdown-preview:not([data-use-github-style]) h2,
.markdown-preview:not([data-use-github-style]) h3,
.markdown-preview:not([data-use-github-style]) h4,
.markdown-preview:not([data-use-github-style]) h5,
.markdown-preview:not([data-use-github-style]) h6 {
line-height: 1.2;
margin-top: 1.5em;
margin-bottom: 0.5em;
color: rgb(255, 255, 255);
}
.markdown-preview:not([data-use-github-style]) h1 {
font-size: 2.4em;
font-weight: 300;
}
.markdown-preview:not([data-use-github-style]) h2 {
font-size: 1.8em;
font-weight: 400;
}
.markdown-preview:not([data-use-github-style]) h3 {
font-size: 1.5em;
font-weight: 500;
}
.markdown-preview:not([data-use-github-style]) h4 {
font-size: 1.2em;
font-weight: 600;
}
.markdown-preview:not([data-use-github-style]) h5 {
font-size: 1.1em;
font-weight: 600;
}
.markdown-preview:not([data-use-github-style]) h6 {
font-size: 1em;
font-weight: 600;
}
.markdown-preview:not([data-use-github-style]) strong {
color: rgb(255, 255, 255);
}
.markdown-preview:not([data-use-github-style]) del {
color: rgb(155, 160, 157);
}
.markdown-preview:not([data-use-github-style]) a,
.markdown-preview:not([data-use-github-style]) a code {
color: white;
}
.markdown-preview:not([data-use-github-style]) img {
max-width: 100%;
}
.markdown-preview:not([data-use-github-style])>p {
margin-top: 0px;
margin-bottom: 1.5em;
}
.markdown-preview:not([data-use-github-style])>ul,
.markdown-preview:not([data-use-github-style])>ol {
margin-bottom: 1.5em;
}
.markdown-preview:not([data-use-github-style]) blockquote {
margin: 1.5em 0px;
font-size: inherit;
color: rgb(155, 160, 157);
border-color: rgb(67, 72, 76);
border-width: 4px;
}
.markdown-preview:not([data-use-github-style]) hr {
margin: 3em 0px;
border-top: 2px dashed rgb(67, 72, 76);
background: none;
}
.markdown-preview:not([data-use-github-style]) table {
margin: 1.5em 0px;
}
.markdown-preview:not([data-use-github-style]) th {
color: rgb(255, 255, 255);
}
.markdown-preview:not([data-use-github-style]) th,
.markdown-preview:not([data-use-github-style]) td {
padding: 0.66em 1em;
border: 1px solid rgb(67, 72, 76);
}
.markdown-preview:not([data-use-github-style]) code {
color: rgb(255, 255, 255);
background-color: rgb(48, 51, 55);
}
.markdown-preview:not([data-use-github-style]) pre.editor-colors {
margin: 1.5em 0px;
padding: 1em;
font-size: 0.92em;
border-radius: 3px;
background-color: rgb(39, 41, 44);
}
.markdown-preview:not([data-use-github-style]) kbd {
color: rgb(255, 255, 255);
border-width: 1px 1px 2px;
border-style: solid;
border-color: rgb(67, 72, 76) rgb(67, 72, 76) rgb(53, 57, 60);
border-image: initial;
background-color: rgb(48, 51, 55);
}
.markdown-preview[data-use-github-style] {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
line-height: 1.6;
overflow-wrap: break-word;
padding: 30px;
font-size: 16px;
color: rgb(51, 51, 51);
background-color: rgb(255, 255, 255);
}
.markdown-preview[data-use-github-style]> :first-child {
margin-top: 0px !important;
}
.markdown-preview[data-use-github-style]> :last-child {
margin-bottom: 0px !important;
}
.markdown-preview[data-use-github-style] a:not([href]) {
color: inherit;
text-decoration: none;
}
.markdown-preview[data-use-github-style] .absent {
color: rgb(204, 0, 0);
}
.markdown-preview[data-use-github-style] .anchor {
position: absolute;
top: 0px;
left: 0px;
display: block;
padding-right: 6px;
padding-left: 30px;
margin-left: -30px;
}
.markdown-preview[data-use-github-style] .anchor:focus {
outline: none;
}
.markdown-preview[data-use-github-style] h1,
.markdown-preview[data-use-github-style] h2,
.markdown-preview[data-use-github-style] h3,
.markdown-preview[data-use-github-style] h4,
.markdown-preview[data-use-github-style] h5,
.markdown-preview[data-use-github-style] h6 {
position: relative;
margin-top: 1em;
margin-bottom: 16px;
font-weight: bold;
line-height: 1.4;
}
.markdown-preview[data-use-github-style] h1 .octicon-link,
.markdown-preview[data-use-github-style] h2 .octicon-link,
.markdown-preview[data-use-github-style] h3 .octicon-link,
.markdown-preview[data-use-github-style] h4 .octicon-link,
.markdown-preview[data-use-github-style] h5 .octicon-link,
.markdown-preview[data-use-github-style] h6 .octicon-link {
display: none;
color: rgb(0, 0, 0);
vertical-align: middle;
}
.markdown-preview[data-use-github-style] h1:hover .anchor,
.markdown-preview[data-use-github-style] h2:hover .anchor,
.markdown-preview[data-use-github-style] h3:hover .anchor,
.markdown-preview[data-use-github-style] h4:hover .anchor,
.markdown-preview[data-use-github-style] h5:hover .anchor,
.markdown-preview[data-use-github-style] h6:hover .anchor {
padding-left: 8px;
margin-left: -30px;
text-decoration: none;
}
.markdown-preview[data-use-github-style] h1:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h2:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h3:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h4:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h5:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h6:hover .anchor .octicon-link {
display: inline-block;
}
.markdown-preview[data-use-github-style] h1 tt,
.markdown-preview[data-use-github-style] h2 tt,
.markdown-preview[data-use-github-style] h3 tt,
.markdown-preview[data-use-github-style] h4 tt,
.markdown-preview[data-use-github-style] h5 tt,
.markdown-preview[data-use-github-style] h6 tt,
.markdown-preview[data-use-github-style] h1 code,
.markdown-preview[data-use-github-style] h2 code,
.markdown-preview[data-use-github-style] h3 code,
.markdown-preview[data-use-github-style] h4 code,
.markdown-preview[data-use-github-style] h5 code,
.markdown-preview[data-use-github-style] h6 code {
font-size: inherit;
}
.markdown-preview[data-use-github-style] h1 {
padding-bottom: 0.3em;
font-size: 2.25em;
line-height: 1.2;
border-bottom: 1px solid rgb(238, 238, 238);
}
.markdown-preview[data-use-github-style] h1 .anchor {
line-height: 1;
}
.markdown-preview[data-use-github-style] h2 {
padding-bottom: 0.3em;
font-size: 1.75em;
line-height: 1.225;
border-bottom: 1px solid rgb(238, 238, 238);
}
.markdown-preview[data-use-github-style] h2 .anchor {
line-height: 1;
}
.markdown-preview[data-use-github-style] h3 {
font-size: 1.5em;
line-height: 1.43;
}
.markdown-preview[data-use-github-style] h3 .anchor {
line-height: 1.2;
}
.markdown-preview[data-use-github-style] h4 {
font-size: 1.25em;
}
.markdown-preview[data-use-github-style] h4 .anchor {
line-height: 1.2;
}
.markdown-preview[data-use-github-style] h5 {
font-size: 1em;
}
.markdown-preview[data-use-github-style] h5 .anchor {
line-height: 1.1;
}
.markdown-preview[data-use-github-style] h6 {
font-size: 1em;
color: rgb(119, 119, 119);
}
.markdown-preview[data-use-github-style] h6 .anchor {
line-height: 1.1;
}
.markdown-preview[data-use-github-style] p,
.markdown-preview[data-use-github-style] blockquote,
.markdown-preview[data-use-github-style] ul,
.markdown-preview[data-use-github-style] ol,
.markdown-preview[data-use-github-style] dl,
.markdown-preview[data-use-github-style] table,
.markdown-preview[data-use-github-style] pre {
margin-top: 0px;
margin-bottom: 16px;
}
.markdown-preview[data-use-github-style] hr {
height: 4px;
padding: 0px;
margin: 16px 0px;
background-color: rgb(231, 231, 231);
border: 0px none;
}
.markdown-preview[data-use-github-style] ul,
.markdown-preview[data-use-github-style] ol {
padding-left: 2em;
}
.markdown-preview[data-use-github-style] ul.no-list,
.markdown-preview[data-use-github-style] ol.no-list {
padding: 0px;
list-style-type: none;
}
.markdown-preview[data-use-github-style] ul ul,
.markdown-preview[data-use-github-style] ul ol,
.markdown-preview[data-use-github-style] ol ol,
.markdown-preview[data-use-github-style] ol ul {
margin-top: 0px;
margin-bottom: 0px;
}
.markdown-preview[data-use-github-style] li>p {
margin-top: 16px;
}
.markdown-preview[data-use-github-style] dl {
padding: 0px;
}
.markdown-preview[data-use-github-style] dl dt {
padding: 0px;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}
.markdown-preview[data-use-github-style] dl dd {
padding: 0px 16px;
margin-bottom: 16px;
}
.markdown-preview[data-use-github-style] blockquote {
padding: 0px 15px;
color: rgb(119, 119, 119);
border-left: 4px solid rgb(221, 221, 221);
}
.markdown-preview[data-use-github-style] blockquote> :first-child {
margin-top: 0px;
}
.markdown-preview[data-use-github-style] blockquote> :last-child {
margin-bottom: 0px;
}
.markdown-preview[data-use-github-style] table {
display: block;
width: 100%;
overflow: auto;
word-break: keep-all;
}
.markdown-preview[data-use-github-style] table th {
font-weight: bold;
}
.markdown-preview[data-use-github-style] table th,
.markdown-preview[data-use-github-style] table td {
padding: 6px 13px;
border: 1px solid rgb(221, 221, 221);
}
.markdown-preview[data-use-github-style] table tr {
background-color: rgb(255, 255, 255);
border-top: 1px solid rgb(204, 204, 204);
}
.markdown-preview[data-use-github-style] table tr:nth-child(2n) {
background-color: rgb(248, 248, 248);
}
.markdown-preview[data-use-github-style] img {
max-width: 100%;
box-sizing: border-box;
}
.markdown-preview[data-use-github-style] .emoji {
max-width: none;
}
.markdown-preview[data-use-github-style] span.frame {
display: block;
overflow: hidden;
}
.markdown-preview[data-use-github-style] span.frame>span {
display: block;
float: left;
width: auto;
padding: 7px;
margin: 13px 0px 0px;
overflow: hidden;
border: 1px solid rgb(221, 221, 221);
}
.markdown-preview[data-use-github-style] span.frame span img {
display: block;
float: left;
}
.markdown-preview[data-use-github-style] span.frame span span {
display: block;
padding: 5px 0px 0px;
clear: both;
color: rgb(51, 51, 51);
}
.markdown-preview[data-use-github-style] span.align-center {
display: block;
overflow: hidden;
clear: both;
}
.markdown-preview[data-use-github-style] span.align-center>span {
display: block;
margin: 13px auto 0px;
overflow: hidden;
text-align: center;
}
.markdown-preview[data-use-github-style] span.align-center span img {
margin: 0px auto;
text-align: center;
}
.markdown-preview[data-use-github-style] span.align-right {
display: block;
overflow: hidden;
clear: both;
}
.markdown-preview[data-use-github-style] span.align-right>span {
display: block;
margin: 13px 0px 0px;
overflow: hidden;
text-align: right;
}
.markdown-preview[data-use-github-style] span.align-right span img {
margin: 0px;
text-align: right;
}
.markdown-preview[data-use-github-style] span.float-left {
display: block;
float: left;
margin-right: 13px;
overflow: hidden;
}
.markdown-preview[data-use-github-style] span.float-left span {
margin: 13px 0px 0px;
}
.markdown-preview[data-use-github-style] span.float-right {
display: block;
float: right;
margin-left: 13px;
overflow: hidden;
}
.markdown-preview[data-use-github-style] span.float-right>span {
display: block;
margin: 13px auto 0px;
overflow: hidden;
text-align: right;
}
.markdown-preview[data-use-github-style] code,
.markdown-preview[data-use-github-style] tt {
padding: 0.2em 0px;
margin: 0px;
font-size: 85%;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
}
.markdown-preview[data-use-github-style] code::before,
.markdown-preview[data-use-github-style] tt::before,
.markdown-preview[data-use-github-style] code::after,
.markdown-preview[data-use-github-style] tt::after {
letter-spacing: -0.2em;
content: " ";
}
.markdown-preview[data-use-github-style] code br,
.markdown-preview[data-use-github-style] tt br {
display: none;
}
.markdown-preview[data-use-github-style] del code {
text-decoration: inherit;
}
.markdown-preview[data-use-github-style] pre>code {
padding: 0px;
margin: 0px;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0px;
}
.markdown-preview[data-use-github-style] .highlight {
margin-bottom: 16px;
}
.markdown-preview[data-use-github-style] .highlight pre,
.markdown-preview[data-use-github-style] pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: rgb(247, 247, 247);
border-radius: 3px;
}
.markdown-preview[data-use-github-style] .highlight pre {
margin-bottom: 0px;
word-break: normal;
}
.markdown-preview[data-use-github-style] pre {
overflow-wrap: normal;
}
.markdown-preview[data-use-github-style] pre code,
.markdown-preview[data-use-github-style] pre tt {
display: inline;
max-width: initial;
padding: 0px;
margin: 0px;
overflow: initial;
line-height: inherit;
overflow-wrap: normal;
background-color: transparent;
border: 0px;
}
.markdown-preview[data-use-github-style] pre code::before,
.markdown-preview[data-use-github-style] pre tt::before,
.markdown-preview[data-use-github-style] pre code::after,
.markdown-preview[data-use-github-style] pre tt::after {
content: normal;
}
.markdown-preview[data-use-github-style] kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: rgb(85, 85, 85);
vertical-align: middle;
background-color: rgb(252, 252, 252);
border-width: 1px;
border-style: solid;
border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(187, 187, 187);
border-image: initial;
border-radius: 3px;
box-shadow: rgb(187, 187, 187) 0px -1px 0px inset;
}
.markdown-preview[data-use-github-style] a {
color: rgb(51, 122, 183);
}
.markdown-preview[data-use-github-style] code {
color: inherit;
}
.markdown-preview[data-use-github-style] pre.editor-colors {
padding: 0.8em 1em;
margin-bottom: 1em;
font-size: 0.85em;
border-radius: 4px;
overflow: auto;
}
.markdown-preview pre.editor-colors {
user-select: auto;
}
.scrollbars-visible-always .markdown-preview pre.editor-colors .vertical-scrollbar,
.scrollbars-visible-always .markdown-preview pre.editor-colors .horizontal-scrollbar {
visibility: hidden;
}
.scrollbars-visible-always .markdown-preview pre.editor-colors:hover .vertical-scrollbar,
.scrollbars-visible-always .markdown-preview pre.editor-colors:hover .horizontal-scrollbar {
visibility: visible;
}
.markdown-preview .task-list-item input[type="checkbox"] {
position: absolute;
margin: 0.25em 0px 0px -1.4em;
}
.markdown-preview .task-list-item {
list-style-type: none;
}
.markdown-preview code {
text-shadow: none;
}
@keyframes RotatingBackground {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 100%;
}
}
.debugger-breakpoint-icon::before,
.debugger-shadow-breakpoint-icon::before {
font-family: 'Octicons Regular';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
text-decoration: none;
font-size: 130%;
width: 130%;
height: 130%;
content: "\f052";
}
.debugger-breakpoint-icon,
.debugger-breakpoint-icon-disabled,
.debugger-breakpoint-icon-unresolved,
.debugger-breakpoint-icon-conditional,
.debugger-shadow-breakpoint-icon {
text-align: center;
display: block;
width: 0.8em;
cursor: pointer;
}
.debugger-breakpoint-icon-nonconditional {
color: #5293d8;
}
.debugger-breakpoint-icon-conditional {
color: #ff982d;
}
.debugger-breakpoint-icon-disabled {
position: relative;
top: -4px;
left: 2px;
}
.debugger-breakpoint-icon-disabled::before {
font-family: 'Octicons Regular';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
text-decoration: none;
font-size: 78%;
width: 78%;
height: 78%;
content: "\f084";
}
.debugger-breakpoint-icon-unresolved {
position: relative;
top: -2px;
}
.debugger-breakpoint-icon-unresolved::before {
font-family: 'Octicons Regular';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
text-decoration: none;
font-size: 80%;
width: 80%;
height: 80%;
content: "\f0e8";
}
.debugger-shadow-breakpoint-icon {
color: rgba(82, 147, 216, 0.4);
}
.debugger-current-line-highlight {
background: linear-gradient(to bottom, rgba(0, 152, 255, 0.8) 0%, rgba(0, 152, 255, 0.8) 5%, rgba(0, 152, 255, 0.3) 5%, rgba(0, 152, 255, 0.3) 95%, rgba(0, 152, 255, 0.8) 95%, rgba(0, 152, 255, 0.8) 100%);
}
.gutter[gutter-name=diagnostics-gutter] {
width: 0.7em;
}
.diagnostics-gutter-ui-item {
display: flex;
}
.diagnostics-gutter-ui-item .icon {
display: flex;
width: 0.7em;
height: 0.7em;
font-size: 0.7em;
align-self: center;
}
.diagnostics-gutter-ui-item .icon::before {
width: 1em;
height: 1em;
font-size: 1em;
margin: 0;
align-self: center;
}
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-info,
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-review {
color: #5293d8;
}
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-error {
color: #c00;
}
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-action,
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-warning {
color: #ff982d;
}
.bracket-matcher .region {
border-bottom: 1px dotted lime;
position: absolute;
}
.line-number.bracket-matcher.bracket-matcher {
color: #c5c8c6;
background-color: rgba(255, 255, 255, 0.14);
}
.spell-check-misspelling .region {
border-bottom: 2px dotted rgba(255, 51, 51, 0.75);
}
.spell-check-corrections {
width: 25em !important;
}
pre.editor-colors {
background-color: #1d1f21;
color: #c5c8c6;
}
pre.editor-colors .invisible-character {
color: rgba(197, 200, 198, 0.2);
}
pre.editor-colors .indent-guide {
color: rgba(197, 200, 198, 0.2);
}
pre.editor-colors .wrap-guide {
background-color: rgba(197, 200, 198, 0.1);
}
pre.editor-colors .gutter {
background-color: #292c2f;
}
pre.editor-colors .gutter .cursor-line {
background-color: rgba(255, 255, 255, 0.14);
}
pre.editor-colors .line-number.cursor-line-no-selection {
background-color: rgba(255, 255, 255, 0.14);
}
pre.editor-colors .gutter .line-number.folded,
pre.editor-colors .gutter .line-number:after,
pre.editor-colors .fold-marker:after {
color: #fba0e3;
}
pre.editor-colors .invisible {
color: #c5c8c6;
}
pre.editor-colors .cursor {
border-color: white;
}
pre.editor-colors .selection .region {
background-color: #444;
}
pre.editor-colors .bracket-matcher .region {
border-bottom: 1px solid #f8de7e;
margin-top: -1px;
opacity: .7;
}
.syntax--comment {
color: #8a8a8a;
}
.syntax--entity {
color: #FFD2A7;
}
.syntax--entity.syntax--name.syntax--type {
text-decoration: underline;
color: #FFFFB6;
}
.syntax--entity.syntax--other.syntax--inherited-class {
color: #9B5C2E;
}
.syntax--keyword {
color: #96CBFE;
}
.syntax--keyword.syntax--control {
color: #96CBFE;
}
.syntax--keyword.syntax--operator {
color: #EDEDED;
}
.syntax--storage {
color: #CFCB90;
}
.syntax--storage.syntax--modifier {
color: #96CBFE;
}
.syntax--constant {
color: #99CC99;
}
.syntax--constant.syntax--numeric {
color: #FF73FD;
}
.syntax--variable {
color: #C6C5FE;
}
.syntax--invalid.syntax--deprecated {
text-decoration: underline;
color: #FD5FF1;
}
.syntax--invalid.syntax--illegal {
color: #FD5FF1;
background-color: rgba(86, 45, 86, 0.75);
}
.syntax--string .syntax--source,
.syntax--string .syntax--meta.syntax--embedded.syntax--line {
color: #EDEDED;
}
.syntax--string .syntax--punctuation.syntax--section.syntax--embedded {
color: #00A0A0;
}
.syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source {
color: #00A0A0;
}
.syntax--string {
color: #A8FF60;
}
.syntax--string .syntax--constant {
color: #00A0A0;
}
.syntax--string.syntax--regexp {
color: #E9C062;
}
.syntax--string.syntax--regexp .syntax--constant.syntax--character.syntax--escape,
.syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded,
.syntax--string.syntax--regexp .syntax--string.syntax--regexp.syntax--arbitrary-repetition {
color: #FF8000;
}
.syntax--string.syntax--regexp.syntax--group {
color: #C6A24F;
background-color: rgba(255, 255, 255, 0.06);
}
.syntax--string.syntax--regexp.syntax--character-class {
color: #B18A3D;
}
.syntax--string .syntax--variable {
color: #8A9A95;
}
.syntax--support {
color: #FFFFB6;
}
.syntax--support.syntax--function {
color: #DAD085;
}
.syntax--support.syntax--constant {
color: #FFD2A7;
}
.syntax--support.syntax--type.syntax--property-name.syntax--css {
color: #EDEDED;
}
.syntax--source .syntax--entity.syntax--name.syntax--tag,
.syntax--source .syntax--punctuation.syntax--tag {
color: #96CBFE;
}
.syntax--source .syntax--entity.syntax--other.syntax--attribute-name {
color: #FF73FD;
}
.syntax--entity.syntax--other.syntax--attribute-name {
color: #FF73FD;
}
.syntax--entity.syntax--name.syntax--tag.syntax--namespace,
.syntax--entity.syntax--other.syntax--attribute-name.syntax--namespace {
color: #E18964;
}
.syntax--meta.syntax--preprocessor.syntax--c {
color: #8996A8;
}
.syntax--meta.syntax--preprocessor.syntax--c .syntax--keyword {
color: #AFC4DB;
}
.syntax--meta.syntax--cast {
color: #676767;
}
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--entity,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--string,
.syntax--meta.syntax--xml-processing,
.syntax--meta.syntax--xml-processing .syntax--entity,
.syntax--meta.syntax--xml-processing .syntax--string {
color: #8a8a8a;
}
.syntax--meta.syntax--tag .syntax--entity,
.syntax--meta.syntax--tag>.syntax--punctuation,
.syntax--meta.syntax--tag.syntax--inline .syntax--entity {
color: #FF73FD;
}
.syntax--meta.syntax--tag .syntax--name,
.syntax--meta.syntax--tag.syntax--inline .syntax--name,
.syntax--meta.syntax--tag>.syntax--punctuation {
color: #96CBFE;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--name.syntax--tag {
text-decoration: underline;
color: #96CBFE;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--tag.syntax--pseudo-class {
color: #8F9D6A;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--id {
color: #8B98AB;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--class {
color: #62B1FE;
}
.syntax--meta.syntax--property-group .syntax--support.syntax--constant.syntax--property-value.syntax--css,
.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--property-value.syntax--css {
color: #F9EE98;
}
.syntax--meta.syntax--preprocessor.syntax--at-rule .syntax--keyword.syntax--control.syntax--at-rule {
color: #8693A5;
}
.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--named-color.syntax--css,
.syntax--meta.syntax--property-value .syntax--constant {
color: #87C38A;
}
.syntax--meta.syntax--constructor.syntax--argument.syntax--css {
color: #8F9D6A;
}
.syntax--meta.syntax--diff,
.syntax--meta.syntax--diff.syntax--header {
color: #F8F8F8;
background-color: #0E2231;
}
.syntax--meta.syntax--separator {
color: #60A633;
background-color: #242424;
}
.syntax--meta.syntax--line.syntax--entry.syntax--logfile,
.syntax--meta.syntax--line.syntax--exit.syntax--logfile {
background-color: rgba(238, 238, 238, 0.16);
}
.syntax--meta.syntax--line.syntax--error.syntax--logfile {
background-color: #751012;
}
.syntax--source.syntax--gfm {
color: #999;
}
.syntax--gfm .syntax--markup.syntax--heading {
color: #eee;
}
.syntax--gfm .syntax--link {
color: #555;
}
.syntax--gfm .syntax--variable.syntax--list,
.syntax--gfm .syntax--support.syntax--quote {
color: #555;
}
.syntax--gfm .syntax--link .syntax--entity {
color: #ddd;
}
.syntax--gfm .syntax--raw {
color: #aaa;
}
.syntax--markdown .syntax--paragraph {
color: #999;
}
.syntax--markdown .syntax--heading {
color: #eee;
}
.syntax--markdown .syntax--raw {
color: #aaa;
}
.syntax--markdown .syntax--link {
color: #555;
}
.syntax--markdown .syntax--link .syntax--string {
color: #555;
}
.syntax--markdown .syntax--link .syntax--string.syntax--title {
color: #ddd;
}
eel.jsは公式githubとかから取得してください
(このコードをそのまま使うなら必要ない)
参考にしたサイト
CSSで作る!押したくなるボタンデザイン100(Web用)
Python eelでファイル選択ダイアログ